/* BEGIN generated theme tokens. Source: features/theme.js. Rebuild: node tools/build-theme-tokens.cjs */
:root {
  color-scheme: dark;
  --shade: #000000;
  --shade-rgb: 0 0 0; /* @kind other */
  --gloss: #ffffff;
  --gloss-rgb: 255 255 255; /* @kind other */
  --on-colour-button: #ffffff;
  --on-colour-button-rgb: 255 255 255; /* @kind other */
  --ink-dark: #10151c;
  --ink-dark-rgb: 16 21 28; /* @kind other */
  --paper: #f7fafc;
  --paper-rgb: 247 250 252; /* @kind other */
  --paper-text: #5f6b78;
  --paper-text-rgb: 95 107 120; /* @kind other */
  --paper-muted: #6b7785;
  --paper-muted-rgb: 107 119 133; /* @kind other */
  --oa-diameter-marker: #0891b2;
  --oa-diameter-marker-rgb: 8 145 178; /* @kind other */
  --tier-gold: #ffde3e;
  --tier-gold-rgb: 255 222 62; /* @kind other */
  --brand-grey: #736763;
  --brand-grey-rgb: 115 103 99; /* @kind other */
  --bg: #07090d;
  --bg-rgb: 7 9 13; /* @kind other */
  --bg-strong: #04060a;
  --bg-strong-rgb: 4 6 10; /* @kind other */
  --surface: #0f131a;
  --surface-rgb: 15 19 26; /* @kind other */
  --surface-raised: #151b24;
  --surface-raised-rgb: 21 27 36; /* @kind other */
  --surface-muted: #222a36;
  --surface-muted-rgb: 34 42 54; /* @kind other */
  --surface-card: #222a36;
  --surface-card-rgb: 34 42 54; /* @kind other */
  --border: #242c38;
  --border-rgb: 36 44 56; /* @kind other */
  --text: #dce1e8;
  --text-rgb: 220 225 232; /* @kind other */
  --text-muted: #8d96a2;
  --text-muted-rgb: 141 150 162; /* @kind other */
  --text-strong: #ffffff;
  --text-strong-rgb: 255 255 255; /* @kind other */
  --overlay-rgb: 255 255 255; /* @kind other */
  --shadow-rgb: 0 0 0; /* @kind other */
  --well-rgb: 0 0 0; /* @kind other */
  --accent-wash: #2e7ff2;
  --accent-wash-rgb: 46 127 242; /* @kind other */
  --complete-wash: #8b5cf6;
  --complete-wash-rgb: 139 92 246; /* @kind other */
  --logo-color: #2e7ff2;
  --logo-ink: #ffffff;
  --focus: #dce1e8;
  --accent: #2e7ff2;
  --accent-rgb: 46 127 242; /* @kind other */
  --accent-rgb-c: 46, 127, 242; /* @kind other */
  --accent-text: #4990f4;
  --accent-ink: #ffffff;
  --accent-ink-rgb: 255 255 255; /* @kind other */
  --accent-on-paper: #2971d8;
  --accent-button: #2a74de;
  --accent-button-rgb: 42 116 222; /* @kind other */
  --accent-button-highlight: #3576d1;
  --accent-button-hover: #3976cd;
  --accent-button-press: #225fb6;
  --accent-button-press-rgb: 34 95 182; /* @kind other */
  --on-accent: #ffffff;
  --on-accent-rgb: 255 255 255; /* @kind other */
  --accent-border: #7db0f7;
  --accent-border-rgb: 125 176 247; /* @kind other */
  --accent-hover: #4f93f4;
  --accent-press: #2668c6;
  --accent-strong: #86b5f7;
  --accent-strong-rgb: 134 181 247; /* @kind other */
  --accent-strong-ink: #10151c;
  --accent-deep: #2361b8;
  --accent-deep-rgb: 35 97 184; /* @kind other */
  --complete: #8b5cf6;
  --complete-rgb: 139 92 246; /* @kind other */
  --complete-text: #9f79f8;
  --complete-ink: #ffffff;
  --complete-ink-rgb: 255 255 255; /* @kind other */
  --complete-on-paper: #8356e7;
  --complete-button: #8659ed;
  --complete-button-rgb: 134 89 237; /* @kind other */
  --complete-button-highlight: #855edf;
  --complete-button-hover: #8460d9;
  --complete-button-press: #6e49c2;
  --complete-button-press-rgb: 110 73 194; /* @kind other */
  --on-complete: #ffffff;
  --on-complete-rgb: 255 255 255; /* @kind other */
  --complete-border: #b79af9;
  --complete-border-rgb: 183 154 249; /* @kind other */
  --complete-hover: #a27df8;
  --complete-active: #6c48c0;
  --complete-active-rgb: 108 72 192; /* @kind other */
  --complete-strong: #bca0fa;
  --complete-strong-rgb: 188 160 250; /* @kind other */
  --complete-strong-ink: #10151c;
  --success: #3ec57e;
  --success-rgb: 62 197 126; /* @kind other */
  --success-text: #3ec57e;
  --success-ink: #10151c;
  --success-ink-rgb: 16 21 28; /* @kind other */
  --success-on-paper: #298253;
  --success-strong: #80d9aa;
  --action-success: #2a8656;
  --action-success-hover: #39845d;
  --action-success-press: #226e47;
  --action-success-rgb: 42 134 86; /* @kind other */
  --on-success: #10151c;
  --on-success-rgb: 16 21 28; /* @kind other */
  --warning: #e3b341;
  --warning-rgb: 227 179 65; /* @kind other */
  --warning-text: #e3b341;
  --warning-ink: #10151c;
  --warning-ink-rgb: 16 21 28; /* @kind other */
  --warning-on-paper: #8d6f28;
  --warning-hover: #8d7339;
  --warning-press: #775d22;
  --action-warning: #91722a;
  --action-warning-hover: #8d7339;
  --action-warning-press: #775d22;
  --action-warning-rgb: 145 114 42; /* @kind other */
  --on-warning: #10151c;
  --on-warning-rgb: 16 21 28; /* @kind other */
  --comment-accent: #e8943a;
  --comment-accent-rgb: 232 148 58; /* @kind other */
  --action-comment: #a56929;
  --comment-accent-hover: #9d6c38;
  --comment-accent-press: #875622;
  --comment-text: #e8943a;
  --comment-on-paper: #a16628;
  --on-comment: #10151c;
  --danger: #e5564e;
  --danger-rgb: 229 86 78; /* @kind other */
  --danger-text: #e8675f;
  --danger-ink: #ffffff;
  --danger-ink-rgb: 255 255 255; /* @kind other */
  --danger-on-paper: #c54a43;
  --danger-hover: #bf5651;
  --danger-strong: #f09d98;
  --action-danger: #cb4c45;
  --action-danger-hover: #bf5651;
  --action-danger-press: #a63e39;
  --action-danger-rgb: 203 76 69; /* @kind other */
  --on-danger: #ffffff;
  --on-danger-rgb: 255 255 255; /* @kind other */
  --destructive-muted: #7c5856;
  --destructive-muted-hover: #8e6a68;
  --destructive-muted-press: #6a4644;
  --pane-raeco: #3ec57e;
  --pane-raeco-rgb: 62 197 126; /* @kind other */
  --pane-raeco-strong: #80d9aa;
  --pane-raeco-hover: #55cc8d;
  --rotate-cw: #3ec57e;
  --rotate-cw-rgb: 62 197 126; /* @kind other */
  --rotate-cw-hover: #55cc8d;
  --rotate-cw-strong: #80d9aa;
  --rotate-ccw: #e8943a;
  --rotate-ccw-rgb: 232 148 58; /* @kind other */
  --rotate-ccw-hover: #eba152;
  --rotate-ccw-strong: #eeb271;
  --leader: #e8943a;
  --leader-rgb: 232 148 58; /* @kind other */
  --leader-hover: #eba152;
  --leader-press: #c87f32;
  --leader-strong: #eeb271;
  --leader-button: #a56929;
  --leader-button-hover: #9d6c38;
  --leader-button-strong: #9e6c34;
  --leader-button-press: #875622;
  --leader-ink: #10151c;
  --muted-action: #a0a8b3;
  --oa-diameter-ink: #ffffff;
  --danger-marker-ink: #ffffff;
  --warning-marker-ink: #10151c;
  --accent-marker-ink: #ffffff;
  --complete-marker-ink: #ffffff;
  --comment-marker-ink: #10151c;
  --muted-marker-ink: #10151c;
  --oa-height-marker: #2e7ff2;
  --oa-height-marker-rgb: 46 127 242; /* @kind other */
  --oa-height-badge: #2a73da;
  --oa-height-ink: #ffffff;
  --oa-height-text: #4990f4;
  --oa-width-marker: #21b56b;
  --oa-width-marker-rgb: 33 181 107; /* @kind other */
  --oa-width-badge: #19864f;
  --oa-width-ink: #ffffff;
  --oa-width-text: #21b56b;
  --oa-depth-marker: #ef4444;
  --oa-depth-marker-rgb: 239 68 68; /* @kind other */
  --oa-depth-badge: #d53d3d;
  --oa-depth-ink: #ffffff;
  --oa-depth-text: #f15f5f;
  --revision-marker: #e0457f;
  --revision-marker-rgb: 224 69 127; /* @kind other */
  --revision-ink: #ffffff;
  --revision-text: #e56393;
  --unsure-marker: #e0457f;
  --unsure-marker-rgb: 224 69 127; /* @kind other */
  --unsure-ink: #ffffff;
  --unsure-text: #e56393;
}
/* END generated theme tokens */

/* Tokens that are not colours a user sets: sizes, spacing, fonts, shadows and
   the gradients built from the generated colour tokens above. */
:root {
  --panel: var(--surface);
  --muted: var(--text-muted);
  --accent-action-gradient:
    linear-gradient(180deg, var(--accent-button-highlight), var(--accent-button) 48%, var(--accent-button-press));
  --accent-action-gradient-hover:
    linear-gradient(180deg, var(--accent-button-hover), var(--accent-button-highlight) 48%, var(--accent-button));
  --action-danger-disabled-bg: var(--action-danger);
  --action-danger-disabled-border: var(--action-danger);
  --review-pill-height: 1.9rem;
  --private-nav-icon-background: color-mix(in srgb, var(--success) 67%, var(--shade));
  --private-nav-icon-ink: var(--gloss);
  --action-success-disabled-bg: rgb(var(--action-success-rgb) / 0.34);
  --action-success-disabled-border: rgb(var(--action-success-rgb) / 0.26);
  --complete-action-gradient:
    linear-gradient(180deg, var(--complete-button-highlight), var(--complete-button) 48%, var(--complete-button-press));
  --complete-action-gradient-hover:
    linear-gradient(180deg, var(--complete-button-hover), var(--complete-button-highlight) 48%, var(--complete-button));
  --control-h: 30px;        /* one height for every sheet-header control */
  --control-icon: 15px;     /* one glyph size for every sheet-header icon */
  --label-size: 0.78rem;    /* one size for label text sitting next to an icon/checkbox */
  --label-line: 1.15;       /* and one line-height, so those labels match in height */
  /* Canonical checkbox dimensions for form-style checkboxes. Header icon chips use
     --control-icon so their glyphs stay the same size as adjacent toolbar icons. */
  --checkbox-size: 20px;      /* width AND height of every checkbox box */
  --checkbox-tick: 0.6em;     /* tick mark size, relative to the box */
  --checkbox-radius: 5px;     /* corner radius of every checkbox box */
  --shadow: 0 24px 70px rgb(var(--shadow-rgb) / 0.38);
  --shadow-panel:
    0 22px 54px rgb(var(--shadow-rgb) / 0.34),
    inset 0 1px 0 rgb(var(--overlay-rgb) / 0.055),
    inset 0 -1px 0 rgb(var(--shade-rgb) / 0.22);
  --shadow-control:
    0 10px 24px rgb(var(--shadow-rgb) / 0.28),
    inset 0 1px 0 rgb(var(--overlay-rgb) / 0.14);
  --radius-sm: 8px;
  --radius-md: 8px;
  --radius-lg: 8px;
  --panel-radius: 16px;
  --review-card-radius: 8px;
  --radius-2xl: 8px;
  --track-caps: 0.06em;
  --track-base: 0.035em;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  /* Preserve the original tight application frame. Public-page spacing is
     scoped to .landing-page and never changes authenticated navigation. */
  --page-gutter: 2mm;
  --pill-content-inset: 0px;
  --workspace-gutter: calc(var(--page-gutter) + var(--pill-content-inset));
  --content-measure: 72rem;
  --active-content-measure: var(--content-measure);
  --analysis-content-measure: 48rem;
  --review-content-measure: 112rem;
  --workflow-offset: 6rem;
  --step-dot-size: clamp(1.55rem, 2vw, 2rem);
  --app-visible-height: 100dvh;
  --panel-width-min: 24rem;
  --panel-width-max: min(38rem, 46vw);
  --panel-width: 24rem;
  --side-control-width: clamp(var(--panel-width-min), var(--panel-width), var(--panel-width-max));
  --side-panel-fade-bg:
    linear-gradient(
      180deg,
      rgb(var(--accent-wash-rgb) / 0.18) 0%,
      rgb(var(--accent-wash-rgb) / 0.07) 5rem,
      transparent 11rem,
      transparent calc(100% - 11rem),
      rgb(var(--accent-wash-rgb) / 0.07) calc(100% - 5rem),
      rgb(var(--accent-wash-rgb) / 0.16) 100%
    ),
    rgb(var(--surface-raised-rgb) / 0.86);
  /* Reserved for the always-available Help and Feedback dock. Fixed-height
     review surfaces subtract this space so the launchers never cover work. */
  --bottom-action-space: 4rem;
  --eye-strike: 0; /* @kind other */ /* stamp-visibility toggle: 0 = eye open, 1 = eye struck */
  --font-head: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-ui: var(--font-body);
  --font-mono: "IBM Plex Mono", "Courier New", monospace;
  --mono-font: var(--font-mono);
  /* Site cursors: one blue SVG set so arrow, hand, grab, zoom, and resize stay visually consistent. */
  --cursor-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M6 3 25 17.5 16.4 18.9 21.2 28.4 16.8 30.4 12.2 21 6 26.7Z' fill='%23040912' opacity='.52' transform='translate(1.2 1.2)'/%3E%3Cpath d='M6 3 25 17.5 16.4 18.9 21.2 28.4 16.8 30.4 12.2 21 6 26.7Z' fill='%232e7ff2' stroke='%23ffffff' stroke-width='1.9' stroke-linejoin='round'/%3E%3C/svg%3E") 5 3, default;
  --cursor-pointer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M12.2 4.5c1.4 0 2.5 1.1 2.5 2.5v8.1l1.2-1.6c.8-1.1 2.3-1.3 3.4-.5.5.4.9 1 1 1.6l.2-.2c.9-.8 2.4-.8 3.3.1.5.5.8 1.2.8 1.9.9-.4 2-.2 2.7.6.5.6.7 1.3.6 2.1l-.6 4.3c-.5 3.5-3.5 6.1-7.1 6.1h-4.9c-2.5 0-4.7-1.3-6-3.4l-3.7-6.2c-.7-1.2-.3-2.7.9-3.4 1-.6 2.2-.4 3 .4l.2.2V7c0-1.4 1.1-2.5 2.5-2.5Z' fill='%23040912' opacity='.5' transform='translate(1.2 1.2)'/%3E%3Cpath d='M12.2 4.5c1.4 0 2.5 1.1 2.5 2.5v8.1l1.2-1.6c.8-1.1 2.3-1.3 3.4-.5.5.4.9 1 1 1.6l.2-.2c.9-.8 2.4-.8 3.3.1.5.5.8 1.2.8 1.9.9-.4 2-.2 2.7.6.5.6.7 1.3.6 2.1l-.6 4.3c-.5 3.5-3.5 6.1-7.1 6.1h-4.9c-2.5 0-4.7-1.3-6-3.4l-3.7-6.2c-.7-1.2-.3-2.7.9-3.4 1-.6 2.2-.4 3 .4l.2.2V7c0-1.4 1.1-2.5 2.5-2.5Z' fill='%232e7ff2' stroke='%23ffffff' stroke-width='1.75' stroke-linejoin='round'/%3E%3C/svg%3E") 12 5, pointer;
  --cursor-zoom-in: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M21 21l7 7' fill='none' stroke='%23040912' stroke-width='7' stroke-linecap='round' opacity='.5'/%3E%3Cpath d='M20 20l7 7' fill='none' stroke='%23ffffff' stroke-width='5.4' stroke-linecap='round'/%3E%3Cpath d='M20 20l7 7' fill='none' stroke='%232e7ff2' stroke-width='3.2' stroke-linecap='round'/%3E%3Ccircle cx='13.5' cy='13.5' r='9.6' fill='none' stroke='%23040912' stroke-width='3.4' opacity='.48' transform='translate(1 1)'/%3E%3Ccircle cx='13.5' cy='13.5' r='9.2' fill='none' stroke='%23ffffff' stroke-width='2.9'/%3E%3Ccircle cx='13.5' cy='13.5' r='8.1' fill='%232e7ff2' stroke='%232e7ff2' stroke-width='1.9'/%3E%3Cpath d='M13.5 9.2v8.6M9.2 13.5h8.6' fill='none' stroke='%23ffffff' stroke-width='2.9' stroke-linecap='round'/%3E%3C/svg%3E") 13 13, zoom-in;
  --cursor-zoom-out: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M21 21l7 7' fill='none' stroke='%23040912' stroke-width='7' stroke-linecap='round' opacity='.5'/%3E%3Cpath d='M20 20l7 7' fill='none' stroke='%23ffffff' stroke-width='5.4' stroke-linecap='round'/%3E%3Cpath d='M20 20l7 7' fill='none' stroke='%232e7ff2' stroke-width='3.2' stroke-linecap='round'/%3E%3Ccircle cx='13.5' cy='13.5' r='9.6' fill='none' stroke='%23040912' stroke-width='3.4' opacity='.48' transform='translate(1 1)'/%3E%3Ccircle cx='13.5' cy='13.5' r='9.2' fill='none' stroke='%23ffffff' stroke-width='2.9'/%3E%3Ccircle cx='13.5' cy='13.5' r='8.1' fill='%232e7ff2' stroke='%232e7ff2' stroke-width='1.9'/%3E%3Cpath d='M9.2 13.5h8.6' fill='none' stroke='%23ffffff' stroke-width='2.9' stroke-linecap='round'/%3E%3C/svg%3E") 13 13, zoom-out;
  --cursor-zoom: var(--cursor-zoom-in);
  --cursor-grab: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M13%2028.3v-3.2l-2.4-1.3c-2.2-1.2-3.6-3.5-3.6-6v-2.1c0-1.4%201.1-2.5%202.5-2.5h2.7V7.1c0-1.45%201.15-2.6%202.6-2.6s2.6%201.15%202.6%202.6v1.1c.45-.62%201.18-1.02%202-1.02%201.36%200%202.48%201.12%202.48%202.48v.54c.45-.48%201.08-.78%201.78-.78%201.34%200%202.43%201.09%202.43%202.43v1.04c.35-.2.75-.31%201.18-.31%201.34%200%202.43%201.09%202.43%202.43v5.9c0%204.08-3.31%207.39-7.39%207.39H13Z%22%20fill%3D%22%23040912%22%20opacity%3D%22.5%22%20transform%3D%22translate(1.2%201.2)%22%2F%3E%3Cpath%20d%3D%22M13%2028.3v-3.2l-2.4-1.3c-2.2-1.2-3.6-3.5-3.6-6v-2.1c0-1.4%201.1-2.5%202.5-2.5h2.7V7.1c0-1.45%201.15-2.6%202.6-2.6s2.6%201.15%202.6%202.6v1.1c.45-.62%201.18-1.02%202-1.02%201.36%200%202.48%201.12%202.48%202.48v.54c.45-.48%201.08-.78%201.78-.78%201.34%200%202.43%201.09%202.43%202.43v1.04c.35-.2.75-.31%201.18-.31%201.34%200%202.43%201.09%202.43%202.43v5.9c0%204.08-3.31%207.39-7.39%207.39H13Z%22%20fill%3D%22%232e7ff2%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.85%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M17.4%207.4v9.1M21.88%2010v6.5M26.09%2012.75v3.75M12.2%2013.25v5.1%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.85%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") 13 12, grab;
  --cursor-grabbing: var(--cursor-grab);
  --cursor-move: var(--cursor-pointer);
  --cursor-mark-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M6 17 L13 24 L27 8' fill='none' stroke='%23040912' stroke-width='8' stroke-linecap='square' stroke-linejoin='miter' opacity='.5' transform='translate(1.2 1.2)'/%3E%3Cpath d='M6 17 L13 24 L27 8' fill='none' stroke='%23ffffff' stroke-width='6' stroke-linecap='square' stroke-linejoin='miter'/%3E%3Cpath d='M6 17 L13 24 L27 8' fill='none' stroke='%237ac70c' stroke-width='4' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E") 16 16, crosshair;
  --cursor-mark-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M9 9 L23 23 M23 9 L9 23' fill='none' stroke='%23040912' stroke-width='8' stroke-linecap='square' opacity='.5' transform='translate(1.2 1.2)'/%3E%3Cpath d='M9 9 L23 23 M23 9 L9 23' fill='none' stroke='%23ffffff' stroke-width='6' stroke-linecap='square'/%3E%3Cpath d='M9 9 L23 23 M23 9 L9 23' fill='none' stroke='%23e0312d' stroke-width='4' stroke-linecap='square'/%3E%3C/svg%3E") 16 16, crosshair;
  --cursor-comment: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M5 5h22v16H15l-6 6v-6H5Z' fill='%23040912' opacity='.5' transform='translate(1.2 1.2)'/%3E%3Cpath d='M5 5h22v16H15l-6 6v-6H5Z' fill='%232e7ff2' stroke='%23ffffff' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M16 9v8M12 13h8' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") 9 27, crosshair;
  --cursor-resize-horizontal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M4 17h26M4 17l7-7M4 17l7 7M30 17l-7-7M30 17l-7 7' fill='none' stroke='%23040912' stroke-width='7.2' stroke-linecap='round' stroke-linejoin='round' opacity='.5'/%3E%3Cpath d='M3 16h26M3 16l7-7M3 16l7 7M29 16l-7-7M29 16l-7 7' fill='none' stroke='%23ffffff' stroke-width='5.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3 16h26M3 16l7-7M3 16l7 7M29 16l-7-7M29 16l-7 7' fill='none' stroke='%232e7ff2' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 16 16, ew-resize;
  --cursor-resize-vertical: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M17 4v26M17 4l-7 7M17 4l7 7M17 30l-7-7M17 30l7-7' fill='none' stroke='%23040912' stroke-width='7.2' stroke-linecap='round' stroke-linejoin='round' opacity='.5'/%3E%3Cpath d='M16 3v26M16 3l-7 7M16 3l7 7M16 29l-7-7M16 29l7-7' fill='none' stroke='%23ffffff' stroke-width='5.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16 3v26M16 3l-7 7M16 3l7 7M16 29l-7-7M16 29l7-7' fill='none' stroke='%232e7ff2' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 16 16, ns-resize;
  --cursor-resize-diagonal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M7 7l20 20M7 7h9M7 7v9M27 27h-9M27 27v-9' fill='none' stroke='%23040912' stroke-width='7.2' stroke-linecap='round' stroke-linejoin='round' opacity='.5'/%3E%3Cpath d='M6 6l20 20M6 6h9M6 6v9M26 26h-9M26 26v-9' fill='none' stroke='%23ffffff' stroke-width='5.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6 6l20 20M6 6h9M6 6v9M26 26h-9M26 26v-9' fill='none' stroke='%232e7ff2' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 16 16, nwse-resize;
  font-family: var(--font-body);
}

/* Help, feedback, and persistent side-panel visibility controls. */
:root {
  --support-drawer-width: min(42rem, calc(100vw - 1rem));
}

.review-layout,
.stamp-layout,
.save-layout {
  position: relative;
}

.panel-visibility-toggle {
  position: absolute;
  /* Centered on the panel edge; it doubles as the drag handle that widens
     the panel, so it sits where a resize grip is expected. */
  top: 50%;
  translate: 0 -50%;
  /* Its right edge is the panel's left edge: the blue rail stays physically
     attached instead of floating in the grid gap. */
  right: calc(var(--side-control-width) - 1px);
  z-index: 12;
  display: grid;
  width: 1.15rem;
  min-width: 1.15rem;
  height: 4.25rem;
  padding: 0;
  place-items: center;
  color: var(--on-colour-button);
  background: var(--accent-button);
  border: 1px solid rgb(var(--overlay-rgb) / 0.24);
  border-radius: 0.65rem 0 0 0.65rem;
  box-shadow: 0 8px 22px rgb(var(--accent-rgb) / 0.3);
  cursor: var(--cursor-pointer);
  transition: filter 160ms ease;
}

.review-layout > .panel-visibility-toggle {
  transition: filter 160ms ease, right 180ms ease;
}

.panel-visibility-toggle:hover,
.panel-visibility-toggle:focus-visible {
  filter: brightness(1.16);
}

.panel-visibility-toggle:active {
  filter: brightness(1.24);
}

.panel-visibility-toggle span {
  font: 700 1rem/1 var(--font-mono);
}

.review-layout:has(.findings-panel.is-collapsed) > .panel-visibility-toggle,
.stamp-layout:has(.side-panel-wrap.is-collapsed) > .panel-visibility-toggle,
.save-layout:has(.save-panel.is-collapsed) > .panel-visibility-toggle {
  right: 0;
  border-radius: 0.65rem 0 0 0.65rem;
}

.stamp-layout:has(.side-panel-wrap.is-collapsed),
.save-layout:has(.save-panel.is-collapsed) {
  grid-template-columns: minmax(0, 1fr);
}

.stamp-layout:has(.side-panel-wrap.is-collapsed) > .panel-resize-handle,
.save-layout:has(.save-panel.is-collapsed) > .panel-resize-handle,
.side-panel-wrap.is-collapsed,
.save-layout .save-panel.is-collapsed {
  /* !important: later layout rules (.save-layout .save-panel { display: grid })
     would otherwise override the collapsed state and keep the panel visible. */
  display: none !important;
}

body > .support-launcher-dock {
  position: fixed;
  right: max(var(--space-4), env(safe-area-inset-right, 0px));
  bottom: max(var(--space-2), env(safe-area-inset-bottom, 0px));
  z-index: 74;
  display: flex;
  justify-content: flex-end;
  width: auto;
  gap: var(--space-4);
  align-items: center;
  margin: 0;
  isolation: isolate;
  contain: layout style;
}

body.auth-locked > .support-launcher-dock {
  visibility: hidden;
  pointer-events: none;
}

.drawer-visibility-toggle {
  position: relative;
  inset: auto;
  display: flex;
  width: auto;
  min-width: 3rem;
  min-height: 3rem;
  height: auto;
  padding: var(--space-2) var(--space-3);
  gap: var(--space-2);
  align-items: center;
  justify-content: center;
  border-radius: 0.8rem;
  overflow: hidden;
  translate: none;
  transform: none;
  filter: saturate(1.08);
  box-shadow:
    0 18px 38px rgb(var(--shadow-rgb) / 0.64),
    0 8px 26px rgb(var(--accent-rgb) / 0.48),
    0 0 0 1px rgb(var(--gloss-rgb) / 0.13),
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.28),
    inset 0 -3px 0 rgb(var(--shade-rgb) / 0.2);
}

.feedback-visibility-toggle {
  background: linear-gradient(145deg, var(--complete-button), color-mix(in srgb, var(--complete-button) 80%, var(--shade)));
  color: var(--on-colour-button);
  border-color: rgb(var(--complete-strong-rgb) / 0.5);
  box-shadow:
    0 18px 38px rgb(var(--shadow-rgb) / 0.64),
    0 8px 28px rgb(var(--complete-rgb) / 0.52),
    0 0 0 1px rgb(var(--gloss-rgb) / 0.14),
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.3),
    inset 0 -3px 0 rgb(var(--shade-rgb) / 0.2);
}

body[data-has~="help-drawer-open"]:not(#has-pad) > .support-launcher-dock,
body[data-has~="feedback-drawer-open"]:not(#has-pad) > .support-launcher-dock {
  opacity: 0;
  pointer-events: none;
}

.drawer-visibility-toggle:focus-visible {
  filter: saturate(1.18) brightness(1.06);
}

@media (hover: hover) and (pointer: fine) {
  .drawer-visibility-toggle:hover {
    filter: saturate(1.18) brightness(1.06);
    transform: translateY(-4px) scale(1.04);
  }
}

@media (hover: none), (pointer: coarse) {
  .drawer-visibility-toggle:hover,
  .drawer-visibility-toggle:focus-visible {
    transform: none;
  }
}

.drawer-visibility-toggle:active {
  transform: scale(0.96);
}

.drawer-visibility-toggle svg {
  position: relative;
  z-index: 1;
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.drawer-visibility-toggle span {
  position: relative;
  z-index: 1;
  font: 700 0.75rem/1 var(--font-body);
  white-space: nowrap;
}

.drawer-visibility-toggle::before {
  content: "";
  position: absolute;
  inset: 1px 1px 48% 1px;
  background: linear-gradient(180deg, rgb(var(--overlay-rgb) / 0.2), transparent);
  border-radius: 0.7rem 0.7rem 50% 50%;
  pointer-events: none;
}

.support-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 190;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: var(--support-drawer-width);
  max-width: 100vw;
  min-width: 0;
  color: var(--text);
  background:
    linear-gradient(145deg, rgb(var(--accent-wash-rgb) / 0.11), transparent 24rem),
    var(--surface);
  border-left: 1px solid rgb(var(--accent-rgb) / 0.48);
  box-shadow: -28px 0 70px rgb(var(--shadow-rgb) / 0.52);
  transform: translateX(0);
  visibility: visible;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), visibility 220ms;
}

.support-drawer.is-collapsed {
  display: grid;
  transform: translateX(102%);
  visibility: hidden;
  pointer-events: none;
}

.support-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 5.35rem;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border);
  background: rgb(var(--surface-rgb) / 0.88);
  backdrop-filter: blur(18px);
}

.support-drawer-header h2,
.support-drawer h3,
.support-drawer p {
  margin: 0;
}

.support-title-row,
.support-section-heading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.support-section-heading {
  display: grid;
  gap: var(--space-1);
}

.support-icon {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  color: var(--accent-ink);
  background: linear-gradient(145deg, var(--accent-hover), var(--accent-deep));
  border: 1px solid rgb(var(--overlay-rgb) / 0.22);
  border-radius: 0.75rem;
  box-shadow: 0 10px 24px rgb(var(--accent-rgb) / 0.28);
}

.support-icon svg,
.help-chat-form svg {
  width: 1.3rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.support-drawer-body,
.feedback-form {
  min-height: 0;
  padding: var(--space-6);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.support-drawer-body {
  display: grid;
  grid-template-rows: none;
  grid-auto-rows: max-content;
  gap: var(--space-5);
  align-content: start;
}

.help-assistant,
.help-quick-start,
.help-button-guide,
.support-actions,
.feedback-type,
.feedback-canvas-wrap {
  padding: var(--space-5);
  background: rgb(var(--surface-raised-rgb) / 0.8);
  border: 1px solid var(--border);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow-panel);
}

.help-assistant {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  min-height: max-content;
  overflow: visible;
  border-color: rgb(var(--accent-rgb) / 0.4);
}

.help-assistant > p,
.help-assistant > .help-chat,
.help-assistant > .help-chat-form,
.help-assistant > .help-suggestions {
  grid-column: 1 / -1;
}

.help-assistant > p,
.support-actions p,
.feedback-privacy {
  color: var(--text-muted);
  line-height: 1.55;
}

.help-assistant-mark {
  position: relative;
  display: grid;
  width: 3.35rem;
  height: 3.35rem;
  place-items: center;
  background: radial-gradient(circle, rgb(var(--accent-wash-rgb) / 0.2), transparent 68%);
  border: 1px solid rgb(var(--accent-rgb) / 0.42);
  border-radius: 50%;
  animation: help-mark-breathe 2.6s ease-in-out infinite;
}

.help-assistant-mark::after {
  content: "";
  position: absolute;
  inset: -0.25rem;
  border: 1px solid rgb(var(--accent-rgb) / 0.36);
  border-radius: inherit;
  animation: help-mark-ring 2.6s ease-out infinite;
}

.help-assistant-mark img {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
}

@keyframes help-mark-breathe {
  50% { transform: translateY(-2px); box-shadow: 0 0 24px rgb(var(--accent-rgb) / 0.3); }
}

@keyframes help-mark-ring {
  70%, 100% { opacity: 0; transform: scale(1.28); }
}

.help-chat {
  display: grid;
  max-height: 19rem;
  gap: var(--space-3);
  overflow-y: auto;
}

.help-chat:empty {
  display: none;
}

.help-chat-message {
  width: fit-content;
  max-width: 88%;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 0.75rem 0.75rem 0.75rem 0.2rem;
}

.help-chat-message.is-user {
  justify-self: end;
  background: rgb(var(--accent-wash-rgb) / 0.2);
  border-color: rgb(var(--accent-rgb) / 0.38);
  border-radius: 0.75rem 0.75rem 0.2rem 0.75rem;
}

.help-chat-message.is-transient {
  color: var(--text-muted);
  border-style: dashed;
}

.help-chat-message strong {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--accent-strong);
  font: 700 0.68rem/1.2 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.help-chat-message p {
  white-space: pre-wrap;
  line-height: 1.48;
}

/* Shared AI chat layer: Team, Help and review chats. */
/* The panel shell sets display and position; this layer owns spacing only. */
.ai-chat-panel.ai-chat-panel {
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  align-content: stretch;
  gap: var(--space-3);
  padding: var(--space-4);
  box-sizing: border-box;
}

.ai-chat-panel.ai-chat-panel:has(> .ai-chat-log:empty) {
  grid-template-rows: auto auto auto;
  align-content: start;
}

/* Beat the older inv-ai and tm-ai spacing rules: one source of spacing. */
.ai-chat-panel.ai-chat-panel .ai-chat-log {
  display: flex;
  flex-direction: column;
  align-content: normal;
  gap: var(--space-3);
  min-height: 0;
  padding: 0 var(--space-2) 0 0;
  direction: ltr;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.ai-chat-panel.ai-chat-panel .ai-chat-log:empty {
  display: none;
}

.ai-chat-panel.ai-chat-panel .ai-chat-log > :first-child {
  margin-top: 0;
}

.ai-chat-panel.ai-chat-panel .ai-chat-msg {
  display: block;
  flex: none;
  max-width: 88%;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: 0.75rem;
  line-height: 1.48;
}

.ai-chat-panel.ai-chat-panel .ai-chat-msg.is-user {
  align-self: flex-end;
  justify-self: auto;
}

.ai-chat-panel.ai-chat-panel .ai-chat-msg.is-ai {
  align-self: flex-start;
  justify-self: auto;
}

.ai-chat-panel.ai-chat-panel .ai-chat-msg .ai-chat-who {
  display: block;
  margin: 0 0 var(--space-1);
  text-align: start;
}

.ai-chat-panel.ai-chat-panel .ai-chat-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: flex-start;
  margin: 0;
  padding: var(--space-3) 0 0;
}

.ai-chat-panel.ai-chat-panel .ai-chat-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  margin: 0;
}

.ai-chat-panel.ai-chat-panel .ai-chat-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
}

.ai-chat-panel.ai-chat-panel .ai-chat-sources {
  margin-top: var(--space-2);
}

.ai-chat-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
}

.ai-chat-log {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 0;
  overflow-y: auto;
  padding-inline-end: var(--space-2);
  scrollbar-gutter: stable;
}

.ai-chat-log:empty {
  display: none;
}

.ai-chat-msg {
  max-width: 88%;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  line-height: 1.48;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
}

.ai-chat-msg > :first-child {
  margin-top: 0;
}

.ai-chat-msg p,
.ai-chat-msg ul {
  margin-block: 0;
}

.ai-chat-msg p + p,
.ai-chat-msg p + ul,
.ai-chat-msg ul + p {
  margin-top: var(--space-2);
}

.ai-chat-msg.is-user {
  align-self: flex-end;
  background: rgb(var(--accent-wash-rgb) / 0.2);
  border-color: rgb(var(--accent-rgb) / 0.38);
}

.ai-chat-msg.is-ai {
  align-self: flex-start;
}

.ai-chat-msg .ai-chat-who {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--accent-strong);
  font: 700 0.68rem/1.2 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ai-chat-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: flex-start;
  margin: 0;
}

.ai-chat-suggest .ai-chat-label {
  flex-basis: 100%;
  margin: 0;
}

.ai-chat-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: end;
}

/* Help keeps its tall send button that matches the question box. */
.help-chat-form.ai-chat-form {
  align-items: stretch;
}

.ai-chat-sources {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* Help Center: article list and reader */
.help-articles {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

.help-article-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.help-article-list button {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  text-align: start;
  color: var(--text);
  font: 600 0.9rem/1.35 var(--font-body);
  overflow-wrap: anywhere;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  cursor: var(--cursor-pointer);
}

.help-article-view {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--panel-radius);
  line-height: 1.55;
}

.help-article-view h3,
.help-article-view h4 {
  margin: 0;
}

.help-article-view p {
  margin: 0;
}

.help-article-view ol,
.help-article-view ul {
  margin: 0;
  padding-inline-start: var(--space-5);
}

.help-article-back {
  justify-self: start;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  color: var(--accent-strong);
  font: 600 0.8rem/1.3 var(--font-body);
  background: rgb(var(--accent-wash-rgb) / 0.1);
  border: 1px solid rgb(var(--accent-rgb) / 0.32);
  border-radius: 999px;
  cursor: var(--cursor-pointer);
}

@media (max-width: 480px) {
  .ai-chat-panel,
  .help-article-view {
    padding: var(--space-3);
  }

  .ai-chat-msg,
  .ai-chat-panel.ai-chat-panel .ai-chat-msg {
    max-width: 100%;
  }

  .ai-chat-panel.ai-chat-panel .ai-chat-suggest button,
  .ai-chat-panel.ai-chat-panel .ai-chat-form button,
  .ai-chat-panel.ai-chat-panel .ai-chat-head button,
  .ai-chat-sources a {
    min-height: 44px;
    min-width: 44px;
  }

  .ai-chat-sources a {
    display: inline-flex;
    align-items: center;
  }
}

.help-chat-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
}

.help-chat-form textarea,
.feedback-form textarea {
  width: 100%;
  resize: vertical;
}

.help-chat-form textarea {
  min-height: 4.5rem;
}

/* Icon-only send: one control height wide, as tall as the question box. */
.help-chat-form .primary-button {
  width: var(--ui-control-h);
  min-width: var(--ui-control-h);
  padding: 0;
}

/* Help chat tools: Point at it / Screenshot, chips and thumbnails. */
.help-chat-tools,
.help-chat-form > .help-chat-attachments {
  grid-column: 1 / -1;
}

.help-chat-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.help-chat-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 30px;
  max-width: 100%;
  padding: 0 0.6rem;
  color: var(--accent-strong);
  font: 600 0.75rem/1.2 var(--font-body);
  background: transparent;
  border: 1px solid rgb(var(--accent-rgb) / 0.32);
  border-radius: 999px;
  cursor: var(--cursor-pointer);
  white-space: nowrap;
}

.help-chat-tool svg {
  flex: none;
  width: 16px;
  height: 16px;
}

.help-chat-tool:hover:not(:disabled) {
  background: rgb(var(--accent-wash-rgb) / 0.12);
}

.help-chat-tool:focus-visible,
.help-chat-chip-remove:focus-visible,
.help-pick-cancel:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.help-chat-tool:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

@media (max-width: 420px) {
  .help-chat-tool {
    padding: 0 0.45rem;
    font-size: 0.7rem;
  }

  .help-chat-tool svg {
    width: 14px;
    height: 14px;
  }
}

.help-chat-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.help-chat-attachments[hidden] {
  display: none;
}

.help-chat-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 100%;
  min-width: 0;
  padding: 0.15rem 0.2rem 0.15rem 0.45rem;
  color: var(--text);
  font: 500 0.75rem/1.3 var(--font-body);
  background: rgb(var(--accent-wash-rgb) / 0.12);
  border: 1px solid rgb(var(--accent-rgb) / 0.32);
  border-radius: var(--radius-sm);
}

.help-chat-chip.is-selected {
  background: rgb(var(--success-rgb) / 0.14);
  border-color: rgb(var(--success-rgb) / 0.6);
}

.help-chat-chip-tick {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 18px;
  height: 18px;
  color: rgb(var(--on-success-rgb));
  font: 700 0.7rem/1 var(--font-body);
  background: var(--success);
  border-radius: 999px;
}

.help-chat-chip.is-new {
  animation: help-chip-pop 0.9s ease-out 1;
}

@keyframes help-chip-pop {
  0% { transform: scale(0.92); box-shadow: 0 0 0 0 rgb(var(--success-rgb) / 0.55); }
  45% { transform: scale(1.04); box-shadow: 0 0 0 6px rgb(var(--success-rgb) / 0.25); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgb(var(--success-rgb) / 0); }
}

@media (prefers-reduced-motion: reduce) {
  .help-chat-chip.is-new {
    animation: none;
  }
}

.help-chat-chip-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.help-chat-chip-thumb {
  flex: none;
  height: 32px;
  width: auto;
  max-width: 48px;
  border-radius: 6px;
  object-fit: cover;
}

.help-chat-chip-remove {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  color: var(--text-muted);
  font: 600 0.9rem/1 var(--font-body);
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: var(--cursor-pointer);
}

.help-chat-chip-remove:hover {
  color: var(--text);
  background: rgb(var(--overlay-rgb) / 0.08);
}

.help-chat-message-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--space-2);
}

.help-chat-thumb {
  display: block;
  max-width: 160px;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}

/* Point-at-it pick mode. Sits above the Help drawer (z-index 190). */
.help-pick-outline {
  position: fixed;
  z-index: 260;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  border: 2px solid var(--text);
  border-radius: 6px;
  box-shadow: 0 0 0 2px var(--accent), 0 0 0 100vmax rgb(0 0 0 / 0.35);
  transition: top 120ms ease-out, left 120ms ease-out, width 120ms ease-out, height 120ms ease-out;
}

.help-pick-banner {
  position: fixed;
  z-index: 260;
  top: auto;
  bottom: max(12px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: calc(100vw - 32px);
  padding: 0.4rem 0.4rem 0.4rem 0.9rem;
  color: var(--accent-ink);
  font: 600 0.85rem/1.3 var(--font-body);
  background: var(--accent);
  border-radius: 999px;
  box-shadow: var(--shadow-panel);
}

.help-pick-banner > span {
  min-width: 0;
}

.help-pick-cancel {
  flex: none;
  min-height: 30px;
  padding: 0 0.7rem;
  color: var(--accent-ink);
  font: 600 0.78rem/1 var(--font-body);
  background: rgb(var(--overlay-rgb) / 0.16);
  border: 1px solid rgb(var(--overlay-rgb) / 0.4);
  border-radius: 999px;
  cursor: var(--cursor-pointer);
}

body.help-pick-active,
body.help-pick-active * {
  cursor: crosshair !important;
}

@media (prefers-reduced-motion: reduce) {
  .help-pick-outline {
    transition: none;
  }
}

@media (max-width: 420px) {
  .help-pick-banner {
    font-size: 0.78rem;
  }
}

.help-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.help-suggestions button {
  padding: 0.45rem 0.7rem;
  color: var(--accent-strong);
  font: 600 0.72rem/1.3 var(--font-body);
  background: rgb(var(--accent-wash-rgb) / 0.1);
  border: 1px solid rgb(var(--accent-rgb) / 0.32);
  border-radius: 999px;
  cursor: var(--cursor-pointer);
}

.help-quick-start,
.help-button-guide {
  display: grid;
  gap: var(--space-4);
}

.help-quick-start ol {
  display: grid;
  margin: 0;
  padding: 0;
  gap: var(--space-3);
  counter-reset: help-step;
  list-style: none;
}

.help-quick-start li {
  position: relative;
  display: grid;
  min-height: 2.8rem;
  padding-left: 3.4rem;
  align-content: center;
  counter-increment: help-step;
}

.help-quick-start li::before {
  content: counter(help-step, decimal-leading-zero);
  position: absolute;
  inset: 0 auto 0 0;
  display: grid;
  width: 2.55rem;
  height: 2.55rem;
  place-items: center;
  color: var(--text-strong);
  font: 700 0.78rem/1 var(--font-mono);
  background: rgb(var(--accent-wash-rgb) / 0.18);
  border: 1px solid rgb(var(--accent-rgb) / 0.42);
  border-radius: 0.65rem;
}

.help-quick-start li span {
  color: var(--text-muted);
  line-height: 1.42;
}

.help-button-guide details {
  padding: var(--space-3) var(--space-4);
  background: rgb(var(--bg-rgb) / 0.48);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.help-button-guide summary {
  color: var(--text);
  font-weight: 700;
  cursor: var(--cursor-pointer);
}

.help-button-guide details p {
  padding-top: var(--space-3);
  color: var(--text-muted);
  line-height: 1.55;
}

.support-actions {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
}

.help-tour {
  position: fixed;
  inset: 0;
  z-index: 240;
  background: transparent;
}

.help-tour[hidden] {
  display: none;
}

.help-tour-shade {
  position: fixed;
  z-index: 0;
  /* Dim, barely blur: the screen around the lit control stays readable. */
  background: rgb(var(--bg-strong-rgb) / 0.62);
  backdrop-filter: blur(1.5px);
  pointer-events: auto;
}

.help-tour-spotlight {
  position: fixed;
  z-index: 1;
  border-radius: 0.75rem;
  box-shadow: 0 0 30px rgb(var(--accent-rgb) / 0.55);
  pointer-events: none;
  transform: scale(1);
  transform-origin: center;
  transition: left 180ms ease, top 180ms ease, width 180ms ease, height 180ms ease, opacity 160ms ease, transform 160ms ease;
}

.help-tour-ants {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.help-tour-ants rect {
  x: 1px;
  y: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  rx: 10px;
  ry: 10px;
  fill: none;
  stroke: var(--accent-strong);
  stroke-width: 3;
  stroke-dasharray: 9 7;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  animation: drop-zone-ants 0.9s linear infinite;
  filter:
    drop-shadow(0 0 2px rgb(var(--gloss-rgb) / 0.72))
    drop-shadow(0 0 0.55rem rgb(var(--accent-rgb) / 0.52));
}

.help-tour-card {
  position: fixed;
  z-index: 2;
  width: min(30rem, calc(100vw - 1.5rem));
  max-height: calc(100dvh - 1.5rem);
  padding: var(--space-5);
  overflow-y: auto;
  background: var(--surface-raised);
  border: 1px solid rgb(var(--accent-rgb) / 0.52);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow);
  opacity: 1;
  transform: translateY(0);
  transition: opacity 160ms ease, transform 180ms ease;
}

.help-tour.is-step-transitioning .help-tour-spotlight {
  opacity: 0.35 !important;
  transform: scale(0.97);
}

.help-tour.is-step-transitioning .help-tour-card {
  opacity: 0.45;
  transform: translateY(0.5rem);
}

.help-tour-card h2 {
  margin: var(--space-2) 0;
}

.help-tour-card p:not(.screen-label) {
  color: var(--text-muted);
  line-height: 1.55;
}

.help-tour-tier-options {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.help-tour-tier {
  display: grid;
  gap: 0.2rem;
  width: 100%;
  padding: 0.85rem 1rem;
  color: var(--text);
  text-align: left;
  background: rgb(var(--overlay-rgb) / 0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.help-tour-tier:hover,
.help-tour-tier:focus-visible {
  background: rgb(var(--accent-wash-rgb) / 0.13);
  border-color: rgb(var(--accent-rgb) / 0.6);
}

.help-tour-tier span {
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

/* Feature guides (features/guides.js). The tour only shades around the lit-up
   control, so the control itself stays clickable for "Try it" steps. */
.help-tour {
  pointer-events: none;
}

.help-tour-shade,
.help-tour-card {
  pointer-events: auto;
}

.help-tour.is-top-layer {
  z-index: 4100;
}

/* Guides and tours panel (menu view of the tour card), coach-mark style:
   header with a red close, a feature-guide carousel, workflow tours in one
   row, and a quiet footer. */
.help-tour-card.is-panel {
  width: min(46rem, calc(100vw - 2rem));
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  padding: var(--space-5);
  overflow: auto;
}

.help-tour-tier-menu {
  display: grid;
  gap: var(--space-4);
}

.help-tour-panel-head {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  justify-content: space-between;
}

.help-tour-card.is-panel .help-tour-panel-head h2 {
  margin: var(--space-1) 0;
}

.help-tour-card.is-panel .help-tour-panel-head p:not(.screen-label) {
  margin: 0;
  font-size: 0.86rem;
}

.help-tour-section {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.help-tour-section-head {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
}

.help-tour-card .help-tour-guides-label {
  margin: 0;
}

.help-tour-carousel-arrows {
  display: flex;
  gap: var(--space-2);
}

.help-tour-carousel-arrows button {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  min-height: 2rem;
  padding: 0;
}

.help-tour-carousel-arrows button:disabled {
  opacity: 0.35;
}

.help-tour-card .help-tour-carousel-arrows svg,
.help-tour-card .help-tour-tier-icon svg,
.help-tour-card .help-tour-guide-icon svg {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  min-width: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.help-tour-carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * var(--space-3)) / 3);
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  border-radius: var(--radius-md);
}

.help-tour-carousel::-webkit-scrollbar {
  display: none;
}

.help-tour-guide {
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  gap: var(--space-2);
  min-width: 0;
  min-height: 12.5rem;
  padding: var(--space-4);
  color: var(--text);
  text-align: left;
  white-space: normal;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  scroll-snap-align: start;
  cursor: pointer;
}

.help-tour-guide:hover,
.help-tour-guide:focus-visible {
  background: var(--surface);
  border-color: rgb(var(--accent-rgb) / 0.6);
}

/* The carousel clips overflow, so keep the focus ring inside the card. */
.help-tour-guide:focus-visible {
  outline-offset: -3px;
}

.help-tour-guide.is-suggested {
  border-color: rgb(var(--accent-rgb) / 0.45);
  background: linear-gradient(160deg, rgb(var(--accent-wash-rgb) / 0.12), transparent 70%), var(--surface);
}

.help-tour-guide-icon,
.help-tour-tier-icon {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  color: var(--accent-strong);
  background: rgb(var(--accent-wash-rgb) / 0.14);
  border-radius: var(--radius-md);
}

.help-tour-guide strong {
  font-size: 0.92rem;
}

.help-tour-card .help-tour-guide span.help-tour-guide-blurb {
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.help-tour-guide-meter {
  display: flex;
  gap: 3px;
  align-self: end;
}

.help-tour-guide-meter i {
  flex: 1;
  height: 3px;
  background: var(--surface-muted);
  border-radius: 2px;
}

.help-tour-guide.is-done .help-tour-guide-meter i {
  background: var(--success-text);
}

.help-tour-guide-meta {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  justify-content: space-between;
  color: var(--text-muted);
  font: 600 0.66rem/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.help-tour-guide span.help-tour-guide-done {
  color: var(--success-text);
  font-weight: 700;
}

.help-tour-guide span.help-tour-guide-tag {
  color: var(--accent-text);
}

.help-tour-carousel-dots {
  display: flex;
  gap: 0.35rem;
  justify-content: center;
  min-height: 0.4rem;
}

.help-tour-carousel-dots i {
  width: 0.4rem;
  height: 0.4rem;
  background: var(--surface-muted);
  border-radius: 999px;
  transition: width 160ms ease, background 160ms ease;
}

.help-tour-carousel-dots i.is-active {
  width: 1.2rem;
  background: var(--accent);
}

.help-tour-card.is-panel .help-tour-tier-options {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: 0;
}

.help-tour-card.is-panel .help-tour-tier {
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--space-3);
  row-gap: 0.15rem;
  align-items: start;
  align-content: start;
  padding: var(--space-3);
  white-space: normal;
  background: var(--surface);
}

.help-tour-card.is-panel .help-tour-tier .help-tour-tier-icon {
  grid-row: span 2;
  align-self: start;
  width: 2.1rem;
  height: 2.1rem;
}

.help-tour-card.is-panel .help-tour-tier strong {
  font-size: 0.82rem;
}

.help-tour-card.is-panel .help-tour-tier > span:not(.help-tour-tier-icon) {
  font-size: 0.72rem;
}

.help-tour-status {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
  min-height: 3.25rem;
  padding: 0.5rem 0.5rem 0.5rem 0.9rem;
  background: rgb(var(--success-rgb, 52 211 153) / 0.1);
  border: 1px solid rgb(var(--success-rgb, 52 211 153) / 0.45);
  border-radius: var(--radius-md);
}

.help-tour-status > button {
  flex: none;
  margin: 0;
  white-space: nowrap;
}

.help-tour-status[hidden] {
  display: none;
}

.help-tour-card .help-tour-status p {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  min-width: 0;
  margin: 0;
  line-height: 1.2;
  color: var(--text);
  font-weight: 700;
}

.help-tour-card .help-tour-status p::before {
  content: "";
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  background: var(--success-text);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.help-tour-menu-footer {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  justify-content: flex-end;
  margin-top: calc(-1 * var(--space-1));
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
}

.help-tour-card .help-tour-menu-footer .help-tour-reset {
  min-height: 2rem;
  padding-inline: 0;
  color: var(--text-muted);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.help-tour-card .help-tour-menu-footer .help-tour-reset:hover,
.help-tour-card .help-tour-menu-footer .help-tour-reset:focus-visible {
  color: var(--text);
  background: transparent;
}

@media (max-width: 640px) {
  .help-tour-status {
    flex-wrap: wrap;
  }

  .help-tour-carousel {
    grid-auto-columns: 78%;
  }

  .help-tour-card.is-panel .help-tour-tier-options {
    grid-template-columns: 1fr;
  }
}

.help-tour-card p.help-tour-try {
  margin: var(--space-2) 0 0;
  padding: 0.5rem 0.75rem;
  color: var(--text);
  background: rgb(var(--accent-wash-rgb) / 0.14);
  border-radius: var(--radius-sm, 6px);
}

.help-tour-practice {
  width: 100%;
  margin-top: var(--space-3);
}

.help-tour-dots {
  display: flex;
  gap: 0.35rem;
}

.help-tour-card.is-panel .help-tour-bar {
  display: none;
}

.help-tour-dots[hidden] {
  display: none;
}

/* Step card: coach mark (Jon's pick, 2026-10-12). A compact card pinned to
   the lit control with a pointer, progress as a line on its top edge, one
   primary action. Ask AI stays one tap away; Restart and Choose another tour
   sit in the more menu; the cross (or Esc) exits. */
.help-tour-card:not(.is-panel) {
  width: min(26rem, calc(100vw - 1.5rem));
  padding: calc(3px + var(--space-3)) var(--space-4) var(--space-4);
  overflow: visible;
}

/* Progress runs along the card's top edge and bends round its corners: a
   rounded box over the card with only a top border, the lit part clipped to
   the step count. */
.help-tour-bar {
  position: absolute;
  inset: -1px;
  pointer-events: none;
  border-top: 3px solid var(--surface-muted);
  border-radius: var(--panel-radius);
}

.help-tour-bar i {
  position: absolute;
  inset: -3px 0 0;
  border-top: 3px solid var(--accent);
  border-radius: var(--panel-radius);
  clip-path: inset(0 calc(100% - var(--tour-progress, 0%)) 0 0);
  filter: drop-shadow(0 0 4px rgb(var(--accent-rgb) / 0.75));
  transition: clip-path 200ms ease;
}

.help-tour-progress {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-2);
}

.help-tour-card .help-tour-progress .screen-label {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.help-tour-progress #helpTourPosition {
  flex: none;
  margin-right: auto;
  color: var(--text-muted);
  font: 600 0.68rem/1 var(--font-mono);
  letter-spacing: 0.08em;
}

.help-tour-progress #helpTourPosition::before {
  content: "·";
  margin-right: var(--space-2);
}

/* Exit: the app's solid red close square with a white cross. */
.help-tour-card .help-tour-close {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding: 0;
  border-radius: var(--radius-sm);
}

.help-tour-card .help-tour-close svg {
  width: 1rem;
  height: 1rem;
}

#helpTourSteps h2 {
  margin: 0 0 var(--space-1);
}

#helpTourSteps p:not(.screen-label) {
  margin: 0;
  font-size: 0.86rem;
}

#helpTourSteps p.help-tour-try {
  margin-top: var(--space-3);
}

/* Pointer: a small square on the card edge facing the control. */
.help-tour-card[data-arrow]::after {
  content: "";
  position: absolute;
  width: 0.8rem;
  height: 0.8rem;
  background: var(--surface-raised);
  border: 1px solid rgb(var(--accent-rgb) / 0.52);
  pointer-events: none;
}

.help-tour-card[data-arrow][data-side="left"]::after {
  top: var(--tour-arrow);
  right: -0.42rem;
  border-width: 1px 1px 0 0;
  transform: translateY(-50%) rotate(45deg);
}

.help-tour-card[data-arrow][data-side="right"]::after {
  top: var(--tour-arrow);
  left: -0.42rem;
  border-width: 0 0 1px 1px;
  transform: translateY(-50%) rotate(45deg);
}

.help-tour-card[data-arrow][data-side="below"]::after {
  top: -0.42rem;
  left: var(--tour-arrow);
  border-width: 1px 0 0 1px;
  transform: translateX(-50%) rotate(45deg);
}

.help-tour-card[data-arrow][data-side="above"]::after {
  bottom: -0.42rem;
  left: var(--tour-arrow);
  border-width: 0 1px 1px 0;
  transform: translateX(-50%) rotate(45deg);
}

.help-tour-actions {
  display: grid;
  /* Back, Ask AI, Next: three equal buttons with Ask AI in the middle
     (Jon 2026-10-13). More sits beside the cross in the header. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  align-items: center;
  margin-top: var(--space-4);
}

.help-tour-actions > button,
.help-tour-more > button {
  height: 2.25rem;
  min-height: 2.25rem;
  white-space: nowrap;
  line-height: 1;
  font-size: 0.72rem;
}

.help-tour-card .help-tour-actions svg {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  min-width: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.help-tour-actions > button,
.help-tour-more > button {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  padding-inline: 0.4rem;
}

.help-tour-card .help-tour-more > button svg {
  width: 1.1rem;
  height: 1.1rem;
  min-width: 1.1rem;
  fill: currentColor;
  stroke: none;
}

.help-tour-next::after {
  content: "";
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  border: solid currentColor;
  border-width: 2px 2px 0 0;
  transform: rotate(45deg);
}

.help-tour-more {
  position: relative;
}

/* More is a square icon button next to the cross, the same size as it and as
   the Back, Ask AI and Next buttons; its
   name stays for screen readers. */
.help-tour-card .help-tour-more > button {
  width: 2.25rem;
  height: 2.25rem;
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding: 0;
}

.help-tour-more > button span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


.help-tour-more-menu {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2));
  z-index: 3;
  display: grid;
  min-width: 12.5rem;
  padding: 0.35rem;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
}

.help-tour-more-menu[hidden] {
  display: none;
}

.help-tour-more-menu button {
  padding: 0.6rem 0.7rem;
  color: var(--text);
  text-align: left;
  font: 600 0.8rem/1.2 var(--font-body);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
}

.help-tour-more-menu button:hover,
.help-tour-more-menu button:focus-visible {
  background: rgb(var(--accent-wash-rgb) / 0.13);
}

/* Phones: the coach row (two icon buttons, Ask AI and Next) fits a 390px
   card on one line, so it is not split into two rows any more. */
@media (max-width: 480px) {
  .help-tour-actions > button,
  .help-tour-more > button {
    gap: 0.25rem;
    padding-inline: 0.25rem;
    font-size: 0.68rem;
    letter-spacing: 0.03em;
  }

  .help-tour-card .help-tour-back svg,
  .help-tour-next::after {
    display: none;
  }
}

.feedback-form {
  display: grid;
  gap: var(--space-5);
  align-content: start;
}

.feedback-step {
  display: grid;
  gap: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}

.feedback-step:first-child {
  padding-top: 0;
  border-top: 0;
}

.feedback-step-heading {
  display: grid;
  gap: var(--space-1);
}

.feedback-step-heading > p:last-child {
  color: var(--text-muted);
  line-height: 1.5;
}

.feedback-form label,
.feedback-type {
  display: grid;
  gap: var(--space-2);
}

.feedback-type {
  margin: 0;
}

.feedback-type legend {
  padding: 0 0 var(--space-3);
  font-weight: 700;
}

.feedback-type label {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.feedback-media-actions,
.feedback-capture-actions,
.feedback-annotation-tools,
.feedback-thumbnails {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.feedback-upload-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  cursor: var(--cursor-pointer);
}

.feedback-canvas-wrap {
  display: grid;
  gap: var(--space-3);
}

.feedback-canvas-wrap[hidden] {
  display: none;
}

.feedback-canvas-wrap canvas {
  display: block;
  width: 100%;
  max-height: 28rem;
  object-fit: contain;
  background: var(--bg-strong);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  touch-action: none;
  cursor: crosshair;
}

.feedback-annotation-tools .is-active {
  color: var(--on-colour-button);
  background: var(--accent-button-press);
  border-color: var(--accent);
}

.feedback-thumbnail {
  position: relative;
  width: 6.5rem;
  height: 5rem;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.feedback-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feedback-thumbnail button {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  width: 1.7rem;
  min-width: 1.7rem;
  height: 1.7rem;
}

.feedback-consent {
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center;
  padding: var(--space-3);
  background: rgb(var(--accent-wash-rgb) / 0.09);
  border: 1px solid rgb(var(--accent-rgb) / 0.28);
  border-radius: var(--radius-md);
}

.top-help-button svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 859px) {
  :root { --support-drawer-width: 100vw; }

  .support-drawer-header,
  .support-drawer-body,
  .feedback-form {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .support-actions {
    display: grid;
  }

  #feedbackDrawer .feedback-media-actions > .ghost-button.compact,
  #feedbackDrawer .feedback-capture-actions > .ghost-button.compact,
  #feedbackDrawer .feedback-annotation-tools > .ghost-button.compact {
    min-height: 44px;
  }

  .help-tour-card {
    max-height: calc(100dvh - 1.5rem);
    overflow-y: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .support-drawer,
  .panel-visibility-toggle,
  .help-tour-spotlight,
  .help-tour-card,
  .help-tour.is-step-transitioning .help-tour-spotlight,
  .help-tour.is-step-transitioning .help-tour-card {
    transition: none;
    transform: none;
  }

  .help-tour.is-step-transitioning .help-tour-spotlight,
  .help-tour.is-step-transitioning .help-tour-card {
    opacity: 1 !important;
  }

  .help-assistant-mark,
  .help-assistant-mark::after,
  .help-tour-ants rect {
    animation: none;
  }
}

/* Font pairing tweaks */
body[data-font-pair="grotesk"] {
  --font-head: "Space Grotesk", "Helvetica Neue", sans-serif;
}

body[data-font-pair="helvetica"] {
  --font-head: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Density tweaks */
body[data-density="compact"] {
  --space-3: 0.6rem;
  --space-4: 0.85rem;
  --space-5: 1.05rem;
  --space-6: 1.25rem;
}

body[data-density="airy"] {
  --space-4: 1.15rem;
  --space-5: 1.45rem;
  --space-6: 1.8rem;
  --space-8: 2.4rem;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 0;
  cursor: var(--cursor-arrow);
  background: var(--bg);
  scrollbar-color: transparent transparent;
  /* iOS Safari/Brave inflate text in blocks they deem "primary" unless told
     not to. The boost is non-uniform, so single rows outgrow the viewport and
     body{overflow-x:hidden} CLIPS them (heading, Reject button and slider cut
     off at the right edge on phones, 2026-07-16). The layout owns its own
     responsive sizing — never let the browser rescale it. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html[data-ui-font-size="small"] {
  font-size: 14px;
}

html[data-ui-font-size="default"] {
  font-size: 16px;
}

html[data-ui-font-size="large"] {
  font-size: 18px;
}

html[data-ui-font-size="extra-large"] {
  font-size: 20px;
}

html[data-reduce-motion="true"] *,
html[data-reduce-motion="true"] *::before,
html[data-reduce-motion="true"] *::after {
  scroll-behavior: auto !important;
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--text);
  background: var(--bg);
  font-family: var(--font-body);
  letter-spacing: var(--track-base);
  text-transform: uppercase;
  cursor: var(--cursor-arrow);
}

body,
button,
label,
nav,
header,
.app-shell,
.workflow-panel,
.workspace,
.screen,
.drawing-pane,
.findings-panel,
.fullscreen-viewer,
.settings-panel {
  -webkit-user-select: none;
  user-select: none;
}

input,
textarea,
select,
[contenteditable="true"],
[contenteditable="plaintext-only"] {
  -webkit-user-select: text;
  user-select: text;
}

/* Solid header band behind the fixed workflow pill so scrolling content
   never shows above or around the bar. The band is OPAQUE down to the bottom of
   the bar, then fades to transparent over ~1.9rem BELOW it — so drawing items
   (ticks, dimensions, badges) softly fade out as they scroll up behind the top
   bar instead of being chopped off at a hard line. The fade has to live below
   the bar: kept inside --workflow-offset it sits under the opaque pill and is
   never seen (which is what made it read as a hard edge).

   The band sits on .app-shell, not on body, so it shares a stacking context
   with the pill it hides content behind: a band on body only stays under the
   pill for as long as nothing gives the shell a stacking context of its own. */
.app-shell::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--workflow-offset) + 1.9rem);
  z-index: 69;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--bg) 0%, var(--bg) calc(var(--workflow-offset) - 1.9rem), transparent var(--workflow-offset));
}

h1,
h2,
h3,
h4,
#screenTitle,
#drawingTitle,
.screen-title {
  font-family: var(--font-head);
}

body[data-ui-scale="compact"] {
  --content-measure: 84rem;
}

body[data-ui-scale="comfortable"] {
  --content-measure: 66rem;
}

button,
input,
textarea,
select {
  font: inherit;
  text-transform: uppercase;
}

button,
input,
textarea,
select,
.drop-zone {
  outline: none;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.drop-zone:focus-visible,
.sheet-frame:focus-visible,
.finding:focus-visible,
[tabindex]:focus-visible {
  box-shadow:
    0 0 0 2px var(--bg),
    0 0 0 4px var(--focus);
}

button {
  cursor: var(--cursor-pointer);
  user-select: none;
}

a[href],
summary,
label[for],
[role="button"],
[role="tab"],
[data-finding-index],
[data-diff-index] {
  cursor: var(--cursor-pointer);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .sheet-frame,
  .drop-zone,
  .finding,
  .primary-button,
  .ghost-button,
  .icon-button {
    transition:
      transform 160ms ease,
      box-shadow 180ms ease,
      filter 180ms ease;
  }

  .sheet-frame:hover,
  .drop-zone:hover {
    filter: saturate(1.04);
  }

  .diff-badge:hover b,
  .finding:hover .finding-badge,
  .crop-badge:hover .crop-badge-fill {
    animation: cursor-target-pop 520ms cubic-bezier(0.2, 0.9, 0.3, 1.2) 1;
  }

  /* Calm hover: a small lift, no rotation wobble - the rotate jiggle read as
     distracting/twitchy across the whole control set (buttons, tabs, toggles,
     the PDF-panel zoom/tool controls). Fine-pointer only, matching the outer
     media query, so touch/mobile never gets a stuck hover transform. */
  :where(
    button,
    [role="button"],
    .primary-button,
    .ghost-button,
    .icon-button,
    .file-button,
    .step,
    .severity-tab,
    .comment-tab,
    .suggestion-chip,
    .finding-action,
    .finding-card-action,
    .fullscreen-tool-button,
    .fullscreen-zoom-button,
    .manual-dimension-candidate,
    .filter-dropdown-toggle,
    .panel-toggle,
    .stamp-upload-toggle,
    .custom-select-trigger,
    .custom-select-option,
    .toggle,
    .save-toggle,
    .manual-mark-lock-toggle,
    .detail-slider,
    label.toggle
  ) {
    transition: transform 140ms ease;
  }

  :where(
    button,
    [role="button"],
    .primary-button,
    .ghost-button,
    .icon-button,
    .file-button,
    .step,
    .severity-tab,
    .comment-tab,
    .suggestion-chip,
    .finding-action,
    .finding-card-action,
    .fullscreen-tool-button,
    .fullscreen-zoom-button,
    .manual-dimension-candidate,
    .filter-dropdown-toggle,
    .panel-toggle,
    .stamp-upload-toggle,
    .custom-select-trigger,
    .custom-select-option,
    .toggle,
    .save-toggle,
    .manual-mark-lock-toggle,
    .detail-slider,
    label.toggle
  ):not(:disabled):not([aria-disabled="true"]):not(.panel-visibility-toggle):hover {
    transform: translateY(-1px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* Calm press: a quick scale-down, no rotation. Ungated (unlike the hover rule
     above) so touch taps get the same tactile press feedback as a mouse click. */
  :where(
    button,
    [role="button"],
    .primary-button,
    .ghost-button,
    .icon-button,
    .file-button,
    .step,
    .severity-tab,
    .comment-tab,
    .suggestion-chip,
    .finding-action,
    .finding-card-action,
    .fullscreen-tool-button,
    .fullscreen-zoom-button,
    .manual-dimension-candidate,
    .filter-dropdown-toggle,
    .panel-toggle,
    .stamp-upload-toggle,
    .custom-select-trigger,
    .custom-select-option,
    .toggle,
    .save-toggle,
    .manual-mark-lock-toggle,
    .detail-slider,
    label.toggle
  ):not(:disabled):not([aria-disabled="true"]):not(.panel-visibility-toggle):active {
    transform: scale(0.97);
    transition: transform 90ms ease;
  }
}

button:not(:disabled):active,
.primary-button:not(:disabled):active,
.ghost-button:not(:disabled):active,
.icon-button:not(:disabled):active,
.file-button:not(:disabled):active,
.step:not(:disabled):active,
.severity-tab:not(:disabled):active,
.comment-tab:not(:disabled):active,
.suggestion-chip:active,
.finding:active,
label.toggle:active,
.drop-zone:active {
  cursor: var(--cursor-pointer);
}

.topbar,
.sidebar,
.page-actions,
.review-header,
.review-actions,
.drawing-pane header,
.findings-panel,
.stamp-controls,
.canvas-toolbar,
.dialog-actions,
.settings-section-header,
.panel-label,
.screen-label {
  user-select: none;
}

/* Drawing numbers are long underscored tokens ("415231_WAVASB_ADULT…") that
   browsers refuse to break at — without this the meta line's min-content can
   push the whole review column past a phone viewport. */
#drawingMeta {
  overflow-wrap: anywhere;
}

@media (min-width: 861px) {
  #drawingMeta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

input,
textarea,
select,
.finding-list,
.suggestion-list {
  user-select: text;
}

button:disabled {
  cursor: var(--cursor-arrow);
  opacity: 0.48;
}

.app-shell {
  display: block;
  min-height: 100vh;
  min-width: 0;
  padding-top: var(--workflow-offset);
  padding-right: 0;
  padding-bottom: var(--bottom-action-space);
  transition: padding-right 240ms ease;
}

.app-legal-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-3) var(--page-gutter) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  color: var(--text-muted);
  font: 600 0.72rem/1 var(--font-ui);
}

.app-legal-footer a {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  color: var(--text-muted);
  text-underline-offset: 0.18em;
}

.app-legal-footer a:hover,
.app-legal-footer a:focus-visible {
  color: var(--text);
}

.app-shell,
.workspace,
.screen,
.load-grid,
.review-layout,
.drawing-board,
.drawing-panes,
.drawing-pane,
.findings-panel,
.stamp-layout,
.stamp-canvas,
.stamp-controls,
.comment-controls,
.save-layout,
.save-preview,
.save-panel,
.input-row,
.size-input-row,
.comment-style-grid {
  min-width: 0;
}

img,
canvas,
svg,
video {
  max-width: 100%;
}

body:not(.panel-collapsed) .app-shell {
  padding-right: 0;
}

.page-actions {
  display: none;
}

.page-actions > * {
  pointer-events: auto;
}

.ai-status {
  display: inline-flex;
  min-height: 2.5rem;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-4);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  border-radius: var(--panel-radius);
  backdrop-filter: blur(14px);
}

.ai-orb {
  width: 0.72rem;
  height: 0.72rem;
  color: var(--warning);
  background: var(--warning);
  border-radius: 999px;
  box-shadow: 0 0 0 0 rgb(var(--warning-rgb) / 0.38);
  animation: orb-pulse 1.55s ease-in-out infinite;
}

.ai-status[data-status="connected"] .ai-orb {
  color: var(--success);
  background: var(--success);
  box-shadow: 0 0 0 0 rgb(var(--success-rgb) / 0.42);
}

.ai-status[data-status="offline"] .ai-orb {
  color: var(--danger);
  background: var(--danger);
  box-shadow: 0 0 0 0 rgb(var(--danger-rgb) / 0.42);
}

/* ==========================================================================
   Pill bar: the one shared look (2026-10-05)
   --------------------------------------------------------------------------
   The signed-in header (#workflowPanel, .sidebar below) and the public landing
   bar (nav.landing-nav) are the same floating pill. These --pillbar-*
   properties are the single definition of that pill: its inset, height,
   padding, corner radius, border, background, shadow, the brand type (logo
   tile, APPVLR word, tagline), the label type the steps and the landing links
   share, the right-hand button size, and where the two ends of the bar sit:
   --pillbar-edge-inset is the distance from the bar's inner edge to the logo
   tile on the left AND to the right-most button on the right, and
   --pillbar-action-gap is the space between the right-hand buttons.
   nav.landing-nav reads every one of them.

   #workflowPanel was left alone on purpose (its rules are layered over seven
   stylesheets and were just rebuilt), so .sidebar below still spells the same
   values out. It can be switched to read these properties the next time that
   header is edited; until then tests/eval_landing_rendered.cjs ("landing bar
   pill matches the app header pill") compares the two bars' computed values
   at 1440, 1280 and 1024 so they cannot drift apart unnoticed, and the
   "pill bar ends" pass in the same file compares the two bars' logo inset,
   right-most button inset and button gap at every width from 320 to 1920.
   ========================================================================== */
body {
  --pillbar-inset: var(--app-frame-inset);
  --pillbar-bar-height: clamp(3.75rem, 5.2vw, 4.25rem);
  --pillbar-pad-y: clamp(0.36rem, 0.7vw, var(--space-2));
  --pillbar-pad-x: clamp(0.5rem, 1.05vw, var(--space-3));
  --pillbar-padding: var(--pillbar-pad-y) var(--pillbar-pad-x);
  /* Extra room in front of the logo on wide bars (the app's brand block pads
     itself by this much). The right-hand buttons get the same room, so the
     logo tile and the right-most button sit the same distance from the edges. */
  --pillbar-brand-inset: clamp(0.35rem, 0.9vw, var(--space-4));
  --pillbar-edge-inset: calc(var(--pillbar-pad-x) + var(--pillbar-brand-inset));
  --pillbar-action-gap: 0.625rem;
  --pillbar-gap: clamp(0.45rem, 1.25vw, 2.4rem);
  --pillbar-radius: 24px;
  --pillbar-background:
    linear-gradient(180deg, rgb(var(--overlay-rgb) / 0.045), rgb(var(--overlay-rgb) / 0.012)),
    color-mix(in srgb, var(--bg-strong) 88%, var(--surface-raised));
  --pillbar-border-color: color-mix(in srgb, var(--border) 86%, var(--text-strong));
  --pillbar-shadow:
    0 18px 44px rgb(var(--shadow-rgb) / 0.44),
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.08);
  --pillbar-logo-size: clamp(1.35rem, 2vw, 1.8rem);
  --pillbar-word-size: clamp(0.92rem, 1.15vw, 1.12rem);
  --pillbar-word-tracking: clamp(0.09em, 0.14vw, 0.16em);
  --pillbar-tag-size: clamp(0.54rem, 0.72vw, 0.7rem);
  --pillbar-tag-tracking: clamp(0.12em, 0.2vw, 0.22em);
  --pillbar-label-size: clamp(0.7rem, 0.92vw, 0.83rem);
  --pillbar-label-tracking: 0.04em;
  --pillbar-button-height: 36px;
  --pillbar-button-size: 0.72rem;
  --pillbar-button-radius: var(--radius-md);
}

/* The app header's own regimes (measured on #workflowPanel at 320 to 1920):
   compact from 1080px down (no extra brand room, 8px between buttons), a
   4px-padded two-row header from 860px down, 4px between buttons on a phone,
   and 2px padding from 340px down. The landing bar follows the same steps. */
@media (max-width: 1080px) {
  body {
    --pillbar-brand-inset: 0px;
    --pillbar-action-gap: var(--space-2);
  }
}

@media (max-width: 860px) {
  body {
    --pillbar-pad-x: var(--space-1);
  }
}

@media (max-width: 640px) {
  body {
    --pillbar-pad-y: var(--space-1);
    --pillbar-action-gap: var(--space-1);
  }
}

@media (max-width: 340px) {
  body {
    --pillbar-pad-x: 2px;
  }
}

.sidebar {
  position: fixed;
  top: var(--space-4);
  left: calc(var(--page-gutter) + env(safe-area-inset-left, 0px));
  right: calc(var(--page-gutter) + env(safe-area-inset-right, 0px));
  z-index: 70;
  display: grid;
  /* Equal edge tracks keep the workflow on the physical viewport centre.
     Responsive label rules below keep each edge group inside its track. */
  grid-template-columns: minmax(0, 1fr) max-content minmax(0, 1fr);
  gap: clamp(0.45rem, 1.25vw, 2.4rem);
  align-items: center;
  width: auto;
  max-width: none;
  min-height: clamp(3.35rem, 5.2vw, 4.25rem);
  margin: 0;
  padding: clamp(0.36rem, 0.7vw, var(--space-2)) clamp(0.5rem, 1.05vw, var(--space-3));
  transform: none;
  background:
    linear-gradient(180deg, rgb(var(--overlay-rgb) / 0.045), rgb(var(--overlay-rgb) / 0.012)),
    color-mix(in srgb, var(--bg-strong) 88%, var(--surface-raised));
  border: 1px solid color-mix(in srgb, var(--border) 86%, var(--text-strong));
  border-radius: 24px;
  box-shadow:
    0 18px 44px rgb(var(--shadow-rgb) / 0.44),
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.08);
  backdrop-filter: none;
  font-size: 1rem;
  transition:
    width 180ms ease,
    padding 180ms ease;
}

/* One-row bar at 861-1080px only fits if the action buttons go icon-only
   (same treatment the mobile layout gives them); labels return above 1080. */
@media (min-width: 861px) and (max-width: 1080px) {
  .sidebar-actions > .top-history-button span:not(.tier-badge),
  .sidebar-actions > .top-clear-button .clear-label,
  .sidebar-actions > .top-settings-button span {
    display: none;
  }

  /* Keep the trailing controls compact so the centred workflow group fits. */
  .sidebar-actions {
    gap: var(--space-2);
    margin-inline-end: clamp(0.3rem, 0.6vw, var(--space-3));
  }

  .brand-block {
    gap: clamp(0.35rem, 0.7vw, var(--space-3));
    padding-left: clamp(0.3rem, 0.6vw, var(--space-3));
  }
}

.app-shell[data-has~="review-screen"]:not(#has-pad) .sidebar {
  width: auto;
  max-width: none;
}

.brand-block {
  display: flex;
  align-items: center;
  gap: clamp(0.45rem, 1vw, var(--space-4));
  min-width: 0;
  min-height: 3.05rem;
  padding: 0.35rem 0 0.35rem clamp(0.35rem, 0.9vw, var(--space-4));
  color: inherit;
  font: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: var(--cursor-pointer);
}

.brand-block:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 0.2rem;
}

.brand-mark {
  display: block;
  width: 0.6rem;
  height: 0.6rem;
  flex: 0 0 auto;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 1px;
}

/* nowrap with nothing to shrink into is why this clipped. The brand block is
   a flex row whose children are all nowrap, so their intrinsic width is fixed;
   the moment the sidebar is a few pixels narrower than that, the text spills
   past the button and reports as a clipped label. min-width:0 lets a flex item
   shrink at all, and the ellipsis gives it somewhere to go when it does, so
   the label degrades legibly instead of being sliced mid-glyph. */
.brand-name {
  min-width: 0;
  margin-left: var(--space-1);
  color: var(--text-strong);
  font-family: var(--font-head);
  font-size: clamp(0.92rem, 1.15vw, 1.12rem);
  font-weight: 700;
  letter-spacing: clamp(0.09em, 0.14vw, 0.16em);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The wrapper around the subtitle is a flex item too, and a flex item defaults
   to min-width:auto - so without this the subtitle could not shrink no matter
   what was set on the h1 itself. */
.brand-block > div {
  min-width: 0;
}

.brand-block .brand-logo {
  position: relative;
  display: block;
  width: clamp(1.35rem, 2vw, 1.8rem);
  height: clamp(1.35rem, 2vw, 1.8rem);
  flex: 0 0 auto;
  background: var(--logo-color);
  color: var(--logo-ink);
  border-radius: var(--radius-sm);
}

/* A slow, small breath on the top-bar logo tile: size only, no glow. */
@keyframes brand-logo-pulse {
  0%, 100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.08);
  }
}

.brand-block .brand-logo {
  animation: brand-logo-pulse 3.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .brand-block .brand-logo {
    animation: none;
  }
}

/* The mark is the tile's label: the ink made for the logo colour, never a fixed white
   (a yellow logo gets the dark mark). */
.brand-block .brand-logo::before,
.landing-logo::before,
.appearance-template-logo::before {
  content: "";
  position: absolute;
  inset: 16%;
  background: var(--logo-ink);
  pointer-events: none;
  -webkit-mask: url("assets/brand/appvlr-mark-mask.png") center / contain no-repeat;
  mask: url("assets/brand/appvlr-mark-mask.png") center / contain no-repeat;
}

.brand-block > div {
  display: flex;
  align-items: center;
  min-height: 2rem;
  min-width: max-content;
  padding: 0.36rem 0 0.32rem clamp(0.45rem, 1vw, var(--space-4));
  border-left: 1px solid color-mix(in srgb, var(--border) 72%, var(--text));
}

.brand-block :is(h1, h2) {
  margin: 0;
  min-width: 0;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: clamp(0.64rem, 0.86vw, 0.84rem);
  font-weight: 500;
  letter-spacing: clamp(0.12em, 0.2vw, 0.22em);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 1480px) {
  /* Keep the step titles next to the numbers; only the descriptions stay hidden. */
  .step {
    min-width: 0;
    padding-inline: var(--space-2);
  }

  .top-settings-button span {
    display: none;
  }
}

@media (min-width: 861px) and (max-width: 1400px) {
  .step .step-label-full {
    display: none;
  }

  .step .step-label-short {
    display: inline;
  }
}

.mobile-actions-button {
  display: none;
}

/* 860px, not 1080: between 861-1080px the one-row bar still fits (short step
   labels are active), so only true tablet/phone widths stack to two rows. */
@media (max-width: 860px) {
  /* Undo, redo and More are laid out BY the pill, not floated over it: their
     own cells in the top row keep them inside the pill's padding and stop the
     brand block from running underneath them. */
  .sidebar {
    grid-template-columns: minmax(0, 1fr) auto auto auto auto;
    grid-template-areas:
      "brand undo redo clear more"
      "steps steps steps steps steps";
    gap: clamp(0.45rem, 1.25vw, var(--space-4));
  }

  .brand-block {
    grid-area: brand;
    justify-self: start;
    padding-inline: clamp(0.35rem, 0.9vw, var(--space-3));
  }

  .mobile-actions-button {
    grid-area: more;
    display: grid;
    place-items: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 999px;
    background:
      linear-gradient(180deg, rgb(var(--overlay-rgb) / 0.11), rgb(var(--overlay-rgb) / 0.025)),
      var(--surface-muted);
    border-color: rgb(var(--text-muted-rgb) / 0.42);
  }

  .sidebar-actions {
    grid-area: steps;
    width: 100%;
    justify-content: space-evenly;
    justify-self: center;
    flex-wrap: nowrap;
  }

  .step-index {
    --step-dot-size: clamp(1.55rem, 2vw, 1.9rem);
    font-size: clamp(0.78rem, 1vw, 0.94rem);
  }
}

/* Tablet widths use the same More-actions swap as phones, while the brand
   stays anchored to the left and the workflow steps keep the full second row. */
.panel-toggle {
  display: none;
}

.panel-toggle svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.6;
}

.eyebrow,
.screen-label,
.panel-label,
.file-role {
  margin: 0 0 var(--space-1);
  color: var(--accent-strong);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

#screenLabel {
  margin-bottom: var(--space-3);
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
:where(.brand-block > div > h2, #authGate .auth-card-head > h2) {
  margin-bottom: 0;
  color: var(--text-muted);
  font-size: 0.72rem;
  line-height: 1;
  white-space: nowrap;
}

h2 {
  margin-bottom: 0;
  font-size: clamp(0.95rem, 1.12vw, 1.5rem);
  line-height: 1.12;
}

#screenTitle {
  font-size: clamp(1.65rem, 2.2vw, 3rem);
  line-height: 1.05;
  /* Space the header out a touch so it reaches toward the settings for balance. */
  letter-spacing: 0.045em;
}

h3 {
  margin-bottom: var(--space-2);
  font-size: 1.1rem;
  line-height: 1.2;
}

p {
  color: var(--text-muted);
  line-height: 1.6;
}

.step-list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  justify-self: center;
  width: max-content;
  min-width: 0;
  gap: clamp(0.3rem, 1.4vw, 1.6rem);
  overflow: hidden;
}

/* Steps show their full label by default; a short variant swaps in on phones. */
.step-label-short {
  display: none;
}

.step {
  position: relative;
  display: inline-grid;
  grid-template-columns: var(--step-dot-size) minmax(0, max-content);
  align-items: center;
  justify-content: center;
  justify-items: start;
  column-gap: 0.5rem;
  flex: 0 0 auto;
  width: fit-content;
  min-height: clamp(2.15rem, 3vw, 2.85rem);
  min-width: 0;
  overflow: hidden;
  padding: clamp(0.25rem, 0.55vw, var(--space-2)) clamp(0.25rem, 0.65vw, 0.7rem);
  color: var(--text);
  text-align: center;
  background: transparent;
  border: 0;
  border-radius: 999px;
  isolation: isolate;
}

/* Keep the three desktop workflow groups on the same 44px control line.
   The phone step layout below 861px keeps its existing touch sizing. */
@media (min-width: 861px) {
  #workflowPanel > .step-list,
  #workflowPanel > .step-list > .step {
    height: 44px;
    min-height: 44px;
  }

  #workflowPanel > .step-list > .step {
    padding-block: 0;
  }
}

.step::after {
  display: none;
}

.step:hover strong {
  color: var(--text-strong);
}

.step.is-active {
  background: transparent;
  border-color: transparent;
}

.step.is-complete .step-index {
  color: var(--on-colour-button);
  background:
    radial-gradient(circle at 45% 35%, rgb(var(--overlay-rgb) / 0.38), transparent 44%),
    var(--complete-action-gradient);
  box-shadow:
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.26),
    inset 0 -2px 4px rgb(var(--shade-rgb) / 0.18);
}

.step.is-complete {
  color: var(--text);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.step.is-complete strong {
  color: var(--text);
}

.step-index {
  display: grid;
  flex: 0 0 var(--step-dot-size);
  min-width: var(--step-dot-size);
  width: var(--step-dot-size);
  height: var(--step-dot-size);
  place-items: center;
  /* Center the number circle on the label so the step row reads on one line. */
  transform: none;
  color: var(--accent-strong);
  font-size: clamp(0.78rem, 1vw, 1rem);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-box: trim-both cap alphabetic;
  /* Upcoming steps: subtly raised tinted disc (depth, not loud). */
  background:
    radial-gradient(circle at 45% 32%, rgb(var(--overlay-rgb) / 0.12), transparent 48%),
    linear-gradient(180deg, rgb(var(--accent-wash-rgb) / 0.22), rgb(var(--accent-wash-rgb) / 0.1));
  border: 0;
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.14),
    inset 0 -2px 4px rgb(var(--shade-rgb) / 0.18);
}

.step.is-active .step-index {
  color: var(--on-colour-button);
  /* Active step: full punch, matching the primary button + completed circle. */
  background:
    radial-gradient(circle at 45% 35%, rgb(var(--overlay-rgb) / 0.4), transparent 44%),
    var(--accent-action-gradient);
  box-shadow:
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.3),
    inset 0 -2px 4px rgb(var(--shade-rgb) / 0.18);
}

.step-copy {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 2rem;
  overflow: hidden;
  transform: none;
}

.step strong {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: var(--text);
  font-size: clamp(0.64rem, 0.78vw, 0.78rem);
  font-weight: 700;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.step small,
.status-row span {
  display: none;
  margin-top: 0;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.28;
}

.findings-panel,
.stamp-controls,
.save-panel,
.decision-panel {
  background:
    linear-gradient(180deg, rgb(var(--overlay-rgb) / 0.035), transparent 42%),
    rgb(var(--surface-raised-rgb) / 0.9);
  border: 1px solid rgb(var(--overlay-rgb) / 0.075);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow-panel);
}

.workspace {
  min-width: 0;
  padding:
    clamp(1.5rem, 2.4vw, 3rem)
    var(--workspace-gutter)
    var(--space-5)
    var(--workspace-gutter);
}

.topbar,
.review-header,
.canvas-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.topbar {
  align-items: stretch;
  flex-direction: column;
  width: 100%;
  margin-inline: 0;
}

.topbar-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  max-width: none;
}

#screenTitle {
  max-width: 100%;
}

.topbar-actions,
.review-actions,
.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.utility-actions {
  justify-content: flex-end;
}

/* Keep the review toolbar controls together on the right with one even gap. */
.review-header {
  flex-wrap: wrap;
}

.review-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-5);
  min-width: 0;
}

.review-post-controls {
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 5mm;
  min-width: 0;
  box-sizing: border-box;
}

.review-post-controls .review-again-button {
  display: inline-flex;
  justify-content: center;
  gap: var(--space-2);
  margin-inline-start: auto;
}

.review-post-controls > :not([hidden]) {
  align-self: center;
  margin-block: 0;
}

.review-tolerance-control {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
  justify-self: start;
  height: var(--detail-control-height, 2.5rem);
  width: max-content;
  max-width: 100%;
  min-width: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.review-tolerance-slider {
  flex: 0 0 auto;
}

.review-actions .review-tolerance-slider {
  flex: 0 0 auto;
}

.review-actions .review-tolerance-slider {
  width: clamp(8.5rem, 15vw, 11rem);
  min-width: clamp(8.5rem, 15vw, 11rem);
  max-width: clamp(8.5rem, 15vw, 11rem);
}

.review-tolerance-number {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-inline-start: 1rem;
  width: max-content;
  min-height: 2rem;
  height: 2rem;
  box-sizing: border-box;
  padding: 0;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  line-height: 1;
}

.review-tolerance-number > span:not(.visually-hidden) {
  display: inline-flex;
  align-items: center;
  height: 1rem;
  line-height: 1;
  white-space: nowrap;
}

#reviewToleranceInput {
  width: 3.4rem;
  height: 2rem;
  padding: 0 0.45rem;
  color: var(--text);
  background: rgb(var(--surface-rgb) / 0.92);
  border: 1px solid color-mix(in srgb, var(--accent-hover) 72%, transparent);
  border-radius: 0.42rem;
  box-shadow: inset 0 1px 2px rgb(var(--shade-rgb) / 0.35), 0 0 0 1px rgb(var(--accent-rgb) / 0.08);
  font: inherit;
  line-height: 2rem;
  text-align: center;
  cursor: text;
}

#reviewToleranceInput:focus,
#reviewToleranceInput:focus-visible {
  outline: 0;
  border-color: var(--accent-border);
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.25);
}

input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.review-actions {
  gap: 5mm;
  flex: 1 1 100%;
  justify-content: flex-end;
  /* min-width: 0 (not max-content): the group still prefers to stay unwrapped -
     flex items only shrink/wrap when the container is genuinely too narrow to
     fit them, so this is a no-op at any width with room to spare. But WITHOUT
     it, this row can never shrink below fitting every checkbox/slider/button on
     one line, so at in-between widths (too narrow for that, not narrow enough
     to trigger the dedicated mobile layout) it forced the whole screen to
     overflow instead of letting its own children wrap. */
  min-width: 0;
  margin-left: 0.28rem;
}

/* Laptop-narrow Review (1000-1180px): keep the header toolbar on one row and
   scale labels/sliders down. Wider workspaces use full-size control groups;
   below 1000px the phone/tablet layouts own wrapping. Do not change gap: 5mm. */
@media (min-width: 1000px) and (max-width: 1180px) {
  #reviewScreen .review-header .review-actions {
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    gap: 5mm;
    box-sizing: border-box;
    min-width: 0;
  }

  #reviewScreen .review-header .review-actions > * {
    flex: 0 1 auto;
    min-width: 0;
  }

  #reviewScreen .review-header .review-actions .toggle {
    font-size: clamp(0.72rem, 0.45rem + 0.38vw, 0.86rem);
  }

  #reviewScreen .review-header .review-actions .diff-toggle-label,
  #reviewScreen .review-header .review-actions .include-notes-label,
  #reviewScreen .review-header .review-actions .link-views-label,
  #reviewScreen .review-header .review-actions .lock-marks-label,
  #reviewScreen .review-header .review-actions .rotate-all-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #reviewScreen .review-header .review-actions .review-tolerance-slider {
    font-size: clamp(0.72rem, 0.45rem + 0.38vw, var(--label-size));
  }

  #reviewScreen .review-header .review-actions .review-tolerance-slider {
    width: clamp(5rem, 9vw, 11rem);
    min-width: 4.25rem;
    max-width: 11rem;
    flex: 1 1 5rem;
  }

  #reviewScreen .review-header .review-actions .review-tolerance-control {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
  }

  #reviewScreen .review-header .review-actions .review-decision-actions {
    /* Keep the button at its readable intrinsic width. The other toolbar
       controls own the available shrink space at laptop widths. */
    flex: 0 0 auto;
  }

  #reviewScreen .review-header .review-actions .review-decision-actions > button {
    font-size: clamp(0.68rem, 0.48rem + 0.32vw, 0.9rem);
    padding-inline: clamp(0.4rem, 0.65vw, 0.75rem);
    white-space: nowrap;
  }
}

.review-actions .ghost-button,
.review-actions .primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--detail-control-height, 2.5rem);
  padding-inline: var(--space-3);
  line-height: 1;
}

.review-decision-actions {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5mm;
}

/* One decision button opens the Approve / Reject dialog (Jon 2026-10-19). */
/* money.html still pairs it with its own #rejectDrawingButton. */
.review-decision-actions:not(:has(#rejectDrawingButton)) > #approveDrawingButton {
  grid-column: 1 / -1;
}

@media (max-width: 1180px) {
  #reviewScreen .review-decision-actions > button {
    min-height: 44px;
  }
}

.advanced-controls {
  align-self: start;
  min-width: 0;
  border: 1px solid rgb(var(--overlay-rgb) / 0.1);
  border-radius: var(--radius-md);
  background: rgb(var(--overlay-rgb) / 0.025);
}

.advanced-controls > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--detail-control-height, 2.5rem);
  padding: 0 var(--space-3);
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: var(--track-caps);
  list-style: none;
}

.advanced-controls > summary::-webkit-details-marker {
  display: none;
}

.advanced-controls > summary::after {
  content: "+";
  color: var(--accent-strong);
  font-family: var(--font-mono);
  font-size: 1.05rem;
  line-height: 1;
}

.advanced-controls[open] > summary {
  color: var(--text);
  border-bottom: 1px solid rgb(var(--overlay-rgb) / 0.08);
}

.advanced-controls[open] > summary::after {
  content: "−";
}

.advanced-controls {
  flex: 0 0 auto;
}

.advanced-controls[open] {
  padding-bottom: var(--space-3);
}

.advanced-controls[open] > :not(summary) {
  margin: var(--space-3) var(--space-3) 0;
}

#stampScreen .advanced-controls,
#stampScreen .comment-controls .advanced-controls {
  width: 100%;
}

.findings-panel,
.side-panel-wrap,
.save-layout .save-panel {
  position: relative;
}

.review-layout,
.stamp-layout,
.save-layout {
  position: relative;
}

.panel-resize-handle {
  --panel-resize-width: 0.18rem;
  position: absolute;
  right: calc(var(--side-control-width) + (var(--space-4) / 2) - (var(--panel-resize-width) / 2));
  top: 50%;
  z-index: 8;
  width: var(--panel-resize-width);
  height: 2.6rem;
  padding: 0;
  background: rgb(var(--accent-rgb) / 0.92);
  color: var(--accent-ink);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 0 0.45rem rgb(var(--accent-rgb) / 0.34);
  cursor: var(--cursor-resize-horizontal);
  touch-action: none;
  transform: translateY(-50%);
}

.panel-resize-handle::before {
  content: none;
}

.panel-resize-handle:hover,
.panel-resize-handle:focus-visible {
  background: var(--accent-hover);
  color: var(--accent-ink);
  box-shadow: 0 0 0.6rem rgb(var(--accent-rgb) / 0.5);
  outline: none;
}

body.is-panel-resizing,
body.is-panel-resizing * {
  cursor: var(--cursor-resize-horizontal) !important;
  user-select: none;
}

/* Review toolbar checkboxes use the same canonical box size as every other app checkbox. */
.review-actions .toggle {
  --checkbox-tick: 1.32rem;
  font-size: 0.86rem;
  line-height: 1;
}

.review-actions .toggle input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  flex: 0 0 var(--detail-control-height, 2.5rem);
  width: var(--detail-control-height, 2.5rem);
  min-width: var(--detail-control-height, 2.5rem);
  height: var(--detail-control-height, 2.5rem);
  min-height: var(--detail-control-height, 2.5rem);
  padding: 0;
  border: 1px solid rgb(var(--accent-rgb) / 0.65);
  border-radius: var(--radius-md);
  background: rgb(var(--accent-wash-rgb) / 0.12);
  box-shadow: inset 0 1px 0 rgb(var(--gloss-rgb) / 0.18);
  line-height: 1;
}

.review-actions .toggle input[type="checkbox"]::before {
  content: "";
  display: block;
  width: var(--checkbox-tick);
  height: var(--checkbox-tick);
  background: var(--gloss);
  clip-path: polygon(14% 53%, 34% 72%, 82% 22%, 94% 34%, 35% 94%, 4% 64%);
  opacity: 0;
  transform: scale(0.72);
  transform-origin: center;
  transition:
    opacity 120ms ease,
    transform 120ms ease;
}

.review-actions .diff-toggle,
.review-actions .include-notes-toggle,
.review-actions .link-views-toggle,
.review-actions .lock-marks-toggle,
.review-actions .rotate-all-toggle {
  gap: var(--space-2);
  min-height: var(--detail-control-height, 2.5rem);
  align-items: center;
}

.review-actions .diff-toggle-label,
.review-actions .include-notes-label,
.review-actions .link-views-label,
.review-actions .lock-marks-label,
.review-actions .rotate-all-label {
  display: inline-flex;
  align-items: center;
  min-height: var(--detail-control-height, 2.5rem);
  line-height: 1;
}

.review-actions .diff-toggle input[type="checkbox"],
.review-actions .link-views-toggle input[type="checkbox"],
.review-actions .lock-marks-toggle input[type="checkbox"],
.review-actions .rotate-all-toggle input[type="checkbox"] {
  width: var(--detail-control-height, 2.5rem);
  min-width: var(--detail-control-height, 2.5rem);
  height: var(--detail-control-height, 2.5rem);
  min-height: var(--detail-control-height, 2.5rem);
  border-color: rgb(var(--text-muted-rgb) / 0.38);
  border-radius: var(--radius-md);
  background: rgb(var(--overlay-rgb) / 0.045);
}

.review-actions .diff-toggle input[type="checkbox"]::before,
.review-actions .link-views-toggle input[type="checkbox"]::before,
.review-actions .lock-marks-toggle input[type="checkbox"]::before,
.review-actions .rotate-all-toggle input[type="checkbox"]::before {
  width: var(--checkbox-tick);
  height: var(--checkbox-tick);
  clip-path: none;
  opacity: 0.72;
  transform: scale(1);
}

.review-actions .lock-marks-toggle input[type="checkbox"]::before {
  background: var(--text-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='11' width='14' height='9' rx='2' fill='none' stroke='black' stroke-width='2.3'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='11' width='14' height='9' rx='2' fill='none' stroke='black' stroke-width='2.3'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.review-actions .rotate-all-toggle input[type="checkbox"]::before {
  background: var(--text-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 11a8 8 0 1 0-2.34 5.66' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round'/%3E%3Cpath d='M20 5v6h-6' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 11a8 8 0 1 0-2.34 5.66' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round'/%3E%3Cpath d='M20 5v6h-6' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.review-actions .rotate-all-toggle input[type="checkbox"]:checked {
  background: var(--accent-action-gradient);
  color: var(--on-colour-button);
  border-color: rgb(var(--accent-border-rgb) / 0.85);
}

.review-actions .rotate-all-toggle input[type="checkbox"]:checked::before {
  background: var(--gloss);
  opacity: 1;
}

.review-actions .lock-marks-toggle input[type="checkbox"]:checked {
  background: var(--accent-action-gradient);
  color: var(--on-colour-button);
  border-color: rgb(var(--accent-border-rgb) / 0.85);
}

.review-actions .lock-marks-toggle input[type="checkbox"]:checked::before {
  background: var(--gloss);
  opacity: 1;
}

.review-actions .diff-toggle input[type="checkbox"]::before {
  background: var(--text-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10' cy='10' r='6.4' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M15 15l5.5 5.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M10 5.6 L11.1 8.9 L14.4 10 L11.1 11.1 L10 14.4 L8.9 11.1 L5.6 10 L8.9 8.9 Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10' cy='10' r='6.4' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M15 15l5.5 5.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M10 5.6 L11.1 8.9 L14.4 10 L11.1 11.1 L10 14.4 L8.9 11.1 L5.6 10 L8.9 8.9 Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}

.review-actions .toggle input[type="checkbox"]:checked {
  background: var(--accent-action-gradient);
  color: var(--on-colour-button);
  border-color: rgb(var(--accent-border-rgb) / 0.85);
}

.review-actions .toggle input[type="checkbox"]:checked::before {
  background: var(--gloss);
  opacity: 1;
  transform: scale(1);
}

.review-actions .toggle input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.review-actions .link-views-toggle input[type="checkbox"]::before {
  background: var(--text-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 13a5 5 0 0 0 7.07 0l2.12-2.12a5 5 0 0 0-7.07-7.07L10.9 5.03' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.07 0L4.81 13.12a5 5 0 0 0 7.07 7.07l1.22-1.22' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 13a5 5 0 0 0 7.07 0l2.12-2.12a5 5 0 0 0-7.07-7.07L10.9 5.03' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.07 0L4.81 13.12a5 5 0 0 0 7.07 7.07l1.22-1.22' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.review-actions .link-views-toggle input[type="checkbox"]:checked {
  background: var(--accent-action-gradient);
  color: var(--on-colour-button);
  border-color: rgb(var(--accent-border-rgb) / 0.85);
}

.review-actions .link-views-toggle input[type="checkbox"]:checked::before {
  background: var(--gloss);
  opacity: 1;
}

/* On-drawing detail-level slider: static endpoint labels stop value text from resizing the toolbar.
   The box height is exactly the track height (--detail-control-height) so it lines up with the
   other .review-actions siblings (checkboxes, buttons) under align-items:center - the stop label
   floats above as an absolute overlay instead of reserving its own row, so it never affects that
   shared alignment. */
.detail-slider {
  --detail-control-height: 2.5rem;
  --detail-track-height: var(--detail-control-height);
  --detail-thumb-size: 2.1rem;
  --detail-stop-inset: 0px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto var(--detail-control-height);
  position: relative;
  height: var(--detail-control-height);
  width: clamp(8.5rem, 15vw, 11rem);
  color: var(--text-muted);
  font-size: var(--label-size);
  line-height: var(--label-line);
  cursor: var(--cursor-pointer);
}

.detail-slider-scale {
  display: flex;
  align-items: center;
  /* Only the crossfading centre label lives here now (the OA-ONLY/FULL side
     labels it "replaces", per the comment below, were briefly reintroduced and
     have been removed again) - centre it instead of the old 3-span space-between. */
  justify-content: center;
  grid-column: 1;
  grid-row: 1;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  margin-bottom: calc(0.16rem + 2px);
  width: 100%;
}

/* Single centred label for the tolerance slider. */
.detail-slider-center-label {
  position: relative;
  display: inline-grid;
  min-height: 1em;
}

.detail-slider-center-label-text {
  grid-area: 1 / 1;
  font-size: inherit;
  font-weight: 600;
  letter-spacing: inherit;
  text-transform: uppercase;
  color: inherit;
  white-space: nowrap;
  text-align: center;
  transition: opacity 60ms linear;
}

.detail-slider input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  grid-column: 1;
  grid-row: 2;
  z-index: 1;
  width: 100%;
  height: var(--detail-control-height);
  min-height: var(--detail-control-height);
  max-height: var(--detail-control-height);
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: 0;
  cursor: var(--cursor-pointer);
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
}

.detail-slider-stops {
  grid-column: 1;
  grid-row: 2;
  z-index: 0;
  width: 100%;
  height: var(--detail-control-height);
  margin-inline: 0;
  padding: 0;
  box-sizing: border-box;
  pointer-events: none;
}

.detail-slider-stops::before,
.detail-slider-stops::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: var(--detail-track-height);
  transform: translateY(-50%);
  border-radius: var(--radius-md);
}

/* The complete blue→purple gradient IS the full bar (a smooth, continuous blend, slightly
   transparent). The thumb is as tall as the bar and slides over it, so no gradient shows
   above or below the thumb; there is no separate growing fill. */
.detail-slider-stops::before {
  background: linear-gradient(90deg, rgb(var(--accent-rgb) / 0.4) 0%, rgb(var(--complete-rgb) / 0.4) 100%);
}

.detail-slider-stops::after {
  background: linear-gradient(90deg, rgb(var(--accent-rgb) / 0.82) 0%, rgb(var(--complete-rgb) / 0.82) 100%);
  clip-path: inset(0 calc(100% - var(--detail-fill-stop, var(--detail-fill, 100%))) 0 0);
}

.detail-slider input[type="range"]::-webkit-slider-runnable-track {
  height: var(--detail-track-height);
  background: transparent;
  border: none;
}

.detail-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: var(--detail-thumb-size);
  height: var(--detail-thumb-size);
  margin-top: calc((var(--detail-track-height) - var(--detail-thumb-size)) / 2);
  border-radius: var(--radius-md);
  /* The thumb keeps a lightened blue to purple tint for a 3D feel. */
  background: linear-gradient(180deg, var(--paper) 0%, var(--complete-hover) 46%, color-mix(in srgb, var(--complete) 90%, var(--shade)) 100%);
  border: 1px solid rgb(var(--overlay-rgb) / 0.52);
  box-shadow:
    0 2px 6px rgb(var(--shadow-rgb) / 0.42),
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.34);
  transition:
    transform 120ms ease,
    box-shadow 140ms ease;
}

.detail-slider input[type="range"]:hover::-webkit-slider-thumb {
  transform: translateY(-1px);
  box-shadow:
    0 3px 9px rgb(var(--shadow-rgb) / 0.46),
    0 0 0 3px rgb(var(--complete-rgb) / 0.22),
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.38);
}

.detail-slider input[type="range"]:active::-webkit-slider-thumb,
.detail-slider input[type="range"]:focus-visible::-webkit-slider-thumb {
  transform: translateY(-1px);
  border-color: var(--focus);
  outline: none;
  box-shadow:
    0 0 0 2px var(--bg),
    0 0 0 4px var(--focus),
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.24);
}

/* Firefox fallback */
.detail-slider input[type="range"]::-moz-range-track {
  height: var(--detail-track-height);
  background: transparent;
  border: none;
}

.detail-slider input[type="range"]::-moz-range-progress {
  height: var(--detail-track-height);
  background: transparent;
}

.detail-slider input[type="range"]::-moz-range-thumb {
  box-sizing: border-box;
  width: var(--detail-thumb-size);
  height: var(--detail-thumb-size);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, var(--paper) 0%, var(--complete-hover) 46%, color-mix(in srgb, var(--complete) 90%, var(--shade)) 100%);
  border: 1px solid rgb(var(--overlay-rgb) / 0.52);
  box-shadow:
    0 2px 6px rgb(var(--shadow-rgb) / 0.42),
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.34);
}

.detail-slider input[type="range"]:active::-moz-range-thumb,
.detail-slider input[type="range"]:focus-visible::-moz-range-thumb {
  border-color: var(--focus);
  box-shadow:
    0 0 0 2px var(--bg),
    0 0 0 4px var(--focus),
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.24);
}

/* No jiggle: buttons darken on hover and darken harder on click. filter is conflict-free
   with the existing transform/colour rules; the press-in motion is added to the existing
   :active rule below. */
.primary-button:not(:disabled):hover,
.ghost-button:not(:disabled):hover,
.icon-button:not(:disabled):hover,
.sheet-page-button:not(:disabled):hover,
.severity-tab:not(:disabled):hover {
  filter: none;
}

.primary-button:not(:disabled):active,
.ghost-button:not(:disabled):active,
.icon-button:not(:disabled):active,
.sheet-page-button:not(:disabled):active,
.severity-tab:not(:disabled):active {
  filter: none;
}

.detail-slider input[type="range"]:active::-webkit-slider-thumb {
  filter: brightness(0.9);
}
.detail-slider input[type="range"]:active::-moz-range-thumb {
  filter: brightness(0.9);
}

.primary-button,
.ghost-button,
.icon-button {
  position: relative;
  min-height: 2.5rem;
  /* These classes set a min-height but never a way to centre against it, so
     they have been relying on <button> centring its own content. An <a> or a
     <label> wearing the same class does not, and puts its label at the top of
     the box: Download in a job file row sat 27px high in its own pill.
     Centring on both axes covers every display these end up with - align-items
     for flex, align-content for grid and for block containers - rather than
     forcing a display value that later rules override anyway. */
  align-items: center;
  align-content: center;
  padding: 0 var(--space-4);
  color: var(--on-colour-button);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: var(--track-caps);
  /* The chosen brand colour owns the entire raised surface. JavaScript derives
     contrast-safe stops, so custom colours do not leave a blue highlight or
     make the white label unreadable. */
  background: var(--accent-action-gradient);
  border: 1px solid rgb(var(--accent-border-rgb) / 0.45);
  border-radius: var(--radius-md);
  transform: translateY(0);
  transition:
    transform 140ms ease,
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease,
    box-shadow 140ms ease;
}

a.primary-button,
a.ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* Button surfaces use the same raised treatment as the app panels. */
.primary-button,
.ghost-button,
.icon-button {
  box-shadow:
    var(--shadow-control),
    inset 0 -2px 0 rgb(var(--shade-rgb) / 0.18);
}

/* Every button keeps its label on a single line — labels never wrap. */
button,
.primary-button,
.ghost-button,
.icon-button,
.file-button,
.step,
.severity-tab,
.comment-tab,
.fullscreen-tool-button,
.fullscreen-zoom-button {
  white-space: nowrap;
}

.primary-button:not(:disabled):hover,
.ghost-button:not(:disabled):hover,
.icon-button:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow:
    0 13px 26px rgb(var(--shadow-rgb) / 0.32),
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.2),
    inset 0 -2px 0 rgb(var(--shade-rgb) / 0.16),
    inset 0 0 0 999px rgb(var(--shade-rgb) / 0.07);
}

.primary-button:not(:disabled):active,
.ghost-button:not(:disabled):active,
.icon-button:not(:disabled):active {
  transform: translateY(1px) scale(0.97);
  box-shadow:
    inset 0 2px 3px rgb(var(--shade-rgb) / 0.22),
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.05),
    inset 0 0 0 999px rgb(var(--shade-rgb) / 0.16);
}

/* PS-050: the OS reduced-motion setting also stops the hover lift and the
   press shrink, not only the in-app toggle. Colour and shadow still change. */
@media (prefers-reduced-motion: reduce) {
  .primary-button:not(:disabled):hover,
  .ghost-button:not(:disabled):hover,
  .icon-button:not(:disabled):hover,
  .primary-button:not(:disabled):active,
  .ghost-button:not(:disabled):active,
  .icon-button:not(:disabled):active {
    transform: none;
  }
}

.primary-button:not(:disabled):hover {
  background: var(--accent-action-gradient-hover);
  color: var(--on-colour-button);
}

.primary-button:not(:disabled):active {
  background: var(--accent-button-press);
  color: var(--on-colour-button);
}

.primary-button.is-manufacturer-only {
  color: var(--on-colour-button);
  background: var(--complete-action-gradient);
  border-color: rgb(var(--complete-rgb) / 0.62);
}

.primary-button.is-manufacturer-only:not(:disabled):hover {
  background: var(--complete-action-gradient-hover);
  color: var(--on-colour-button);
  border-color: rgb(var(--complete-rgb) / 0.78);
}

.primary-button.is-success,
.ghost-button.is-success {
  color: var(--on-colour-button);
  background: linear-gradient(180deg, var(--action-success-hover), var(--action-success) 58%, var(--action-success-press));
}

/* PS-034: the generic hover and press rules above out-rank the modifier, so a
   green button turned blue (primary) or grey (ghost) under the pointer. */
.primary-button.is-success:not(:disabled):hover,
.ghost-button.is-success:not(:disabled):hover {
  color: var(--on-colour-button);
  background: linear-gradient(180deg, var(--action-success-hover), var(--action-success-hover) 30%, var(--action-success));
}

.primary-button.is-success:not(:disabled):active,
.ghost-button.is-success:not(:disabled):active {
  color: var(--on-colour-button);
  background: var(--action-success-press);
}

/* Manual-spec extraction is a primary workflow action. Its green surface takes
   the white button ink (owner rule, 2026-10-11: no dark text on a colour button). */
#aiOrganiseButton,
#splitRequirementsButton {
  width: 100%;
  min-height: 44px;
  color: var(--on-colour-button);
}

.primary-button.large {
  min-height: 3rem;
  padding-inline: var(--space-6);
}

.ghost-button,
.icon-button {
  color: var(--text);
  background:
    linear-gradient(180deg, rgb(var(--overlay-rgb) / 0.075), rgb(var(--overlay-rgb) / 0.015)),
    var(--surface-raised);
  border: 1px solid var(--border);
}

.ghost-button:not(:disabled):hover,
.icon-button:not(:disabled):hover {
  background:
    linear-gradient(180deg, rgb(var(--overlay-rgb) / 0.1), rgb(var(--overlay-rgb) / 0.02)),
    var(--surface-muted);
  border-color: rgb(var(--text-muted-rgb) / 0.4);
}

/* Semantic colour modifiers for active task buttons. Neutral ghost styling is
   reserved for cancel, close, reset, undo, and passive utility controls. */
.ghost-button.button-blue,
.icon-button.button-blue {
  color: var(--on-colour-button);
  background: var(--accent-action-gradient);
  border-color: rgb(var(--accent-border-rgb) / 0.55);
}

.ghost-button.button-blue:not(:disabled):hover,
.icon-button.button-blue:not(:disabled):hover {
  background: var(--accent-action-gradient-hover);
  color: var(--on-colour-button);
  border-color: rgb(var(--accent-border-rgb) / 0.72);
}

.ghost-button.button-purple,
.icon-button.button-purple,
.primary-button.button-purple {
  color: var(--on-colour-button);
  background: var(--complete-action-gradient);
  border-color: rgb(var(--complete-rgb) / 0.62);
}

.ghost-button.button-purple:not(:disabled):hover,
.icon-button.button-purple:not(:disabled):hover,
.primary-button.button-purple:not(:disabled):hover {
  background: var(--complete-action-gradient-hover);
  color: var(--on-colour-button);
  border-color: rgb(var(--complete-rgb) / 0.78);
}

/* Decision colours: green for yes, red for no, grey for set aside. White label on each. */
.ghost-button.button-green,
.primary-button.button-green {
  color: var(--on-colour-button);
  background: linear-gradient(180deg, var(--action-success-hover), var(--action-success) 52%, var(--action-success-press));
  border-color: rgb(var(--action-success-rgb) / 0.7);
}

.ghost-button.button-green:not(:disabled):hover,
.primary-button.button-green:not(:disabled):hover {
  color: var(--on-colour-button);
  background: linear-gradient(180deg, var(--action-success-hover), var(--action-success-hover) 30%, var(--action-success));
  border-color: rgb(var(--action-success-rgb) / 0.9);
}

.ghost-button.button-red,
.primary-button.button-red {
  color: var(--on-colour-button);
  background: linear-gradient(180deg, var(--action-danger-hover), var(--action-danger) 52%, var(--action-danger-press));
  border-color: rgb(var(--action-danger-rgb) / 0.7);
}

.ghost-button.button-red:not(:disabled):hover,
.primary-button.button-red:not(:disabled):hover {
  color: var(--on-colour-button);
  background: linear-gradient(180deg, var(--action-danger-hover), var(--action-danger-hover) 30%, var(--action-danger));
  border-color: rgb(var(--action-danger-rgb) / 0.9);
}

.ghost-button.button-grey,
.primary-button.button-grey {
  --button-grey: color-mix(in srgb, var(--text-muted) 52%, var(--bg-strong));
  color: var(--on-colour-button);
  background: linear-gradient(180deg, color-mix(in srgb, var(--button-grey) 88%, white), var(--button-grey) 52%, color-mix(in srgb, var(--button-grey) 82%, black));
  border-color: rgb(var(--text-muted-rgb) / 0.5);
}

.ghost-button.button-grey:not(:disabled):hover,
.primary-button.button-grey:not(:disabled):hover {
  color: var(--on-colour-button);
  background: linear-gradient(180deg, color-mix(in srgb, var(--button-grey) 80%, white), color-mix(in srgb, var(--button-grey) 92%, white) 52%, var(--button-grey));
  border-color: rgb(var(--text-muted-rgb) / 0.75);
}

#pairingOverview [data-pairing-submit].button-slate,
#pairingManagerButton.button-slate {
  color: var(--text-strong);
  background: color-mix(in srgb, var(--text-muted) 38%, var(--surface-card));
  border-color: var(--text-muted);
}

#pairingOverview [data-pairing-submit].button-slate:not(:disabled):hover,
#pairingManagerButton.button-slate:not(:disabled):hover {
  background: color-mix(in srgb, var(--text-muted) 52%, var(--surface-card));
  border-color: var(--text-muted);
}

#pairingOverview [data-pairing-submit].button-slate:not(:disabled):active,
#pairingManagerButton.button-slate:not(:disabled):active {
  background: color-mix(in srgb, var(--text-muted) 25%, var(--surface-card));
}

#pairingManagerButton.button-slate .pairing-manager-count {
  color: var(--text-strong);
}

/* Warm orange: appointing a team leader. White label (owner rule, 2026-10-11:
   no dark text on a colour button). */
.ghost-button.button-orange,
.icon-button.button-orange {
  color: var(--on-colour-button);
  background: linear-gradient(180deg, var(--leader-button-strong), var(--leader-button) 52%, var(--leader-button-press));
  border-color: rgb(var(--leader-rgb) / 0.62);
}

.ghost-button.button-orange:not(:disabled):hover,
.icon-button.button-orange:not(:disabled):hover {
  background: linear-gradient(180deg, var(--leader-button-strong), var(--leader-button-hover) 48%, var(--leader-button));
  color: var(--on-colour-button);
  border-color: rgb(var(--leader-rgb) / 0.8);
}

.settings-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.5rem;
  padding-inline: var(--space-4);
  background: rgb(var(--bg-rgb) / 0.72);
  border: 1px solid rgb(var(--border-rgb) / 0.56);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(14px);
}

.settings-button svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.settings-button:hover {
  background: rgb(var(--surface-raised-rgb) / 0.82);
}

.top-settings-button {
  justify-self: end;
  min-height: clamp(2rem, 3vw, 2.85rem);
  padding-inline: clamp(0.4rem, 0.8vw, var(--space-3));
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  box-shadow: none;
}

.top-settings-button:hover {
  color: var(--text);
  background: rgb(var(--overlay-rgb) / 0.055);
  border-color: transparent;
}

/* Top-bar Clear all + Settings cluster (right end of the bar). */
.sidebar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  justify-self: end;
}

@media (min-width: 1081px) {
  /* Match the Menu-to-pill edge gap to the logo-to-pill edge gap. */
  .sidebar-actions {
    margin-inline-end: clamp(0.35rem, 0.9vw, var(--space-4));
  }
}

.sidebar-actions > #undoButton,
.sidebar-actions > #redoButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: clamp(2rem, 2.8vw, 2.5rem);
  min-height: clamp(2rem, 2.8vw, 2.5rem);
  padding-block: 0;
  line-height: 1;
  box-sizing: border-box;
}

.sidebar-actions > :is(#undoButton, #redoButton) svg,
.sidebar-action-menu > summary svg {
  display: block;
  align-self: center;
  flex: 0 0 auto;
  margin-block: auto;
}

.sidebar-action-menu {
  position: relative;
}

.sidebar-action-menu > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: clamp(2rem, 2.8vw, 2.5rem);
  height: clamp(2rem, 2.8vw, 2.5rem);
  padding-block: 0;
  box-sizing: border-box;
  padding-inline: clamp(0.7rem, 1vw, var(--space-3));
  color: var(--on-colour-button);
  font-size: clamp(0.72rem, 0.76vw, 0.82rem);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
  background: var(--accent-action-gradient);
  border: 1px solid rgb(var(--accent-border-rgb) / 0.55);
  border-radius: var(--radius-md);
}

.sidebar-action-menu > summary::-webkit-details-marker {
  display: none;
}

.sidebar-action-menu > summary:hover,
.sidebar-action-menu[open] > summary {
  color: var(--on-colour-button);
  background: var(--accent-action-gradient-hover);
  border-color: rgb(var(--accent-border-rgb) / 0.72);
}

.sidebar-action-menu-chevron {
  width: 0.9rem;
  height: 0.9rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  transition: transform 140ms ease;
}

.sidebar-action-menu[open] .sidebar-action-menu-chevron {
  transform: rotate(180deg);
}

.sidebar-action-menu-list {
  position: absolute;
  z-index: 90;
  top: calc(100% + var(--space-2));
  right: 0;
  display: grid;
  gap: var(--space-1);
  width: max-content;
  min-width: 13rem;
  max-width: min(22rem, calc(100vw - 2rem));
  padding: var(--space-2);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-panel);
}

.sidebar-action-menu .sidebar-action-menu-list > .ghost-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2);
  width: 100%;
  min-height: 44px;
  padding-inline: var(--space-3);
  color: var(--text);
  background: transparent;
  border-color: transparent;
  border-radius: var(--radius-md);
  box-shadow: none;
  text-decoration: none;
}

.sidebar-action-menu .sidebar-action-menu-list > .ghost-button:hover {
  color: var(--text);
  background: var(--surface-raised);
  border-color: var(--border);
}

.top-history-button {
  min-height: clamp(2rem, 2.8vw, 2.5rem);
  padding-inline: clamp(0.48rem, 0.9vw, var(--space-3));
  color: var(--on-colour-button);
  font-size: clamp(0.72rem, 0.76vw, 0.82rem);
  font-weight: 600;
  white-space: nowrap;
  background: var(--accent-action-gradient);
  border: 1px solid rgb(var(--accent-border-rgb) / 0.45);
  border-radius: var(--radius-md);
  box-shadow:
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.2),
    inset 0 -2px 0 rgb(var(--shade-rgb) / 0.16);
}

.top-history-button:not(:disabled):hover {
  color: var(--on-colour-button);
  background: var(--accent-action-gradient-hover);
  border-color: rgb(var(--accent-border-rgb) / 0.62);
}

.top-history-button:disabled {
  color: rgb(var(--text-strong-rgb) / 0.42);
  background: rgb(var(--overlay-rgb) / 0.055);
  border-color: rgb(var(--overlay-rgb) / 0.1);
  box-shadow: none;
  opacity: 1;
}

.top-clear-button {
  /* height AND min-height, matching #undoButton/#redoButton/.sidebar-action-menu
     > summary exactly — a lone min-height here let the .compact base class's
     fixed 2.15rem win at some viewport widths, so Clear all stood taller or
     shorter than its neighbours instead of sharing their row height. */
  height: clamp(2rem, 2.8vw, 2.5rem);
  min-height: clamp(2rem, 2.8vw, 2.5rem);
  padding-block: 0;
  box-sizing: border-box;
  padding-inline: clamp(0.48rem, 0.9vw, var(--space-3));
  /* Matches the "Reject drawing" button: solid red destructive action. */
  color: var(--on-colour-button);
  font-size: clamp(0.72rem, 0.76vw, 0.82rem);
  font-weight: 600;
  white-space: nowrap;
  background: var(--action-danger);
  border: 1px solid var(--action-danger);
  border-radius: var(--radius-md);
}

.top-clear-button:not(:disabled):hover {
  color: var(--on-colour-button);
  background: var(--action-danger-hover);
  border-color: var(--action-danger-hover);
}

.top-clear-button:not(:disabled):active {
  color: var(--on-colour-button);
  background: var(--action-danger-press);
  border-color: var(--action-danger-press);
}

/* The app-wide control height, matching #undoButton/#redoButton/
   .sidebar-action-menu > summary exactly. Higher specificity (id + class)
   than any class-only rule targeting .top-clear-button, so no future edit to
   the shared .top-clear-button/.top-history-button combinator (or the
   .compact base class) can win the cascade and knock Clear all off the
   row's height. */
#clearAllButton.top-clear-button {
  height: clamp(2rem, 2.8vw, 2.5rem);
  min-height: clamp(2rem, 2.8vw, 2.5rem);
  padding-block: 0;
  box-sizing: border-box;
}

/* id-scoped so it beats the later .ghost-button.compact / container rules of
   equal class-specificity. */
#clearAllButton.top-clear-button:disabled {
  /* Matches the "Reject drawing" disabled state: faded white on muted red. */
  color: var(--on-colour-button);
  background: var(--action-danger-disabled-bg);
  border-color: var(--action-danger-disabled-border);
  opacity: 0.6;
}

.top-clear-button,
.top-history-button,
.sidebar-action-menu > summary,
.clear-load-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  height: clamp(2rem, 2.8vw, 2.5rem);
  line-height: 1;
}

.top-history-button svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.15;
}

/* One sizing rule for every compact action pair — a lone .ghost-button.compact
   rule left .primary-button.compact unstyled, so "Back to load" and "Submit
   matches" rendered at different heights. */
.primary-button.compact,
.ghost-button.compact {
  min-height: 2.15rem;
  padding-inline: var(--space-3);
  font-size: 0.85rem;
}

.ghost-button svg,
.primary-button svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4;
}

/* "Stamp is positioned" + a compact eye icon sit on one row. On desktop the
   icon is hidden (the header eye button is used); on stacked/mobile widths the
   header button is hidden and this icon takes over — both do the same thing. */
.stamp-confirm-row {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
}

.stamp-confirm-row > .primary-button {
  flex: 1 1 auto;
  min-width: 0;
}

.stamp-confirm-icon {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  min-width: 2.75rem;
  padding: 0;
  color: var(--on-colour-button);
  background: var(--accent-button);
  border: 1px solid rgb(var(--accent-border-rgb) / 0.72);
}

.stamp-confirm-icon:not(:disabled):hover {
  background: var(--accent-button-hover);
  color: var(--on-colour-button);
  border-color: color-mix(in srgb, color-mix(in srgb, var(--accent) 36%, var(--gloss)) 82%, transparent);
  box-shadow: 0 6px 18px rgb(var(--shadow-rgb) / 0.28);
}

.stamp-confirm-icon svg {
  display: block !important;
  width: 1.25rem;
  height: 1.25rem;
}

.icon-button {
  width: 2.5rem;
  padding: 0;
  font-size: 1.4rem;
}

.close-button {
  color: var(--text);
  background: rgb(var(--surface-raised-rgb) / 0.9);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.close-button:hover {
  color: var(--on-colour-button);
  background: var(--action-danger);
  border-color: var(--danger);
}

/* Solid-red close (X): an always-visible destructive-style exit, not just on
   hover - reuse for any dialog that needs an obvious, easy-to-find close control. */
.close-button-danger {
  flex: 0 0 auto;
  color: var(--on-colour-button);
  background: var(--action-danger);
  border: 1px solid var(--action-danger);
  border-radius: var(--radius-sm);
}

.close-button-danger svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: var(--on-colour-button);
  stroke-width: 2.25;
  stroke-linecap: round;
}

.close-button-danger:hover {
  background: var(--action-danger-hover);
  color: var(--on-colour-button);
  border-color: var(--action-danger-hover);
}

.close-button-danger:active {
  background: var(--action-danger-press);
  color: var(--on-colour-button);
  border-color: var(--action-danger-press);
}

[hidden] {
  display: none !important;
}

.screen {
  display: none;
}

.screen.is-active {
  display: block;
}

.screen[aria-hidden="true"] {
  display: none !important;
}

#reviewScreen.is-active {
  display: grid;
  /* minmax(0, 1fr): without an explicit column track, the browser sizes the implicit
     column to its content's max-content width (a classic grid blowout) - the header/
     drawing-comparison/findings content inside never actually gets a chance to shrink
     to the viewport, and everything downstream overflows off the right edge. */
  grid-template-columns: minmax(0, 1fr);
  /* header (auto) + drawing/findings layout (fills the rest) + Sheet Pairing bar (auto,
     its own height, shrinks when collapsed) pinned beneath the panels. */
  grid-template-rows: auto minmax(0, 1fr) auto;
  /* Breathing room between the review header, the Sheet Pairing bar and the
     drawing/findings layout so they don't crowd each other. */
  row-gap: var(--space-4);
  width: 100%;
  max-width: none;
  min-height: 0;
  margin-inline: 0;
}

#analysisScreen {
  width: min(100%, var(--analysis-content-measure));
  margin-inline: auto;
}

#analysisScreen.is-active {
  display: grid;
  justify-items: stretch;
}

.workspace[data-has~="analysis-screen"]:not(#has-pad) {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: calc(100vh - var(--workflow-offset));
  row-gap: var(--space-6);
}

.workspace[data-has~="analysis-screen"]:not(#has-pad) .topbar {
  width: 100%;
  margin-bottom: 0;
}

/* Keep the heading in the standard top location; only the preflight card is
   centered in the space below it. */
.workspace[data-has~="analysis-screen"]:not(#has-pad) #analysisScreen {
  align-self: center;
}

.workspace[data-has~="analysis-screen"]:not(#has-pad) .loading-panel {
  margin-top: 0;
}

.workspace[data-has~="review-screen"]:not(#has-pad) {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: calc(100vh - var(--workflow-offset) - var(--bottom-action-space));
  min-height: 0;
  overflow: hidden;
  padding:
    clamp(1rem, 2vh, 2rem)
    var(--workspace-gutter)
    var(--space-4)
    var(--workspace-gutter);
}

.workspace[data-has~="review-screen"]:not(#has-pad) .topbar {
  width: 100%;
  max-width: none;
}

.workspace[data-has~="review-screen"]:not(#has-pad) .review-header {
  margin-top: 0;
  margin-bottom: clamp(0.75rem, 1.3vh, 1.25rem);
}

@media (min-width: 1181px) {
  .review-header > div:first-child {
    width: 100%;
    max-width: none;
  }

  .workspace[data-has~="stamp-screen"]:not(#has-pad),
  .workspace[data-has~="save-screen"]:not(#has-pad) {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: calc(100vh - var(--workflow-offset) - var(--bottom-action-space));
    min-height: 0;
    overflow: hidden;
    padding:
      clamp(1rem, 2vh, 2rem)
      var(--workspace-gutter)
      var(--space-4)
      var(--workspace-gutter);
  }

  .workspace[data-has~="stamp-screen"]:not(#has-pad) .topbar,
  .workspace[data-has~="save-screen"]:not(#has-pad) .topbar {
    margin-bottom: 0;
  }

  .workspace[data-has~="stamp-screen"]:not(#has-pad) #screenTitle,
  .workspace[data-has~="save-screen"]:not(#has-pad) #screenTitle {
    display: none;
  }

  #stampScreen.is-active,
  #saveScreen.is-active {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  .stamp-layout,
  .save-layout {
    height: 100%;
    min-height: 0;
    align-items: stretch;
    overflow: hidden;
  }

  .stamp-canvas,
  .save-preview {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100%;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
  }

  .stamp-frame,
  .save-preview-frame {
    display: grid;
    place-items: center;
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
  }

  .stamp-frame > .rendered-sheet,
  .stamp-frame > .empty-sheet-state,
  .save-preview-frame > .rendered-sheet,
  .save-preview-frame > .empty-sheet-state,
  .save-preview-viewport > .rendered-sheet,
  .save-preview-viewport > .empty-sheet-state {
    width: 100%;
    height: 100%;
    /* Let the sheet shrink to the bounded grid row instead of forcing its own
       natural height (which would clip the bottom). */
    min-height: 0;
    object-fit: contain;
  }

  .stamp-controls,
  .comment-controls,
  .save-layout .save-panel {
    height: 100%;
    min-height: 0;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: rgb(var(--accent-rgb) / 0.8) transparent;
    scrollbar-width: thin;
  }

  .comment-tab-panel.is-active,
  .save-layout .save-dialog {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }

  #stampScreen .stamp-canvas .canvas-toolbar,
  #saveScreen .save-preview .canvas-toolbar {
    align-items: start;
    margin-bottom: var(--space-3);
  }

  /* Keep the canvas action area right-aligned when the toolbar wraps. */
  #stampScreen .stamp-canvas-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  #saveScreen .save-preview-frame {
    width: 100%;
    height: 100%;
    margin: 0;
    /* Higher specificity (id + class) than the base .save-preview-frame rule
       later in the file, so its min-height:14rem floor no longer overflows the
       collapsed desktop grid row and clips the sheet's bottom title block. */
    min-height: 0;
    aspect-ratio: auto;
    /* The frame is a grid; without an explicit row the sheet <img> sizes the
       (auto) row to its natural height, overflowing the collapsed frame and
       clipping the bottom. A bounded 1fr row pins the image to the frame's real
       height so object-fit:contain shows the whole sheet. */
    grid-template-rows: minmax(0, 1fr);
  }
}

input[type="file"].visually-hidden {
  appearance: none;
  position: absolute;
  inset: auto auto 0 0;
  z-index: -1;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

input[type="file"].visually-hidden::file-selector-button {
  display: none;
}

.load-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "your supplied"
    ". actions";
  gap: clamp(1rem, 1.6vw, 1.75rem);
  align-items: start;
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.load-grid:has(.load-queue-action > :not([hidden])) {
  grid-template-areas:
    ". queue"
    "your supplied"
    ". actions";
}

#loadScreen .load-grid > .drop-zone[data-drop-role="raeco"] { grid-area: your; }
#loadScreen .load-grid > .supplied-source-card { grid-area: supplied; }

.load-review-actions {
  display: none;
  grid-area: actions;
  min-width: 0;
  width: 100%;
  margin-top: calc(10mm - clamp(1rem, 1.6vw, 1.75rem));
}

.load-review-actions:has(> :not([hidden])) {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-end;
  gap: var(--space-3);
}

.load-review-actions > :not([hidden]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  min-height: 44px;
  white-space: nowrap;
}

.load-review-actions .review-again-button {
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

@media (max-width: 1320px) {
  #loadScreen .load-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "your"
      "supplied"
      "actions";
  }

  #loadScreen .load-grid:has(.load-queue-action > :not([hidden])) {
    grid-template-areas:
      "your"
      "queue"
      "supplied"
      "actions";
  }

}

.load-queue-action {
  display: none;
  grid-area: queue;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  min-height: 44px;
}

.load-queue-action:has(> :not([hidden])) {
  display: flex;
}

.drop-zone {
  --drop-zone-ant-rgb: var(--accent-rgb);
  --drop-zone-ant: rgb(var(--drop-zone-ant-rgb));
  position: relative;
  display: grid;
  grid-template-rows: 1.8rem minmax(3.9em, auto) auto auto auto minmax(0, 1fr);
  align-content: start;
  row-gap: var(--space-4);
  min-height: clamp(18rem, 32vh, 27rem);
  padding: clamp(1.25rem, 2vw, 2.25rem);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 18% 18%, rgb(var(--complete-strong-rgb) / 0.055), transparent 31%),
    radial-gradient(circle at 82% 72%, rgb(var(--accent-wash-rgb) / 0.06), transparent 35%),
    linear-gradient(180deg, rgb(var(--surface-raised-rgb) / 0.74), var(--surface));
  background-position: 18% 18%, 82% 72%, 0 0;
  background-size: 170% 155%, 150% 145%, 100% 100%;
  border: 1px dashed rgb(var(--text-muted-rgb) / 0.38);
  border-radius: var(--panel-radius);
  animation: load-zone-gradient-drift 28s ease-in-out infinite;
}

.drop-zone[data-drop-role="raeco"] {
  --drop-zone-ant-rgb: var(--accent-rgb);
  background:
    radial-gradient(circle at 18% 18%, rgb(var(--accent-wash-rgb) / 0.2), transparent 34%),
    radial-gradient(circle at 82% 72%, rgb(var(--accent-border-rgb) / 0.12), transparent 38%),
    linear-gradient(180deg, color-mix(in srgb, color-mix(in srgb, var(--accent-wash) 21%, var(--bg)) 88%, transparent), rgb(var(--bg-rgb) / 0.98));
  background-position: 18% 18%, 82% 72%, 0 0;
  background-size: 170% 155%, 150% 145%, 100% 100%;
}

.drop-zone[data-drop-role="manufacture"] {
  --drop-zone-ant-rgb: var(--complete-rgb);
  background:
    radial-gradient(circle at 18% 18%, rgb(var(--complete-wash-rgb) / 0.2), transparent 34%),
    radial-gradient(circle at 82% 72%, rgb(var(--complete-wash-rgb) / 0.18), transparent 38%),
    linear-gradient(180deg, color-mix(in srgb, color-mix(in srgb, var(--complete-wash) 16%, var(--bg)) 88%, transparent), rgb(var(--bg-rgb) / 0.98));
  background-position: 18% 18%, 82% 72%, 0 0;
  background-size: 170% 155%, 150% 145%, 100% 100%;
}

.drop-zone::before,
.drop-zone::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.drop-zone:not(.has-file)::before {
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, transparent, rgb(var(--drop-zone-ant-rgb) / 0.06) 48%, transparent);
  background-size: 220% 100%;
  opacity: 0.32;
  animation: idle-load-gradient-drift 18s ease-in-out infinite;
}

.drop-zone:not(.has-file)::after {
  display: none;
}

.drop-zone > :not(.drop-zone-ants) {
  position: relative;
  z-index: 2;
}

.drop-zone:hover,
.drop-zone.is-dragging {
  border-color: var(--drop-zone-ant);
  box-shadow: inset 0 0 0 1px rgb(var(--drop-zone-ant-rgb) / 0.28), 0 0 1.2rem rgb(var(--drop-zone-ant-rgb) / 0.16);
}

.drop-zone.has-file {
  border-style: solid;
  border-color: rgb(var(--drop-zone-ant-rgb) / 0.55);
}

.file-clear-button {
  color: rgb(var(--clear-role-rgb, var(--drop-zone-ant-rgb)));
  background: rgb(var(--clear-role-rgb, var(--drop-zone-ant-rgb)) / 0.1);
  border-color: rgb(var(--clear-role-rgb, var(--drop-zone-ant-rgb)) / 0.58);
  min-width: 6.6rem;
}

.file-clear-button .bin-icon {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  display: block;
}

.file-clear-button:not(:disabled):hover {
  color: rgb(var(--clear-role-rgb, var(--drop-zone-ant-rgb)));
  background: rgb(var(--clear-role-rgb, var(--drop-zone-ant-rgb)) / 0.18);
  border-color: rgb(var(--clear-role-rgb, var(--drop-zone-ant-rgb)) / 0.78);
}

.file-clear-button:not(:disabled):active {
  background: rgb(var(--clear-role-rgb, var(--drop-zone-ant-rgb)) / 0.26);
  border-color: rgb(var(--clear-role-rgb, var(--drop-zone-ant-rgb)) / 0.88);
}

.drop-zone[data-drop-role="raeco"] .file-clear-button {
  --clear-role-rgb: var(--accent-rgb);
}

.drop-zone[data-drop-role="manufacture"] .file-clear-button {
  --clear-role-rgb: var(--complete-rgb);
}

/* Loaded drawings get role-coloured marching ants around the box. An SVG ring
   keeps the dashes aligned with the rounded corners. */
.drop-zone-ants {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: none;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  border-radius: inherit;
}

.drop-zone.has-file .drop-zone-ants {
  display: block;
}

.drop-zone-ants rect {
  x: 1px;
  y: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  rx: calc(var(--radius-lg) - 1px);
  ry: calc(var(--radius-lg) - 1px);
  fill: none;
  stroke: var(--drop-zone-ant);
  stroke-width: 2;
  stroke-dasharray: 9 7;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 0.35rem rgb(var(--drop-zone-ant-rgb) / 0.36));
}

.drop-zone-ants rect {
  animation: drop-zone-ants 0.9s linear infinite;
}

@keyframes drop-zone-ants {
  to {
    stroke-dashoffset: -16;
  }
}

@keyframes idle-load-gradient-drift {
  0%,
  100% {
    background-position: 0% 50%;
  }
  45% {
    background-position: 78% 50%;
  }
  72% {
    background-position: 38% 50%;
  }
}

@keyframes load-zone-gradient-drift {
  0%,
  100% {
    background-position: 18% 18%, 82% 72%, 0 0;
  }
  23% {
    background-position: 64% 24%, 28% 78%, 0 0;
  }
  49% {
    background-position: 36% 68%, 74% 34%, 0 0;
  }
  76% {
    background-position: 72% 52%, 18% 46%, 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .drop-zone {
    animation-duration: 150s;
  }

  .drop-zone-ants rect {
    animation: drop-zone-ants 1.8s linear infinite;
  }

  .drop-zone:not(.has-file)::before {
    animation-duration: 150s;
  }
}

.drop-zone h3,
.drop-zone p {
  margin: 0;
}

.drop-zone h3 {
  align-self: end;
}

.drop-zone p {
  align-self: start;
  max-width: 34rem;
}

.drop-copy-phone {
  display: none;
}

.fake-file {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-3);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  line-height: 1;
  text-align: center;
  background: rgb(var(--overlay-rgb) / 0.04);
  border: 0;
  border-radius: var(--radius-md);
  transition: color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

/* File badge at the end of the file-status row. */
.fake-file::after {
  content: "";
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.3rem;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%202.75h8.5L19%207.25V21.25H6z'/%3E%3Cpath%20d='M14.5%202.75v5h5'/%3E%3Cpath%20d='M9%2012h7M9%2015h7M9%2018h4.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%202.75h8.5L19%207.25V21.25H6z'/%3E%3Cpath%20d='M14.5%202.75v5h5'/%3E%3Cpath%20d='M9%2012h7M9%2015h7M9%2018h4.5'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.92;
  transform: translateY(-0.02em);
}

/* Rejected intake (unsupported / empty / unreadable file) */
.fake-file.is-rejected {
  color: var(--danger-strong);
  background: rgb(var(--danger-rgb) / 0.12);
  box-shadow: inset 0 0 0 1px rgb(var(--danger-rgb) / 0.45);
}

.drawing-assignment-panel {
  width: 100%;
  margin-top: var(--space-4);
  padding: clamp(0.9rem, 1.4vw, 1.2rem);
  background: var(--surface);
  border: 1px solid rgb(var(--text-muted-rgb) / 0.24);
  border-radius: var(--panel-radius);
}

.drawing-assignment-panel[hidden] {
  display: none;
}

.drawing-assignment-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.drawing-assignment-head h3,
.drawing-assignment-panel p {
  margin: 0;
}

#drawingAssignmentStatus {
  color: var(--text-muted);
  font-size: 0.88rem;
  font-weight: 600;
}

.drawing-assignment-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.drawing-assignment-row {
  display: grid;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-3);
  background: rgb(var(--overlay-rgb) / 0.035);
  border: 1px solid rgb(var(--overlay-rgb) / 0.075);
  border-radius: var(--radius-sm);
}

.drawing-assignment-row {
  grid-template-columns: auto minmax(0, 1.1fr) auto minmax(10rem, 1.3fr);
}

.drawing-assignment-row.is-active {
  background: rgb(var(--accent-wash-rgb) / 0.11);
  border-color: rgb(var(--accent-rgb) / 0.36);
}

.drawing-assignment-activate {
  white-space: nowrap;
}

.drawing-assignment-source,
.drawing-assignment-arrow {
  min-width: 0;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.25;
}

.drawing-assignment-source {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drawing-assignment-arrow {
  color: var(--text-muted);
}

.drawing-assignment-row select {
  width: 100%;
  min-width: 0;
}

.product-group-manager {
  display: grid;
  grid-template-columns: minmax(14rem, 0.85fr) minmax(0, 1.6fr);
  gap: var(--space-3);
  min-width: 0;
}

.product-group-orders,
.product-group-drawings {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  min-width: 0;
}

.product-group-order {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  color: var(--text);
  text-align: left;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.product-group-order span {
  overflow: hidden;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-group-order small {
  color: var(--text-muted);
  white-space: nowrap;
}

.product-group-order.is-active {
  color: var(--accent-strong);
  background: rgb(var(--accent-wash-rgb) / 0.1);
  border-color: rgb(var(--accent-rgb) / 0.55);
}

.product-group-picker {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.product-group-picker legend {
  max-width: 100%;
  padding-inline: var(--space-1);
  overflow: hidden;
  color: var(--text);
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-group-picker > p,
.product-group-empty {
  color: var(--text-muted);
  font-size: 0.82rem;
}

.product-group-drawing {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2);
  align-items: center;
  min-height: 44px;
  padding: var(--space-2);
  color: var(--text);
  background: var(--surface-muted);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.product-group-drawing.is-selected {
  background: rgb(var(--accent-wash-rgb) / 0.09);
  border-color: rgb(var(--accent-rgb) / 0.42);
}

.product-group-drawing input {
  width: 1.2rem;
  height: 1.2rem;
  margin: 0;
  accent-color: var(--accent);
}

.product-group-drawing span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.product-group-picker > [data-product-group-review] {
  justify-self: end;
  min-height: 44px;
}

.page-match-screen.is-active {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: 100%;
  max-width: none;
  min-height: 0;
  margin-inline: 0;
}

.workspace[data-has~="page-match-screen"]:not(#has-pad) {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: calc(100vh - var(--workflow-offset) - var(--bottom-action-space));
  min-height: 0;
  overflow: hidden;
  padding:
    clamp(1rem, 2vh, 2rem)
    var(--workspace-gutter)
    var(--space-4)
    var(--workspace-gutter);
}

.workspace[data-has~="page-match-screen"]:not(#has-pad) .topbar {
  width: 100%;
  max-width: none;
}

.workspace[data-has~="page-match-screen"]:not(#has-pad) .page-match-header {
  margin-top: 0;
  margin-bottom: clamp(0.75rem, 1.3vh, 1.25rem);
}

.page-match-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
  gap: var(--space-4);
  min-height: 0;
  height: 100%;
}

.page-match-board,
.page-match-panes,
.page-match-pane,
.page-match-frame {
  min-height: 0;
}

.page-match-panes {
  height: 100%;
}

.page-match-frame {
  display: grid;
  place-items: center;
  grid-template-rows: minmax(0, 1fr);
  cursor: default;
}

.page-match-frame img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  background: var(--gloss);
}

.page-match-panel {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  min-height: 0;
  height: 100%;
  padding: clamp(1rem, 1.5vw, 1.4rem);
  overflow: auto;
  color: var(--text);
  background:
    radial-gradient(circle at 26% 6%, rgb(var(--accent-wash-rgb) / 0.16), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, color-mix(in srgb, var(--accent-wash) 16%, var(--surface)) 92%, transparent), rgb(var(--surface-rgb) / 0.96));
  border: 1px solid rgb(var(--accent-rgb) / 0.36);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow-panel);
}

.page-match-panel h3,
.page-match-panel p {
  margin: 0;
}

.page-match-panel .page-match-shared-actions {
  flex: 0 0 auto;
  justify-content: flex-start;
  margin: 0;
}

.page-match-panel h3 {
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  line-height: 1.15;
}

.page-match-panel p {
  color: var(--text-muted);
  font-size: 0.88rem;
  font-weight: 650;
  line-height: 1.5;
}

.page-match-direction {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.page-match-direction-button {
  box-sizing: border-box;
  width: 100%;
  padding: var(--space-2) var(--space-2);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: uppercase;
  white-space: normal;
  background: rgb(var(--overlay-rgb) / 0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: var(--cursor-pointer);
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease;
}

.page-match-direction-button.is-active {
  color: var(--text-strong);
  background: rgb(var(--accent-wash-rgb) / 0.28);
  border-color: rgb(var(--accent-rgb) / 0.75);
}

.page-match-select-label {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  color: var(--text);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.page-match-select-label select {
  width: 100%;
  min-width: 0;
}

.page-match-note strong {
  color: var(--text);
}

/* Desktop: the match panel is a compact bar ABOVE the previews so the two
   drawing visuals get the full workspace width — pairing decisions are made by
   eye and the sheets were too small beside a 24rem column of controls. */
@media (min-width: 1181px) {
  .page-match-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }

  .page-match-panel {
    grid-row: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    height: auto;
    padding: var(--space-2) var(--space-3);
  }

  .page-match-board {
    grid-row: 2;
  }

  .page-match-panel .screen-label {
    display: none; /* the h3 ("Your page 1") already names the context */
  }

  .page-match-panel h3 {
    font-size: 1rem;
    white-space: nowrap;
  }

  .page-match-direction {
    grid-template-columns: repeat(2, auto);
  }

  .page-match-direction-button {
    width: auto;
    padding: var(--space-1) var(--space-2);
  }

  .page-match-select-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    white-space: nowrap;
  }

  .page-match-select-label select {
    width: auto;
    min-width: 16rem;
  }

  .page-match-panel p {
    flex: 1 1 16rem;
    font-size: 0.75rem;
    line-height: 1.35;
  }
}

@media (max-width: 1180px) {
  .workspace[data-has~="page-match-screen"]:not(#has-pad) {
    height: auto;
    min-height: calc(100vh - var(--workflow-offset));
    overflow: visible;
  }

  .page-match-layout {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
  }

  .page-match-panes {
    min-height: min(68vh, 36rem);
  }

  .page-match-panel {
    height: auto;
  }
}

@media (max-width: 640px) {
  .drawing-assignment-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
  }

  .drawing-assignment-arrow {
    display: none;
  }

  .product-group-manager {
    grid-template-columns: minmax(0, 1fr);
  }

  .product-group-picker > [data-product-group-review] {
    width: 100%;
  }
}

.empty-sheet-state {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 100%;
  padding: var(--space-4);
  color: var(--paper-text);
  text-align: center;
  background: var(--paper);
}

.empty-sheet-state.idle-screensaver {
  --idle-purple-rgb: var(--complete-rgb);
  --idle-purple-soft-rgb: var(--complete-strong-rgb);

  overflow: hidden;
  isolation: isolate;
  color: var(--text);
  background:
    radial-gradient(circle at 18% 18%, rgb(var(--idle-purple-soft-rgb) / 0.06), transparent 30%),
    radial-gradient(circle at 82% 72%, rgb(var(--accent-wash-rgb) / 0.065), transparent 34%),
    linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
  background-size: 150% 150%, 160% 160%, 100% 100%;
  background-position: 10% 10%, 88% 74%, 50% 50%;
  border-radius: inherit;
  animation: idle-screensaver-gradient-drift 170s ease-in-out infinite;
}

.idle-screensaver::before,
.idle-screensaver::after,
.idle-screensaver-grid {
  position: absolute;
  pointer-events: none;
}

.idle-screensaver::before {
  content: "";
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgb(var(--accent-wash-rgb) / 0.07), transparent 18%, transparent 82%, rgb(var(--idle-purple-soft-rgb) / 0.06)),
    linear-gradient(180deg, rgb(var(--overlay-rgb) / 0.025), transparent 34%, transparent 72%, rgb(var(--accent-wash-rgb) / 0.035));
  opacity: 0.26;
}

.idle-screensaver::after {
  display: none;
}

.idle-screensaver-grid {
  display: none;
}

.idle-screensaver-message {
  position: relative;
  z-index: 3;
  width: min(calc(100% - 3rem), 42rem);
}

.idle-screensaver .idle-screensaver-message strong {
  color: var(--text);
  text-shadow:
    0 0 16px rgb(var(--accent-rgb) / 0.24),
    0 0 30px rgb(var(--idle-purple-soft-rgb) / 0.16);
}

.idle-screensaver .idle-screensaver-message span {
  color: rgb(var(--text-rgb) / 0.82);
}

@media (max-width: 640px) {
  .drop-zone:not(.has-file)::after {
    display: none;
  }

  .empty-sheet-state.idle-screensaver {
    animation-duration: 150s;
  }
}

@keyframes idle-screensaver-gradient-drift {
  0%,
  100% {
    background-position: 10% 10%, 88% 74%, 50% 50%;
  }
  38% {
    background-position: 70% 24%, 18% 86%, 50% 50%;
  }
  67% {
    background-position: 32% 78%, 76% 18%, 50% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .idle-screensaver::after,
  .idle-screensaver-grid {
    animation: none;
  }

  .empty-sheet-state.idle-screensaver {
    animation-duration: 220s;
  }
}

.empty-sheet-message {
  display: grid;
  width: min(calc(100% - 3rem), 44rem);
  gap: var(--space-2);
  justify-self: center;
  justify-items: center;
  margin-inline: auto;
  text-align: center;
}

.empty-sheet-message strong {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  min-height: 2.3em;
  color: var(--paper-muted);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.2rem, 1.65vw, 1.75rem);
  line-height: 1.12;
  text-align: center;
  text-wrap: balance;
}

.empty-sheet-message span {
  width: 100%;
  margin: 0 auto;
  color: var(--paper-text);
  text-align: center;
  font-family: Arial, "Helvetica Neue", sans-serif;
  font-size: clamp(0.85rem, 1vw, 1.05rem);
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.sheet-frame > .empty-sheet-state {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: auto;
  height: auto;
  min-height: 0;
}

.sheet-frame:has(> .empty-sheet-state) {
  display: block;
}

.drawing-pane:has(.empty-sheet-state) {
  border-color: transparent;
  box-shadow: none;
  outline: none;
}

.drawing-pane:has(.empty-sheet-state) header {
  border-bottom-color: transparent;
}

.drawing-pane:has(.empty-sheet-state) .sheet-frame,
.drawing-pane:has(.empty-sheet-state) .review-sheet-frame,
#stampScreen .stamp-frame:has(.empty-sheet-state),
#saveScreen .save-preview-frame:has(.empty-sheet-state) {
  border-color: transparent;
  box-shadow: none;
  outline: none;
}

#reviewScreen .drawing-pane:has(.empty-sheet-state) .empty-sheet-state {
  place-items: center;
}

#reviewScreen .drawing-pane:has(.empty-sheet-state) .empty-sheet-message {
  justify-self: center;
  margin-inline: auto;
}

.empty-copy {
  max-width: 28rem;
  margin: 0 auto;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.45;
}

.file-button,
.file-clear-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: start;
  gap: var(--space-2);
  line-height: 1;
  min-height: 2.15rem;
  width: fit-content;
  max-width: 100%;
  padding-inline: var(--space-4);
  white-space: nowrap;
}

.file-button span:last-child,
.file-clear-button span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Clear buttons keep a fixed size so they never reflow with the loaded
   filename or a narrower layout. */
.file-clear-button {
  flex: 0 0 auto;
  width: 6.6rem;
  justify-self: start;
}

.ghost-button.file-button {
  color: var(--accent-strong);
  background: rgb(var(--accent-wash-rgb) / 0.1);
  border: 1px solid rgb(var(--accent-rgb) / 0.3);
}

.ghost-button.file-button:hover {
  color: var(--on-colour-button);
  background: var(--accent-button);
  border-color: var(--accent);
}

.ghost-button.file-button[data-file-button="manufacture"] {
  color: rgb(var(--complete-rgb));
  background: rgb(var(--complete-wash-rgb) / 0.12);
  border-color: rgb(var(--complete-rgb) / 0.38);
}

.ghost-button.file-button[data-file-button="manufacture"]:hover {
  color: var(--on-colour-button);
  background: rgb(var(--complete-rgb));
  border-color: rgb(var(--complete-rgb));
}

.load-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
  width: auto;
  max-width: none;
  margin: 0;
  /* Submit/Clear stay attached to the viewport while the cards scroll. */
  position: fixed;
  right: calc(var(--page-gutter) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  z-index: 58;
}

.load-actions .primary-button,
.load-actions .ghost-button {
  box-shadow: 0 10px 26px rgb(var(--shadow-rgb) / 0.45);
}

.load-actions p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-queue-status {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  gap: 0.45rem;
  padding: 0.35rem 0.65rem;
  color: var(--complete-ink);
  font: 800 0.66rem/1 var(--font-ui);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  background: linear-gradient(180deg, rgb(var(--complete-rgb) / 0.78), rgb(var(--complete-rgb) / 0.48));
  border: 1px solid rgb(var(--complete-border-rgb) / 0.72);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-control);
}

.workflow-queue-status svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2;
}

.workflow-queue-status strong {
  min-width: 2.4rem;
  padding: 0.28rem 0.4rem;
  text-align: center;
  background: rgb(var(--well-rgb) / 0.22);
  border-radius: 999px;
}

.load-decision-panel {
  position: fixed;
  inset: 0;
  z-index: 1900;
  display: grid;
  place-items: center;
  margin: 0;
  padding:
    calc(1rem + env(safe-area-inset-top, 0px))
    calc(1rem + env(safe-area-inset-right, 0px))
    calc(1rem + env(safe-area-inset-bottom, 0px))
    calc(1rem + env(safe-area-inset-left, 0px));
  background: rgb(var(--bg-strong-rgb) / 0.78);
  backdrop-filter: blur(8px);
}

.load-decision-panel[hidden] {
  display: none;
}

.load-decision-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: min(100%, 42rem);
  padding: clamp(1.25rem, 3vw, 1.8rem);
  background:
    linear-gradient(145deg, rgb(var(--accent-wash-rgb) / 0.1), transparent 58%),
    var(--surface);
  border: 1px solid rgb(var(--accent-rgb) / 0.5);
  border-top-color: rgb(var(--accent-border-rgb) / 0.72);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow-panel), inset 0 1px 0 rgb(var(--gloss-rgb) / 0.08);
}

.mobile-slider-label {
  display: none;
}

.load-decision-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.56;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 0.3) 38%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 0.3) 38%, #000 100%);
}

.load-decision-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgb(var(--accent-wash-rgb) / 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--accent-wash-rgb) / 0.055) 1px, transparent 1px),
    radial-gradient(circle at 82% 36%, rgb(var(--accent-wash-rgb) / 0.2), transparent 48%);
  background-size: 22px 22px, 22px 22px, auto;
}

.load-decision-scene canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.load-decision-copy,
.load-decision-actions {
  position: relative;
  z-index: 1;
}

.load-decision-copy {
  display: grid;
  gap: 0.8rem;
  min-width: 0;
}

.load-decision-heading {
  display: grid;
  gap: 0.32rem;
}

.load-decision-copy h3,
.load-decision-copy p {
  margin: 0;
}

.load-decision-copy h3 {
  max-width: 24ch;
  font-size: clamp(1.1rem, 2.4vw, 1.35rem);
  line-height: 1.12;
}

.load-decision-copy p:last-child {
  color: var(--text-muted);
  max-width: 56ch;
  font-size: 0.86rem;
  line-height: 1.55;
}

.load-decision-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.load-decision-actions > button {
  width: 100%;
  min-width: 0;
  min-height: 44px;
}

@media (prefers-reduced-motion: reduce) {
  .load-decision-scene {
    opacity: 0.42;
  }

  .load-decision-scene::after {
    content: "";
    position: absolute;
    inset: 18% 5% 18% 48%;
    background: url("assets/brand/appvlr-mark-mask.png") center / contain no-repeat;
    opacity: 0.20;
  }
}

.workflow-queue-status.is-complete {
  background: linear-gradient(180deg, rgb(var(--success-rgb) / 0.82), rgb(var(--success-rgb) / 0.5));
  color: var(--success-ink);
  border-color: rgb(var(--success-rgb) / 0.75);
}

.loading-panel {
  --preflight-purple-rgb: var(--complete-rgb);
  --preflight-purple-soft-rgb: var(--complete-strong-rgb);
  position: relative;
  overflow: hidden;
  width: min(100%, 48rem);
  margin-top: clamp(0.75rem, 3vh, 2rem);
  padding: clamp(1.65rem, 2.4vw, 2.15rem);
  background:
    linear-gradient(180deg, rgb(var(--overlay-rgb) / 0.055), transparent 38%),
    radial-gradient(100% 70% at 58% 0%, rgb(var(--preflight-purple-rgb) / 0.16), transparent 68%),
    linear-gradient(135deg, rgb(var(--accent-wash-rgb) / 0.1), transparent 42%),
    var(--surface);
  border: 1px solid rgb(var(--accent-border-rgb) / 0.22);
  border-radius: var(--panel-radius);
  box-shadow:
    0 26px 80px rgb(var(--shadow-rgb) / 0.38),
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.07);
}

.loading-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--preflight-purple-soft-rgb) / 0.82), transparent);
  pointer-events: none;
}

.loading-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.loading-mark {
  display: inline-block;
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 auto;
  background:
    radial-gradient(circle at center, var(--surface) 49%, transparent 51%),
    conic-gradient(from 25deg, rgb(var(--preflight-purple-rgb) / 0.12), rgb(var(--preflight-purple-rgb) / 0.96), rgb(var(--preflight-purple-soft-rgb) / 0.9), rgb(var(--preflight-purple-rgb) / 0.12));
  border-radius: 999px;
  box-shadow:
    0 0 0 1px rgb(var(--preflight-purple-soft-rgb) / 0.2),
    0 0 26px rgb(var(--preflight-purple-rgb) / 0.3);
  animation: spin 1050ms linear infinite;
}

.loading-panel h3 {
  margin: 0;
  font-size: clamp(1.4rem, 1.9vw, 2rem);
  line-height: 1.05;
}

.loading-panel #analysisStatus {
  position: relative;
  z-index: 1;
  margin: var(--space-2) 0 0;
  color: rgb(var(--text-rgb) / 0.78);
  font-size: clamp(0.98rem, 1.7vw, 1.18rem);
  line-height: 1.5;
}

.loading-steps {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.8rem, 2.2vw, 1rem);
  margin-top: var(--space-5);
}

.loading-steps span {
  position: relative;
  display: grid;
  min-height: 3.4rem;
  place-items: center;
  padding: var(--space-3);
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  background:
    linear-gradient(180deg, rgb(var(--overlay-rgb) / 0.075), transparent),
    rgb(var(--preflight-purple-rgb) / 0.09);
  border: 1px solid rgb(var(--preflight-purple-soft-rgb) / 0.16);
  border-radius: var(--radius-md);
  box-shadow:
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.08),
    0 10px 22px rgb(var(--preflight-purple-rgb) / 0.08);
  overflow: hidden;
  isolation: isolate;
}

.loading-steps span::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgb(var(--preflight-purple-soft-rgb) / 0.18) 18%,
      rgb(var(--preflight-purple-soft-rgb) / 0.7) 50%,
      rgb(var(--preflight-purple-soft-rgb) / 0.18) 82%,
      transparent
    );
  opacity: 0;
  transform: translateX(-105%);
}

.loading-steps span.is-done {
  color: var(--text);
  background:
    linear-gradient(180deg, rgb(var(--overlay-rgb) / 0.08), transparent),
    rgb(var(--preflight-purple-rgb) / 0.32);
  border-color: rgb(var(--preflight-purple-soft-rgb) / 0.3);
}

.loading-steps span.is-active {
  color: var(--text);
  background:
    linear-gradient(180deg, rgb(var(--overlay-rgb) / 0.08), transparent),
    rgb(var(--preflight-purple-rgb) / 0.24);
  border-color: rgb(var(--preflight-purple-soft-rgb) / 0.56);
  box-shadow:
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.08),
    0 0 0 1px rgb(var(--preflight-purple-soft-rgb) / 0.18),
    0 14px 30px rgb(var(--preflight-purple-rgb) / 0.22);
}

.loading-steps span.is-active::before {
  opacity: 1;
  animation: loading-step-scan 1.25s ease-in-out infinite;
}

/* Message card. One look for every message: the .permission-dialog-card
   (--panel, 1px --border, 16px radius), the same panel the header MENU uses.
   No tone stripe. .analysis-error and the Load notices are its inline form: a
   flat field tinted with the tone, no line, no shadow, a sentence-case title
   in full ink (taste skill v2: no accent stripes, outlined boxes or tracked
   caps; surfaces separate by a step in tone). The blocking message dialog
   floats, so it keeps its border and shadow and takes a lighter tint. */
.permission-dialog-card { --message-tone-rgb: var(--accent-rgb); }
.permission-dialog-card[data-tone] {
  background: color-mix(in srgb, rgb(var(--message-tone-rgb)) 8%, var(--panel));
}
.permission-dialog-card[data-tone="error"] { --message-tone-rgb: var(--danger-rgb); }
.permission-dialog-card[data-tone="warning"] { --message-tone-rgb: var(--warning-rgb); }
.permission-dialog-card[data-tone="success"] { --message-tone-rgb: var(--success-rgb); }

.permission-dialog-card.permission-dialog-card--inline {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  width: 100%;
  max-width: 44rem;
  margin: var(--space-4) auto 0;
  padding: var(--space-4) var(--space-5);
  box-sizing: border-box;
  background: color-mix(in srgb, rgb(var(--message-tone-rgb)) 13%, var(--panel));
  border: 0;
  box-shadow: none;
  animation: none;
}

.permission-dialog-card.permission-dialog-card--inline p {
  margin: 0;
}

.permission-dialog-card.permission-dialog-card--inline .message-title {
  margin: 0;
  color: var(--text-strong);
  font-family: var(--font-ui);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.3;
  text-transform: none;
}

/* The message is a sentence in full ink, one step smaller than the title. */
.permission-dialog-card.permission-dialog-card--inline .message-text {
  margin: var(--space-1) 0 0;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.5;
  text-transform: none;
  overflow-wrap: anywhere;
}

.permission-dialog-card.permission-dialog-card--inline .screen-label {
  margin: 0 0 var(--space-1);
}

.permission-dialog-card.permission-dialog-card--inline .message-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-end;
}

.load-notice-host {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
}

.load-grid > .load-notice-host {
  grid-column: 1 / -1;
}

/* The failed review is the message card alone, not a card inside the loading
   frame. */
#analysisScreen.has-error .loading-panel {
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

#analysisScreen.has-error .loading-panel::before,
#analysisScreen.has-error .loading-panel::after {
  display: none;
}

.load-notice-host[hidden] {
  display: none;
}

/* Short per-slot message, inside the slot card it is about (the full notice
   can sit below the first screen on a phone). */
.slot-note {
  flex: 1 0 100%;
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
  color: var(--danger-strong);
}

.slot-note[data-tone="warning"] { color: var(--warning-text); }
.slot-note[data-tone="info"] { color: var(--muted, var(--text-soft, inherit)); }
.slot-note[hidden] { display: none; }

/* A disabled Review button passes the tap to its wrapper, which says why. */
#submitDrawingsButton:disabled { pointer-events: none; }

.load-notice-host .permission-dialog-card.permission-dialog-card--inline {
  margin: 0;
  max-width: none;
}

.settings-status,
.supplied-source-status,
.comment-editor-status,
.saved-review-restore-notice,
.stamp-library-status {
  font-size: 0.8rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* Same look as the inline message card, warning tone. */
.saved-review-restore-notice {
  padding: var(--space-4) var(--space-5);
  color: var(--text);
  background: color-mix(in srgb, rgb(var(--warning-rgb)) 13%, var(--panel));
  border: 0;
  border-radius: var(--panel-radius);
  box-shadow: none;
}

.stamp-library-status {
  margin: var(--space-2) 0 0;
  color: var(--text-muted);
}

.stamp-library-status.is-error {
  color: var(--danger-text);
}

/* A failed analysis shows the message card alone: the progress head, step
   chips and Cancel button belong to a running review. */
#analysisScreen.has-error .loading-head,
#analysisScreen.has-error .loading-steps,
#analysisScreen.has-error #cancelAnalysisButton {
  display: none;
}

#analysisScreen.has-error #analysisStatus {
  display: none;
}

@media (max-width: 640px) {
  .permission-dialog-card.permission-dialog-card--inline {
    grid-template-columns: minmax(0, 1fr);
  }

  .permission-dialog-card.permission-dialog-card--inline .message-actions {
    flex-wrap: wrap;
    justify-content: stretch;
  }

  .permission-dialog-card.permission-dialog-card--inline .message-actions > button {
    flex: 1 1 auto;
    min-width: min(100%, 7.5rem);
    white-space: normal;
  }
}

/* Rejected file line on Load: wrap the text, never cut it off. */
#loadScreen .drop-zone > .fake-file.is-rejected,
#loadScreen .supplied-files-panel > .fake-file.is-rejected {
  display: block;
  height: auto;
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

#loadScreen .drop-zone > .fake-file.is-rejected::after {
  display: none;
}

#analysisScreen.has-error #analysisStatus::after {
  content: none;
  animation: none;
}

#cancelAnalysisButton {
  display: block;
  margin-top: var(--space-3);
  margin-left: auto;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes orb-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 currentColor;
    opacity: 0.78;
  }

  50% {
    box-shadow: 0 0 0 0.42rem transparent;
    opacity: 1;
  }
}

.review-layout {
  --side-control-width: 20rem;
  transition: grid-template-columns 180ms ease;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--side-control-width);
  grid-template-rows: minmax(0, 1fr);
  gap: var(--page-gutter);
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  align-items: stretch;
}

/* The Review rail scrolls independently from the drawing panes. Keep its blue
   bottom fade pinned to the visible rail edge, instead of letting the fade move
   below the viewport with Summary or Drawing Details content. This layer is
   visual only and never intercepts scrolling, clicks, or form controls. */
#reviewScreen .review-layout::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 120;
  width: var(--side-control-width);
  height: clamp(3rem, 8vh, 5rem);
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgb(var(--accent-wash-rgb) / 0.22) 100%);
  border-radius: 0 0 var(--panel-radius) var(--panel-radius);
}

#reviewScreen .review-layout:has(.findings-panel.is-collapsed)::after {
  display: none;
}

@media (max-width: 640px) {
  #reviewScreen .review-layout::after {
    display: none;
  }
}

/* Keep the screen scope above later responsive grid-track rules. */
#reviewScreen .review-layout:has(.findings-panel.is-collapsed) {
  grid-template-columns: minmax(0, 1fr) 0;
}

#reviewScreen .review-layout:has(.findings-panel.is-collapsed) > .panel-visibility-toggle {
  right: 0;
}

.review-layout:has(.findings-panel.is-collapsed) > .panel-resize-handle,
.stamp-layout:not(:has(.side-panel-wrap > .stamp-controls:not(.is-collapsed))) > .panel-resize-handle {
  display: none;
}

/* Each panel hides on its own; the side column only collapses to full-width
   when BOTH the stamp and comment panels are hidden. */
.stamp-controls.is-collapsed {
  display: none;
}

.stamp-layout:not(:has(.side-panel-wrap > .stamp-controls:not(.is-collapsed))) {
  grid-template-columns: minmax(0, 1fr);
}

.stamp-layout:not(:has(.side-panel-wrap > .stamp-controls:not(.is-collapsed))) .side-panel-wrap {
  display: none;
}

.drawing-board {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--space-3);
  min-width: 0;
  min-height: 0;
}

/* Desktop only. A bottom-tethered ISSUE pill hangs below the sheet. Keep that
   pill above Review again / Sheet manager. Phone ≤640 keeps its own tray. */
@media (min-width: 641px) {
  #reviewScreen .drawing-board {
    --review-issue-action-gutter: calc(2.6rem + 4mm);
    gap: var(--review-issue-action-gutter);
  }
}

.drawing-panes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  height: 100%;
  min-height: 0;
  align-items: stretch;
  grid-auto-rows: minmax(0, 1fr);
}

.drawing-panes[data-review-mode="requirements"][data-layout="single-raeco"],
.drawing-panes[data-review-mode="requirements"][data-layout="single-manufacture"] {
  grid-template-columns: minmax(0, 1fr);
}

.drawing-panes[data-review-mode="requirements"][data-layout="single-raeco"] .drawing-pane:has(#manufactureSheet),
.drawing-panes[data-review-mode="requirements"][data-layout="single-manufacture"] .drawing-pane:has(#raecoSheet) {
  display: none;
}

.drawing-panes[data-review-mode="requirements"] .drawing-pane:has(#manufactureSheet) .pane-header-controls {
  display: none;
}

/* PO review keeps the same findings-panel component family as a normal review,
   but the PO-vs-drawing value pairs want a little more room, so the side column
   is slightly wider in requirements mode only (the normal review is untouched).
   A user drag still overrides this via the inline --side-control-width. */
.review-layout:has(.findings-panel[data-review-mode="requirements"]) {
  --side-control-width: 23rem;
}

.drawing-pane {
  position: relative;
  display: grid;
  /* minmax(0, 1fr) column: a long drawing filename in the pane header must
     never widen the track past the pane, or the sheet frame stretches with it
     and overflows the phone screen. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-color: transparent;
  border-radius: var(--panel-radius);
  box-shadow: none;
  outline: none;
}

.drawing-pane .sheet-frame {
  border-radius: 0 0 var(--panel-radius) var(--panel-radius);
}

.review-sheet-frame,
.review-sheet-frame.sheet-frame {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  /* The pane opens a larger/zoomable view; zoomed-in panes switch to grab. */
  cursor: var(--cursor-zoom);
}

/* The frame follows the loaded PDF page ratio. `object-fit: contain` remains the
   coordinate contract for overlays, but the normal Review frame no longer
   creates workspace above or below the page. */
#reviewScreen .review-sheet-frame:not(.is-focused-crop),
#reviewScreen .review-sheet-frame:not(.is-focused-crop) .sheet-viewport {
  background: var(--bg-strong);
}

#reviewScreen .review-sheet-frame:not(.is-focused-crop) .rendered-sheet {
  background: transparent;
}

@media (min-width: 1181px) {
  /* FULL-WIDTH PDF PANEL CONTRACT

     Every normal Review card owns its complete grid column. The frame height
     comes from the loaded PDF ratio in --sheet-aspect. This is the only geometry
     that lets an undistorted PDF meet the top, right, bottom, and left edges at
     once. Do not force equal frame heights, cap the frame to the remaining
     browser height, or centre a narrower frame. Those approaches create false
     paper/black gutters. Do not use object-fit: cover or fill: cover crops
     drawing evidence and fill stretches it. Requirements mode keeps its own
     single-sheet height budget below. */
  #reviewScreen .drawing-panes:not([data-review-mode="requirements"]) {
    height: auto;
    align-self: start;
    align-items: start;
    grid-auto-rows: auto;
  }

  #reviewScreen .drawing-panes:not([data-review-mode="requirements"]) .drawing-pane {
    height: auto;
    align-self: start;
    grid-template-rows: auto auto;
  }

  #reviewScreen .drawing-panes:not([data-review-mode="requirements"]) .review-sheet-frame,
  #reviewScreen .drawing-panes:not([data-review-mode="requirements"]) .review-sheet-frame.sheet-frame {
    width: 100%;
    height: auto;
    aspect-ratio: var(--sheet-aspect, 1.3889);
  }
}

.review-sheet-frame.is-focused-crop {
  display: grid;
  padding: 0;
  background: var(--paper);
}

.focused-crop-shell {
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 0;
  place-items: stretch;
  overflow: hidden;
  background: var(--paper);
  border-radius: var(--radius-sm);
}

.focused-crop-svg {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  background: var(--paper);
}

.focused-crop-svg.severity-high .issue-crop-box {
  stroke: var(--danger);
}

.focused-crop-svg.severity-med .issue-crop-box,
.issue-crop-svg.severity-med .issue-crop-box {
  stroke: var(--warning);
}

.focused-crop-svg.severity-unsure .issue-crop-box,
.issue-crop-svg.severity-unsure .issue-crop-box {
  stroke: color-mix(in srgb, var(--ink-dark) 44%, var(--paper));
}

.expand-sheet-button {
  position: absolute;
  right: var(--space-2);
  bottom: var(--space-2);
  z-index: 110;
  display: grid;
  width: 2rem;
  height: 2rem;
  padding: 0;
  place-items: center;
  color: var(--text);
  background:
    linear-gradient(180deg, rgb(var(--overlay-rgb) / 0.1), rgb(var(--overlay-rgb) / 0.025)),
    rgb(var(--bg-rgb) / 0.84);
  border: 1px solid rgb(var(--overlay-rgb) / 0.18);
  border-radius: var(--radius-md);
  opacity: 0.72;
  box-shadow:
    0 14px 38px rgb(var(--shadow-rgb) / 0.38),
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.16),
    inset 0 -2px 0 rgb(var(--shade-rgb) / 0.18);
  backdrop-filter: blur(8px);
  cursor: var(--cursor-zoom);
  transition: opacity 160ms ease, background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 140ms ease;
}

.drawing-pane:hover .expand-sheet-button,
.review-sheet-frame:focus-visible ~ .expand-sheet-button {
  opacity: 0.92;
}

.expand-sheet-button:hover,
.expand-sheet-button:focus-visible {
  color: var(--on-colour-button);
  background:
    linear-gradient(180deg, rgb(var(--overlay-rgb) / 0.2), rgb(var(--overlay-rgb) / 0.04)),
    rgb(var(--accent-rgb) / 0.9);
  opacity: 1;
  box-shadow:
    0 16px 42px rgb(var(--accent-rgb) / 0.24),
    0 14px 38px rgb(var(--shadow-rgb) / 0.42),
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.22),
    inset 0 -2px 0 rgb(var(--shade-rgb) / 0.18);
  transform: translateY(-1px);
}

.expand-sheet-button svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.1;
}

/* Inline zoom controls on each review pane (bottom-left, opposite the expand button) */
.review-zoom-control {
  position: absolute;
  left: var(--space-2);
  bottom: var(--space-2);
  z-index: 100;
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.18rem;
  background:
    linear-gradient(180deg, rgb(var(--overlay-rgb) / 0.1), rgb(var(--overlay-rgb) / 0.025)),
    rgb(var(--bg-rgb) / 0.84);
  border: 1px solid rgb(var(--overlay-rgb) / 0.18);
  border-radius: 999px;
  opacity: 0.72;
  box-shadow:
    0 14px 38px rgb(var(--shadow-rgb) / 0.38),
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.15),
    inset 0 -2px 0 rgb(var(--shade-rgb) / 0.18);
  backdrop-filter: blur(8px);
  transition: opacity 140ms ease, box-shadow 160ms ease, transform 140ms ease;
}

.drawing-pane:hover .review-zoom-control,
.review-zoom-control:focus-within,
.review-sheet-frame.is-zoomed ~ .review-zoom-control {
  opacity: 1;
}

.review-zoom-button {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  background: rgb(var(--overlay-rgb) / 0.08);
  border: 1px solid rgb(var(--overlay-rgb) / 0.18);
  border-radius: 50%;
  cursor: var(--cursor-pointer);
  box-shadow: inset 0 1px 0 rgb(var(--gloss-rgb) / 0.1);
}

.review-zoom-button[data-review-zoom-dir="in"],
#stampZoomIn,
#savePreviewZoomIn,
#fullscreenZoomIn {
  cursor: var(--cursor-zoom-in);
}

.review-zoom-button[data-review-zoom-dir="out"],
#stampZoomOut,
#savePreviewZoomOut,
#fullscreenZoomOut {
  cursor: var(--cursor-zoom-out);
}

.review-zoom-button[data-review-zoom-dir="in"],
.review-zoom-button[data-review-zoom-dir="out"],
#stampZoomIn,
#stampZoomOut,
#savePreviewZoomIn,
#savePreviewZoomOut,
#fullscreenZoomIn,
#fullscreenZoomOut {
  color: var(--accent-strong);
}

.review-zoom-button:hover:not(:disabled),
.review-zoom-button:focus-visible {
  color: var(--accent-strong);
  background: rgb(var(--accent-rgb) / 0.9);
  box-shadow:
    0 6px 14px rgb(var(--accent-rgb) / 0.24),
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.2);
}

.review-zoom-button[data-review-zoom-dir="in"]:hover:not(:disabled),
.review-zoom-button[data-review-zoom-dir="out"]:hover:not(:disabled),
#stampZoomIn:hover:not(:disabled),
#stampZoomOut:hover:not(:disabled),
#savePreviewZoomIn:hover:not(:disabled),
#savePreviewZoomOut:hover:not(:disabled) {
  color: var(--accent-strong);
  background: rgb(var(--gloss-rgb) / 0.92);
  border-color: rgb(var(--accent-rgb) / 0.55);
}

.review-zoom-button:disabled {
  opacity: 0.4;
  cursor: default;
}

.review-zoom-button[data-review-zoom-dir="out"]:disabled,
#stampZoomOut:disabled,
#savePreviewZoomOut:disabled,
#fullscreenZoomOut:disabled {
  cursor: var(--cursor-zoom-out);
}

/* Reset is a separate action: keep a little air after the zoom-in button. */
.review-zoom-button.review-zoom-reset {
  margin-left: clamp(0.2rem, 1vw, 0.38rem);
}

/* The reset button carries an icon rather than a +/- glyph. */
.review-zoom-button.review-zoom-reset svg {
  width: 0.95rem;
  height: 0.95rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.review-zoom-value {
  min-width: 2.6rem;
  text-align: center;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

#reviewScreen .drawing-pane:has(.empty-sheet-state) > .review-zoom-control,
#reviewScreen .drawing-pane:has(.empty-sheet-state) > .expand-sheet-button {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

#reviewScreen .drawing-pane:has(.empty-sheet-state) > .review-zoom-control .review-zoom-button {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

/* Clip the drawing inside the pane. Zoomed panes overflow so the frame pans
   the oversized scroll child, the same way Stamp pans .stamp-sheet-scroll. */
.review-sheet-frame {
  overflow: hidden;
  /* Keep pan and programmatic scroll, but never reserve a dark native scrollbar
     gutter around the white PDF page. The floating zoom controls own this UI. */
  scrollbar-width: none;
}

.review-sheet-frame::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.review-sheet-frame.is-zoomed {
  overflow: auto;
}

.review-sheet-frame,
.stamp-frame,
.save-preview-frame {
  overscroll-behavior: contain;
}

.review-sheet-frame:has(.review-sheet-scroll) {
  display: block;
  width: 100%;
  height: 100%;
}

.review-sheet-scroll {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  background: transparent;
}

.review-sheet-frame .sheet-viewport {
  position: relative;
  inset: auto;
  flex: 0 0 auto;
  /* Keep the 100% raster fixed to the full-width, aspect-correct outer frame.
     Zoom grows this child only, so panel geometry and overlay coordinates do
     not change when the user pans or zooms. */
  width: 100%;
  height: 100%;
  overflow: hidden;
  transform: none;
  transform-origin: unset;
  transition: none;
}

.review-sheet-frame.is-panning .sheet-viewport {
  transition: none;
}

/* Zoomed-in panes pan by dragging: show the open-hand (grab) cursor. */
.review-sheet-frame.is-zoomed,
.review-sheet-frame.is-zoomed .sheet-viewport {
  cursor: var(--cursor-grab);
}

.review-sheet-frame.is-panning,
.review-sheet-frame.is-panning .sheet-viewport {
  cursor: var(--cursor-grab);
}

.review-sheet-frame.is-zooming-out,
.review-sheet-frame.is-zooming-out .sheet-viewport {
  cursor: var(--cursor-zoom-out);
}

.drawing-pane header {
  position: relative;
  z-index: 100;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 0.86rem 2rem;
  align-items: center;
  column-gap: var(--space-3);
  row-gap: 2px;
  padding: var(--space-3) var(--space-4);
  height: 4.28rem;
  min-height: 4.28rem;
  max-height: 4.28rem;
  box-sizing: border-box;
  border-bottom: 1px solid var(--border);
  border-bottom-color: transparent;
}

/* Flat blue (your) / purple (manufacturer) tint across the top of each PDF panel.
   Applies at every width, including phones, matching the side colour convention. */
.drawing-pane:has(#raecoSheet) header {
  background: rgb(var(--accent-wash-rgb) / 0.14);
  border-bottom-color: rgb(var(--accent-rgb) / 0.32);
  box-shadow: none;
}

.drawing-pane:has(#manufactureSheet) header {
  background: rgb(var(--complete-wash-rgb) / 0.14);
  border-bottom-color: rgb(var(--complete-rgb) / 0.32);
  box-shadow: none;
}

/* Compact two-line header: pane label on line 1, filename tucked directly
   beneath it (one line between them), and the rotate buttons centred to the
   right across both lines. Keeps the header bar short at every width. */
.drawing-pane header > span:first-child {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drawing-pane header > strong {
  grid-column: 1;
  grid-row: 2;
}

.drawing-pane header > .pane-header-controls {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  margin-left: 0;
}

.pane-header-controls {
  display: inline-flex;
  flex: 0 0 auto;
  gap: var(--space-2);
  margin-left: auto;
  align-items: center;
}

.sheet-page-button {
  display: inline-flex;
  flex: 0 0 auto;
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--on-colour-button);
  background: var(--accent-action-gradient);
  border: 1px solid rgb(var(--accent-border-rgb) / 0.45);
  border-radius: var(--radius-sm);
  box-shadow:
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.24),
    0 0.38rem 0.85rem rgb(var(--accent-deep-rgb) / 0.24);
  font: inherit;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: var(--cursor-pointer);
}

.sheet-page-arrow {
  display: block;
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.stamp-header-lock {
  display: inline-grid;
  flex: 0 0 auto;
  position: relative;
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  place-items: center;
  color: var(--text-muted);
  background: rgb(var(--overlay-rgb) / 0.045);
  border: 1px solid rgb(var(--text-muted-rgb) / 0.38);
  border-radius: var(--radius-sm);
  box-shadow:
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.12),
    inset 0 -2px 0 rgb(var(--shade-rgb) / 0.18),
    0 0.38rem 0.85rem rgb(var(--shadow-rgb) / 0.18);
  cursor: var(--cursor-pointer);
}

/* PS-053: the lock keeps its 30px drawn size; a transparent ring takes the
   tap target to 44px tall (38px wide, so it stops short of the Next button
   beside it). */
.stamp-header-lock::after {
  content: "";
  position: absolute;
  inset: -7px -4px;
}

.stamp-header-lock.is-checked {
  color: var(--on-colour-button);
  background: linear-gradient(180deg, var(--complete-button-hover), var(--complete-button) 55%, var(--complete-button));
  border-color: color-mix(in srgb, color-mix(in srgb, var(--complete) 44%, var(--gloss)) 90%, transparent);
  box-shadow:
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.28),
    inset 0 -2px 0 rgb(var(--shade-rgb) / 0.18),
    0 0.38rem 0.85rem rgb(var(--complete-active-rgb) / 0.3);
}

.stamp-header-lock input {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  inset: 50% auto auto 50%;
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  margin: 0;
  transform: translate(-50%, -50%);
  background: var(--text-muted);
  border: 0;
  pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='10' width='14' height='10' rx='2' fill='none' stroke='black' stroke-width='2.4'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='10' width='14' height='10' rx='2' fill='none' stroke='black' stroke-width='2.4'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.stamp-header-lock.is-checked input {
  background: var(--gloss);
}

.stamp-header-lock .stamp-lock-label {
  display: none;
}

.sheet-page-button:not(:disabled):hover,
.sheet-page-button:not(:disabled):focus-visible {
  background: var(--accent-action-gradient-hover);
  color: var(--on-colour-button);
}

.sheet-page-button:disabled {
  color: rgb(var(--text-strong-rgb) / 0.55);
  background: rgb(var(--accent-wash-rgb) / 0.3);
  border-color: rgb(var(--accent-rgb) / 0.24);
  box-shadow: none;
  opacity: 1;
  cursor: var(--cursor-pointer);
}

.sheet-page-button[data-pane-page-side="manufacture"],
.sheet-page-button[data-pane-page-side="stamp"],
.sheet-page-button[data-page-match-side="manufacture"],
#savePreviewPrev,
#savePreviewNext {
  background: var(--complete-action-gradient);
  color: var(--on-colour-button);
  border-color: rgb(var(--complete-border-rgb) / 0.82);
  box-shadow:
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.24),
    0 0.38rem 0.85rem rgb(var(--complete-active-rgb) / 0.28);
}

.sheet-page-button[data-pane-page-side="manufacture"]:not(:disabled):hover,
.sheet-page-button[data-pane-page-side="manufacture"]:not(:disabled):focus-visible,
.sheet-page-button[data-pane-page-side="stamp"]:not(:disabled):hover,
.sheet-page-button[data-pane-page-side="stamp"]:not(:disabled):focus-visible,
.sheet-page-button[data-page-match-side="manufacture"]:not(:disabled):hover,
.sheet-page-button[data-page-match-side="manufacture"]:not(:disabled):focus-visible,
#savePreviewPrev:not(:disabled):hover,
#savePreviewPrev:not(:disabled):focus-visible,
#savePreviewNext:not(:disabled):hover,
#savePreviewNext:not(:disabled):focus-visible {
  background: linear-gradient(180deg, var(--complete-button-hover), var(--complete-button-hover) 55%, color-mix(in srgb, var(--complete-button) 90%, var(--shade)));
  color: var(--on-colour-button);
  border-color: rgb(var(--complete-strong-rgb) / 0.9);
}

.sheet-page-button[data-pane-page-side="manufacture"]:disabled,
.sheet-page-button[data-pane-page-side="stamp"]:disabled,
.sheet-page-button[data-page-match-side="manufacture"]:disabled,
#savePreviewPrev:disabled,
#savePreviewNext:disabled {
  color: rgb(var(--on-colour-button-rgb) / 0.55);
  background: rgb(var(--complete-wash-rgb) / 0.3);
  border-color: rgb(var(--complete-border-rgb) / 0.24);
  box-shadow: none;
}

.rotate-sheet-button {
  display: grid;
  flex: 0 0 auto;
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  place-items: center;
  border-radius: var(--radius-sm);
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.rotate-sheet-button[data-rotate-dir="cw"] {
  color: var(--rotate-cw-strong);
  background: rgb(var(--rotate-cw-rgb) / 0.12);
  border: 1px solid rgb(var(--rotate-cw-rgb) / 0.3);
}

.rotate-sheet-button[data-rotate-dir="cw"]:hover,
.rotate-sheet-button[data-rotate-dir="cw"]:focus-visible {
  color: var(--on-colour-button);
  background: var(--action-success);
  border-color: var(--rotate-cw);
}

.rotate-sheet-button[data-rotate-dir="ccw"] {
  color: var(--rotate-ccw-strong);
  background: rgb(var(--rotate-ccw-rgb) / 0.12);
  border: 1px solid rgb(var(--rotate-ccw-rgb) / 0.3);
}

.rotate-sheet-button[data-rotate-dir="ccw"]:hover,
.rotate-sheet-button[data-rotate-dir="ccw"]:focus-visible {
  color: var(--on-colour-button);
  background: var(--action-comment);
  border-color: var(--rotate-ccw);
}

/* The page-match screen's rotate buttons use a differently-named side attribute
   (data-page-match-rotate-side, not data-rotate-side) so they only pick up this colour
   scheme when they are listed here too. */
.rotate-sheet-button[data-rotate-side="raeco"],
.rotate-sheet-button[data-page-match-rotate-side="raeco"] {
  color: var(--on-colour-button);
  background: var(--accent-action-gradient);
  border-color: rgb(var(--accent-rgb) / 0.82);
}

.rotate-sheet-button[data-rotate-side="raeco"]:hover,
.rotate-sheet-button[data-rotate-side="raeco"]:focus-visible,
.rotate-sheet-button[data-page-match-rotate-side="raeco"]:hover,
.rotate-sheet-button[data-page-match-rotate-side="raeco"]:focus-visible {
  color: var(--on-colour-button);
  background: var(--accent-action-gradient-hover);
  border-color: rgb(var(--accent-border-rgb) / 0.9);
}

.rotate-sheet-button[data-rotate-side="manufacture"],
.rotate-sheet-button[data-page-match-rotate-side="manufacture"] {
  color: var(--on-colour-button);
  background: var(--complete-action-gradient);
  border-color: rgb(var(--complete-border-rgb) / 0.82);
}

.rotate-sheet-button[data-rotate-side="manufacture"]:hover,
.rotate-sheet-button[data-rotate-side="manufacture"]:focus-visible,
.rotate-sheet-button[data-page-match-rotate-side="manufacture"]:hover,
.rotate-sheet-button[data-page-match-rotate-side="manufacture"]:focus-visible {
  color: var(--on-colour-button);
  background: linear-gradient(180deg, var(--complete-button-hover), var(--complete-button) 55%, var(--complete-button));
  border-color: rgb(var(--complete-strong-rgb) / 0.9);
}

.rotate-sheet-button svg {
  display: block;
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.drawing-pane header span {
  flex: 0 0 auto;
  color: var(--accent-strong);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

/* De-emphasised "reference" within the "Your reference" pane label. */
.drawing-pane header span .pane-ref-soft {
  color: var(--text-muted);
  font-weight: 600;
}

.drawing-pane:has(#manufactureSheet) header > span:first-child,
.drawing-pane:has(#pageMatchManufactureSheet) header > span:first-child {
  color: var(--complete-strong);
}

.drawing-pane:has(#manufactureSheet) header > strong,
.drawing-pane:has(#manufactureSheet) header > span:first-child .pane-ref-soft,
.drawing-pane:has(#pageMatchManufactureSheet) header > span:first-child .pane-ref-soft {
  color: var(--text-muted);
}

.drawing-pane header strong {
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.22;
  min-width: 0;
  max-height: 2.05rem;
  overflow: hidden;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
  word-break: break-word;
}

@media (min-width: 861px) and (max-width: 1080px) {
  .drawing-pane header {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    height: auto;
    min-height: 6.75rem;
    max-height: none;
    row-gap: 0.28rem;
    padding: 0.72rem;
  }

  .drawing-pane header > span:first-child {
    grid-column: 1;
    grid-row: 1;
    overflow: visible;
    text-overflow: clip;
  }

  .drawing-pane header > strong {
    grid-column: 1;
    grid-row: 2;
    max-height: 2.2rem;
  }

  .drawing-pane header > .pane-header-controls {
    grid-column: 1;
    grid-row: 3;
    width: 100%;
    justify-content: flex-end;
  }
}

.sheet-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1000 / 720;
  background: var(--paper);
  border-radius: inherit;
}

.sheet-viewport {
  position: absolute;
  inset: 0;
  --review-overlay-inverse: 1;
  overflow: visible;
  border-radius: inherit;
  transform: translate(var(--zoom-x, 0), var(--zoom-y, 0)) scale(var(--zoom-scale, 1));
  transform-origin: 0 0;
  transition: transform 180ms ease;
}

.sheet-frame svg {
  display: block;
  width: 100%;
  height: 100%;
}

.rendered-sheet {
  display: block;
  width: 100%;
  height: 100%;
  /* Must stay `contain`: the diff-overlay and stamp geometry (drawingContentRect /
     sizeOverlayToDrawing in app.js) map coordinates against the letterboxed image
     rect. `fill` stretches the drawing and scatters markers/stamps off-feature. */
  object-fit: contain;
  background: var(--paper);
}

.render-failed > .rendered-sheet {
  visibility: hidden;
}

.render-failed-state {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  text-align: center;
  background: var(--paper);
  color: var(--text);
}

.render-failed-state p {
  margin: 0;
  font-size: 0.95rem;
}

.render-failed-retry {
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 8px;
  background: var(--accent-button);
  color: var(--accent-ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.render-failed-retry:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
}

.overlay-layer {
  position: absolute;
  inset: 0;
  z-index: 40;
  overflow: visible;
  pointer-events: none;
}

.review-badge-layer {
  position: absolute;
  inset: auto;
  /* Below the fixed top bar (.sidebar, z-index 70) so a badge at the top of the drawing
     never paints over it — the opaque bar always covers anything that reaches it. Still
     well above the sheet image + overlay layer (z 40) so badges stay on top of the drawing. */
  z-index: 50;
  /* Hard drawing boundary: promoted badges may move, but never paint outside
     the PDF page into the letterbox, neighbouring pane, or controls. */
  overflow: hidden;
  pointer-events: none;
}

.diff {
  --marker-color: var(--danger);
  --marker-ink: var(--danger-marker-ink);
  --diff-x: 50%;
  --diff-y: 50%;
  --diff-w: 0%;
  --diff-h: 0%;
  --diff-min-width: 1mm;
  --diff-min-height: 1mm;
  /* Floor the line/pad at a whole pixel: once the zoom-inverse is held,
     which would otherwise push these to sub-pixel sizes, and a sub-pixel bottom
     edge (positioned at 0 100% on ::before) gets anti-aliased away — making the
     bottom marching-ants vanish while the top survives. */
  --diff-line: max(1px, calc(2.2px * var(--review-overlay-inverse, 1)));
  --diff-dash: calc(8px * var(--review-overlay-inverse, 1));
  --diff-cycle: calc(14px * var(--review-overlay-inverse, 1));
  --diff-radius: calc(6px * var(--review-overlay-inverse, 1) * 0.9);
  /* Legacy boxes receive page-space padding in dimensionMarkerBox(). Precise
     H/W/D evidence overrides this inline with one centred CSS-mm screen pad. */
  --diff-pad: 0px;
  --diff-render-w: max(var(--diff-w), calc(var(--diff-min-width) * var(--review-overlay-inverse, 1)));
  --diff-render-h: max(var(--diff-h), calc(var(--diff-min-height) * var(--review-overlay-inverse, 1)));
  --diff-outer-pad: calc(var(--diff-pad) + var(--diff-line));
  --diff-half-w: calc(var(--diff-render-w) / 2 + var(--diff-outer-pad));
  --diff-half-h: calc(var(--diff-render-h) / 2 + var(--diff-outer-pad));
  /* The source coordinate is authoritative. Edge clipping is preferable to sliding
     this outline away from the dimension it marks. */
  position: absolute;
  z-index: 60;
  left: var(--diff-x);
  top: var(--diff-y);
  display: grid;
  place-items: center;
  width: calc(var(--diff-render-w) + 2 * var(--diff-pad));
  height: calc(var(--diff-render-h) + 2 * var(--diff-pad));
  border: var(--diff-line) solid transparent;
  border-radius: var(--diff-radius);
  background: transparent;
  color: var(--marker-color);
  translate: -50% -50%;
  overflow: visible;
  pointer-events: auto;
  cursor: var(--cursor-pointer);
  transition: color 120ms ease;
}

.diff > * {
  position: relative;
  z-index: 2;
}

.diff::before,
.diff::after {
  content: none;
}

.diff > .diff-ants {
  position: absolute;
  inset: calc(var(--diff-line) / 2);
  z-index: 1;
  width: calc(100% - var(--diff-line));
  height: calc(100% - var(--diff-line));
  overflow: visible;
  pointer-events: none;
}

.diff-badge.severity-info.is-material-badge {
  pointer-events: auto;
  cursor: pointer;
}

.diff-ants rect {
  x: 0;
  y: 0;
  width: 100%;
  height: 100%;
  /* 60% of the plain box radius, then 10% smaller. On narrow diff boxes
     (e.g. a vertical OA dimension callout) the un-scaled radius read as a
     rounded capsule/bubble rather than a rectangle with a subtle corner. */
  rx: calc(max(var(--diff-radius), calc(9px * var(--review-overlay-inverse, 1))) * 0.6 * 0.9);
  ry: calc(max(var(--diff-radius), calc(9px * var(--review-overlay-inverse, 1))) * 0.6 * 0.9);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--diff-line);
  stroke-dasharray: 9 7;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: 0.98;
  /* Printed box zooms with the sheet. Dashes keep marching in screen px. */
  animation: diff-border-pulse 0.9s linear infinite;
  filter:
    drop-shadow(0 0 calc(1px * var(--review-overlay-inverse, 1)) rgb(var(--gloss-rgb) / 0.6))
    drop-shadow(0 calc(1px * var(--review-overlay-inverse, 1)) calc(2px * var(--review-overlay-inverse, 1)) rgb(var(--shadow-rgb) / 0.26));
}

@keyframes diff-border-pulse {
  to {
    stroke-dashoffset: -16;
  }
}

.sheet-viewport .overlay-layer .diff-ants rect {
  stroke-dasharray: 9 7;
  stroke-dashoffset: 0;
  animation: diff-border-pulse 0.9s linear infinite;
}

@media (max-width: 640px) {
  .diff-ants rect {
    stroke-width: 1.75px;
    rx: 4px;
    ry: 4px;
  }
}

.diff-badge {
  --marker-color: var(--danger);
  --marker-ink: var(--danger-marker-ink);
  --diff-x: 50%;
  --diff-y: 50%;
  --diff-w: 0%;
  --diff-h: 0%;
  --diff-min-width: 1mm;
  --diff-min-height: 1mm;
  --diff-half-w: max(calc(var(--diff-w) / 2), calc(var(--diff-min-width) * var(--review-overlay-inverse, 1) / 2));
  --diff-half-h: max(calc(var(--diff-h) / 2), calc(var(--diff-min-height) * var(--review-overlay-inverse, 1) / 2));
  --badge-x: 50%;
  --badge-y: 50%;
  /* One knob to size every issue/axis bubble (circle + pill + their text).
     Shrunk on phones so the bubbles aren't huge against a small drawing. */
  /* Keep the label laid out at full text resolution, then counter-scale the
     complete badge against the drawing zoom. Shrinking font-size/layout values
     made Chromium rasterize tiny text and enlarge that bitmap on mobile. */
  --review-badge-scale: 1.12;
  --diff-badge-size: calc(1.62rem * var(--review-badge-scale, 1));
  --diff-badge-half: calc(var(--diff-badge-size) / 2 + 4px);
  position: absolute;
  left: var(--badge-x);
  top: var(--badge-y);
  z-index: 44;
  display: grid;
  box-sizing: border-box;
  width: var(--diff-badge-size);
  height: var(--diff-badge-size);
  inline-size: var(--diff-badge-size);
  block-size: var(--diff-badge-size);
  min-width: var(--diff-badge-size);
  max-width: var(--diff-badge-size);
  min-height: var(--diff-badge-size);
  max-height: var(--diff-badge-size);
  aspect-ratio: 1;
  align-items: center;
  justify-items: center;
  place-items: center;
  border-radius: 9999px;
  translate: -50% -50%;
  transform-origin: center;
  color: var(--marker-color);
  contain: layout;
  pointer-events: auto;
  cursor: var(--cursor-pointer);
  touch-action: none;
  transition:
    left 260ms cubic-bezier(0.22, 1, 0.36, 1),
    top 260ms cubic-bezier(0.22, 1, 0.36, 1),
    translate 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Auto-placed and dragged badges stay tethered to their own dimension. Edge
   clipping is allowed so a pane clamp can never create a false visual link.
*/
.diff-badge.is-right.is-tethered-badge {
  translate: 0 -50%;
  transform-origin: left center;
}

.drop-zone[data-drop-role="manual-specs"] {
  --drop-zone-ant-rgb: var(--pane-raeco-rgb);
  background:
    radial-gradient(circle at 18% 18%, rgb(var(--pane-raeco-rgb) / 0.2), transparent 34%),
    radial-gradient(circle at 82% 72%, rgb(var(--pane-raeco-rgb) / 0.14), transparent 38%),
    linear-gradient(180deg, color-mix(in srgb, color-mix(in srgb, var(--text) 13%, var(--bg)) 88%, transparent), rgb(var(--surface-rgb) / 0.98));
  background-position: 18% 18%, 82% 72%, 0 0;
  background-size: 170% 155%, 150% 145%, 100% 100%;
}

.diff-badge.is-left.is-tethered-badge {
  translate: -100% -50%;
  transform-origin: right center;
}

.diff-badge.is-top.is-tethered-badge {
  translate: -50% -100%;
  transform-origin: center bottom;
}

.diff-badge.is-bottom.is-tethered-badge {
  translate: -50% 0;
  transform-origin: center top;
}

.diff-badge b {
  display: grid;
  flex: 0 0 var(--diff-badge-size);
  place-items: center;
  box-sizing: border-box;
  width: var(--diff-badge-size);
  height: var(--diff-badge-size);
  inline-size: var(--diff-badge-size);
  block-size: var(--diff-badge-size);
  min-width: var(--diff-badge-size);
  max-width: var(--diff-badge-size);
  min-height: var(--diff-badge-size);
  max-height: var(--diff-badge-size);
  aspect-ratio: 1;
  padding: 0;
  color: var(--marker-ink);
  font-size: calc(0.82rem * var(--review-badge-scale, 1));
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-box: trim-both cap alphabetic;
  text-align: center;
  transform-origin: center;
  background: var(--marker-badge, var(--marker-color));
  border: 0;
  border-radius: 9999px;
  box-shadow: none;
  clip-path: circle(50% at 50% 50%);
}

/* The number sits in a <span> so text-box-trim applies to a real text box — on the
   flex <b> it no-ops. Trimming to the cap box makes flex centring land the digit
   optically dead-centre. Falls back gracefully where text-box-trim is unsupported. */
.diff-badge b > span {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Fill the badge square so the glyph centers against the actual circle. */
  width: 100%;
  height: 100%;
  font: inherit;
  line-height: 1;
  text-align: center;
  /* Trim to the digit's cap box so flex-centring lands the visible ink dead-centre
     (the font box sits the ink ~2.5% low). Crisp now that the digit is full-size. */
  text-box: trim-both cap alphabetic;
  translate: 0.01em -0.01em;
}

/* Shared optical centring for a single glyph in a circular badge — same technique as
   .diff-badge b > span: text-box-trim drops the cap box dead-centre on supporting
   browsers; flex/grid centring is the graceful fallback. Used by the dimension
   pick markers and the workflow step numbers so every letter-in-a-circle sits centred. */
.circle-glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font: inherit;
  line-height: 1;
  text-align: center;
  text-box: trim-both cap alphabetic;
  translate: 0.01em -0.01em;
}

.diff-badge.is-issue-pill {
  /* WHY: issue-pill pixels are a screen-space contract; drawing and viewport
     widths must not resize the label. */
  /* The pill hugs its label with the same ~2.6mm (10px) either side, so
     "ISSUE:1" and "ISSUE: LAMINATE" read alike (Jon 2026-10-02). */
  --diff-pill-pad: calc(10px * var(--review-badge-scale, 1));
  width: max-content;
  inline-size: max-content;
  min-width: 0;
  max-width: none;
  aspect-ratio: auto;
  white-space: nowrap;
}

.diff-badge.is-issue-pill b,
.diff-badge.is-issue-pill b > span {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  translate: none;
}

.diff-badge.is-issue-pill b {
  width: max-content;
  inline-size: max-content;
  min-width: 0;
  max-width: none;
  aspect-ratio: auto;
  padding: 0 var(--diff-pill-pad);
  border-radius: 9999px;
  clip-path: none;
  font-size: calc(0.6rem * var(--review-badge-scale, 1));
  justify-items: center;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 1px 1px rgb(var(--shade-rgb) / 0.24);
  border: 0;
  box-shadow:
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.28),
    0 2px 7px rgb(var(--shadow-rgb) / 0.28);
}

.diff-badge.is-issue-pill b > span {
  width: auto;
  height: 100%;
  line-height: 1;
  white-space: nowrap;
  translate: none;
}

.diff-badge.is-dragging b {
  box-shadow: none;
}

.diff-badge.is-dragging {
  transition: none;
}

.diff-badge[data-draggable="true"] {
  cursor: var(--cursor-grab);
}

.diff-badge.has-leader::after {
  content: none;
}

.diff.add,
.diff.remove,
.diff.change {
  --marker-color: var(--danger);
  --marker-ink: var(--danger-marker-ink);
}

.diff.severity-high {
  --marker-color: var(--danger);
  --marker-ink: var(--danger-marker-ink);
}

.diff-badge.severity-high {
  --marker-color: var(--danger);
  --marker-ink: var(--danger-marker-ink);
}

.diff.severity-med {
  --marker-color: var(--warning);
  --marker-ink: var(--warning-marker-ink);
}

.diff-badge.severity-med {
  --marker-color: var(--warning);
  --marker-ink: var(--warning-marker-ink);
}

.diff.severity-unsure {
  --marker-color: var(--unsure-marker);
  --marker-ink: var(--unsure-ink);
  border-style: dashed;
}

.diff-badge.severity-unsure {
  --marker-color: var(--unsure-marker);
  --marker-ink: var(--unsure-ink);
}

.diff.severity-info {
  --marker-color: var(--accent);
  --marker-ink: var(--accent-marker-ink);
}

.diff-badge.severity-info {
  --marker-color: var(--accent);
  --marker-ink: var(--accent-marker-ink);
}

/* DIA is teal, so it never reads as the purple ISSUE pill (Jon 2026-10-02:
   "make the colour different to the issue"). Height is blue, width green, depth
   red, material orange and revisions pink. */
.diff.axis-diameter,
.diff-badge.axis-diameter {
  --marker-color: var(--oa-diameter-marker);
  --marker-ink: var(--oa-diameter-ink);
}

.diff.axis-height,
.diff-badge.axis-height {
  --marker-color: var(--oa-height-marker);
  --marker-badge: var(--oa-height-badge);
  --marker-ink: var(--oa-height-ink);
}

.diff.axis-width,
.diff-badge.axis-width {
  --marker-color: var(--oa-width-marker);
  --marker-badge: var(--oa-width-badge);
  --marker-ink: var(--oa-width-ink);
}

.diff.axis-depth,
.diff-badge.axis-depth {
  --marker-color: var(--oa-depth-marker);
  --marker-badge: var(--oa-depth-badge);
  --marker-ink: var(--oa-depth-ink);
}

.diff-badge.is-issue-pill:not(.axis-diameter, .axis-height, .axis-width, .axis-depth) {
  --marker-color: var(--complete);
  --marker-ink: var(--complete-marker-ink);
}

/* Issue findings: the marching-ants box matches the purple ISSUE pill (overrides the
   severity colour) so an issue reads as one purple unit. Axis H/W/D markers keep their
   own colours. */
.diff.is-issue:not(.axis-diameter, .axis-height, .axis-width, .axis-depth) {
  --marker-color: var(--complete);
  --marker-ink: var(--complete-marker-ink);
}

/* ONE revision look: Review's pill and marching-ants box, the Settings template
   and the landing demo's REV cell all take it from this rule and the pill rule
   below, so they cannot drift. The colour is the user's (--revision-marker, set in
   Settings > Appearance); the letters take the ink made for it. */
.diff.is-issue.is-revision,
.diff-badge.is-issue-pill.is-revision,
.landing-demo-monitor .landing-rest-box.is-revision,
.landing-demo-monitor .landing-dimension-ants rect.is-revision {
  --marker-color: var(--revision-marker);
  --marker-ink: var(--revision-ink);
}

/* The landing demo draws its boxes as SVG rects: same colour, same dashes (set
   with the landing's other ants), taken from the marker colour above. */
.landing-demo-monitor .landing-rest-box.is-revision,
.landing-demo-monitor .landing-dimension-ants rect.is-revision {
  stroke: var(--marker-color);
}

.diff.is-material {
  --marker-color: color-mix(in srgb, var(--comment-accent) 96%, var(--shade));
  --marker-ink: var(--comment-marker-ink);
}

/* A cross-sheet note difference (the "show note changes" advisory) is never a
   dimension: it wears the purple note colour, never the red/amber dimension
   marching-ants (detection-rule 06). Explicit so it never depends on the
   incidental issue-pill colour. */
.diff.is-note,
.diff-badge.is-note {
  --marker-color: var(--complete);
  --marker-ink: var(--complete-marker-ink);
}

.diff-badge.is-issue-pill b,
.diff-badge.is-issue-pill.is-active b {
  color: var(--on-colour-button);
  background: linear-gradient(180deg, var(--complete-button-highlight), var(--complete-button) 64%, var(--complete-button-press));
}

/* Each axis pill fills with its own marker colour and its number takes the ink
   that reads on that colour. */
.diff-badge.is-issue-pill.axis-diameter b,
.diff-badge.is-issue-pill.axis-diameter.is-active b {
  background: var(--marker-color);
  color: var(--oa-diameter-ink);
}

.diff-badge.is-issue-pill.axis-height b,
.diff-badge.is-issue-pill.axis-height.is-active b {
  background: var(--oa-height-badge);
  color: var(--oa-height-ink);
}

.diff-badge.is-issue-pill.axis-width b,
.diff-badge.is-issue-pill.axis-width.is-active b {
  background: var(--oa-width-badge);
  color: var(--oa-width-ink);
}

.diff-badge.is-issue-pill.axis-depth b,
.diff-badge.is-issue-pill.axis-depth.is-active b {
  background: var(--oa-depth-badge);
  color: var(--oa-depth-ink);
}

.diff-badge.is-issue-pill.is-active b {
  box-shadow:
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.36),
    0 4px 10px rgb(var(--shadow-rgb) / 0.32),
    0 0 0 0 transparent;
}

.diff-badge.is-issue-pill.is-revision b,
.diff-badge.is-issue-pill.is-revision.is-active b {
  color: var(--revision-ink);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--revision-marker) 72%, var(--gloss)),
    var(--revision-marker) 64%,
    color-mix(in srgb, var(--revision-marker) 78%, var(--shade))
  );
}

.diff.is-active {
  z-index: 61;
  background: transparent !important;
  box-shadow: none !important;
}

.diff.is-active::before {
  z-index: 70;
}

.diff.is-active::after {
  content: none;
}

.diff-badge.is-active b {
  background: var(--marker-badge, var(--marker-color));
  color: var(--marker-ink);
}

/* An unconfirmed axis suggestion keeps the axis's own --marker-color (the
   axis-height/width/depth rules above) but reads as a hollow, dashed ring:
   a best guess awaiting the reviewer, never a resolved solid badge. After
   .diff-badge.is-active b so activation never fills the ring solid. */
.diff-badge.is-unconfirmed b,
.diff-badge.is-unconfirmed.is-active b {
  color: var(--marker-color);
  background: var(--gloss);
  border: calc(2px * var(--review-badge-scale, 1)) dashed var(--marker-color);
}

/* Jon's PDF-panel paint order (bottom → top): PDF, panel, buttons, ants,
   dims, issues. Overlay-layer stays z 40 (on-paper context). Distinct bands
   so later DOM (H/W/D after ISSUE pills) cannot invert the stack. */
.review-badge-layer .match-mark,
.review-badge-layer .manual-oa-tick,
.review-badge-layer .manual-oa-cross,
.review-badge-layer .automatic-dimension-cross,
.sheet-viewport .overlay-layer .match-mark,
.sheet-viewport .overlay-layer .manual-oa-tick,
.sheet-viewport .overlay-layer .manual-oa-cross,
.sheet-viewport .overlay-layer .automatic-dimension-cross,
.fullscreen-frame .overlay-layer .match-mark,
.fullscreen-frame .overlay-layer .manual-oa-tick,
.fullscreen-frame .overlay-layer .manual-oa-cross,
.fullscreen-frame .overlay-layer .automatic-dimension-cross {
  z-index: 50;
}

.review-badge-layer .diff,
.sheet-viewport .overlay-layer .diff,
.fullscreen-frame .overlay-layer .diff {
  z-index: 60;
}

.review-badge-layer .diff.is-active,
.sheet-viewport .overlay-layer .diff.is-active,
.fullscreen-frame .overlay-layer .diff.is-active {
  z-index: 61;
}

.review-badge-layer .diff-badge:not(.is-issue-pill),
.sheet-viewport .overlay-layer .diff-badge:not(.is-issue-pill),
.fullscreen-frame .overlay-layer .diff-badge:not(.is-issue-pill) {
  z-index: 70;
}

.review-badge-layer .diff-badge:not(.is-issue-pill).is-active,
.sheet-viewport .overlay-layer .diff-badge:not(.is-issue-pill).is-active,
.fullscreen-frame .overlay-layer .diff-badge:not(.is-issue-pill).is-active {
  z-index: 71;
}

.review-badge-layer .diff-badge.is-issue-pill,
.sheet-viewport .overlay-layer .diff-badge.is-issue-pill,
.fullscreen-frame .overlay-layer .diff-badge.is-issue-pill {
  z-index: 80;
}

/* Lock marks: badges stay clickable (selects the finding) but no longer show a drag
   affordance — matches the cursor treatment used for the locked manual marks. */
body.is-issue-marks-locked .diff-badge {
  cursor: default;
}

.review-badge-layer .diff-badge.is-issue-pill.is-active,
.sheet-viewport .overlay-layer .diff-badge.is-issue-pill.is-active,
.fullscreen-frame .overlay-layer .diff-badge.is-issue-pill.is-active {
  z-index: 81;
}

.hide-diffs .overlay-layer,
.hide-diffs .review-badge-layer {
  display: none;
}

.findings-panel {
  /* Flex column: tab switcher first, then one active tab panel. */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
  min-height: 0;
  gap: var(--space-4);
  /* Query container so nested review controls can fit the panel width. */
  container-type: inline-size;
  container-name: findings-panel;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding-block: var(--space-4);
  padding-inline: 2mm;
  font-size: 0.82rem;
  background: var(--side-panel-fade-bg);
  scrollbar-color: rgb(var(--accent-rgb) / 0.8) transparent;
  scrollbar-width: thin;
  scrollbar-gutter: auto;
}

/* The selected-issue preview is now its own panel at the top of the findings
   panel — above the AI summary / filters and the active-findings list. */
.findings-tabbar {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  padding: var(--space-2);
  background:
    linear-gradient(180deg, rgb(var(--overlay-rgb) / 0.055), rgb(var(--overlay-rgb) / 0.02)),
    rgb(var(--bg-rgb) / 0.32);
  border: 1px solid rgb(var(--overlay-rgb) / 0.075);
  border-radius: var(--panel-radius);
  box-shadow: inset 0 1px 0 rgb(var(--gloss-rgb) / 0.055);
}

.findings-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 0;
  min-height: 2.35rem;
  padding: 0 var(--space-2);
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
}

#reviewPanel .findings-tab-details {
  align-items: center;
  justify-content: center;
  flex-direction: row;
  gap: 0.28rem;
  font-size: 0.68rem;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.findings-tab:hover,
.findings-tab:focus-visible {
  color: var(--text);
  background: rgb(var(--overlay-rgb) / 0.055);
}

.findings-tab:focus-visible {
  outline: 2px solid rgb(var(--complete-rgb) / 0.62);
  outline-offset: 2px;
}

.findings-tab.is-active {
  color: var(--on-colour-button);
  background:
    radial-gradient(circle at 45% 25%, rgb(var(--overlay-rgb) / 0.18), transparent 44%),
    linear-gradient(180deg, var(--accent-button-hover), var(--accent-button) 58%, var(--accent-button-press));
  border-color: rgb(var(--accent-rgb) / 0.72);
  box-shadow:
    0 8px 18px rgb(var(--accent-rgb) / 0.24),
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.22);
}

.findings-tab-count {
  display: grid;
  min-width: 1.35rem;
  height: 1.35rem;
  place-items: center;
  padding-inline: 0.35rem;
  color: inherit;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  background: rgb(var(--well-rgb) / 0.22);
  border: 1px solid rgb(var(--overlay-rgb) / 0.16);
  border-radius: 999px;
}

.findings-tab-panel {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
  min-height: 0;
  overflow: visible;
  scrollbar-gutter: auto;
}

.findings-tab-panel[hidden] {
  display: none;
}

.findings-summary-panel,
.findings-details-panel {
  padding: var(--space-4);
  overflow: visible;
  scrollbar-gutter: auto;
  background:
    linear-gradient(180deg, rgb(var(--overlay-rgb) / 0.04), transparent 55%),
    var(--surface-raised);
  border: 1px solid rgb(var(--overlay-rgb) / 0.075);
  border-radius: var(--panel-radius);
  box-shadow: inset 0 1px 0 rgb(var(--gloss-rgb) / 0.05);
}

#drawingDetailsPanel.findings-details-panel {
  /* The tabpanel remains for keyboard and ARIA semantics, but it is no longer
     a visual container. Its child now uses the exact same outer footprint. */
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

#reviewPanel .findings-summary-panel,
#reviewPanel #overallDimsPanel {
  /* Use the same top-and-bottom fade as the Review, Stamp, and Save panels.
     Applying it to the opaque inner surfaces keeps the bottom fade visible. */
  background: var(--side-panel-fade-bg);
}

#reviewPanel #overallDimsPanel {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

@media (min-width: 861px) {
  #reviewPanel #overallDimsPanel .manual-dimension-card,
  #reviewPanel #overallDimsPanel .oa-material-card {
    /* The inner card is wider after the redundant wrapper inset is removed.
       Scale its desktop text by the same small step; phone sizing stays governed
       by the existing phone rules below. */
    --panel-text-scale: 0.86rem;
  }
}

#drawingDetailsTab.is-active {
  color: var(--on-colour-button);
  background:
    radial-gradient(circle at 45% 25%, rgb(var(--overlay-rgb) / 0.18), transparent 44%),
    var(--complete-action-gradient);
  border-color: rgb(var(--complete-rgb) / 0.76);
  box-shadow:
    0 8px 18px rgb(var(--complete-rgb) / 0.28),
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.22);
}

/* Summary and Drawing Details remain equal-width while selected. The shared
   tab-settle scale would temporarily make the active half wider. */
#reviewPanel .findings-tab.is-active {
  animation: none;
}

.findings-list-panel {
  /* The outer findings panel owns the rail. Let this tab contribute its real
     height so the toolbar stays reachable on short desktop viewports. */
  overflow: visible;
  overscroll-behavior: auto;
  padding-inline: 0;
  scrollbar-gutter: auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.65rem), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 1.65rem), transparent);
}

.findings-list-panel.is-active {
  flex: 0 0 auto;
}

.findings-tab-panel > .issue-preview {
  flex: 0 0 auto;
  padding: var(--space-4);
  overflow: visible;
  scrollbar-gutter: auto;
  background:
    linear-gradient(180deg, rgb(var(--overlay-rgb) / 0.04), transparent 58%),
    var(--surface-raised);
  border-color: rgb(var(--overlay-rgb) / 0.075);
  border-radius: var(--panel-radius);
  box-shadow: inset 0 1px 0 rgb(var(--gloss-rgb) / 0.05);
}

.findings-panel::-webkit-scrollbar {
  width: 0.68rem;
}

.findings-panel::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 999px;
}

.findings-panel::-webkit-scrollbar-thumb {
  background: rgb(var(--accent-rgb) / 0.8);
  border: 0;
  border-radius: 999px;
}

.findings-panel .panel-label {
  font-size: 0.68rem;
}

#reviewScreen .findings-panel.is-collapsed {
  visibility: hidden;
  min-width: 0;
  width: 100%;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, visibility 0s linear 180ms;
  transition-behavior: allow-discrete;
}

body.is-panel-resizing .review-layout,
body.is-panel-resizing .review-layout > .panel-visibility-toggle,
body.is-panel-resizing #reviewScreen .findings-panel {
  transition: none;
}

@media (max-width: 640px) {
  #reviewScreen .findings-panel.is-collapsed {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .review-layout,
  #reviewScreen .findings-panel.is-collapsed,
  .review-layout > .panel-visibility-toggle {
    transition: none;
  }
}

.findings-panel:has(.finding-list:empty):not(.is-collapsed) {
  grid-template-areas: "rail";
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  height: 100%;
}

.findings-panel:has(.finding-list:empty) .finding-column {
  display: none;
}

.review-layout:has(.finding-list:empty) {
  grid-template-rows: minmax(0, 1fr);
}

.findings-panel:has(.finding-list:empty) .finding-list {
  display: none;
}

.findings-panel:has(.finding-list:empty) .issue-preview {
  padding: var(--space-3);
  background: rgb(var(--overlay-rgb) / 0.02);
  border: 1px solid var(--border);
  border-radius: var(--panel-radius);
}

.findings-panel:has(.finding-list:empty) .issue-preview {
  align-content: stretch;
}

.findings-panel:has(.finding-list:empty) .issue-preview-empty {
  min-height: 0;
}

details.dropdown[open] > :not(summary) {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--surface-raised);
}

.summary-status {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-block: var(--space-2);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.48;
}

.summary-line {
  display: grid;
  gap: var(--space-1);
}

.summary-line strong {
  color: var(--text);
  font-size: 0.76rem;
  line-height: 1.3;
}

.summary-line span {
  color: var(--text-muted);
  font-weight: 500;
  line-height: 1.42;
}

.summary-point-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
}

.summary-point-list ul {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.summary-point-list li {
  position: relative;
  padding: var(--space-3) 0 var(--space-3) 1.1rem;
  color: var(--text-muted);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.48;
  border-bottom: 1px solid color-mix(in srgb, var(--muted-action) 18%, transparent);
}

.summary-point-list li:last-child {
  border-bottom: 0;
}

.summary-point-list li::before {
  content: "";
  position: absolute;
  top: calc(var(--space-3) + 0.52em);
  left: 0;
  width: 0.41rem;
  height: 0.41rem;
  background: linear-gradient(180deg, var(--accent-border), var(--accent));
  color: var(--accent-ink);
  border-radius: 999px;
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.18);
}

.issue-preview {
  align-self: stretch;
  display: grid;
  gap: var(--space-2);
  align-content: start;
  min-height: clamp(7rem, 13vh, 10rem);
  max-height: none;
  padding: var(--space-3);
  /* Selected-issue evidence contributes to the outer Review rail. */
  overflow: visible;
  scrollbar-gutter: auto;
  background: rgb(var(--overlay-rgb) / 0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.issue-preview-disclosure {
  min-width: 0;
}

.issue-preview-disclosure > summary {
  display: flex;
  min-height: 2rem;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  list-style: none;
  text-transform: uppercase;
  cursor: var(--cursor-pointer);
}

.issue-preview-disclosure > summary::-webkit-details-marker {
  display: none;
}

.issue-preview-disclosure > summary:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
}

.issue-preview-disclosure[open] > summary .sidebar-action-menu-chevron {
  transform: rotate(180deg);
}

.issue-preview-body {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-2);
}

.issue-preview.is-overview {
  display: none;
  padding: 0;
  background: transparent;
  border: 0;
}

.issue-preview.severity-high {
  background: rgb(var(--danger-rgb) / 0.12);
  border-color: rgb(var(--danger-rgb) / 0.5);
  box-shadow: none;
}

.issue-preview.severity-med {
  background: rgb(var(--warning-rgb) / 0.12);
  border-color: rgb(var(--warning-rgb) / 0.5);
  box-shadow: none;
}

.issue-preview.severity-info {
  background: rgb(var(--accent-wash-rgb) / 0.1);
  border-color: rgb(var(--accent-rgb) / 0.5);
  box-shadow: none;
}

.issue-preview.severity-unsure {
  background: rgb(var(--text-muted-rgb) / 0.12);
  border-color: rgb(var(--text-muted-rgb) / 0.5);
  box-shadow: none;
}

.issue-preview-empty {
  display: grid;
  min-height: 6rem;
  place-items: center;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
}

.issue-preview.is-disabled {
  background: rgb(var(--overlay-rgb) / 0.012);
  border-color: rgb(var(--overlay-rgb) / 0.07);
}

.issue-preview.is-disabled .issue-preview-empty {
  color: var(--text-muted);
}

.issue-preview-head {
  display: grid;
  gap: var(--space-1);
}

.issue-preview-head strong {
  display: block;
  overflow: hidden;
  max-height: 7.4em;
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.28;
  overflow-wrap: anywhere;
}

.finding-note-evidence {
  display: grid;
  gap: 0.28rem;
  margin: 0.45rem 0 0;
  padding: 0.45rem 0.55rem;
  background: rgb(var(--overlay-rgb) / 0.035);
  border: 1px solid rgb(var(--overlay-rgb) / 0.08);
  border-radius: var(--radius-md);
}

.finding-note-evidence strong {
  color: var(--accent-strong);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.finding-note-evidence ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.finding-note-evidence li {
  color: var(--text);
  font-size: 0.8rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.finding-note-evidence li span {
  display: block;
  color: var(--text-muted);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.issue-source-pages,
.finding-source-pages {
  display: block;
  color: var(--accent-strong);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.issue-preview-head p {
  display: block;
  overflow: hidden;
  max-height: 8.7em;
  margin: 0;
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1.38;
  overflow-wrap: anywhere;
}

.issue-evidence {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.38rem 0.6rem;
  margin: 0;
  padding: var(--space-2);
  background: rgb(var(--overlay-rgb) / 0.035);
  border: 1px solid rgb(var(--overlay-rgb) / 0.08);
  border-radius: var(--radius-md);
}

.issue-evidence div {
  min-width: 0;
}

.issue-evidence dt {
  color: var(--accent-strong);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.issue-evidence dd {
  margin: 0.12rem 0 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 0.84rem;
  line-height: 1.25;
}

.issue-crop-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.issue-crop {
  display: grid;
  gap: var(--space-1);
  margin: 0;
}

.issue-crop figcaption {
  color: var(--accent-strong);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
}

.issue-crop-svg {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--paper);
  border: 1px solid rgb(var(--overlay-rgb) / 0.12);
  border-radius: var(--radius-sm);
}

.issue-crop-box {
  fill: rgb(var(--text-strong-rgb) / 0.08);
  stroke: var(--accent);
  stroke-width: 2.8;
  stroke-dasharray: 4 2.6;
  animation: issue-crop-ants 0.9s linear infinite;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.crop-badge-fill {
  fill: var(--marker-color, var(--accent));
  stroke: var(--ink-dark);
  stroke-width: 1.5;
}

.crop-badge-ring {
  fill: none;
  stroke: rgb(var(--text-strong-rgb) / 0.55);
  stroke-width: 2.2;
  filter: drop-shadow(0 0.12rem 0.32rem rgb(var(--shadow-rgb) / 0.35));
}

.crop-badge-text {
  fill: var(--marker-ink, var(--text-strong));
  font-weight: 900;
  dominant-baseline: middle;
  alignment-baseline: middle;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

@keyframes issue-crop-ants {
  to {
    stroke-dashoffset: -13.2;
  }
}

.focused-crop-svg,
.issue-crop-svg {
  --marker-color: var(--accent);
  --marker-ink: var(--accent-marker-ink);
}

.focused-crop-svg.severity-high .crop-badge-fill,
.issue-crop-svg.severity-high .crop-badge-fill {
  fill: var(--marker-color);
}

.focused-crop-svg.severity-med .crop-badge-fill,
.issue-crop-svg.severity-med .crop-badge-fill {
  fill: var(--marker-color);
}

.focused-crop-svg.severity-unsure .crop-badge-fill,
.issue-crop-svg.severity-unsure .crop-badge-fill {
  fill: var(--marker-color);
}

.focused-crop-svg.severity-high,
.issue-crop-svg.severity-high {
  --marker-color: var(--danger);
  --marker-ink: var(--danger-marker-ink);
}

.focused-crop-svg.severity-med,
.issue-crop-svg.severity-med {
  --marker-color: var(--warning);
  --marker-ink: var(--warning-marker-ink);
}

.focused-crop-svg.severity-unsure,
.issue-crop-svg.severity-unsure {
  --marker-color: var(--text-muted);
  --marker-ink: var(--muted-marker-ink);
}

.issue-crop-svg.severity-high .issue-crop-box {
  stroke: var(--danger);
}

.issue-crop-svg.severity-med .issue-crop-box {
  stroke: var(--warning);
}

.issue-crop-svg.severity-unsure .issue-crop-box {
  stroke: color-mix(in srgb, var(--ink-dark) 44%, var(--paper));
}

.finding-column {
  flex: 0 0 auto;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--space-3);
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

.findings-list-panel .finding-column {
  flex: 1 1 auto;
  /* The wrapper is structural. The outer Review panel owns vertical scrolling.
     Clipping here cuts the toolbar action at short desktop heights. */
  overflow: visible;
}

.findings-list-panel.is-active .finding-column {
  grid-template-rows: auto max-content;
}

.finding-toolbar {
  display: flex;
  align-items: flex-end;
  min-height: 2.2rem;
  padding: 0 0 5px;
  gap: var(--space-2);
  margin: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
}

.findings-panel .finding-list {
  /* The finding-column wrapper is structural only; cards align with the other right-panel controls. */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0 2mm 0 0;
  margin: 0;
  scrollbar-gutter: auto;
}

.findings-panel .finding-list > .finding,
.findings-panel .finding-list > .finding-empty,
.findings-panel .finding-list > .manual-dimension-card {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-inline: 0;
}

.ghost-button.reject-button {
  color: var(--on-colour-button);
  background: var(--action-danger);
  border: 1px solid var(--action-danger);
  border-radius: var(--radius-md);
}

/* Cross icon on the Reject button, mirroring the tick on the Reviewed button —
   same SVG glyph as the Place cross button. */
.reject-button::before {
  content: "";
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  margin-right: 0.4em;
  vertical-align: -0.16em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%20120'%3E%3Cpath%20d='M30%2030%20L90%2090%20M90%2030%20L30%2090'%20fill='none'%20stroke='black'%20stroke-width='24'%20stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%20120'%3E%3Cpath%20d='M30%2030%20L90%2090%20M90%2030%20L30%2090'%20fill='none'%20stroke='black'%20stroke-width='24'%20stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ghost-button.reject-button:not(:disabled):hover {
  color: var(--on-colour-button);
  background: var(--action-danger-hover);
  border-color: var(--action-danger-hover);
}

.ghost-button.reject-button:not(:disabled):active {
  color: var(--on-colour-button);
  background: var(--action-danger-press);
  border-color: var(--action-danger-press);
}

.ghost-button.reject-button:disabled {
  color: var(--on-colour-button);
  background: var(--action-danger-disabled-bg);
  border-color: var(--action-danger-disabled-border);
  opacity: 0.6;
}

.ghost-button.button-danger,
.ghost-button.clear-load-button {
  color: var(--on-colour-button);
  background: var(--action-danger);
  border: 1px solid var(--action-danger);
}

.ghost-button.button-danger:not(:disabled):hover,
.ghost-button.clear-load-button:not(:disabled):hover {
  color: var(--on-colour-button);
  background: var(--action-danger-hover);
  border-color: var(--action-danger-hover);
}

.ghost-button.button-danger:not(:disabled):active,
.ghost-button.clear-load-button:not(:disabled):active {
  color: var(--on-colour-button);
  background: var(--action-danger-press);
  border-color: var(--action-danger-press);
}

.ghost-button.button-danger:disabled,
.ghost-button.clear-load-button:disabled {
  color: var(--on-colour-button);
  background: var(--action-danger-disabled-bg);
  border-color: var(--action-danger-disabled-border);
  opacity: 0.6;
}

.severity-tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-width: var(--severity-col-min);
  height: var(--severity-pill-height);
  min-height: var(--severity-pill-height);
  padding: var(--severity-pill-pad-block) var(--severity-pill-pad-inline);
  color: var(--text-strong);
  font-size: var(--severity-pill-font);
  font-weight: 600;
  letter-spacing: 0.03em;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  transform: translateY(0);
  box-shadow:
    0 7px 16px rgb(var(--shadow-rgb) / 0.26),
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.2),
    inset 0 -2px 0 rgb(var(--shade-rgb) / 0.17);
  transition:
    transform 140ms ease,
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease,
    box-shadow 140ms ease;
}

.severity-tab:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow:
    0 10px 22px rgb(var(--shadow-rgb) / 0.3),
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.24),
    inset 0 -2px 0 rgb(var(--shade-rgb) / 0.15);
}

.severity-tab:not(:disabled):active {
  transform: translateY(0);
  box-shadow:
    inset 0 2px 3px rgb(var(--shade-rgb) / 0.24),
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.07);
}

.severity-tab[data-severity="all"] {
  grid-column: 1 / -1;
  color: var(--on-colour-button);
  background: var(--complete-button);
  border-color: var(--complete);
}

.severity-tab[data-severity="all"]:not(.is-active):not(:disabled):hover {
  color: var(--on-colour-button);
  background: var(--complete-button-hover);
  border-color: var(--complete-hover);
}

.severity-tab[data-severity="info"] {
  color: var(--on-colour-button);
  background: var(--accent-button);
  border-color: var(--accent);
}

.severity-tab[data-severity="info"]:not(.is-active):not(:disabled):hover {
  background: var(--accent-button-hover);
  color: var(--on-colour-button);
  border-color: var(--accent-hover);
}

.severity-tab[data-severity="high"] {
  color: var(--on-colour-button);
  background: var(--action-danger);
  border-color: var(--danger);
}

.severity-tab[data-severity="high"]:not(.is-active):not(:disabled):hover {
  background: var(--action-danger-hover);
  color: var(--on-colour-button);
  border-color: var(--danger-hover);
}

.severity-tab[data-severity="med"] {
  color: var(--on-colour-button);
  background: var(--action-warning);
  border-color: var(--warning);
}

.severity-tab[data-severity="med"]:not(.is-active):not(:disabled):hover {
  background: var(--action-warning-hover);
  color: var(--on-colour-button);
  border-color: var(--warning-hover);
}

.severity-tab[data-severity="unsure"] {
  color: var(--text-strong);
  background: var(--text-muted);
  border-color: var(--text-muted);
}

.severity-tab[data-severity="unsure"]:not(.is-active):not(:disabled):hover {
  background: var(--muted-action);
  border-color: var(--muted-action);
}

.severity-tab[data-severity="all"].is-active {
  color: var(--on-colour-button);
  background: var(--complete-button-press);
  border-color: var(--complete);
}

.severity-tab.is-active {
  box-shadow:
    0 0 0 1px rgb(var(--gloss-rgb) / 0.28),
    0 11px 22px rgb(var(--shadow-rgb) / 0.3),
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.22),
    inset 0 -2px 0 rgb(var(--shade-rgb) / 0.18);
}

.severity-tab[data-severity="info"].is-active {
  color: var(--on-colour-button);
  background: var(--accent-button-press);
  border-color: var(--accent-press);
}

.severity-tab[data-severity="high"].is-active {
  color: var(--on-colour-button);
  background: var(--action-danger-press);
  border-color: var(--action-danger-press);
}

.severity-tab[data-severity="med"].is-active {
  color: var(--on-colour-button);
  background: var(--warning-press);
  border-color: var(--warning-press);
}

.severity-tab[data-severity="unsure"].is-active {
  color: var(--text-strong);
  background: var(--muted-action);
  border-color: var(--muted-action);
}

.severity-tab:disabled,
.severity-tab[aria-disabled="true"] {
  cursor: default;
  filter: saturate(0.72);
  opacity: 0.42;
  box-shadow:
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.08),
    inset 0 -2px 0 rgb(var(--shade-rgb) / 0.12);
  transform: none;
}

.severity-tab:disabled:hover,
.severity-tab[aria-disabled="true"]:hover {
  box-shadow:
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.08),
    inset 0 -2px 0 rgb(var(--shade-rgb) / 0.12);
  transform: none;
}

.finding-list {
  align-self: stretch;
  display: grid;
  /* min(24rem, 100%) lets cards shrink with a narrow panel instead of clipping,
     and max-content rows make each card grow with its wrapped text + actions. */
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
  grid-auto-rows: max-content;
  align-content: start;
  gap: var(--space-3);
  min-height: 0;
  overflow: visible;
  overscroll-behavior: auto;
  scrollbar-gutter: auto;
}

.finding-empty {
  display: grid;
  min-height: 8rem;
  place-items: center;
  padding: var(--space-4);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-md);
}

.unmatched-page-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
  color: var(--text);
  background:
    linear-gradient(180deg, rgb(var(--overlay-rgb) / 0.055), transparent 58%),
    rgb(var(--surface-card-rgb) / 0.92);
  border: 1px solid rgb(var(--text-rgb) / 0.28);
  border-radius: var(--panel-radius);
}

.unmatched-page-card h3,
.unmatched-pane-copy h3 {
  margin: 0;
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.2;
}

.unmatched-page-card p,
.unmatched-pane-copy p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.page-review-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  min-height: 1.65rem;
  padding: 0 var(--space-2);
  color: var(--text);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  background: rgb(var(--text-rgb) / 0.16);
  border: 1px solid rgb(var(--text-rgb) / 0.32);
  border-radius: 999px;
}

.unmatched-page-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.unmatched-page-actions .primary-button,
.unmatched-page-actions .ghost-button,
.unmatched-page-card > .ghost-button {
  min-height: 2.35rem;
  white-space: normal;
}

.unmatched-pane-placeholder {
  display: grid;
  place-items: center;
  min-height: 100%;
  padding: var(--space-4);
  background:
    radial-gradient(circle at 50% 18%, rgb(var(--text-rgb) / 0.12), transparent 42%),
    rgb(var(--surface-rgb) / 0.78);
}

.unmatched-pane-copy {
  display: grid;
  gap: var(--space-3);
  max-width: 26rem;
  text-align: center;
}

.unmatched-pane-copy .page-review-badge {
  justify-self: center;
}

@media (max-width: 620px) {
  .unmatched-page-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

.finding {
  display: grid;
  grid-template-columns: 1.45rem minmax(0, 1fr);
  gap: var(--space-3);
  min-height: 5.35rem;
  padding-block: var(--space-2);
  padding-inline: 2mm;
  background: rgb(var(--surface-card-rgb) / 0.92);
  border: 1px solid var(--border);
  border-left-width: 1px;
  border-radius: var(--panel-radius);
  transition: opacity 160ms ease, background-color 140ms ease, border-color 140ms ease;
}

/* The selected card keeps its severity fill; an accent ring marks it as active
   (a box-shadow, so the severity background/border below still show through). */
.finding.is-active {
  border-color: rgb(var(--accent-rgb) / 0.72);
  box-shadow: inset 0 0 0 1.5px rgb(var(--accent-rgb) / 0.85);
}

/* When an issue is selected, dim the rest so the active one stands out;
   hovering a dimmed card brings it back so it's easy to pick the next one. */
.finding-list:has(.finding.is-active) .finding:not(.is-active) {
  opacity: 0.4;
}

.finding-list:has(.finding.is-active) .finding:not(.is-active):hover {
  opacity: 0.82;
}

/* Finding cards stay full neutral grey. Severity is shown by the badge and
   actions only; do not reintroduce a left-edge severity stripe/sliver. */
.finding.high,
.finding.med,
.finding.unsure,
.finding.info {
  background: rgb(var(--surface-card-rgb) / 0.92);
  border-color: rgb(var(--text-rgb) / 0.28);
}

.finding-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 1.45rem;
  width: 1.45rem;
  min-width: 1.45rem;
  height: 1.45rem;
  aspect-ratio: 1;
  padding: 0;
  color: var(--accent-strong-ink);
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: 0;
  text-indent: 0;
  font-weight: 700;
  background: var(--accent-strong);
  border-radius: 999px;
}

.finding:not(.manual-dimension-card) > div {
  display: contents;
}

.finding:not(.manual-dimension-card) .finding-badge {
  grid-column: 1;
  grid-row: 1;
}

.finding:not(.manual-dimension-card) .finding-heading {
  grid-column: 2;
  grid-row: 1;
}

.finding:not(.manual-dimension-card) p,
.finding:not(.manual-dimension-card) .finding-actions {
  grid-column: 1 / -1;
}

.finding:not(.manual-dimension-card) .finding-note-evidence {
  grid-column: 1 / -1;
  min-width: 0;
}

.finding.high .finding-badge {
  background: var(--danger);
  color: var(--danger-ink);
}

.finding.med .finding-badge {
  background: var(--warning);
  color: var(--warning-ink);
}

.finding.unsure .finding-badge {
  background: var(--text-muted);
}

/* A revision finding's card wears the same colour as its pill on the sheets
   (the shared revision look beside .diff.is-issue.is-revision). */
.finding.is-revision .finding-badge {
  color: var(--revision-ink);
  background: var(--revision-marker);
}

.finding.is-revision.is-active {
  border-color: rgb(var(--revision-marker-rgb) / 0.78);
  box-shadow: inset 0 0 0 1.5px rgb(var(--revision-marker-rgb) / 0.9);
}

.finding-heading {
  display: grid;
  gap: var(--space-1);
}

.finding-heading strong {
  display: block;
  overflow: hidden;
  max-height: 5.1em;
  color: var(--text);
  font-size: 0.86rem;
  line-height: 1.28;
  overflow-wrap: anywhere;
}

.finding-heading span {
  color: var(--text-muted);
  font-size: 0.66rem;
  font-weight: 600;
}

.finding-source-pages {
  grid-column: 1 / -1;
  margin-top: var(--space-2);
}

.finding p {
  display: block;
  overflow: visible;
  max-height: none;
  margin: var(--space-2) 0 0;
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.finding-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.finding-card-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  gap: 0.38rem;
  width: 100%;
  min-width: 0;
  min-height: 2.05rem;
  padding-inline: var(--space-3);
  color: var(--text-strong);
  font-size: var(--label-size);
  line-height: var(--label-line);
  text-align: center;
  white-space: nowrap;
}

.finding-card-action-accept,
.finding-card-action-reject {
  justify-self: stretch;
  min-width: 0;
  padding-inline: var(--space-2);
}

.finding-card-action-reject.is-danger {
  color: var(--on-colour-button);
  background:
    linear-gradient(180deg, rgb(var(--overlay-rgb) / 0.16), transparent 40%),
    linear-gradient(180deg, var(--action-danger-hover), var(--action-danger) 55%, var(--action-danger));
  border-color: rgb(var(--danger-rgb) / 0.65);
}

.finding-card-action-reject.is-danger:not(:disabled):hover {
  background:
    linear-gradient(180deg, rgb(var(--overlay-rgb) / 0.22), transparent 40%),
    linear-gradient(180deg, var(--action-danger-hover), var(--action-danger) 60%, var(--action-danger));
  color: var(--on-colour-button);
}

.finding-card-action svg {
  flex: 0 0 auto;
}

.finding-card-action .action-glyph {
  margin: 0;
}

.finding-card-action-note {
  grid-column: 1 / -1;
  justify-self: stretch;
  width: 100%;
  color: var(--on-colour-button);
  background:
    linear-gradient(180deg, rgb(var(--overlay-rgb) / 0.18), transparent 38%),
    linear-gradient(180deg, var(--action-warning-hover), var(--action-warning) 52%, var(--action-warning-press));
  border-color: rgb(var(--action-warning-rgb) / 0.6);
}

.finding-card-action-correct {
  grid-column: 1 / -1;
  justify-self: stretch;
  width: 100%;
  color: var(--on-colour-button);
  background:
    linear-gradient(180deg, rgb(var(--overlay-rgb) / 0.18), transparent 38%),
    var(--accent-action-gradient);
  border-color: rgb(var(--accent-rgb) / 0.58);
}

.finding-card-action-correct:not(:disabled):hover {
  color: var(--on-colour-button);
  background:
    linear-gradient(180deg, rgb(var(--overlay-rgb) / 0.22), transparent 38%),
    var(--accent-action-gradient-hover);
  border-color: rgb(var(--accent-rgb) / 0.72);
}

.finding-card-action-pick.is-reference {
  color: var(--on-colour-button);
  background: var(--accent-action-gradient);
  border-color: rgb(var(--accent-rgb) / 0.72);
}

.finding-card-action-pick.is-manufacturer {
  color: var(--on-colour-button);
  background: var(--complete-action-gradient);
  border-color: rgb(var(--complete-border-rgb) / 0.72);
}

.finding-card-action-pick[aria-pressed="true"] {
  box-shadow: inset 0 0 0 2px rgb(var(--gloss-rgb) / 0.78);
}

.finding .finding-pick-hint {
  margin-top: var(--space-2);
  padding: var(--space-2);
  color: var(--text-strong);
  font-weight: 700;
  background: rgb(var(--accent-wash-rgb) / 0.18);
  border: 1px solid rgb(var(--accent-rgb) / 0.42);
  border-radius: var(--radius-sm);
}

.finding-card-action-note:not(:disabled):hover {
  color: var(--on-colour-button);
  background:
    linear-gradient(180deg, rgb(var(--overlay-rgb) / 0.22), transparent 38%),
    linear-gradient(180deg, var(--action-warning-hover), var(--action-warning) 52%, var(--comment-accent-press));
  border-color: color-mix(in srgb, var(--action-warning-hover) 72%, transparent);
}

.finding-card-action-note.is-remove {
  background: var(--action-danger);
  color: var(--on-colour-button);
  border-color: var(--action-danger);
}

.finding-card-action-note.is-remove:not(:disabled):hover {
  background: var(--action-danger-hover);
  color: var(--on-colour-button);
  border-color: var(--danger-hover);
}

.primary-button.finding-card-action-accept {
  /* The accept action always reads as a solid green button with white text —
     pinned with !important so the generic .is-success dark-text rule
     can't override it in any interaction state. */
  color: var(--on-colour-button) !important;
  background: linear-gradient(180deg, var(--action-success-hover), var(--action-success) 48%, var(--action-success-press));
  border-color: rgb(var(--action-success-rgb) / 0.55);
}

.primary-button.finding-card-action-accept:not(:disabled):hover {
  color: var(--on-colour-button);
  background: linear-gradient(180deg, var(--action-success-hover), var(--action-success) 42%, var(--action-success-press));
  border-color: rgb(var(--action-success-rgb) / 0.72);
}

.ghost-button.finding-card-action-ignore {
  color: var(--on-colour-button);
  background: var(--action-danger);
  border-color: var(--action-danger);
}

.ghost-button.finding-card-action-ignore:not(:disabled):hover {
  color: var(--on-colour-button);
  background: var(--action-danger-hover);
  border-color: var(--action-danger-hover);
}

.finding-card-action-ignore svg,
.finding-card-action-ignore .action-glyph {
  flex: 0 0 auto;
  margin: 0;
}

.ignored-findings-bin {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-2);
  background: rgb(var(--surface-rgb) / 0.55);
  border: 1px solid rgb(var(--text-rgb) / 0.2);
  border-radius: var(--radius-md);
}

.ignored-findings-bin summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: var(--cursor-pointer);
  list-style: none;
}

.ignored-findings-bin summary::-webkit-details-marker {
  display: none;
}

.ignored-findings-bin summary b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  min-height: 1.4rem;
  padding: 0 0.42rem;
  color: var(--text-strong);
  background: rgb(var(--accent-rgb) / 0.34);
  border-radius: 999px;
}

.ignored-finding-list {
  display: grid;
  gap: var(--space-2);
}

.ignored-finding {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2);
  padding: var(--space-2);
  background: rgb(var(--surface-card-rgb) / 0.72);
  border: 1px solid rgb(var(--text-rgb) / 0.22);
  border-radius: var(--radius-md);
}

.ignored-finding > div {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.ignored-finding strong {
  color: var(--text);
  font-size: 0.76rem;
  line-height: 1.28;
  overflow-wrap: anywhere;
}

.ignored-finding p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.72rem;
  line-height: 1.38;
  overflow-wrap: anywhere;
}

.finding-card-action-restore {
  justify-self: stretch;
  width: 100%;
  color: var(--on-colour-button);
  background: var(--accent-action-gradient);
  border-color: rgb(var(--accent-rgb) / 0.52);
}

.finding-card-action-restore:not(:disabled):hover {
  color: var(--on-colour-button);
  background: var(--accent-action-gradient-hover);
  border-color: rgb(var(--accent-rgb) / 0.68);
}

.manual-dimension-card {
  --panel-text-scale: 0.78rem;
  container-type: inline-size;
  container-name: manual-dimension-card;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-inline: 0;
  border-left-width: 1px;
  cursor: default;
}

.manual-dimension-card > div {
  min-width: 0;
}

@media (min-width: 861px) {
  .manual-dimension-card {
    width: 100%;
    margin-inline: 0;
  }
}

/* The card stays neutral grey; each dimension row carries its own status
   colour (below), so a correct axis is never painted red by a wrong sibling. */
.manual-dimension-card.unsure,
.manual-dimension-card.high,
.manual-dimension-card.info {
  background: rgb(var(--surface-card-rgb) / 0.92);
  border-color: rgb(var(--text-rgb) / 0.28);
  box-shadow: none;
}

.manual-dimension-grid {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
  margin-inline: 0;
}

.manual-dimension-row {
  display: block;
  min-width: 0;
  width: 100%;
  padding: var(--space-3);
  overflow: hidden;
  background: rgb(var(--well-rgb) / 0.14);
  border: 1px solid rgb(var(--overlay-rgb) / 0.075);
  border-radius: var(--review-card-radius);
}

.manual-dimension-row > summary {
  list-style: none;
  cursor: pointer;
}

.manual-dimension-row > summary::-webkit-details-marker {
  display: none;
}

.manual-dimension-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: var(--space-2);
  min-width: 0;
  margin-top: var(--space-3);
}

/* Status fills are shared with the material cards below. */
.manual-dimension-row[data-manual-dim-result]:not([data-manual-dim-result="ignored"]) :is(.manual-dimension-status, label:not(:has([data-manual-dim-input])) span, input, textarea) {
  color: var(--text-strong);
}

.manual-dimension-row.is-resolved :is(button, input, textarea):disabled {
  cursor: default;
}

.manual-dimension-head,
.manual-dimension-row label {
  display: grid;
  min-width: 0;
  gap: 0.22rem;
}

.manual-dimension-head {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
}

.manual-dimension-chevron,
.drawing-notes-summary > summary::after {
  display: inline-block;
  width: 0.62rem;
  height: 0.62rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 160ms ease;
}

.manual-dimension-row[open] .manual-dimension-chevron {
  transform: rotate(225deg);
}

.manual-dimension-fields-title {
  grid-column: 1 / -1;
  color: var(--text-strong);
  font-size: var(--panel-text-scale);
  font-weight: 800;
  line-height: 1.25;
}

.manual-dimension-source {
  display: grid;
  grid-template-rows: 44px 44px;
  gap: var(--space-1);
  min-width: 0;
  width: 100%;
}

.manual-dimension-axis {
  display: grid;
  min-width: 0;
  gap: 0.22rem;
}

:is(.manual-dimension-axis strong, .oa-material-card-title .oa-material-name) {
  color: var(--manual-axis-color, var(--text));
  font-size: var(--panel-text-scale);
  font-weight: 700;
  line-height: 1.1;
  text-shadow: 0 0 0.2rem color-mix(in srgb, var(--manual-axis-color, var(--accent)) 36%, transparent);
}

.manual-dimension-row[data-manual-dim-row="diameter"] {
  --manual-axis-color: var(--oa-diameter-marker);
}

.manual-dimension-row[data-manual-dim-row="height"] {
  --manual-axis-color: var(--oa-height-marker, var(--accent));
}

.manual-dimension-row[data-manual-dim-row="width"] {
  --manual-axis-color: var(--oa-width-marker);
}

.manual-dimension-row[data-manual-dim-row="depth"] {
  --manual-axis-color: var(--oa-depth-marker);
}

.manual-dimension-status,
.manual-dimension-row label span {
  color: var(--text-muted);
  font-size: var(--panel-text-scale);
  font-weight: 700;
  line-height: 1.25;
}

.manual-dimension-status.is-match {
  color: var(--success-strong);
}

.manual-dimension-status.is-mismatch {
  color: var(--danger-strong);
}

.manual-dimension-input-value {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  width: 100%;
  min-width: 0;
  height: 44px;
  min-height: 44px;
  color: var(--text-strong);
  font-size: var(--panel-text-scale);
  font-weight: 800;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.manual-dimension-row input {
  width: 100%;
  min-width: 0;
  height: 44px;
  min-height: 44px;
  padding: 0 var(--space-2);
  color: var(--text);
  font-size: var(--panel-text-scale);
  font-weight: 700;
  background: transparent;
  border: 0;
}

.manual-dimension-input-value > span {
  padding-right: var(--space-2);
}

.manual-dimension-actions {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  width: 100%;
}

.manual-dimension-actions button {
  width: 100%;
  min-width: 0;
  min-height: 1.92rem;
  padding-inline: 0.38rem;
  font-size: var(--panel-text-scale);
  white-space: nowrap;
}

.manual-dimension-actions .manual-dimension-ignore {
  grid-column: 1 / -1;
}

.manual-dimension-actions .manual-dimension-incorrect {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.92rem;
  padding-inline: 0.38rem;
  font-size: var(--panel-text-scale);
}

.manual-dimension-actions .manual-dimension-incorrect::before {
  flex: 0 0 auto;
  width: 0.82em;
  height: 0.82em;
  margin-right: 0.24em;
  vertical-align: 0;
}

.manual-dimension-source .manual-dimension-pick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  justify-self: stretch;
  width: 100%;
  min-width: 0;
  min-height: 1.9rem;
  padding-inline: 0.5rem;
  font-size: 0.58rem;
  line-height: 1;
  text-align: center;
  overflow: hidden;
  overflow-wrap: normal;
  text-overflow: clip;
  white-space: nowrap;
}

.manual-dimension-pick .manual-dimension-edit-glyph {
  width: 1em;
  height: 1em;
  flex: 0 0 1em;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

#reviewPanel .manual-dimension-actions button,
#reviewPanel .manual-dimension-actions .manual-dimension-incorrect {
  padding-inline: 0.125rem;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}

#reviewPanel .manual-dimension-source .manual-dimension-pick {
  padding-inline: 0;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}

.manual-dimension-source .manual-dimension-pick[data-manual-dim-pick-side="reference"] {
  color: var(--on-colour-button);
  background: var(--accent-action-gradient);
  border-color: rgb(var(--accent-rgb) / 0.72);
}

.manual-dimension-source .manual-dimension-pick[data-manual-dim-pick-side="manufacturer"] {
  color: var(--on-colour-button);
  background: var(--complete-action-gradient);
  border-color: rgb(var(--complete-border-rgb) / 0.72);
}

.manual-dimension-source .manual-dimension-pick[data-manual-dim-pick-side="reference"]:hover,
.manual-dimension-source .manual-dimension-pick[data-manual-dim-pick-side="reference"][aria-pressed="true"] {
  background: linear-gradient(180deg, var(--accent-button-highlight), var(--accent-button) 55%, var(--accent-button-press));
  color: var(--on-colour-button);
}

.manual-dimension-source .manual-dimension-pick[data-manual-dim-pick-side="manufacturer"]:hover,
.manual-dimension-source .manual-dimension-pick[data-manual-dim-pick-side="manufacturer"][aria-pressed="true"] {
  background: linear-gradient(180deg, var(--complete-button-hover), var(--complete-button) 55%, color-mix(in srgb, var(--complete-button) 86%, var(--shade)));
  color: var(--on-colour-button);
}

.manual-dimension-candidates {
  display: grid;
  grid-column: 1 / -1;
  gap: var(--space-2);
  padding: var(--space-2);
  background: rgb(var(--accent-wash-rgb) / 0.1);
  border: 1px solid rgb(var(--accent-rgb) / 0.3);
  border-radius: var(--radius-sm);
}

.manual-dimension-candidate {
  display: grid;
  gap: 0.18rem;
  width: 100%;
  min-width: 0;
  padding: var(--space-2);
  color: var(--text);
  text-align: left;
  background: rgb(var(--overlay-rgb) / 0.065);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: var(--cursor-pointer);
}

.manual-dimension-candidate:hover {
  border-color: rgb(var(--accent-rgb) / 0.62);
  background: rgb(var(--accent-wash-rgb) / 0.16);
}

.manual-dimension-candidate span,
.manual-dimension-candidate-empty {
  color: var(--text-muted);
  font-size: var(--panel-text-scale);
  font-weight: 700;
  line-height: 1.25;
}

.manual-dimension-candidate strong {
  overflow-wrap: anywhere;
  font-size: var(--panel-text-scale);
  line-height: 1.18;
}

.manual-dimension-comment {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
}

.manual-dimension-comment textarea {
  width: 100%;
  min-width: 0;
  min-height: 3.2rem;
  overflow: hidden;
  resize: none;
  padding: var(--space-2);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--panel-text-scale);
  font-weight: 700;
  line-height: 1.35;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.manual-dimension-comment textarea::placeholder {
  /* PS-054: placeholders at 4.5:1 or better. */
  color: var(--text-muted);
}

.manual-dimension-apply {
  min-width: 4.6rem;
  color: var(--on-colour-button);
  background: linear-gradient(180deg, var(--action-success-hover), var(--action-success) 48%, var(--action-success-press));
  border-color: rgb(var(--action-success-rgb) / 0.55);
}

.manual-dimension-apply:not(:disabled):hover {
  color: var(--on-colour-button);
  background: linear-gradient(180deg, var(--action-success-hover), var(--action-success) 42%, var(--action-success-press));
  border-color: rgb(var(--action-success-rgb) / 0.72);
}

.manual-dimension-apply:not(:disabled):active {
  color: var(--on-colour-button);
  background: var(--action-success-press);
  border-color: rgb(var(--action-success-rgb) / 0.82);
}

.manual-dimension-apply:disabled {
  color: rgb(var(--on-colour-button-rgb) / 0.7);
  background: var(--action-success-disabled-bg);
  border-color: var(--action-success-disabled-border);
  opacity: 1;
}

.manual-dimension-pick-marker {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 1.45rem;
  height: 1.45rem;
  padding: 0;
  translate: -50% -50%;
  color: var(--on-colour-button);
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  background: var(--accent-button);
  border: 2px solid var(--accent-ink);
  border-radius: 999px;
  box-shadow: 0 0.28rem 0.7rem rgb(var(--shadow-rgb) / 0.32);
  cursor: var(--cursor-pointer);
  pointer-events: auto;
  z-index: 8;
}

.manual-dimension-pick-marker .circle-glyph {
  translate: 0 -0.04em;
}

.manual-dimension-pick-marker:hover {
  background: var(--accent-button-hover);
  color: var(--on-colour-button);
  scale: 1.08;
}

.manual-dimension-pick-marker.is-outline {
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  padding: 0;
  translate: none;
  color: transparent;
  background: rgb(var(--accent-button-rgb) / 0.08);
  border: 1px solid color-mix(in srgb, var(--accent) 43%, var(--gloss));
  border-radius: 0.25rem;
  box-shadow: 0 0 0 1px rgb(var(--accent-button-rgb) / 0.18);
}

.manual-dimension-pick-marker.is-outline:hover,
.manual-dimension-pick-marker.is-outline:focus-visible {
  background: rgb(var(--accent-button-rgb) / 0.22);
  box-shadow: 0 0 0 2px rgb(var(--accent-button-rgb) / 0.46);
  scale: none;
}

.manual-dimension-pick-marker.is-outline[data-manual-dim-pick-side="manufacturer"] {
  background: rgb(var(--complete-wash-rgb) / 0.12);
  border-color: var(--complete-strong);
  box-shadow: 0 0 0 1px rgb(var(--complete-rgb) / 0.28);
}

.manual-dimension-pick-marker.is-outline[data-manual-dim-pick-side="manufacturer"]:hover,
.manual-dimension-pick-marker.is-outline[data-manual-dim-pick-side="manufacturer"]:focus-visible {
  background: rgb(var(--complete-wash-rgb) / 0.24);
  box-shadow: 0 0 0 2px rgb(var(--complete-rgb) / 0.5);
}

.finding-pick-marker.is-manufacturer {
  background: var(--complete-button);
  color: var(--on-colour-button);
}

@container manual-dimension-card (max-width: 32rem) {
  .manual-dimension-body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .manual-dimension-head {
    grid-column: 1 / -1;
  }

  .manual-dimension-actions {
    grid-column: 1 / -1;
    min-width: 0;
  }
}

@container manual-dimension-card (max-width: 12rem) {
  #reviewPanel .manual-dimension-body {
    grid-template-columns: minmax(0, 1fr);
  }

  #reviewPanel .manual-dimension-source .manual-dimension-pick {
    min-height: 44px;
    line-height: 1.15;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  #reviewPanel .manual-dimension-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  #reviewPanel .manual-dimension-actions .manual-dimension-ignore {
    grid-column: auto;
  }
}

@media (max-width: 640px) {
  .manual-dimension-body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
  }

  .manual-dimension-head {
    grid-column: 1 / -1;
  }

  .manual-dimension-actions {
    grid-column: 1 / -1;
    min-width: 0;
  }
}

input,
textarea,
select {
  cursor: var(--cursor-arrow);
}

.toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-muted);
  font-size: var(--label-size);
  line-height: var(--label-line);
  cursor: var(--cursor-pointer);
}

.toggle input {
  flex: 0 0 var(--checkbox-size);
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  margin: 0;
  accent-color: var(--accent);
}

.decision-panel,
.save-panel {
  width: min(100%, var(--active-content-measure));
  max-width: min(100%, var(--active-content-measure));
  padding: var(--space-8);
}

.save-panel {
  width: min(100%, var(--content-measure));
  max-width: min(100%, var(--content-measure));
}

.stamp-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--side-control-width);
  gap: var(--space-4);
  min-width: 0;
  align-items: stretch;
}

.side-panel-wrap {
  /* Stacks the Stamp panel and the Comment panel as two independently
     scrollable, independently hide-able cards over the shared sheet. */
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: var(--space-4);
  overflow: hidden;
  background: var(--side-panel-fade-bg);
  border: 1px solid var(--border);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow);
}

.side-panel-wrap > .stamp-controls {
  width: 100%;
  /* The active tab's panel fills the column height and scrolls on its own. */
  flex: 1 1 0;
  min-height: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Stamp | Comments tabs: one control panel shows at a time to avoid crowding. */
.side-panel-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  flex: 0 0 auto;
  padding: var(--space-1);
  background: rgb(var(--overlay-rgb) / 0.035);
  border: 1px solid rgb(var(--overlay-rgb) / 0.08);
  border-radius: var(--radius-md);
}

.side-panel-tab {
  min-height: 2.35rem;
  padding: 0 var(--space-3);
  color: var(--text-muted);
  font-size: var(--label-size);
  font-weight: 700;
  background:
    linear-gradient(180deg, rgb(var(--overlay-rgb) / 0.055), rgb(var(--overlay-rgb) / 0.012)),
    rgb(var(--overlay-rgb) / 0.018);
  border: 0;
  border-radius: var(--radius-sm);
  box-shadow:
    0 2px 6px rgb(var(--shadow-rgb) / 0.18),
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.09);
  cursor: var(--cursor-pointer);
  transition: background-color 140ms ease, box-shadow 140ms ease, color 140ms ease;
}

.side-panel-tab:hover {
  color: var(--text);
}

.side-panel-tab.is-active {
  color: var(--on-colour-button);
  background: var(--accent-action-gradient);
  box-shadow:
    0 3px 9px rgb(var(--accent-rgb) / 0.26),
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.2),
    inset 0 -2px 0 rgb(var(--shade-rgb) / 0.16);
}

.side-panel-tab[data-side-tab="comments"].is-active {
  color: var(--on-colour-button);
  background: linear-gradient(180deg, var(--comment-accent-hover), var(--action-comment) 54%, var(--comment-accent-press));
  box-shadow:
    0 3px 9px rgb(var(--comment-accent-rgb) / 0.26),
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.22),
    inset 0 -2px 0 rgb(var(--shade-rgb) / 0.16);
}

.side-panel-wrap[data-active-panel="stamp"] > .comment-controls,
.side-panel-wrap[data-active-panel="comments"] > .stamp-controls:not(.comment-controls) {
  display: none;
}

#stampScreen .side-panel-wrap,
#stampScreen .side-panel-tabs,
#stampScreen .side-panel-tab {
  border-radius: var(--radius-md);
}

/* Explains a generated (AI) cross/tick when it's clicked: shown above whichever
   Stamp/Comments tab is active, so the reviewer never has to leave this screen to
   see what the mark is about. Reuses the .finding card look from the Review panel. */
.mark-issue-card {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
}

.mark-issue-card .finding {
  width: 100%;
  min-width: 0;
}

.mark-issue-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  grid-column: 1 / -1;
  margin-top: var(--space-2);
}

.mark-issue-actions .close-button-danger {
  flex: 0 0 auto;
}

.manual-review-task-card {
  border-color: rgb(var(--comment-accent-rgb) / 0.55);
  border-left: 3px solid var(--comment-accent);
}

.manual-review-task-card > div {
  min-width: 0;
}

.manual-review-task-card p + p {
  margin-top: var(--space-2);
}

.manual-review-task-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.manual-review-task-actions .primary-button,
.manual-review-task-actions .ghost-button {
  min-height: 2.75rem;
  white-space: nowrap;
}

.manual-review-identity-warning {
  color: var(--warning-text) !important;
}

@media (max-width: 700px) {
  .manual-review-task-actions {
    grid-template-columns: 1fr;
  }

  .manual-review-task-actions .primary-button,
  .manual-review-task-actions .ghost-button {
    min-height: 44px;
  }
}

.stamp-canvas {
  position: relative;
  min-width: 0;
  padding: var(--space-4);
  background: var(--side-panel-fade-bg);
  border: 1px solid var(--border);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow);
}

@media (min-width: 861px) {
  #stampScreen .stamp-canvas {
    background:
      linear-gradient(180deg, rgb(var(--overlay-rgb) / 0.045), transparent 58%),
      radial-gradient(circle at 18% 10%, rgb(var(--complete-wash-rgb) / 0.18), transparent 38%),
      linear-gradient(135deg, rgb(var(--complete-wash-rgb) / 0.16), rgb(var(--surface-raised-rgb) / 0.9) 48%, rgb(var(--bg-rgb) / 0.18)),
      rgb(var(--surface-raised-rgb) / 0.86);
    border-color: rgb(var(--complete-rgb) / 0.3);
    box-shadow:
      var(--shadow),
      inset 0 1px 0 rgb(var(--gloss-rgb) / 0.07);
  }
}

/* Floating fullscreen-expand button + zoom control on the stamp sheet, matching the review panes. */
.stamp-canvas:hover .expand-sheet-button,
.stamp-frame:focus-visible ~ .expand-sheet-button {
  opacity: 0.92;
}
.stamp-canvas:hover .review-zoom-control,
.stamp-frame.is-zoomed ~ .review-zoom-control,
.review-zoom-control.stamp-zoom-floating:focus-within {
  opacity: 1;
}

#stampScreen .stamp-zoom-floating {
  left: calc(var(--space-2) + var(--space-4));
  bottom: calc(var(--space-2) + var(--space-4));
}

#stampScreen .expand-sheet-button {
  right: calc(var(--space-2) + var(--space-4));
  bottom: calc(var(--space-2) + var(--space-4));
}

/* Stamp full-screen mode reuses the review viewer but hides the diff-only controls. */
#manufactureFullscreen.is-stamp-mode #fullscreenFocusButton,
#manufactureFullscreen.is-stamp-mode #fullscreenShowAllButton,
#manufactureFullscreen.is-stamp-mode .fullscreen-discrepancy {
  display: none;
}

/* Slimmer stamp header now that the confirm buttons + zoom moved off it. */
#stampScreen .stamp-canvas .canvas-toolbar {
  margin-bottom: var(--space-2);
}

.stamp-frame {
  justify-self: stretch;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  background: var(--surface);
  cursor: var(--cursor-arrow);
  border-radius: var(--panel-radius);
}

.stamp-frame.is-zoomed {
  overflow: auto;
}

/* Zoomed Stamp and Export sheets pan like Review: no native scrollbar gutter.
   Its dark track was the black box that popped up on zoom (Jon 2026-10-03). */
.stamp-frame,
.save-preview-frame {
  scrollbar-width: none;
}

.stamp-frame::-webkit-scrollbar,
.save-preview-frame::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.stamp-frame.is-placing-mark {
  cursor: var(--cursor-arrow);
}

.stamp-frame.is-placing-tick {
  cursor: var(--cursor-mark-tick);
}

.stamp-frame.is-placing-cross {
  cursor: var(--cursor-mark-cross);
}

.stamp-frame.is-placing-comment {
  cursor: var(--cursor-comment);
}

/* While right-dragging to pan a zoomed inline PDF box. */
.stamp-frame.is-inline-panning,
.save-preview-frame.is-inline-panning {
  cursor: var(--cursor-grabbing);
}

.stamp-frame.is-zooming-out,
.save-preview-frame.is-zooming-out {
  cursor: var(--cursor-zoom-out);
}

.stamp-frame:has(.stamp-sheet-scroll) {
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
}

.stamp-canvas-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  flex-shrink: 0;
}

.comment-canvas-actions {
  align-items: flex-end;
  justify-content: flex-end;
}

.stamp-zoom-toolbar {
  --stamp-zoom-control-height: 2.7rem;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
}

.stamp-zoom-toolbar select {
  appearance: none;
  -webkit-appearance: none;
  flex: 1 1 auto;
  min-width: 0;
  height: var(--stamp-zoom-control-height);
  min-height: var(--stamp-zoom-control-height);
  padding: 0 2.35rem;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: calc(var(--stamp-zoom-control-height) - 2px);
  text-align: center;
  text-align-last: center;
  color: var(--text);
  background-color: var(--surface-raised);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dce1e8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 1.05rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.stamp-zoom-button {
  display: grid;
  place-items: center;
  flex: 0 0 var(--stamp-zoom-control-height);
  width: var(--stamp-zoom-control-height);
  min-width: var(--stamp-zoom-control-height);
  height: var(--stamp-zoom-control-height);
  min-height: var(--stamp-zoom-control-height);
  padding: 0;
  line-height: 0;
}

.stamp-zoom-button svg {
  display: block;
  width: 1rem;
  height: 1rem;
  margin: 0;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.stamp-sheet-scroll {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  background: transparent;
  /* No width/height transition: the resize must be synchronous so the frame's
     scrollWidth reflects the new zoom in the same task, letting the wheel-zoom
     reanchor the cursor point immediately (an animated transition leaves
     scrollWidth mid-flight and the cursor drifts). */
}

/* Zoom is purely size-based: the scroll grows to zoom% (the frame pans it) and
   the viewport fills the scroll with no transform, so rendered == layout size. */
.stamp-sheet-viewport {
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
  background: transparent;
  border-radius: var(--radius-md);
}

.stamp-sheet-viewport > .empty-sheet-state {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: auto;
  height: auto;
  min-height: 0;
}

.stamp-sheet-viewport > .rendered-sheet,
.stamp-sheet-viewport > svg {
  display: block;
  width: 100%;
  height: 100%;
}

#stampScreen .stamp-sheet-viewport > .rendered-sheet,
#saveScreen .save-preview-viewport > .rendered-sheet {
  display: block;
  object-fit: contain;
  background: transparent;
  border-radius: var(--radius-sm);
}

#stampScreen .stamp-frame:has(.stamp-sheet-scroll),
#saveScreen .save-preview-frame:has(.save-preview-scroll) {
  background: transparent;
}

#stampScreen .stamp-frame .empty-sheet-state:not(.idle-screensaver),
#saveScreen .save-preview-frame .empty-sheet-state:not(.idle-screensaver) {
  color: var(--text-muted);
  background:
    linear-gradient(180deg, rgb(var(--overlay-rgb) / 0.035), rgb(var(--overlay-rgb) / 0.012)),
    var(--surface);
}

#stampScreen .stamp-frame .empty-sheet-state:not(.idle-screensaver) .empty-sheet-message strong,
#saveScreen .save-preview-frame .empty-sheet-state:not(.idle-screensaver) .empty-sheet-message strong,
#stampScreen .stamp-frame .empty-sheet-state:not(.idle-screensaver) .empty-sheet-message span,
#saveScreen .save-preview-frame .empty-sheet-state:not(.idle-screensaver) .empty-sheet-message span {
  color: var(--text-muted);
}

.stamp-frame:not(:has(.stamp-sheet-scroll)) ~ .stamp-zoom-floating,
.stamp-frame:not(:has(.stamp-sheet-scroll)) ~ .expand-sheet-button,
.save-preview-frame:not(:has(.save-preview-scroll)) ~ .save-preview-zoom-floating,
.save-preview-frame:not(:has(.save-preview-scroll)) ~ .save-preview-expand-button {
  display: none;
}

#stampScreen .stamp-frame:has(.empty-sheet-state) ~ .stamp-zoom-floating,
#stampScreen .stamp-frame:has(.empty-sheet-state) ~ .expand-sheet-button,
#saveScreen .save-preview-frame:has(.empty-sheet-state) ~ .save-preview-zoom-floating,
#saveScreen .save-preview-frame:has(.empty-sheet-state) ~ .save-preview-expand-button {
  display: none;
}

.stamp-mark-layer {
  overflow: hidden;
  pointer-events: none;
}

.stamp-mark-layer .manual-mark {
  pointer-events: auto;
}

.stamp-mark-layer.is-marks-locked .manual-mark {
  cursor: default;
}

.stamp-mark-layer.is-marks-locked .manual-mark:active {
  cursor: default;
}

/* AI-placed marks can be selected/deleted like manual marks. */
.stamp-mark-layer .manual-mark.is-automatic {
  cursor: var(--cursor-grab);
  pointer-events: auto;
}

.stamp-mark-layer.is-marks-locked .manual-mark.is-automatic {
  cursor: default;
}

.manual-mark {
  position: absolute;
  display: block;
  /* Size relative to the drawing (the mark layer is fitted to the sheet) so a
     tick is the same modest size on every sheet and at every screen width —
     instead of a fixed 2.1rem that looked huge on a small mobile drawing.
     Clamped for a usable tap target (min) and so it never balloons (max). */
  width: clamp(0.9rem, 3.4%, 1.6rem);
  height: auto;
  aspect-ratio: 1 / 1;
  translate: -50% -50%;
  cursor: var(--cursor-grab);
  touch-action: none;
  user-select: none;
}

.manual-mark:active {
  cursor: var(--cursor-grabbing);
}

/* Selected mark gets a ring so the reviewer can see what Delete will remove. */
.manual-mark.is-selected {
  outline: 2px solid var(--accent, var(--accent-text));
  outline-offset: 3px;
  border-radius: 4px;
  box-shadow: 0 0 0 4px rgb(var(--accent-rgb) / 0.25);
}

/* Shift+drag marquee box for multi-selecting marks. */
.mark-selection-box {
  position: absolute;
  z-index: 5;
  border: 1.5px solid var(--accent);
  background: rgb(var(--accent-wash-rgb) / 0.16);
  border-radius: 2px;
  pointer-events: none;
}

.manual-mark svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Jon 2026-10-02: a Stamp-sheet tick is drawn at the same share of the
   drawing as in the saved PDF (inline width from stamps.js renderFinalMarks),
   so it can be small on a phone sheet. A finger still gets a 24 px target
   around it; the drawn glyph keeps its size. */
@media (pointer: coarse) {
  .stamp-mark-layer .manual-mark::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100%, 24px);
    height: max(100%, 24px);
    translate: -50% -50%;
  }
}

.manual-mark-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.manual-mark-panel {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
}

.manual-mark-lock-toggle {
  justify-content: flex-start;
}

.manual-mark-actions {
  display: grid;
  gap: var(--space-2);
}

.manual-mark-hint {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.74rem;
  line-height: 1.35;
}

.manual-mark-hint-phone,
.manual-mark-multiselect-toggle,
.manual-mark-delete-selected {
  display: none;
}

.ghost-button.compact.is-active {
  color: var(--on-colour-button);
  background: var(--accent-button);
  border-color: var(--accent);
}

.manual-mark-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.ghost-button .manual-mark-button-glyph {
  flex-shrink: 0;
  width: 0.95rem;
  height: 0.95rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: square;
}

.ghost-button.compact.manual-mark-button-tick {
  color: var(--on-colour-button);
  background: var(--action-success);
  border-color: var(--action-success);
}

.ghost-button.compact.manual-mark-button-tick:not(:disabled):hover {
  color: var(--on-colour-button);
  background: var(--action-success-hover);
  border-color: var(--action-success-hover);
}

.ghost-button.compact.manual-mark-button-tick:not(:disabled):active {
  color: var(--on-colour-button);
  background: var(--action-success-press);
  border-color: var(--action-success-press);
}

.ghost-button.compact.manual-mark-button-tick.is-active {
  color: var(--on-colour-button);
  background: var(--action-success-press);
  border-color: var(--on-success);
  box-shadow: 0 0 0 2px rgb(var(--gloss-rgb) / 0.35);
}

.ghost-button.compact.manual-mark-button-tick:disabled {
  color: rgb(var(--on-colour-button-rgb) / 0.7);
  background: var(--action-success-disabled-bg);
  border-color: var(--action-success-disabled-border);
  opacity: 1;
}

.ghost-button.compact.manual-mark-button-cross {
  color: var(--on-colour-button);
  background: var(--action-danger);
  border-color: var(--action-danger);
}

.ghost-button.compact.manual-mark-button-cross:not(:disabled):hover {
  color: var(--on-colour-button);
  background: var(--action-danger-hover);
  border-color: var(--action-danger-hover);
}

.ghost-button.compact.manual-mark-button-cross:not(:disabled):active {
  color: var(--on-colour-button);
  background: var(--action-danger-press);
  border-color: var(--action-danger-press);
}

.ghost-button.compact.manual-mark-button-cross.is-active {
  color: var(--on-colour-button);
  background: var(--action-danger-press);
  border-color: var(--on-danger);
  box-shadow: 0 0 0 2px rgb(var(--gloss-rgb) / 0.35);
}

.ghost-button.compact.manual-mark-button-cross:disabled {
  color: var(--on-colour-button);
  background: var(--action-danger-disabled-bg);
  border-color: var(--action-danger-disabled-border);
  opacity: 0.6;
}

.ghost-button.compact.manual-mark-button-clear {
  color: var(--on-colour-button);
  background:
    var(--accent-action-gradient),
    rgb(var(--overlay-rgb) / 0.04);
  border-color: rgb(var(--accent-rgb) / 0.72);
  box-shadow:
    0 8px 18px rgb(var(--shadow-rgb) / 0.18),
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.09);
}

.ghost-button.compact.manual-mark-button-clear:not(:disabled):hover {
  color: var(--on-colour-button);
  background:
    linear-gradient(180deg, rgb(var(--accent-rgb) / 0.56), rgb(var(--accent-rgb) / 0.34)),
    rgb(var(--overlay-rgb) / 0.04);
  border-color: rgb(var(--accent-rgb) / 0.72);
}

.ghost-button.compact.manual-mark-button-clear:not(:disabled):active {
  color: var(--on-colour-button);
  background:
    linear-gradient(180deg, rgb(var(--accent-rgb) / 0.36), rgb(var(--accent-wash-rgb) / 0.22)),
    rgb(var(--overlay-rgb) / 0.04);
  border-color: rgb(var(--accent-rgb) / 0.54);
}

.ghost-button.compact.manual-mark-button-clear:disabled {
  color: rgb(var(--on-colour-button-rgb) / 0.7);
  background:
    linear-gradient(180deg, rgb(var(--accent-rgb) / 0.34), rgb(var(--accent-wash-rgb) / 0.16)),
    rgb(var(--overlay-rgb) / 0.035);
  border-color: rgb(var(--accent-rgb) / 0.26);
  opacity: 1;
}

.approval-stamp {
  display: block;
  width: 100%;
  height: 100%;
  /* `contain` keeps the stamp PNG's aspect ratio inside its widget box; `fill`
     stretches it. The widget box is already held at the stamp aspect, so contain
     renders 1:1 with no letterbox. */
  object-fit: contain;
  pointer-events: none;
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 8px 16px rgb(var(--shadow-rgb) / 0.25));
}

.stamp-widget {
  position: absolute;
  left: 55%;
  top: 69%;
  display: block;
  width: 8rem;
  height: 8rem;
  max-width: none;
  max-height: none;
  cursor: var(--cursor-move);
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
  outline: 2px solid rgb(var(--accent-rgb) / 0.78);
  outline-offset: 0;
  background: transparent;
  container-type: size;
}

.stamp-widget:active {
  cursor: var(--cursor-move);
}

.stamp-widget.is-locked {
  cursor: var(--cursor-arrow);
}

.stamp-widget.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.stamp-date-overlay {
  position: absolute;
  left: 50%;
  top: 78.5%;
  z-index: 1;
  color: var(--stamp-date-color, var(--accent-on-paper));
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.5rem;
  font-size: calc(var(--stamp-date-size, 6.6) * 1cqh);
  font-weight: 800;
  line-height: 1;
  text-align: center;
  text-shadow: 0 0 0.35cqh var(--gloss);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.stamp-resize-handle {
  position: absolute;
  z-index: 2;
  display: block;
  width: 0.9rem;
  height: 0.9rem;
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgb(var(--shadow-rgb) / 0.28);
  touch-action: none;
}

/* 9-point transform box: 4 corners + 4 edge midpoints + a centre move point, each with
   the resize cursor pointing in its own direction. */
.stamp-resize-handle-nw {
  top: -0.45rem;
  left: -0.45rem;
  cursor: var(--cursor-resize-diagonal);
}

.stamp-resize-handle-ne {
  top: -0.45rem;
  right: -0.45rem;
  cursor: var(--cursor-resize-diagonal-alt);
}

.stamp-resize-handle-se {
  right: -0.45rem;
  bottom: -0.45rem;
  cursor: var(--cursor-resize-diagonal);
}

.stamp-resize-handle-sw {
  bottom: -0.45rem;
  left: -0.45rem;
  cursor: var(--cursor-resize-diagonal-alt);
}

.stamp-resize-handle-n {
  top: -0.45rem;
  left: 50%;
  transform: translateX(-50%);
  cursor: var(--cursor-resize-vertical);
}

.stamp-resize-handle-s {
  bottom: -0.45rem;
  left: 50%;
  transform: translateX(-50%);
  cursor: var(--cursor-resize-vertical);
}

.stamp-resize-handle-e {
  right: -0.45rem;
  top: 50%;
  transform: translateY(-50%);
  cursor: var(--cursor-resize-horizontal);
}

.stamp-resize-handle-w {
  left: -0.45rem;
  top: 50%;
  transform: translateY(-50%);
  cursor: var(--cursor-resize-horizontal);
}

.stamp-resize-handle-move {
  top: 50%;
  left: 50%;
  width: 0.74rem;
  height: 0.74rem;
  transform: translate(-50%, -50%);
  background: rgb(var(--gloss-rgb) / 0.92);
  border: 2px solid var(--accent);
  cursor: var(--cursor-grab);
}

.stamp-widget.is-locked .stamp-resize-handle {
  display: none;
}

.comment-widget {
  position: absolute;
  left: 8%;
  top: 82%;
  width: fit-content;
  min-width: 0;
  max-width: 70%;
  min-height: 2rem;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 0.62em;
  padding: 0.68em 1.05em;
  color: var(--on-colour-button);
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 700;
  line-height: 1.12;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.055em;
  background: var(--oa-depth-marker);
  border: 0;
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 20px rgb(var(--shadow-rgb) / 0.32), inset 0 -2px 0 color-mix(in srgb, color-mix(in srgb, var(--danger) 52%, var(--shade)) 22%, transparent);
  cursor: var(--cursor-move);
  touch-action: none;
  user-select: none;
  /* A box always shows its whole text: it wraps, never clips, and never gets narrower than its longest word. */
  overflow-wrap: break-word;
  min-width: min-content;
}

.comment-widget.is-word-broken,
.comment-widget.is-word-broken .comment-pill-title,
.comment-widget.is-word-broken .comment-pill-body {
  overflow-wrap: anywhere;
}

.comment-widget.is-active {
  outline: 2px solid var(--comment-accent);
  outline-offset: 3px;
  box-shadow: 0 12px 26px rgb(var(--surface-raised-rgb) / 0.34), inset 0 -2px 0 color-mix(in srgb, color-mix(in srgb, var(--danger) 52%, var(--shade)) 22%, transparent);
}

.comment-pill-cross {
  flex: 0 0 auto;
  color: inherit;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.45em;
  font-weight: 900;
  line-height: 0.8;
  text-shadow: 0 1px 1px rgb(var(--shade-rgb) / 0.18);
}

.comment-widget.no-comment-icon {
  gap: 0;
}

.comment-widget.no-comment-icon .comment-pill-cross {
  display: none;
}

.comment-pill-copy {
  display: grid;
  flex: 1 1 auto;
  gap: 0.22em;
  min-width: 0;
  max-width: 100%;
}

.comment-pill-title {
  display: block;
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
  overflow-wrap: break-word;
}

.comment-pill-body {
  display: block;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.comment-widget.is-empty {
  color: rgb(var(--comment-accent-rgb) / 0.56);
  background: rgb(var(--overlay-rgb) / 0.48);
}

/* Double-click a comment to edit it in place on the drawing */
.comment-widget.is-editing {
  cursor: var(--cursor-arrow);
  user-select: text;
}

.comment-widget.is-editing .comment-pill-copy {
  outline: none;
  cursor: var(--cursor-arrow);
  user-select: text;
}

.comment-widget:active {
  cursor: var(--cursor-move);
}

/* Comment resize handles: four corner circles like the stamp. Horizontal drag
   changes box width (text re-wraps), vertical drag changes text size. */
.comment-resize-handle {
  position: absolute;
  z-index: 2;
  display: block;
  width: 0.9rem;
  height: 0.9rem;
  background: var(--comment-accent);
  color: var(--leader-ink);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgb(var(--shadow-rgb) / 0.28);
  touch-action: none;
}

.comment-widget.is-empty .comment-resize-handle {
  display: none;
}

.comment-resize-nw {
  top: -0.45rem;
  left: -0.45rem;
  cursor: var(--cursor-resize-diagonal);
}

.comment-resize-ne {
  top: -0.45rem;
  right: -0.45rem;
  cursor: var(--cursor-resize-diagonal);
}

.comment-resize-se {
  right: -0.45rem;
  bottom: -0.45rem;
  cursor: var(--cursor-resize-diagonal);
}

.comment-resize-sw {
  bottom: -0.45rem;
  left: -0.45rem;
  cursor: var(--cursor-resize-diagonal);
}

/* Flat approval tick beside review items that match the RAECO drawing. */
.match-mark {
  position: absolute;
  display: block;
  width: 1.6rem;
  height: 1.6rem;
  /* The measured DOM solver reuses the badge perimeter path at an exact 2 mm gap. */
  translate: 2mm -50%;
  pointer-events: none;
  filter: drop-shadow(0 0.12rem 0.22rem rgb(var(--shadow-rgb) / 0.25));
}

.match-mark.is-left {
  translate: calc(-100% - 2mm) -50%;
}

.match-mark.is-top {
  translate: -50% calc(-100% - 2mm);
}

.match-mark.is-bottom {
  translate: -50% 2mm;
}

.match-mark.manual-oa-cross,
.match-mark.manual-oa-tick,
.match-mark.automatic-dimension-cross {
  /* Marker glyphs are screen-space controls, not a percentage of the PDF. */
  width: 1.6rem;
  height: 1.6rem;
  aspect-ratio: 1 / 1;
}

.match-mark.is-dom-placed-mark {
  translate: none;
}

.match-mark svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Small tick/cross glyphs inside Keep / Ignore actions */
.action-glyph {
  display: inline-block;
  width: 0.78em;
  height: 0.78em;
  margin-right: 0.32em;
  vertical-align: -0.06em;
}

.stamp-controls {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
  font-size: 0.82rem;
}

.stamp-controls .toggle span,
.stamp-controls .primary-button,
.stamp-controls .ghost-button,
.stamp-controls input,
.stamp-controls textarea,
.stamp-controls select {
  font-size: 0.82rem;
}

.stamp-controls .panel-label {
  font-size: 0.68rem;
}

#stampScreen .stamp-controls > .toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 2.5rem;
  padding-block: 0.45rem;
  text-align: left;
}

#stampScreen .stamp-controls > .toggle input {
  position: static;
  flex: 0 0 auto;
  transform: none;
}

/* Stamp screen controls: scale typography, spacing, and targets with panel width */
#stampScreen .stamp-controls {
  container-type: inline-size;
  container-name: stamp-controls;
  align-content: start;
  grid-auto-rows: max-content;
  --side-panel-box-radius: 8px;
  /* Reference design width 20rem (320px); clamp ~280px–380px */
  --stamp-scale: clamp(0.875, 100cqi / 20rem, 1.1875);
  --sc-1: calc(var(--space-1) * var(--stamp-scale));
  --sc-2: calc(var(--space-2) * var(--stamp-scale));
  --sc-3: calc(var(--space-3) * var(--stamp-scale));
  --sc-4: calc(var(--space-4) * var(--stamp-scale));
  gap: var(--sc-4);
  padding: var(--sc-4);
  font-size: calc(0.82rem * var(--stamp-scale));
  border-radius: calc(var(--radius-lg) * var(--stamp-scale));
}

#stampScreen .stamp-controls .toggle {
  gap: 0.6rem;
  font-size: calc(0.9rem * var(--stamp-scale));
}

#stampScreen .stamp-controls .stamp-top-toggles {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sc-1);
  width: 100%;
  padding: var(--sc-2) var(--sc-1) 0;
  box-sizing: border-box;
}

#stampScreen .stamp-controls .stamp-top-toggles .toggle {
  justify-content: flex-start;
  min-height: max(calc(1.64rem * var(--stamp-scale)), 1.5rem);
  padding: 0;
  color: var(--text-muted);
  text-align: left;
  white-space: nowrap;
  background: transparent;
  border: 0;
  border-radius: 0;
}

#stampScreen .stamp-controls .stamp-top-toggles .toggle span {
  white-space: nowrap;
}

#stampScreen .stamp-controls .stamp-top-toggles input {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 1.1rem;
  width: 1.1rem;
  min-width: 1.1rem;
  height: 1.1rem;
  min-height: 1.1rem;
  padding: 0;
  margin: 0;
  background: rgb(var(--overlay-rgb) / 0.08);
  border: 1px solid rgb(var(--overlay-rgb) / 0.22);
  border-radius: 0.24rem;
  line-height: 1;
}

#stampScreen .stamp-controls .stamp-top-toggles input:checked {
  background: var(--accent-button);
  color: var(--on-colour-button);
  border-color: var(--accent-hover);
}

#stampScreen .stamp-controls .stamp-top-toggles input:checked::before {
  content: "";
  display: block;
  width: 0.66rem;
  height: 0.66rem;
  background: var(--gloss);
  clip-path: polygon(14% 53%, 34% 72%, 82% 22%, 94% 34%, 35% 94%, 4% 64%);
}

#stampScreen .stamp-controls .toggle input {
  width: calc(1.1rem * var(--stamp-scale));
  height: calc(1.1rem * var(--stamp-scale));
}

#stampScreen .stamp-controls .toggle span,
#stampScreen .stamp-controls .primary-button,
#stampScreen .stamp-controls .ghost-button,
#stampScreen .stamp-controls input,
#stampScreen .stamp-controls textarea,
#stampScreen .stamp-controls select {
  font-size: calc(0.82rem * var(--stamp-scale));
}

#stampScreen .stamp-controls .panel-label {
  margin-bottom: var(--sc-1);
  font-size: calc(0.68rem * var(--stamp-scale));
}

#stampScreen .stamp-controls .primary-button,
#stampScreen .stamp-controls .ghost-button {
  min-height: max(calc(2.5rem * var(--stamp-scale)), 2.25rem);
  padding-inline: var(--sc-4);
  border-radius: var(--side-panel-box-radius);
}

#stampScreen .stamp-controls .ghost-button.compact {
  min-height: max(calc(2.15rem * var(--stamp-scale)), 2rem);
  padding-inline: var(--sc-3);
}

#stampScreen .side-panel-tab,
#stampScreen .advanced-controls > summary,
#stampScreen .stamp-controls .primary-button,
#stampScreen .stamp-controls .ghost-button,
#stampScreen #commentsDoneButton {
  height: var(--detail-control-height, 2.5rem);
  min-height: var(--detail-control-height, 2.5rem);
}

#stampScreen .stamp-controls .ghost-button .manual-mark-button-glyph {
  width: calc(0.95rem * var(--stamp-scale));
  height: calc(0.95rem * var(--stamp-scale));
}

#stampScreen .stamp-controls .manual-mark-button {
  gap: var(--sc-2);
}

#stampScreen .stamp-controls .stamp-size-panel {
  gap: var(--sc-3);
  width: 100%;
  box-sizing: border-box;
  padding: var(--sc-3);
  border-radius: var(--panel-radius);
}

#stampScreen .stamp-controls .stamp-size-header {
  gap: var(--sc-2);
}

#stampScreen .stamp-controls .stamp-size-lock {
  font-size: calc(0.62rem * var(--stamp-scale));
}

#stampScreen .stamp-controls .stamp-size-grid {
  gap: var(--sc-2);
}

#stampScreen .stamp-controls .stamp-size-grid label {
  gap: var(--sc-1);
  font-size: calc(0.68rem * var(--stamp-scale));
}

#stampScreen .stamp-controls .size-input-row {
  border-radius: var(--side-panel-box-radius);
}

#stampScreen .stamp-controls .size-input-row input {
  min-height: max(calc(2.25rem * var(--stamp-scale)), 2rem);
  padding-inline: var(--sc-2);
}

#stampScreen .stamp-controls .size-input-row span {
  padding-right: var(--sc-2);
  font-size: calc(0.68rem * var(--stamp-scale));
}

#stampScreen .side-panel-tabs,
#stampScreen .comment-tabs,
#stampScreen .side-panel-tab,
#stampScreen .comment-tab,
#stampScreen .stamp-controls input:not([type="checkbox"]):not([type="range"]):not([type="color"]),
#stampScreen .stamp-controls select,
#stampScreen .stamp-controls textarea,
#stampScreen .stamp-controls .stamp-saved-positions,
#stampScreen .stamp-controls .manual-mark-panel,
#stampScreen .comment-controls .comment-text-panel,
#stampScreen .comment-controls .comment-style-grid,
#stampScreen .comment-controls .suggestion-panel,
#stampScreen .comment-controls .comment-records {
  border-radius: var(--side-panel-box-radius, 8px);
}

#stampScreen .stamp-controls .stamp-option-row {
  gap: var(--sc-2);
}

/* Named recorded stamp positions: name field + saved-position picker + delete */
.stamp-saved-positions {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.stamp-position-field {
  display: grid;
  gap: var(--space-1);
}

.stamp-position-field > .panel-label {
  margin-bottom: 0;
}

.stamp-position-field input,
.stamp-position-field select {
  width: 100%;
  min-height: 2.5rem;
  padding: 0 var(--space-3);
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font: inherit;
}

.stamp-position-field input::placeholder {
  color: rgb(var(--text-rgb, 220 226 235) / 0.62);
}

.stamp-position-field input:focus-visible,
.stamp-position-field select:focus-visible {
  outline: none;
  border-color: rgb(var(--accent-rgb) / 0.85);
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.22);
}

.stamp-position-delete:not(:disabled) {
  color: var(--danger-strong);
}

.stamp-position-delete:not(:disabled):hover {
  background: rgb(var(--danger-rgb) / 0.14);
  border-color: rgb(var(--danger-rgb) / 0.5);
}

#stampScreen .stamp-controls .manual-mark-panel {
  gap: var(--sc-2);
  padding-top: var(--sc-2);
}

#stampScreen .stamp-controls .manual-mark-actions {
  gap: var(--sc-2);
}

#stampScreen .stamp-controls .manual-mark-hint {
  font-size: calc(0.74rem * var(--stamp-scale));
}

#stampScreen .stamp-controls .ghost-button.compact.manual-mark-button-tick.is-active,
#stampScreen .stamp-controls .ghost-button.compact.manual-mark-button-cross.is-active {
  box-shadow: 0 0 0 calc(2px * var(--stamp-scale)) rgb(var(--gloss-rgb) / 0.35);
}

#stampScreen .stamp-controls .stamp-size-grid,
#saveScreen .save-panel .input-row {
  grid-template-columns: minmax(0, 1fr);
}

#stampScreen .stamp-controls .manual-mark-actions,
#saveScreen .save-panel .save-export-actions {
  flex-direction: column;
}

#stampScreen .stamp-controls .primary-button,
#stampScreen .stamp-controls .ghost-button,
#saveScreen .save-panel .primary-button,
#saveScreen .save-panel .ghost-button,
#saveScreen .save-panel .share-pdf-button {
  width: 100%;
  white-space: normal;
}

#saveScreen .save-layout .save-panel .save-export-actions {
  flex-direction: row;
}

#saveScreen .save-layout .save-panel .primary-button,
#saveScreen .save-layout .save-panel .ghost-button,
#saveScreen .save-layout .save-panel .share-pdf-button {
  width: auto;
  white-space: nowrap;
}

.comment-controls {
  min-height: min(72vh, 52rem);
  grid-template-rows: minmax(0, 1fr) auto;
  align-content: start;
}

#stampScreen .comment-controls {
  --comment-control-scale: clamp(0.875, 100cqi / 20rem, 1.1875);
  --cc-1: calc(var(--space-1) * var(--comment-control-scale));
  --cc-2: calc(var(--space-2) * var(--comment-control-scale));
  --cc-3: calc(var(--space-3) * var(--comment-control-scale));
  --cc-4: calc(var(--space-4) * var(--comment-control-scale));
  gap: var(--cc-3);
  padding: var(--cc-4);
  font-size: calc(0.82rem * var(--comment-control-scale));
}

#stampScreen .comment-controls .comment-tabs,
#stampScreen .comment-controls .comment-tab-panel.is-active,
#stampScreen .comment-controls .comment-style-grid {
  gap: var(--cc-3);
}

#stampScreen .comment-controls .comment-tabs {
  margin-top: var(--cc-1);
}

#stampScreen .comment-controls .comment-tab-panel.is-active {
  display: flex;
  flex-direction: column;
  padding-top: var(--cc-4);
  margin-right: 0;
  padding-right: 0;
  scrollbar-gutter: auto;
}

#stampScreen .comment-controls .comment-tab-panel.is-active::-webkit-scrollbar {
  width: 0;
  height: 0;
}

#stampScreen .comment-controls .comment-tab-panel.is-active::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 999px;
}

#stampScreen .comment-controls .comment-tab-panel.is-active::-webkit-scrollbar-thumb {
  background: transparent;
  border: 0;
  border-radius: 0;
}

#stampScreen .comment-controls label {
  display: grid;
  gap: var(--cc-2);
  min-width: 0;
}

#stampScreen .comment-controls .comment-color-control {
  display: grid;
  gap: var(--cc-2);
  min-width: 0;
}

#stampScreen .comment-controls .comment-text-panel {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: var(--cc-3);
  min-height: 0;
  min-width: 0;
}

#stampScreen .comment-controls .comment-style-grid {
  flex: 0 0 auto;
}

#stampScreen .comment-controls .comment-text-label {
  display: block;
  min-width: 0;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.15;
}

#stampScreen .comment-controls select,
#stampScreen .comment-controls input[type="number"],
#stampScreen .comment-controls input[type="text"] {
  min-height: 2.5rem;
}

#stampScreen .comment-controls input[type="range"] {
  margin-top: var(--cc-1);
}

#stampScreen .comment-controls .comment-action-row {
  gap: var(--cc-2);
}

#stampScreen .comment-controls .comment-records {
  margin-top: var(--cc-3);
}

#stampScreen .side-panel-wrap > .stamp-controls {
  min-height: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* The stamp panel scrolls its column directly: pull the scroll edge out to the
   panel border so the scrollbar hugs the edge instead of floating over the
   controls; pad the content back off it. Mirrors the comments tab-panel fix.
   width:auto lets the grid-stretched column honour the negative margin (the
   base rule pins it to width:100%, which would anchor the edge and ignore it). */
#stampScreen .side-panel-wrap > .stamp-controls {
  width: auto;
  margin-right: calc(-1 * var(--space-2));
  padding-right: var(--space-2);
  scrollbar-gutter: auto;
}

/* Stamp panel scrollbar: house style — transparent track (no grey box), thumb
   inset from the right edge via a transparent border. */
#stampScreen .side-panel-wrap > .stamp-controls::-webkit-scrollbar {
  width: 0.5rem;
}

#stampScreen .side-panel-wrap > .stamp-controls::-webkit-scrollbar-track {
  background: transparent;
}

#stampScreen .side-panel-wrap > .stamp-controls::-webkit-scrollbar-thumb {
  background: rgb(var(--accent-rgb) / 0.8);
  border: 0.22rem solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

/* Desktop only (panel scrolls internally here): nudge the thumb inset and add a
   soft bottom fade so content dissolves at the cutoff instead of a hard line. */
@media (min-width: 1181px) {
  #stampScreen .side-panel-wrap > .side-panel-tabs {
    margin-right: 0;
  }

  #stampScreen .side-panel-wrap > .stamp-controls {
    --side-panel-scroll-end-space: 2rem;
    padding-bottom: var(--side-panel-scroll-end-space);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--space-4), #000 calc(100% - 1.5rem), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 var(--space-4), #000 calc(100% - 1.5rem), transparent 100%);
  }

  #stampScreen .side-panel-wrap[data-active-panel="comments"] > .comment-controls {
    padding-bottom: var(--side-panel-scroll-end-space);
  }

  #stampScreen .side-panel-wrap[data-active-panel="comments"] #commentsDoneButton {
    margin-bottom: 0.4rem;
  }
}

.comment-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  padding: var(--space-1);
  background: rgb(var(--overlay-rgb) / 0.035);
  border: 1px solid rgb(var(--overlay-rgb) / 0.08);
  border-radius: var(--radius-md);
}

.comment-tab {
  min-width: 0;
  min-height: 2.35rem;
  padding: 0 var(--space-3);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  background:
    linear-gradient(180deg, rgb(var(--overlay-rgb) / 0.055), rgb(var(--overlay-rgb) / 0.012)),
    rgb(var(--overlay-rgb) / 0.018);
  border: 0;
  border-radius: var(--radius-sm);
  box-shadow:
    0 2px 6px rgb(var(--shadow-rgb) / 0.18),
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.09);
  transition: background-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.comment-tab:not(:disabled):hover {
  transform: translateY(-1px);
  color: var(--text);
  background:
    linear-gradient(180deg, rgb(var(--overlay-rgb) / 0.09), rgb(var(--overlay-rgb) / 0.02)),
    rgb(var(--overlay-rgb) / 0.04);
}

.comment-tab[data-comment-tab="ai"] {
  color: var(--on-colour-button);
  background:
    linear-gradient(180deg, rgb(var(--complete-wash-rgb) / 0.26), rgb(var(--complete-active-rgb) / 0.14)),
    color-mix(in srgb, color-mix(in srgb, var(--complete-button) 41%, var(--shade)) 34%, transparent);
  border: 0;
  box-shadow:
    0 2px 8px rgb(var(--complete-active-rgb) / 0.18),
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.16),
    inset 0 -2px 0 color-mix(in srgb, color-mix(in srgb, var(--complete) 22%, var(--shade)) 24%, transparent);
}

.comment-tab[data-comment-tab="ai"]:not(:disabled):hover {
  color: var(--on-colour-button);
  background:
    linear-gradient(180deg, rgb(var(--complete-strong-rgb) / 0.42), rgb(var(--complete-button-rgb) / 0.26)),
    rgb(var(--complete-active-rgb) / 0.5);
  box-shadow:
    0 3px 9px rgb(var(--complete-active-rgb) / 0.22),
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.2),
    inset 0 -2px 0 color-mix(in srgb, color-mix(in srgb, var(--complete) 22%, var(--shade)) 24%, transparent);
}

.comment-tab.is-active {
  color: var(--on-colour-button);
  background: var(--accent-action-gradient);
  box-shadow:
    0 3px 9px rgb(var(--accent-rgb) / 0.26),
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.2),
    inset 0 -2px 0 rgb(var(--shade-rgb) / 0.16);
}

.comment-tab[data-comment-tab="ai"].is-active {
  color: var(--on-colour-button);
  background: var(--complete-action-gradient);
  box-shadow:
    0 3px 9px rgb(var(--complete-rgb) / 0.24),
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.22),
    inset 0 -2px 0 color-mix(in srgb, color-mix(in srgb, var(--complete) 32%, var(--shade)) 24%, transparent);
}

.comment-tab-panel {
  display: none;
  min-height: 0;
}

.comment-tab-panel.is-active {
  display: grid;
  align-content: start;
  gap: var(--space-4);
  min-height: 0;
}

#approvalComments {
  min-height: 4.25rem;
  max-height: 6rem;
  height: 4.25rem;
  resize: none;
  overflow: auto;
  color: var(--text-strong);
  font-family: Helvetica, Arial, sans-serif;
  line-height: 1.35;
  text-align: left;
  text-transform: none;
  background: var(--bg-strong);
  border: 1px solid var(--border);
}

#approvalComments::placeholder {
  color: rgb(var(--text-rgb) / 0.54);
}

.comment-style-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

.comment-position-grid {
  padding-inline: 4px;
}

.comment-size-label {
  display: block;
}

/* Manual text-size input flanked by - / + stepper buttons */
.comment-size-control {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem;
  align-items: stretch;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.comment-size-control input[type="number"] {
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

.comment-size-control input[type="number"]::-webkit-outer-spin-button,
.comment-size-control input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.comment-size-step {
  display: grid;
  place-items: center;
  min-height: 2.5rem;
  padding: 0;
  color: var(--text);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  background: rgb(var(--overlay-rgb) / 0.05);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.comment-size-step:hover,
.comment-size-step:focus-visible {
  color: var(--on-colour-button);
  background: var(--action-comment);
}

.comment-palette-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.comment-colour-swatch {
  position: relative;
  isolation: isolate;
  display: grid;
  min-width: 0;
  min-height: 2.15rem;
  place-items: center;
  overflow: hidden;
  padding: 0.25rem;
  color: transparent;
  font-size: 0;
  background: transparent;
  border: 1px solid rgb(var(--overlay-rgb) / 0.18);
  border-radius: var(--radius-sm);
  cursor: var(--cursor-pointer);
}

.comment-colour-swatch::before {
  position: absolute;
  inset: 1px;
  z-index: 0;
  content: "";
  background: var(--swatch-color, transparent);
  border-radius: calc(var(--radius-sm) - 1px);
}

.comment-colour-swatch[data-comment-color="#FFFFFF"]::before,
.comment-colour-swatch[data-date-color="#FFFFFF"]::before {
  background: var(--gloss);
}

.comment-colour-swatch[data-comment-color="#FFFFFF"].is-active::before,
.comment-colour-swatch[data-date-color="#FFFFFF"].is-active::before {
  background: var(--gloss);
}

.comment-colour-swatch.is-active {
  border-color: rgb(var(--comment-accent-rgb) / 0.86);
  box-shadow: 0 0 0 2px rgb(var(--comment-accent-rgb) / 0.32);
}

.comment-colour-swatch:focus-visible {
  outline: 2px solid rgb(var(--comment-accent-rgb) / 0.82);
  outline-offset: 2px;
}

.comment-color-control strong {
  grid-column: 1 / -1;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 700;
}

#stampScreen .comment-controls .comment-option-toggles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  align-items: center;
  gap: var(--space-2);
  padding: 0;
}

#stampScreen .comment-controls .comment-option-toggles .toggle {
  display: flex;
  align-items: center;
  min-width: 0;
  white-space: normal;
}

.comment-align-control {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  padding: 0;
  margin: 0;
  margin-top: var(--space-2);
  border: 0;
}

.comment-align-control legend {
  padding: 0;
  margin: 0 0 var(--space-1);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.comment-align-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.comment-align-options label {
  display: grid;
  min-width: 0;
  position: relative;
}

.comment-align-options input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  accent-color: var(--comment-accent);
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.comment-align-options span {
  display: grid;
  min-height: 2.5rem;
  place-items: center;
  padding: 0.35rem 0.45rem;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: linear-gradient(180deg, rgb(var(--overlay-rgb) / 0.08), rgb(var(--overlay-rgb) / 0.035) 54%, rgb(var(--well-rgb) / 0.1));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow:
    0 8px 18px rgb(var(--shadow-rgb) / 0.18),
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.12);
  cursor: var(--cursor-pointer);
}

.comment-align-options input:checked + span {
  color: var(--on-colour-button);
  background: linear-gradient(180deg, var(--comment-accent-hover), var(--action-comment) 50%, var(--comment-accent-press));
  border-color: rgb(var(--comment-accent-rgb) / 0.72);
  box-shadow: inset 0 1px 0 rgb(var(--gloss-rgb) / 0.28), 0 0.65rem 1rem rgb(var(--comment-accent-rgb) / 0.2);
}

.comment-align-options input:focus-visible + span {
  outline: 2px solid rgb(var(--comment-accent-rgb) / 0.75);
  outline-offset: 2px;
}

.comment-action-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.comment-action-row button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding-inline: var(--space-2);
  font-size: 0.76rem;
  white-space: nowrap;
}

.comment-action-status {
  min-height: 1.2rem;
  margin: calc(var(--space-2) * -1) 0 0;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.35;
}

.comment-action-status.is-success {
  color: var(--comment-text);
}

.comment-action-status.is-warning {
  color: var(--warning-text);
}

#stampScreen .side-panel-wrap[data-active-panel="comments"] .primary-button:not(.reject-button):not(.comment-add-button),
#stampScreen .side-panel-wrap[data-active-panel="comments"] #commentsDoneButton {
  color: var(--on-colour-button);
  background:
    linear-gradient(180deg, rgb(var(--overlay-rgb) / 0.16), transparent 34%),
    linear-gradient(180deg, var(--action-warning-hover), var(--action-warning) 48%, var(--action-warning-press));
  border-color: rgb(var(--action-warning-rgb) / 0.58);
}

#commentsDoneButton {
  color: var(--on-colour-button);
  background:
    linear-gradient(180deg, rgb(var(--overlay-rgb) / 0.16), transparent 34%),
    linear-gradient(180deg, var(--action-warning-hover), var(--action-warning) 48%, var(--action-warning-press));
}

#stampScreen .side-panel-wrap[data-active-panel="comments"] .primary-button:not(.reject-button):not(.comment-add-button):hover,
#stampScreen .side-panel-wrap[data-active-panel="comments"] #commentsDoneButton:hover {
  color: var(--on-colour-button);
  background:
    linear-gradient(180deg, rgb(var(--overlay-rgb) / 0.2), transparent 34%),
    linear-gradient(180deg, var(--action-warning-hover), var(--action-warning) 48%, var(--action-warning-press));
  border-color: rgb(var(--action-warning-rgb) / 0.72);
}

/* PS-046: white labels sit on the contrast-safe --action-danger ramp
   (4.5:1 or better); raw --danger stays for red text and borders. */
.ghost-button.compact.comment-remove-button {
  color: var(--on-colour-button);
  background: var(--action-danger);
  border-color: var(--danger);
}

.ghost-button.compact.comment-remove-button:not(:disabled):hover {
  color: var(--on-colour-button);
  background: var(--action-danger-hover);
  border-color: var(--danger-hover);
}

.ghost-button.compact.comment-remove-button:not(:disabled):active {
  color: var(--on-colour-button);
  background: var(--action-danger-press);
  border-color: var(--action-danger-press);
}

.ghost-button.compact.comment-remove-button:disabled {
  color: rgb(var(--on-colour-button-rgb) / 0.58);
  background: rgb(var(--danger-rgb) / 0.34);
  border-color: rgb(var(--danger-rgb) / 0.26);
  opacity: 1;
}

.comment-records {
  display: grid;
  gap: var(--space-2);
  min-height: 5rem;
  max-height: 13rem;
  overflow-x: hidden;
  overflow-y: auto;
  /* Keep the scrollbar off the record cards' right edge. */
  margin-right: calc(-1 * var(--space-2));
  padding-right: var(--space-2);
  scrollbar-gutter: stable;
}

.comment-record {
  display: grid;
  grid-template-columns: 1.7rem minmax(0, 1fr);
  gap: var(--space-2);
  padding: var(--space-3);
  color: var(--text);
  text-align: left;
  background: rgb(var(--overlay-rgb) / 0.035);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.comment-record.is-active {
  background: rgb(var(--accent-wash-rgb) / 0.14);
  border-color: rgb(var(--accent-rgb) / 0.72);
}

.comment-record b {
  display: grid;
  width: 1.45rem;
  height: 1.45rem;
  place-items: center;
  color: var(--accent-ink);
  font-size: 0.78rem;
  background: var(--accent);
  border-radius: 999px;
}

.comment-record-copy {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.comment-record-copy strong {
  overflow: hidden;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
  white-space: normal;
}

.comment-record-copy small {
  color: var(--text-muted);
  font-size: 0.66rem;
  font-weight: 700;
}

.comment-record-empty {
  display: grid;
  min-height: 5rem;
  place-items: center;
  padding: var(--space-3);
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  background: rgb(var(--overlay-rgb) / 0.025);
  border: 1px dashed rgb(var(--overlay-rgb) / 0.14);
  border-radius: var(--radius-md);
}

.stamp-option-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.stamp-size-panel {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
  background: rgb(var(--accent-wash-rgb) / 0.06);
  border: 1px solid rgb(var(--accent-rgb) / 0.26);
  border-radius: var(--panel-radius);
}

.stamp-size-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.stamp-size-lock {
  color: var(--accent-strong);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.1em;
}

.stamp-size-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.stamp-size-grid label {
  gap: var(--space-1);
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 700;
}

.size-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.size-input-row input {
  min-height: 2.25rem;
  padding-inline: var(--space-2);
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: 0;
}

.size-input-row span {
  padding-right: var(--space-2);
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 700;
}

.suggestion-panel {
  display: grid;
  gap: var(--space-3);
}

.comment-prompt {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.comment-prompt textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 6rem;
  max-height: 9rem;
  resize: vertical;
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.4;
  text-transform: uppercase;
  background: rgb(var(--overlay-rgb) / 0.055);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.comment-prompt textarea::placeholder {
  color: color-mix(in srgb, var(--muted-action) 72%, transparent);
}

.comment-prompt-status {
  min-height: 1rem;
  margin: calc(var(--space-2) * -1) 0 0;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.3;
}

.suggestion-list {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.suggestion-chip {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: var(--space-3);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  background: rgb(var(--overlay-rgb) / 0.035);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.suggestion-chip:hover {
  background: rgb(var(--accent-wash-rgb) / 0.16);
  border-color: rgb(var(--accent-rgb) / 0.55);
}

.fullscreen-viewer {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: none;
  pointer-events: none;
  visibility: hidden;
  background: var(--bg-strong);
  overflow: hidden;
}

.fullscreen-viewer[aria-hidden="true"] {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.fullscreen-viewer.is-open,
.fullscreen-viewer[aria-hidden="false"].is-open {
  display: block;
  pointer-events: auto;
  visibility: visible;
}

.fullscreen-viewer.is-open:has(.fullscreen-dimension-picker),
.fullscreen-viewer[aria-hidden="false"].is-open:has(.fullscreen-dimension-picker) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

.fullscreen-viewer.is-open:has(.fullscreen-dimension-picker) .fullscreen-sheet {
  position: relative;
  inset: auto;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  padding: 0 0 max(calc(4.25rem + env(safe-area-inset-bottom, 0px)), 5.5rem);
  overflow: hidden;
  container-type: size;
}

body.pairing-manager-open .fullscreen-viewer.is-open {
  z-index: 1010;
}

/* The Sheet Manager is still the owner of the page, but its chrome must not
   remain visible or interactive above the single full-screen drawing surface. */
body.pairing-manager-open.pairing-fullscreen-open #pairingOverview,
body.pairing-manager-open.fullscreen-open #pairingOverview {
  display: none !important;
  pointer-events: none;
  visibility: hidden;
}

/* Fullscreen owns the canvas. Remove the normal Review chrome and both normal
   drawing surfaces so fixed pane headers cannot paint above the selected PDF. */
body.fullscreen-open #reviewScreen .drawing-pane > header,
body.fullscreen-open #reviewScreen .review-sheet-frame,
body.fullscreen-open #reviewScreen .review-zoom-control,
body.fullscreen-open #reviewScreen .expand-sheet-button,
body.fullscreen-open #stampScreen .stamp-canvas,
body.fullscreen-open #saveScreen .save-preview {
  display: none !important;
}

.fullscreen-file-title {
  position: fixed;
  top: calc(var(--space-3) + env(safe-area-inset-top, 0px));
  left: calc(var(--space-3) + env(safe-area-inset-left, 0px));
  z-index: 4002;
  max-width: calc(100vw - 6.5rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
  min-height: 44px;
  margin: 0;
  padding: 0.7rem 0.9rem;
  overflow: hidden;
  color: var(--text);
  font: 700 0.78rem/1.2 var(--font-ui);
  text-overflow: ellipsis;
  white-space: nowrap;
  background: rgb(var(--surface-rgb) / 0.9);
  border: 1px solid rgb(var(--overlay-rgb) / 0.14);
  border-radius: var(--radius-md);
  box-sizing: border-box;
}

/* Sheet Manager's dimension picker is an in-flow fullscreen header. Keep the
   selected filename in that same flow so neither bar paints over the other. */
.fullscreen-viewer.is-open:has(.fullscreen-dimension-picker) .fullscreen-file-title,
.fullscreen-viewer[aria-hidden="false"].is-open:has(.fullscreen-dimension-picker) .fullscreen-file-title {
  position: relative;
  top: auto;
  left: auto;
  flex: 0 0 auto;
  align-self: stretch;
  width: auto;
  max-width: none;
  margin: calc(var(--space-3) + env(safe-area-inset-top, 0px))
    calc(4rem + env(safe-area-inset-right, 0px)) var(--space-2)
    calc(var(--space-3) + env(safe-area-inset-left, 0px));
}

.fullscreen-sheet {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0 0 max(calc(4.25rem + env(safe-area-inset-bottom, 0px)), 5.5rem);
  overflow: hidden;
  container-type: size;
}

.fullscreen-page {
  position: relative;
  width: min(100cqw, calc(var(--fullscreen-aspect, 1.3889) * 100cqh));
  height: min(100cqh, calc(100cqw / var(--fullscreen-aspect, 1.3889)));
  transform: translate(var(--fullscreen-pan-x, 0), var(--fullscreen-pan-y, 0)) scale(var(--fullscreen-zoom, 1));
  transform-origin: center;
  transition: transform 120ms ease;
  will-change: transform;
}

.fullscreen-frame .rendered-sheet {
  background: transparent;
  -webkit-user-drag: none;
  user-select: none;
}

.fullscreen-page.is-pannable,
.fullscreen-page.is-pannable .fullscreen-frame,
.fullscreen-page.is-pannable .diff,
.fullscreen-page.is-pannable .diff-badge {
  cursor: var(--cursor-grab);
}

.fullscreen-page.is-panning {
  transition: none;
}

.fullscreen-page.is-panning,
.fullscreen-page.is-panning .fullscreen-frame,
.fullscreen-page.is-panning .diff,
.fullscreen-page.is-panning .diff-badge {
  cursor: var(--cursor-grab);
}

.fullscreen-sheet.is-zooming-out {
  cursor: var(--cursor-zoom-out);
}

.fullscreen-frame {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 1px rgb(var(--gloss-rgb) / 0.18);
}

.fullscreen-frame .sheet-viewport {
  transform: none;
}

.fullscreen-frame .overlay-layer {
  pointer-events: none;
}

.fullscreen-discrepancy {
  position: fixed;
  z-index: 82;
  width: min(22rem, calc(100vw - 2rem));
  padding: var(--space-4);
  color: var(--text);
  background: rgb(var(--surface-rgb) / 0.9);
  border: 1px solid rgb(var(--overlay-rgb) / 0.14);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 70px rgb(var(--shadow-rgb) / 0.46);
  backdrop-filter: blur(18px);
}

.fullscreen-toolbar {
  position: fixed;
  left: 50%;
  bottom: var(--space-4);
  z-index: 4002;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--space-2);
  max-width: calc(100vw - var(--space-8));
  min-height: 3rem;
  padding: 0.38rem var(--space-2);
  overflow-x: auto;
  overflow-y: hidden;
  color: var(--text);
  background: rgb(var(--surface-rgb) / 0.86);
  border: 1px solid rgb(var(--overlay-rgb) / 0.14);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 58px rgb(var(--shadow-rgb) / 0.4);
  transform: translateX(-50%);
  backdrop-filter: blur(18px);
}

.fullscreen-tool-button,
.fullscreen-zoom-button {
  height: 44px;
  min-height: 44px;
  border-radius: var(--radius-md);
}

/* Blue buttons with white text on the fullscreen toolbar (dark bar unchanged). */
.fullscreen-tool-button:not(:disabled),
.fullscreen-zoom-button:not(:disabled) {
  color: var(--on-colour-button);
  background: var(--accent-action-gradient);
  border: 1px solid rgb(var(--accent-border-rgb) / 0.45);
}

.fullscreen-tool-button:not(:disabled):hover,
.fullscreen-zoom-button:not(:disabled):hover {
  color: var(--on-colour-button);
  background: var(--accent-action-gradient-hover);
}

#fullscreenZoomIn:not(:disabled),
#fullscreenZoomOut:not(:disabled) {
  color: var(--accent-strong);
  background: rgb(var(--gloss-rgb) / 0.9);
  border-color: rgb(var(--accent-rgb) / 0.54);
}

#fullscreenZoomIn:not(:disabled):hover,
#fullscreenZoomOut:not(:disabled):hover {
  color: var(--accent-strong);
  background: var(--gloss);
  border-color: rgb(var(--accent-rgb) / 0.72);
}

.fullscreen-toolbar {
  --fullscreen-tool-width: 7.5rem;
  --fullscreen-tool-height: 44px;
}

.fullscreen-tool-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 4.25rem;
  width: max-content;
  padding-inline: var(--space-3);
  line-height: 1;
  white-space: nowrap;
}

.fullscreen-toolbar .fullscreen-tool-button,
.fullscreen-toolbar #fullscreenMeasureButton {
  box-sizing: border-box;
  width: var(--fullscreen-tool-width);
  min-width: var(--fullscreen-tool-width);
  max-width: var(--fullscreen-tool-width);
  height: var(--fullscreen-tool-height);
  min-height: var(--fullscreen-tool-height);
}

.fullscreen-toolbar .fullscreen-tool-button.button-purple:not(:disabled),
.fullscreen-toolbar .fullscreen-tool-button.button-purple.is-active,
.fullscreen-toolbar .fullscreen-tool-button.button-purple[aria-pressed="true"] {
  color: var(--on-colour-button);
  background: var(--complete-action-gradient);
  border-color: rgb(var(--complete-rgb) / 0.62);
}

.fullscreen-tool-button.is-active,
.fullscreen-tool-button[aria-pressed="true"] {
  color: var(--on-colour-button);
  background: linear-gradient(180deg, var(--accent-button), var(--accent-button-press));
  border-color: var(--accent-strong);
  box-shadow: inset 0 2px 6px rgb(var(--shade-rgb) / 0.35);
}

.fullscreen-zoom-controls {
  display: inline-grid;
  flex: 0 0 auto;
  grid-template-columns: 44px 4rem 44px;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem;
  background: rgb(var(--overlay-rgb) / 0.045);
  border: 1px solid rgb(var(--overlay-rgb) / 0.1);
  border-radius: var(--radius-md);
}

.fullscreen-zoom-button {
  display: grid;
  width: 44px;
  min-width: 44px;
  place-items: center;
  color: var(--text);
  font-size: 1.18rem;
  font-weight: 800;
  line-height: 1;
}

.fullscreen-zoom-value {
  display: grid;
  min-width: 0;
  height: 44px;
  place-items: center;
  color: var(--accent-strong);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

/* Pairing fullscreen only. Review without a side class keeps the default mix. */
#manufactureFullscreen.is-yours-drawing .fullscreen-toolbar .fullscreen-tool-button:not(:disabled),
#manufactureFullscreen.is-yours-drawing .fullscreen-toolbar .fullscreen-tool-button.button-purple:not(:disabled),
#manufactureFullscreen.is-yours-drawing .fullscreen-toolbar .fullscreen-zoom-button:not(:disabled) {
  color: var(--on-colour-button);
  background: var(--accent-action-gradient);
  border-color: rgb(var(--accent-border-rgb) / 0.45);
}

#manufactureFullscreen.is-yours-drawing .fullscreen-toolbar .fullscreen-tool-button:not(:disabled):hover,
#manufactureFullscreen.is-yours-drawing .fullscreen-toolbar .fullscreen-tool-button.button-purple:not(:disabled):hover,
#manufactureFullscreen.is-yours-drawing .fullscreen-toolbar .fullscreen-zoom-button:not(:disabled):hover {
  color: var(--on-colour-button);
  background: var(--accent-action-gradient-hover);
}

#manufactureFullscreen.is-yours-drawing .fullscreen-toolbar .fullscreen-tool-button.is-active,
#manufactureFullscreen.is-yours-drawing .fullscreen-toolbar .fullscreen-tool-button[aria-pressed="true"],
#manufactureFullscreen.is-yours-drawing .fullscreen-toolbar .fullscreen-tool-button.button-purple.is-active,
#manufactureFullscreen.is-yours-drawing .fullscreen-toolbar .fullscreen-tool-button.button-purple[aria-pressed="true"] {
  color: var(--on-colour-button);
  background: linear-gradient(180deg, var(--accent-button), var(--accent-button-press));
  border-color: var(--accent-strong);
  box-shadow: inset 0 2px 6px rgb(var(--shade-rgb) / 0.35);
}

#manufactureFullscreen.is-yours-drawing .fullscreen-toolbar #fullscreenZoomIn:not(:disabled),
#manufactureFullscreen.is-yours-drawing .fullscreen-toolbar #fullscreenZoomOut:not(:disabled) {
  color: var(--accent-strong);
  background: rgb(var(--gloss-rgb) / 0.9);
  border-color: rgb(var(--accent-rgb) / 0.54);
}

#manufactureFullscreen.is-yours-drawing .fullscreen-toolbar #fullscreenZoomIn:not(:disabled):hover,
#manufactureFullscreen.is-yours-drawing .fullscreen-toolbar #fullscreenZoomOut:not(:disabled):hover {
  color: var(--accent-strong);
  background: var(--gloss);
  border-color: rgb(var(--accent-rgb) / 0.72);
}

#manufactureFullscreen.is-yours-drawing .fullscreen-toolbar .fullscreen-zoom-controls {
  border-color: rgb(var(--accent-rgb) / 0.42);
}

#manufactureFullscreen.is-yours-drawing .fullscreen-toolbar .fullscreen-zoom-value {
  color: var(--accent-strong);
}

#manufactureFullscreen.is-supplied-drawing .fullscreen-toolbar .fullscreen-tool-button:not(:disabled),
#manufactureFullscreen.is-supplied-drawing .fullscreen-toolbar .fullscreen-tool-button.button-purple:not(:disabled),
#manufactureFullscreen.is-supplied-drawing .fullscreen-toolbar .fullscreen-zoom-button:not(:disabled) {
  color: var(--on-colour-button);
  background: var(--complete-action-gradient);
  border-color: rgb(var(--complete-rgb) / 0.62);
}

#manufactureFullscreen.is-supplied-drawing .fullscreen-toolbar .fullscreen-tool-button:not(:disabled):hover,
#manufactureFullscreen.is-supplied-drawing .fullscreen-toolbar .fullscreen-tool-button.button-purple:not(:disabled):hover,
#manufactureFullscreen.is-supplied-drawing .fullscreen-toolbar .fullscreen-zoom-button:not(:disabled):hover {
  color: var(--on-colour-button);
  background: var(--complete-action-gradient-hover);
}

#manufactureFullscreen.is-supplied-drawing .fullscreen-toolbar .fullscreen-tool-button.is-active,
#manufactureFullscreen.is-supplied-drawing .fullscreen-toolbar .fullscreen-tool-button[aria-pressed="true"],
#manufactureFullscreen.is-supplied-drawing .fullscreen-toolbar .fullscreen-tool-button.button-purple.is-active,
#manufactureFullscreen.is-supplied-drawing .fullscreen-toolbar .fullscreen-tool-button.button-purple[aria-pressed="true"] {
  color: var(--on-colour-button);
  background: linear-gradient(180deg, var(--complete-button), var(--complete-button-press));
  border-color: var(--complete-strong);
  box-shadow: inset 0 2px 6px rgb(var(--shade-rgb) / 0.35);
}

#manufactureFullscreen.is-supplied-drawing .fullscreen-toolbar #fullscreenZoomIn:not(:disabled),
#manufactureFullscreen.is-supplied-drawing .fullscreen-toolbar #fullscreenZoomOut:not(:disabled) {
  color: var(--complete-strong);
  background: rgb(var(--gloss-rgb) / 0.9);
  border-color: rgb(var(--complete-rgb) / 0.54);
}

#manufactureFullscreen.is-supplied-drawing .fullscreen-toolbar #fullscreenZoomIn:not(:disabled):hover,
#manufactureFullscreen.is-supplied-drawing .fullscreen-toolbar #fullscreenZoomOut:not(:disabled):hover {
  color: var(--complete-strong);
  background: var(--gloss);
  border-color: rgb(var(--complete-rgb) / 0.72);
}

#manufactureFullscreen.is-supplied-drawing .fullscreen-toolbar .fullscreen-zoom-controls {
  border-color: rgb(var(--complete-rgb) / 0.42);
}

#manufactureFullscreen.is-supplied-drawing .fullscreen-toolbar .fullscreen-zoom-value {
  color: var(--complete-strong);
}

/* Show all is always the semantic blue action. This ID rule wins over the
   side-specific supplied-drawing palette while keeping the shared token. */
#manufactureFullscreen .fullscreen-toolbar #fullscreenShowAllButton {
  color: var(--on-colour-button);
  background: var(--accent-action-gradient);
  border-color: rgb(var(--accent-border-rgb) / 0.55);
}

#manufactureFullscreen .fullscreen-toolbar #fullscreenShowAllButton:not(:disabled):hover {
  color: var(--on-colour-button);
  background: var(--accent-action-gradient-hover);
  border-color: rgb(var(--accent-border-rgb) / 0.72);
}

#manufactureFullscreen .fullscreen-toolbar #fullscreenShowAllButton:not(:disabled):active {
  color: var(--on-colour-button);
  background: var(--accent-button-press);
}

#manufactureFullscreen .fullscreen-toolbar #fullscreenShowAllButton:disabled {
  color: rgb(var(--text-strong-rgb) / 0.58);
  background: rgb(var(--accent-wash-rgb) / 0.28);
  border-color: rgb(var(--accent-border-rgb) / 0.3);
  cursor: not-allowed;
}

/* No severity edge-stripe — the card keeps one solid uniform border. */

.fullscreen-discrepancy h3 {
  margin-bottom: var(--space-2);
}

.fullscreen-discrepancy p {
  margin-bottom: var(--space-4);
  font-size: 0.92rem;
}

.fullscreen-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.fullscreen-actions .ghost-button {
  white-space: nowrap;
}

/* Distinct colour per discrepancy action so they read apart at a glance. */
.fullscreen-actions [data-fullscreen-nav="-1"]:not(:disabled) {
  color: var(--on-colour-button);
  background: linear-gradient(180deg, var(--action-success-hover), var(--action-success) 55%, color-mix(in srgb, var(--action-success), var(--shade) 24%));
  border: 1px solid rgb(var(--success-rgb) / 0.5);
}

.fullscreen-actions [data-fullscreen-nav="1"]:not(:disabled) {
  color: var(--on-colour-button);
  background: var(--accent-action-gradient);
  border: 1px solid rgb(var(--accent-border-rgb) / 0.45);
}

.fullscreen-actions [data-fullscreen-focus="1"]:not(:disabled) {
  color: var(--on-colour-button);
  background: var(--complete-action-gradient);
  border: 1px solid rgb(var(--complete-border-rgb) / 0.5);
}

.fullscreen-close {
  position: fixed;
  /* Clear the notch / status bar under viewport-fit=cover so the only dismiss
     control on the fullscreen overlay isn't tucked under system UI on phones. */
  top: calc(var(--space-3) + env(safe-area-inset-top, 0px));
  right: calc(var(--space-3) + env(safe-area-inset-right, 0px));
  z-index: 4003;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  background: var(--action-danger);
  color: var(--on-colour-button);
}

/* OA picker bar reserves this same slot so the X cannot cover HEIGHT/WIDTH/DEPTH
   or the title. The drawing still starts below the in-flow bar. */
.fullscreen-viewer.is-open:has(.fullscreen-dimension-picker) .fullscreen-close,
.fullscreen-viewer[aria-hidden="false"].is-open:has(.fullscreen-dimension-picker) .fullscreen-close {
  position: absolute;
  top: calc(0.45rem + env(safe-area-inset-top, 0px));
  right: calc(var(--space-3) + env(safe-area-inset-right, 0px));
  width: 2.75rem;
  min-width: 44px;
  height: 2.75rem;
  min-height: 44px;
}

@media (max-width: 680px) {
  .fullscreen-sheet {
    padding: var(--space-2) var(--space-1) calc(6.9rem + env(safe-area-inset-bottom, 0px));
  }

  /* Raise the fullscreen tool/zoom controls to the app's 44px mobile touch floor. */
  .fullscreen-tool-button,
  .fullscreen-zoom-button {
    height: 2.75rem;
    min-height: 2.75rem;
  }

  .fullscreen-discrepancy {
    width: min(25rem, calc(100vw - 5.25rem));
    max-height: min(34vh, 18rem);
    overflow: auto;
    padding: var(--space-3);
  }

  .fullscreen-discrepancy.fullscreen-dimension-picker {
    width: 100%;
    max-width: none;
    max-height: none;
    overflow: visible;
    padding: 0.4rem calc(3.5rem + var(--space-3) + env(safe-area-inset-right, 0px)) 0.4rem 0.7rem;
  }

  .fullscreen-discrepancy h3 {
    font-size: clamp(1rem, 5vw, 1.28rem);
    line-height: 1.18;
  }

  .fullscreen-discrepancy p {
    margin-bottom: var(--space-3);
    font-size: 0.78rem;
    line-height: 1.45;
  }

  .fullscreen-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
  }

  .fullscreen-actions .ghost-button {
    width: 100%;
    min-width: 0;
    min-height: 2.25rem;
    padding-inline: 0.3rem;
    /* Keep each label (incl. "Focus issue") on one line — no wrapping. */
    white-space: nowrap;
    font-size: 0.62rem;
  }

  .fullscreen-toolbar {
    bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    width: calc(100vw - 1rem);
    max-width: 32rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    padding: 0.5rem;
    overflow-x: hidden;
    overflow-y: hidden;
  }

  .fullscreen-toolbar {
    --fullscreen-tool-height: 44px;
  }

  .fullscreen-toolbar .fullscreen-tool-button,
  .fullscreen-toolbar .primary-button,
  .fullscreen-toolbar .ghost-button {
    width: var(--fullscreen-tool-width);
    min-width: var(--fullscreen-tool-width);
    max-width: var(--fullscreen-tool-width);
    /* Match the app's 44px mobile touch floor (the comment above this block already
       claimed it; these more-specific rules were the ones actually winning at 36px). */
    height: var(--fullscreen-tool-height);
    min-height: var(--fullscreen-tool-height);
    padding-inline: 0.28rem;
    font-size: 0.68rem;
    white-space: nowrap;
  }

  .fullscreen-zoom-controls {
    /* .fullscreen-toolbar is a 2-col grid at this breakpoint; without an
       explicit span this auto-places into column 1 of row 2 only, leaving
       row 2's second column empty instead of spanning the full toolbar. */
    grid-column: 1 / -1;
    flex: 1 1 9rem;
    grid-template-columns: 44px minmax(3.5rem, 1fr) 44px;
    width: auto;
    justify-self: stretch;
    gap: 0.2rem;
    padding: 0.12rem;
  }

  .fullscreen-zoom-button,
  .fullscreen-zoom-value {
    height: 44px;
    min-height: 44px;
  }

  .fullscreen-zoom-button {
    width: 44px;
    min-width: 44px;
  }
}

label {
  display: grid;
  gap: var(--space-2);
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 600;
}

input,
textarea,
select {
  min-height: 2.5rem;
  min-width: 0;
  width: 100%;
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

select {
  color-scheme: dark;
}

.settings-panel select {
  appearance: none;
  -webkit-appearance: none;
  height: var(--control-h);
  padding-right: 2.6rem;
  color: var(--text);
  font-weight: 700;
  letter-spacing: 0.01em;
  background-color: var(--surface-raised);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2396918e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 1.05rem;
  box-shadow:
    0 8px 18px rgb(var(--shadow-rgb) / 0.2),
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.08);
}

.settings-panel select:hover {
  border-color: rgb(var(--accent-rgb) / 0.5);
}

.custom-select {
  position: relative;
  width: 100%;
}

.custom-select-native {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}

.custom-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  height: 3.2rem;
  padding: 0 var(--space-3);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-align: left;
  background:
    linear-gradient(180deg, rgb(var(--overlay-rgb) / 0.065), rgb(var(--overlay-rgb) / 0.012)),
    var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow:
    0 8px 18px rgb(var(--shadow-rgb) / 0.2),
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.08);
  cursor: var(--cursor-pointer);
}

.custom-select-trigger:hover,
.custom-select.is-open .custom-select-trigger {
  border-color: rgb(var(--accent-rgb) / 0.55);
}

.custom-select-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-select-chevron {
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 160ms ease;
}

.custom-select.is-open .custom-select-chevron {
  transform: rotate(180deg);
}

.custom-select-panel {
  position: fixed;
  z-index: 300;
  display: none;
  max-height: min(15rem, calc(100vh - var(--space-8)));
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding: 0.35rem;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 18px 44px rgb(var(--shadow-rgb) / 0.55);
  scrollbar-color: var(--accent) rgb(var(--overlay-rgb) / 0.06);
  scrollbar-width: thin;
}

.custom-select-panel.is-open {
  display: block;
}

.custom-select-option {
  display: block;
  width: 100%;
  padding: 0.62rem 0.7rem;
  color: var(--text);
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: var(--cursor-pointer);
}

.custom-select-option:hover {
  background: rgb(var(--accent-wash-rgb) / 0.18);
}

.custom-select-option.is-selected {
  color: var(--text-strong);
  background: rgb(var(--accent-rgb) / 0.4);
}

/* Editable presets combobox (folder name): a themed dropdown that matches the
   custom selects while still allowing a typed-in custom name. Reuses the
   .custom-select-panel / .custom-select-option styling for the popup. */
.combo-field {
  position: relative;
  min-width: 0;
}

.combo-field > input {
  width: 100%;
  padding-right: 2.6rem;
}

.combo-chevron {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: var(--cursor-pointer);
}

.combo-chevron svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 160ms ease;
}

.combo-chevron:hover svg {
  stroke: var(--text);
}

.combo-field.is-open .combo-chevron svg {
  transform: rotate(180deg);
}

select option,
select optgroup {
  color: var(--text);
  text-transform: uppercase;
  background-color: var(--surface);
}

input:not([type="range"]),
textarea,
select {
  padding-inline: var(--space-3);
}

textarea {
  min-height: 9rem;
  padding-block: var(--space-3);
  line-height: 1.45;
  resize: vertical;
}

input:not([type="range"]):focus,
textarea:focus,
select:focus {
  border-color: var(--accent);
}

input[readonly] {
  color: var(--text-muted);
}

input[type="range"] {
  accent-color: var(--accent);
}

.save-dialog {
  display: grid;
  gap: var(--space-5);
  min-height: 0;
  margin-top: var(--space-5);
  background: transparent;
  border: 0;
  border-radius: 0;
}

.real-export {
  grid-template-columns: minmax(0, 1fr);
}

.input-row {
  display: grid;
  /* minmax(0, 1fr) lets the input shrink so the Browse button stays inside the panel */
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
}

.save-toggle {
  /* .toggle makes these labels display:flex, so no grid tracks here.
     Fill the column and let long labels wrap instead of forcing a single
     content-width line that overflows the panel sideways. */
  width: auto;
  max-width: 100%;
}

.save-dialog .save-toggle {
  align-items: center;
}

.save-dialog .input-row .primary-button {
  white-space: nowrap;
}

#saveScreen .save-dialog.real-export #saveApprovalTagButton {
  color: var(--on-colour-button);
  background:
    linear-gradient(180deg, rgb(var(--overlay-rgb) / 0.18), transparent 34%),
    var(--complete-action-gradient);
  border: 1px solid rgb(var(--complete-border-rgb) / 0.72);
  box-shadow: inset 0 1px 0 rgb(var(--gloss-rgb) / 0.22), 0 6px 16px rgb(var(--complete-rgb) / 0.16);
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 140ms ease;
}

#saveScreen .save-dialog.real-export #saveApprovalTagButton:not(:disabled):hover,
#saveScreen .save-dialog.real-export #saveApprovalTagButton:not(:disabled):focus-visible {
  color: var(--on-colour-button);
  background:
    linear-gradient(180deg, rgb(var(--overlay-rgb) / 0.22), transparent 34%),
    var(--complete-action-gradient-hover);
  border-color: rgb(var(--complete-border-rgb) / 0.9);
  box-shadow: inset 0 1px 0 rgb(var(--gloss-rgb) / 0.24), 0 8px 18px rgb(var(--complete-rgb) / 0.22);
}

#saveScreen .save-dialog.real-export #saveApprovalTagButton:not(:disabled):active {
  color: var(--on-colour-button);
  background: linear-gradient(180deg, var(--complete-button), var(--complete-button-press));
  border-color: rgb(var(--complete-rgb) / 0.9);
  box-shadow: inset 0 1px 2px rgb(var(--shade-rgb) / 0.24);
}

#saveName,
#approvalNameTag {
  text-transform: uppercase;
}

.save-export-actions {
  /* Export and Share keep equal tracks as the panel resizes. */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--space-3);
  width: 100%;
  margin-top: 0;
}

.save-dialog.real-export {
  container: save-dialog / inline-size;
}

.save-export-actions .primary-button,
.save-export-actions .share-pdf-button,
.save-export-actions .ghost-button {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  padding-inline: var(--space-2);
  font-size: 0.72rem;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.save-export-actions .desktop-download-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.save-export-actions .desktop-download-link[hidden] {
  display: none;
}

.save-toggle span {
  flex: 1;
  min-width: 0;
  /* small nudge (~1mm) away from the checkbox */
  margin-left: 0.16rem;
}

/* A one-line "what this actually does" under a toggle label, so two related
   switches cannot read as duplicates of each other. */
.save-toggle span small {
  display: block;
  margin-top: 0.2rem;
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
}

/* Greyed out rather than hidden: the setting still exists, it just has no
   effect until the toggle it depends on is on. */
.save-toggle.is-disabled {
  opacity: 0.45;
}

.success-message {
  min-height: 1.7rem;
  margin: var(--space-4) 0 0;
  color: var(--accent-text);
  font-weight: 600;
  overflow-wrap: anywhere;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.success-message.is-success {
  color: var(--success-text);
}

.success-message.is-error {
  color: var(--danger-text);
}

.permission-dialog {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 2rem);
  background: rgb(var(--bg-strong-rgb) / 0.82);
  backdrop-filter: blur(0);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.permission-dialog[aria-hidden="true"] {
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.permission-dialog.is-open,
.permission-dialog[aria-hidden="false"].is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.permission-dialog-card {
  position: relative;
  width: min(520px, 100%);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--panel-radius);
  box-shadow: 0 18px 48px rgb(var(--shadow-rgb) / 0.45);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.comment-editor-dialog {
  z-index: 224;
}

.comment-editor-card {
  display: grid;
  gap: var(--space-3);
  width: min(28rem, 100%);
  border-radius: var(--panel-radius);
}

.approval-confirmation-card {
  display: grid;
  gap: var(--space-3);
  width: min(42rem, 100%);
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
}

.approval-confirmation-card h2,
.approval-confirmation-card p {
  margin: 0;
}

.approval-confirmation-card .permission-dialog-actions {
  gap: 8px;
  margin-top: var(--space-2);
}

.approval-confirmation-card .permission-dialog-actions > button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  white-space: normal;
}

.review-decision-dialog-summary {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-3);
  background: rgb(var(--bg-rgb) / 0.34);
  border: 1px solid rgb(var(--accent-rgb) / 0.28);
  border-radius: var(--panel-radius);
}

.review-decision-warning[hidden] {
  display: none;
}

.review-decision-summary-counts {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-2);
  min-width: 0;
}

.review-decision-count {
  display: grid;
  align-content: center;
  min-width: 0;
  min-height: 3.25rem;
  padding: var(--space-2);
  background: rgb(var(--overlay-rgb) / 0.035);
  border: 1px solid rgb(var(--overlay-rgb) / 0.1);
  border-radius: var(--radius-md);
}

.review-decision-count strong {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 1rem;
}

.review-decision-count span {
  min-width: 0;
  color: var(--text-muted);
  font-size: 0.58rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.review-decision-count.is-matched,
.review-decision-count.is-correct {
  border-color: rgb(var(--success-rgb) / 0.48);
}

.review-decision-count.is-warning {
  border-color: rgb(var(--warning-rgb) / 0.62);
}

.review-decision-count.is-incorrect {
  border-color: rgb(var(--danger-rgb) / 0.62);
}

.review-decision-dialog-links {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.review-decision-dialog-links {
  max-height: min(16rem, 35dvh);
  overflow-y: auto;
}

.review-decision-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  color: var(--text);
  text-align: left;
  background: rgb(var(--overlay-rgb) / 0.035);
  border: 1px solid rgb(var(--overlay-rgb) / 0.1);
  border-radius: var(--radius-md);
}

.review-decision-link:hover,
.review-decision-link:focus-visible {
  background: rgb(var(--accent-wash-rgb) / 0.14);
  border-color: rgb(var(--accent-rgb) / 0.64);
}

.review-decision-link-status {
  padding: 0.22rem 0.42rem;
  font-size: 0.56rem;
  font-weight: 800;
  border: 1px solid currentColor;
  border-radius: 999px;
}

.review-decision-link-status.is-incorrect { color: var(--danger-text); }
.review-decision-link-status.is-unresolved { color: var(--warning-text); }

.review-decision-empty,
.review-decision-more {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.65rem;
}

.review-decision-warning {
  margin: 0;
  padding: var(--space-3);
  color: var(--warning);
  background: rgb(var(--warning-rgb) / 0.1);
  border: 1px solid rgb(var(--warning-rgb) / 0.55);
  border-radius: var(--radius-md);
  font-weight: 700;
}

.approval-consent-description {
  margin: 0;
  padding: var(--space-3);
  color: var(--text);
  background: rgb(var(--accent-wash-rgb) / 0.1);
  border: 1px solid rgb(var(--accent-rgb) / 0.45);
  border-radius: var(--radius-md);
}

.approval-consent-description[hidden] {
  display: none;
}

.comment-editor-card h2,
.comment-editor-card p {
  margin: 0;
}

.comment-editor-card > label {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  color: var(--text);
  font-weight: 700;
}

.comment-editor-card input,
.comment-editor-card textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  text-transform: uppercase;
}

.comment-editor-card textarea {
  min-height: 6rem;
  resize: vertical;
}

.comment-editor-status {
  min-height: 1.2rem;
  color: var(--danger-text);
  font-size: 0.78rem;
  font-weight: 700;
}

@media (max-width: 640px) {
  .comment-editor-dialog {
    padding: 0.75rem;
  }

  .comment-editor-card {
    max-height: calc(100dvh - 1.5rem);
    overflow-y: auto;
  }

  #approvalConfirmationDialog {
    padding: 0.75rem;
  }

  .approval-confirmation-card {
    max-height: calc(100dvh - 1.5rem);
    overflow-y: auto;
  }

  .approval-confirmation-card .permission-dialog-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .approval-confirmation-card .permission-dialog-actions > button {
    width: 100%;
    min-width: 0;
  }

  .review-decision-summary-counts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  #approvalConfirmationDialog,
  .approval-confirmation-card,
  .approval-confirmation-card .permission-dialog-actions > button {
    animation: none;
    transition: none;
  }
}

.dialog-close-button {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  color: var(--on-colour-button);
  background: var(--action-danger);
  border: 1px solid rgb(var(--overlay-rgb) / 0.22);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 1px 0 rgb(var(--gloss-rgb) / 0.08);
  cursor: pointer;
}

.dialog-close-button:hover,
.dialog-close-button:focus-visible {
  color: var(--on-colour-button);
  background: var(--action-danger-hover);
  border-color: rgb(var(--overlay-rgb) / 0.3);
}

/* Desktop app Share dialog (owner design 2026-10-19): two big icon buttons,
   each icon on its own colour with a white glyph. */
.share-pdf-file {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.share-pdf-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
.share-pdf-option {
  min-width: 0;
  height: auto;
  white-space: normal;
  min-height: 10rem;
  padding: 1rem 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  text-align: center;
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--ui-radius-control);
  cursor: pointer;
  font: inherit;
}
.share-pdf-option:not(:disabled):hover,
.share-pdf-option:focus-visible {
  border-color: rgb(var(--accent-border-rgb) / 0.72);
  background: var(--surface-muted);
}
.share-pdf-option:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.share-pdf-option-icon {
  width: 3.5rem;
  height: 3.5rem;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  color: var(--on-colour-button);
}
.share-pdf-option-icon svg {
  width: 1.6rem;
  height: 1.6rem;
}
.share-pdf-option-icon--copy {
  color: var(--on-colour-button);
  background: linear-gradient(180deg, var(--action-success-hover), var(--action-success) 52%, var(--action-success-press));
}
.share-pdf-option-icon--email {
  color: var(--on-colour-button);
  background: var(--accent-action-gradient);
}
.share-pdf-option-label {
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
}
.share-pdf-option-hint {
  max-width: 100%;
  white-space: normal;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--text-muted);
}
@media (max-width: 480px) {
  .share-pdf-options { grid-template-columns: minmax(0, 1fr); }
  .share-pdf-option { min-height: 6.5rem; }
}

/* Purple "Download again" in the save-complete dialog. */
.save-success-download-again {
  color: var(--on-colour-button);
  background: var(--complete-button);
  border: 1px solid var(--complete-active);
}
.save-success-download-again:hover,
.save-success-download-again:focus-visible {
  background: var(--complete-button-hover);
  color: var(--on-colour-button);
  border-color: var(--complete-hover);
}

.permission-dialog-card h2 {
  margin: 0.35rem 0 0.75rem;
  font-size: 1.35rem;
}

.permission-dialog-card p {
  margin: 0 0 0.85rem;
  color: var(--muted);
  line-height: 1.5;
}

.permission-steps {
  margin: 0 0 1rem 1.15rem;
  padding: 0;
  color: var(--text);
  line-height: 1.55;
}

.permission-steps li + li {
  margin-top: 0.45rem;
}

.permission-host {
  font-family: var(--mono-font, "IBM Plex Mono", monospace);
  font-size: 0.92rem;
  color: var(--accent-text) !important;
}

.permission-dialog-actions {
  margin-top: 1.1rem;
}

#productMismatchDialog .permission-dialog-card {
  background:
    linear-gradient(135deg, rgb(var(--accent-wash-rgb) / 0.22), rgb(var(--complete-wash-rgb) / 0.2)),
    var(--panel);
  border-color: rgb(var(--accent-border-rgb) / 0.42);
}

#productMismatchContinue {
  color: var(--on-colour-button);
  background: var(--accent-action-gradient);
  border-color: rgb(var(--accent-rgb) / 0.72);
}

#productMismatchRetry {
  color: var(--on-colour-button);
  background: var(--complete-action-gradient);
  border-color: rgb(var(--complete-rgb) / 0.72);
}

#productMismatchDialog .permission-dialog-actions > .primary-button,
#productMismatchDialog .permission-dialog-actions > .ghost-button,
#revisionPromptDialog .permission-dialog-actions > button {
  flex: 1 1 0;
  min-width: min(100%, 7.5rem);
  white-space: normal;
  text-align: center;
}

.save-success-card h2 {
  color: var(--success-text);
}

.save-success-path {
  margin: 0 0 0.85rem;
  font-family: var(--mono-font, "IBM Plex Mono", monospace);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--accent-text) !important;
  word-break: break-word;
}

.save-success-note {
  margin: 0 0 0.85rem;
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.45;
}

.settings-panel {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100vh;
  max-width: none;
  /* Settings fills the window with a 10 mm gap on every side (Jon, 2026-10-07). */
  --settings-edge-gap: 10mm;
  padding: var(--settings-edge-gap);
  overflow: hidden;
  color: var(--text);
  background: rgb(var(--bg-strong-rgb) / 0.82);
  backdrop-filter: blur(6px);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: none;
}

.settings-panel[aria-hidden="true"] {
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Closed full-viewport overlays stay display:grid at 100vw×100dvh.
   visibility:hidden is not enough if a child is visible or a later
   phone rule raises z-index. Closed layers must never eat taps. */
.permission-dialog:not(.is-open),
.permission-dialog[aria-hidden="true"],
.review-queue-dialog:not(.is-open),
.review-queue-dialog[aria-hidden="true"],
.review-queue-panel:not(.is-open),
.review-queue-panel[aria-hidden="true"],
.fullscreen-viewer:not(.is-open),
.fullscreen-viewer[aria-hidden="true"],
.settings-panel:not(.is-open),
.settings-panel[aria-hidden="true"] {
  pointer-events: none !important;
}

.permission-dialog:not(.is-open) *,
.permission-dialog[aria-hidden="true"] *,
.review-queue-dialog:not(.is-open) *,
.review-queue-dialog[aria-hidden="true"] *,
.review-queue-panel:not(.is-open) *,
.review-queue-panel[aria-hidden="true"] *,
.fullscreen-viewer:not(.is-open) *,
.fullscreen-viewer[aria-hidden="true"] *,
.settings-panel:not(.is-open) *,
.settings-panel[aria-hidden="true"] * {
  pointer-events: none !important;
}

.settings-panel.is-open,
.settings-panel[aria-hidden="false"].is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  backdrop-filter: blur(10px);
}

.settings-save-bar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5) var(--space-4);
  margin: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.settings-save-bar .primary-button,
.settings-save-bar .settings-cancel-button {
  flex: 0 1 13rem;
  min-width: 0;
  width: auto;
  justify-content: center;
  text-align: center;
}

.settings-cancel-button {
  color: var(--on-colour-button);
  background: var(--action-danger);
  border: 1px solid transparent;
}

.settings-cancel-button:hover {
  background: var(--action-danger-hover);
  color: var(--on-colour-button);
  border-color: transparent;
}

.settings-panel form {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  max-width: none;
  /* Fixed height, not auto: with one section shown at a time the dialog used
     to jump between a full-height Stamp panel and a four-line Billing panel
     every time the sidebar was clicked. */
  height: calc(var(--app-visible-height, 100vh) - 2 * var(--settings-edge-gap, 10mm));
  max-height: calc(var(--app-visible-height, 100vh) - 2 * var(--settings-edge-gap, 10mm));
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--panel-radius);
  box-shadow: 0 30px 90px rgb(var(--shadow-rgb) / 0.6);
}

.settings-body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: var(--space-4);
  padding: var(--space-5);
  padding-bottom: var(--space-6);
  overflow-x: hidden;
  overflow-y: auto;
  /* Hug the panel edge instead of floating the scrollbar over the form. */
  margin-right: calc(-1 * var(--space-5));
  padding-right: var(--space-5);
  scrollbar-gutter: stable;
  scrollbar-color: var(--accent) rgb(var(--overlay-rgb) / 0.04);
  scrollbar-width: thin;
}

.settings-body::-webkit-scrollbar {
  width: 0.7rem;
}

.settings-body::-webkit-scrollbar-track {
  background: rgb(var(--overlay-rgb) / 0.04);
  border-radius: 999px;
}

.settings-body::-webkit-scrollbar-thumb {
  background: var(--accent);
  border: 2px solid var(--surface);
  border-radius: 999px;
}

.settings-body::-webkit-scrollbar-thumb:hover {
  background: var(--accent-hover);
}

.settings-panel form::-webkit-scrollbar {
  width: 0.7rem;
}

.settings-panel form::-webkit-scrollbar-track {
  background: rgb(var(--overlay-rgb) / 0.06);
  border-radius: 999px;
}

.settings-panel form::-webkit-scrollbar-thumb {
  background: var(--accent);
  border: 2px solid var(--surface);
  border-radius: 999px;
}

.settings-panel form::-webkit-scrollbar-thumb:hover {
  background: var(--accent-strong);
}

.settings-panel form > *,
.settings-panel .settings-section,
.settings-panel label,
.settings-panel select,
.settings-panel input,
.settings-panel textarea {
  max-width: 100%;
  box-sizing: border-box;
}

.settings-panel * {
  min-width: 0;
}

.settings-status {
  max-width: 100%;
  min-height: 1.5rem;
  margin-bottom: 0;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
  word-break: break-word;
  transition: color 0.2s ease;
}

.settings-status.is-saved {
  color: var(--accent-text);
  font-weight: 700;
}

.settings-panel form > header {
  display: flex;
  position: relative;
  z-index: 20;
  flex: 0 0 auto;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-5) var(--space-5) var(--space-3);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

/* Settings reads as an account surface, not a control strip: a quiet
   sidebar of sections on the left, one section at a time on the right.
   Sentence case and a single flat accent, so the nav never competes with
   the settings it is pointing at. */
.settings-shell {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
}

.settings-tabs {
  display: flex;
  flex-direction: column;
  align-content: start;
  gap: 2px;
  min-height: 0;
  padding: var(--space-4) var(--space-3);
  overflow-y: auto;
  background: rgb(var(--overlay-rgb) / 0.018);
  border-right: 1px solid var(--border);
}

.settings-mobile-nav {
  display: none;
}

.settings-tab {
  min-height: 44px;
  padding: 0 var(--space-3);
  color: var(--text-muted);
  font: 700 0.78rem/1 var(--font-ui);
  text-align: left;
  letter-spacing: 0.04em;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: var(--cursor-pointer);
  transition: background-color 140ms ease, color 140ms ease;
}

.settings-tab:hover {
  color: var(--text);
  background: rgb(var(--overlay-rgb) / 0.05);
}

/* One selected treatment for every section. The per-section gradients that
   used to live here made the nav the loudest thing in the dialog. */
.settings-tab.is-active,
.settings-tab-stamp.is-active,
.settings-tab-saving.is-active {
  color: var(--text-strong);
  background: rgb(var(--overlay-rgb) / 0.08);
  border-color: rgb(var(--overlay-rgb) / 0.1);
}

.settings-tab-panel {
  display: grid;
  gap: var(--space-4);
}

.stamp-settings-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  padding: 0.25rem;
  background: rgb(var(--overlay-rgb) / 0.025);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.stamp-settings-tab {
  min-height: 2.75rem;
  padding: 0 var(--space-4);
  color: var(--text-muted);
  font: 700 0.76rem/1 var(--font-ui);
  letter-spacing: 0.04em;
  background: transparent;
  border: 1px solid transparent;
  border-radius: calc(var(--radius-md) - 0.2rem);
  cursor: var(--cursor-pointer);
}

.stamp-settings-tab:is(:hover, :focus-visible) {
  color: var(--text);
  background: rgb(var(--overlay-rgb) / 0.05);
}

.stamp-settings-tab:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.stamp-settings-tab.is-active {
  color: var(--on-colour-button);
  background: var(--accent-button-press);
  border-color: rgb(var(--accent-rgb) / 0.55);
  box-shadow: inset 0 1px 0 rgb(var(--gloss-rgb) / 0.16);
}

.stamp-settings-panel {
  display: grid;
}

.stamp-settings-panel[hidden] {
  display: none;
}

.settings-panel-fields {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.settings-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  min-height: 1.35rem;
  margin-left: 0.35rem;
  padding: 0 0.35rem;
  color: var(--text-muted);
  font-size: 0.68rem;
  background: rgb(var(--overlay-rgb) / 0.07);
  border-radius: 999px;
}

[data-settings-panel]:not(.is-active) {
  display: none;
}

#settingsDialog.is-settings-stamp [data-settings-panel="stamp"] {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
}

#settingsDialog.is-settings-stamp .settings-status,
#settingsDialog.is-settings-stamp .settings-save-bar {
  grid-column: 1 / -1;
}

#settingsDialog.is-settings-stamp .settings-status {
  min-height: 1rem;
  font-size: 0.72rem;
  line-height: 1.2;
}

#settingsDialog.is-settings-stamp .settings-save-bar {
  margin-top: 0;
}

/* The stamp panel used to shrink the save bar to claw back vertical room.
   Tool settings still need 44px actions even though this is a dense panel.
   The room has to come from somewhere other than the buttons. */
#settingsDialog.is-settings-stamp .settings-save-bar .primary-button,
#settingsDialog.is-settings-stamp .settings-save-bar .settings-cancel-button {
  min-height: 2.75rem;
}

#settingsDialog.is-settings-stamp .stamp-settings,
#settingsDialog.is-settings-stamp .date-position-section {
  align-self: start;
  gap: var(--space-3);
  padding: var(--space-3);
}

#settingsDialog.is-settings-stamp .stamp-settings {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
}

#settingsDialog.is-settings-stamp .stamp-library-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

#settingsDialog.is-settings-stamp .stamp-coverflow {
  height: clamp(11rem, 24vh, 13rem);
}

#settingsDialog.is-settings-stamp .stamp-cover {
  width: min(10.5rem, calc(100% - 2.5rem));
  height: min(10.5rem, calc(100% - 2rem));
}

#settingsDialog.is-settings-stamp .stamp-preview-workbench,
#settingsDialog.is-settings-stamp .stamp-config-workbench {
  padding: var(--space-2);
}

#settingsDialog.is-settings-stamp .stamp-config-workbench {
  gap: var(--space-2);
}

#settingsDialog.is-settings-stamp .stamp-library-foot {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#settingsDialog.is-settings-stamp .stamp-upload-toggle {
  min-height: 2.75rem;
}

#settingsDialog.is-settings-stamp .stamp-library-actions {
  flex-wrap: nowrap;
  gap: var(--space-2);
}

#settingsDialog.is-settings-stamp #stampLibraryStatus {
  grid-column: auto;
  align-self: center;
  min-height: 0;
  margin: 0;
  text-align: right;
}

#settingsDialog.is-settings-stamp .date-pos-stage {
  width: min(7.5rem, 46%);
}

.settings-panel form > header > div {
  min-width: 0;
}

.settings-section {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
  background: rgb(var(--overlay-rgb) / 0.025);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

/* ================================================================
   Account surface

Sidebar of sections on the left, one section at a time on the right, and
   bands separated by a hairline instead of stacked cards. The app's
   uppercase drawing-office voice is kept deliberately: this panel is part
   of the tool, not a separate account website, and switching case here
   would leave one screen speaking differently from every other.

   Scoped to #settingsDialog so nothing here leaks into the review screens.
   ================================================================ */
#settingsDialog h2 {
  font-size: 1.05rem;
  font-weight: 800;
}

#settingsDialog h3 {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 800;
}

/* Sections become bands separated by a hairline instead of stacked cards.
   Cards inside a card is the look this was asked to move away from. */
#settingsDialog .settings-section {
  gap: var(--space-3);
  padding: 0 0 var(--space-5);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
}

#settingsDialog .settings-tab-panel > .settings-section:last-of-type,
#settingsDialog .settings-panel-fields > .settings-section:last-of-type {
  padding-bottom: var(--space-2);
  border-bottom: 0;
}

/* The eyebrow labels ("PROFILE", "SECURITY") were section dividers back
   when every section was one long scroll. The sidebar does that job now. */
#settingsDialog .settings-body .screen-label {
  display: none;
}

#settingsDialog .settings-section-header {
  display: grid;
  gap: 0.3rem;
  padding: 0;
}

#settingsDialog .settings-section-header > span {
  max-width: 62ch;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
}

#settingsDialog .settings-body label {
  gap: 0.4rem;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 500;
}

#settingsDialog .settings-body :is(input, select, textarea) {
  font-size: 0.88rem;
  font-weight: 500;
}

#settingsDialog .settings-body :is(input:not([type="checkbox"]):not([type="color"]), select) {
  max-width: 26rem;
}

/* Actions sit at their own width on the left, not as full-bleed bars. A
   settings action is a small confirmation, not a call to action. */
/* :not(.icon-only) because this rule was about text actions not stretching to
   full width. Applied to icon buttons it beat their own sizing on specificity
   and squeezed the date colour dropper to 18px, under the touch minimum. */
#settingsDialog .settings-body .ghost-button:not(.icon-only) {
  width: fit-content;
  min-width: 0;
  font-size: 0.76rem;
  font-weight: 700;
}

/* One height for every control in Settings. These were a mix of 2.3rem
   ghost buttons, taller primaries and browser-default inputs, so no two rows
   lined up. 2.75rem is the touch-target floor the responsive audit measures. */
#settingsDialog .settings-body :is(.ghost-button, .primary-button, .stamp-carousel-nav),
#settingsDialog .settings-body :is(input:not([type="checkbox"]):not([type="color"]), select, .custom-select-trigger) {
  min-height: 2.75rem;
}

/* The colour swatches and the eyedropper are deliberately small square chips,
   not full-height controls. */
#settingsDialog .settings-body :is(.comment-colour-swatch, .ghost-button.icon-only) {
  min-height: 0;
}

#settingsDialog .settings-body .settings-status {
  font-size: 0.8rem;
  font-weight: 400;
}

/* The section's commit action sits at the trailing edge, under the right of
   the fields it saves — same reading order as the dialog's own Save bar.
   Class-level so Account (Save profile) and Security (Change password) agree. */
#settingsDialog .settings-panel-action {
  width: fit-content;
  justify-self: end;
  min-height: 2.75rem;
  padding-inline: var(--space-4);
}

.account-facts,
.quota-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--border);
}

/* The label column was 0.7fr and the value 1.3fr, which stranded the trailing
   meta ("0 sign-ins") against the far edge with a wide empty gutter. Label
   hugs its text, value sits right beside it, meta trails as a quiet chip. */
.account-fact {
  display: grid;
  grid-template-columns: minmax(6.5rem, auto) minmax(0, 1fr) auto;
  gap: var(--space-2) var(--space-4);
  align-items: baseline;
  min-height: 2.9rem;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}

.account-fact > span {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}

.account-fact > small {
  justify-self: end;
  padding: 0.15rem 0.5rem;
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  background: rgb(var(--overlay-rgb) / 0.04);
  border-radius: 999px;
}

.account-fact > small:empty {
  display: none;
}

.account-fact > strong {
  min-width: 0;
  font-size: 0.88rem;
  overflow-wrap: anywhere;
}

.account-fact > a {
  justify-self: end;
  color: var(--accent-strong);
  font-size: 0.8rem;
  font-weight: 700;
}

/* ---- Approval receipts ---- */
.approval-receipt-row {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  color: var(--on-colour-button);
  background: linear-gradient(135deg, var(--accent-button) 0%, var(--accent-button-press) 58%, var(--accent-button-press) 100%);
  border: 0;
  border-radius: var(--radius-md);
  cursor: var(--cursor-pointer);
  transition: filter 140ms ease, transform 140ms ease;
}

#approvalReceiptsList {
  gap: 5mm;
  border-top: 0;
}

.approval-receipt-row:is(:hover, :focus-visible) {
  filter: brightness(1.08);
}

.approval-receipt-row:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.approval-receipt-row:active {
  transform: translateY(1px);
}

.approval-receipt-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  align-items: baseline;
  justify-content: space-between;
}

.approval-receipt-head strong {
  font-size: 0.92rem;
}

.approval-receipt-row code {
  padding: 0.15rem 0.45rem;
  color: var(--text-strong);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  background: color-mix(in srgb, color-mix(in srgb, var(--accent-wash) 14%, var(--bg)) 24%, transparent);
  border-radius: var(--radius-sm);
  overflow-wrap: anywhere;
}

.approval-receipt-facts {
  display: grid;
  grid-template-columns: minmax(8rem, auto) minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
  margin: 0;
}

.approval-receipt-facts dt {
  color: var(--text-strong);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}

.approval-receipt-facts dd {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
  margin: 0;
  justify-items: start;
  font-size: 0.84rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.approval-receipt-facts dd small {
  color: rgb(var(--text-strong-rgb) / 0.82);
  font-size: 0.76rem;
  line-height: 1.5;
  text-transform: none;
  letter-spacing: 0;
}

.receipt-detail-dialog,
.stamp-library-dialog {
  padding: 0;
  color: var(--text);
  background: var(--panel);
}

.receipt-detail-dialog {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  border: 0;
}

.stamp-library-dialog {
  width: min(980px, calc(100vw - clamp(2.5rem, 8vw, 6rem)));
  max-width: 980px;
  height: min(42rem, calc(var(--app-visible-height, 100vh) - clamp(2rem, 8vh, 6rem)));
  max-height: calc(var(--app-visible-height, 100vh) - clamp(2rem, 8vh, 6rem));
  margin: auto;
  border: 1px solid var(--border);
  border-radius: var(--panel-radius);
  box-shadow: 0 30px 90px rgb(var(--shadow-rgb) / 0.6);
}

.receipt-detail-dialog::backdrop {
  background: rgb(var(--bg-strong-rgb) / 0.88);
}

.stamp-library-dialog::backdrop {
  background: transparent;
}

.receipt-detail-dialog[open],
.stamp-library-dialog[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.receipt-detail-header,
.stamp-library-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 5.5rem;
  padding: var(--space-4) clamp(var(--space-4), 4vw, var(--space-8));
  background:
    linear-gradient(90deg, rgb(var(--accent-wash-rgb) / 0.28), transparent 70%),
    var(--surface-raised);
  border-bottom: 1px solid rgb(var(--accent-rgb) / 0.45);
}

.receipt-detail-header :is(p, h2),
.stamp-library-dialog-header :is(p, h2) {
  margin: 0;
}

.receipt-detail-header p,
.stamp-library-dialog-header p {
  color: var(--accent-strong);
  font: 700 0.72rem/1 var(--font-ui);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}

.receipt-detail-header h2,
.stamp-library-dialog-header h2 {
  margin-top: 0.35rem;
  font: 700 clamp(1.2rem, 2.5vw, 2rem)/1.1 var(--font-head);
}

.receipt-detail-content {
  display: grid;
  align-content: start;
  gap: var(--space-6);
  width: min(64rem, calc(100% - 2 * var(--space-5)));
  margin: 0 auto;
  padding: clamp(var(--space-6), 5vw, var(--space-10)) 0;
  overflow-y: auto;
}

.receipt-detail-header .close-button,
.stamp-library-dialog-header .close-button {
  width: 2.75rem;
  min-width: 2.75rem;
  height: 2.75rem;
  min-height: 2.75rem;
}

.receipt-detail-content .approval-receipt-head {
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border);
}

.receipt-detail-content .approval-receipt-head strong {
  color: var(--accent-strong);
  font-size: clamp(1.15rem, 2vw, 1.65rem);
}

.receipt-detail-content .approval-receipt-facts {
  grid-template-columns: minmax(11rem, 0.35fr) minmax(0, 1fr);
  gap: var(--space-5) var(--space-8);
}

.receipt-detail-content .approval-receipt-facts dt {
  color: var(--accent-strong);
  font-size: 0.78rem;
}

.receipt-detail-content .approval-receipt-facts dd {
  font-size: 1rem;
  line-height: 1.65;
}

@media (max-width: 620px) {
  .approval-receipt-facts {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.2rem;
  }

  .approval-receipt-facts dt {
    margin-top: var(--space-2);
  }

  .receipt-detail-content .approval-receipt-facts {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
  }
}

.settings-empty {
  margin: var(--space-4) 0;
  color: var(--text-muted);
  font-size: 0.84rem;
}

/* Settings > Appearance. The background tiles and the list of template parts are
   built from the theme registry (features/theme.js) by
   renderAppearanceColourControls. The template is plain markup in index.html,
   painted with the live theme tokens only, so it repaints as a colour changes.
   Nothing here names a colour. */
.appearance-dashboard,
.appearance-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}

.appearance-group {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  margin: 0;
  padding: var(--space-3);
  background: rgb(var(--overlay-rgb) / 0.018);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.appearance-group legend {
  float: left;
  width: 100%;
  margin: 0 0 var(--space-2);
  padding: 0;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
}

.appearance-group legend + * {
  clear: both;
}

.appearance-group-help {
  grid-column: 1 / -1;
  margin: calc(-1 * var(--space-1)) 0 var(--space-2);
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.45;
}

/* The Background tiles. A tile shows its own values, whatever theme is active.
   They arrive as inline custom properties from the theme registry. */
.appearance-bases {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

/* The template editor: the template (380px) beside the editor on a wide screen.
   The editor goes below the template on a window 900px wide or less, and wherever
   the frame is too narrow for both (the Settings content is at most about 760px,
   so the frame is measured, not the window). */
.appearance-template-frame {
  container: appearance-template / inline-size;
  min-width: 0;
}

.appearance-template-editor {
  display: grid;
  grid-template-columns: minmax(0, 23.75rem) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

@container appearance-template (max-width: 39.75rem) {
  .appearance-template-editor {
    grid-template-columns: minmax(0, 1fr);
  }

  .appearance-template,
  .appearance-editor {
    width: 100%;
    max-width: 32rem;
  }
}

@media (max-width: 900px) {
  .appearance-template-editor {
    grid-template-columns: minmax(0, 1fr);
  }

  .appearance-template,
  .appearance-editor {
    width: 100%;
    max-width: 32rem;
  }
}

/* The template. Every part is painted with a theme token. A part the user can
   select is .appearance-template-part: a dashed outline marks the selected
   one, and a lighter one marks the innermost part under the pointer. */
.appearance-template {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-2);
  color: var(--text);
  font-size: 0.66rem;
  line-height: 1.3;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  -webkit-user-select: none;
  user-select: none;
}

.appearance-template-part {
  cursor: var(--cursor-pointer);
}

.appearance-template-part:not(.is-selected):hover:not(:has(.appearance-template-part:hover)) {
  outline: 1px dashed rgb(var(--text-strong-rgb) / 0.55);
  outline-offset: 2px;
}

.appearance-template-part.is-selected {
  outline: 2px dashed var(--text-strong);
  outline-offset: 2px;
}

.appearance-template-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-strong);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.appearance-template-logo {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 1.45rem;
  height: 1.45rem;
  background: var(--logo-color);
  color: var(--logo-ink);
  border-radius: var(--radius-sm);
}

.appearance-template-brand {
  color: var(--text-strong);
  font-family: var(--font-head);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
}

.appearance-template-steps {
  display: flex;
  gap: var(--space-3);
  margin-left: auto;
  color: var(--text-muted);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.appearance-template-steps > .is-active {
  color: var(--text);
}

.appearance-template-panel {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.appearance-template-heading {
  justify-self: start;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 700;
}

.appearance-template-note {
  justify-self: start;
  color: var(--text-muted);
}

.appearance-template-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: stretch;
}

.appearance-template-input {
  padding: 0.45rem 0.6rem;
  color: var(--text-muted);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.appearance-template-disabled {
  display: grid;
  place-items: center;
  padding: 0 0.75rem;
  color: var(--text-muted);
  font-weight: 700;
  background: var(--surface-muted);
  border-radius: var(--radius-sm);
  opacity: 0.72;
}

/* A thin line, with a taller area around it so it can be hit. */
.appearance-template-divider {
  position: relative;
  height: 14px;
}

.appearance-template-divider::before {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  border-top: 2px solid var(--border);
  translate: 0 -50%;
}

.appearance-template-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.appearance-template-card {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.appearance-template-card-title {
  justify-self: start;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.appearance-template-card-title.is-yours {
  color: var(--accent-text);
}

.appearance-template-card-title.is-supplied {
  color: var(--complete-text);
}

.appearance-template-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

/* Buttons and chips are real fills with their real label ink, so the template
   shows exactly what a colour does to a button. */
.appearance-template-button,
.appearance-template-chip {
  display: inline-grid;
  place-items: center;
  min-height: 1.7rem;
  padding: 0 0.6rem;
  font-weight: 800;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  box-shadow:
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.25),
    inset 0 -2px 0 rgb(var(--shade-rgb) / 0.16);
}

.appearance-template-card > .appearance-template-button {
  width: 100%;
}

.appearance-template-button.is-yours {
  color: var(--on-colour-button);
  background: var(--accent-action-gradient);
  border-color: var(--accent-border);
}

.appearance-template-button.is-supplied {
  color: var(--on-colour-button);
  background: var(--complete-action-gradient);
  border-color: var(--complete-border);
}

.appearance-template-button.is-approve {
  color: var(--on-colour-button);
  background: linear-gradient(180deg, var(--action-success-hover), var(--action-success) 58%, var(--action-success-press));
  border-color: var(--success);
}

.appearance-template-button.is-reject {
  color: var(--on-colour-button);
  background: linear-gradient(180deg, var(--action-danger-hover), var(--action-danger) 58%, var(--action-danger-press));
  border-color: var(--danger);
}

.appearance-template-chip {
  grid-auto-flow: column;
  gap: 0.3rem;
  border-radius: 999px;
}

.appearance-template-chip.is-warning {
  color: var(--on-colour-button);
  background: linear-gradient(180deg, var(--action-warning-hover), var(--action-warning) 58%, var(--action-warning-press));
  border-color: var(--warning);
}

.appearance-template-chip.is-warning > i {
  display: grid;
  width: 0.95rem;
  height: 0.95rem;
  place-items: center;
  color: var(--action-warning);
  font-style: normal;
  background: var(--on-warning);
  border-radius: 999px;
}

.appearance-template-chip.is-comment {
  color: var(--on-colour-button);
  background: linear-gradient(180deg, var(--comment-accent-hover), var(--action-comment) 54%, var(--comment-accent-press));
  border-color: var(--comment-accent);
}

/* The drawing sheet is the paper colour in every theme, with the marching-ants
   box and the badges drawn over it the way the review draws them. */
.appearance-template-sheet {
  position: relative;
  height: 5.6rem;
  min-width: 0;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  isolation: isolate;
}

/* Two rows: the OA markers on top; below them the revision box and pill, and an
   unsure marker. Each is drawn with Review's own classes, so it wears the colour
   Review gives it. */
.appearance-template-sheet > .diff {
  --diff-x: 17%;
  --diff-y: 30%;
  --diff-w: 24%;
  --diff-h: 30%;
  --diff-pad: 1px;
  --review-overlay-inverse: 0.7;
}

.appearance-template-sheet > .diff.is-revision {
  --diff-y: 72%;
}

.appearance-template-sheet > .diff.severity-unsure {
  --diff-x: 72%;
  --diff-y: 72%;
  --diff-w: 14%;
}

.appearance-template-sheet > .diff-badge {
  --review-badge-scale: 0.9;
  --review-overlay-inverse: 1;
  --badge-y: 30%;
  touch-action: manipulation;
}

.appearance-template-sheet > .axis-height {
  --badge-x: 40%;
}

.appearance-template-sheet > .axis-width {
  --badge-x: 52%;
}

.appearance-template-sheet > .axis-depth {
  --badge-x: 64%;
}

.appearance-template-sheet > .diff-badge.is-revision {
  --badge-x: 49%;
  --badge-y: 72%;
}

.appearance-template-sheet > .diff-badge.severity-unsure {
  --badge-x: 88%;
  --badge-y: 72%;
}

/* The editor beside the template. */
.appearance-editor {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  align-content: start;
}

.appearance-editor-field {
  display: grid;
  gap: 0.35rem;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 700;
}

#settingsDialog .appearance-editor-field select {
  width: 100%;
  max-width: none;
}

.appearance-editor-heading {
  display: grid;
  gap: var(--space-1);
}

.appearance-editor-name {
  margin: 0;
  color: var(--text-strong);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
}

.appearance-editor-help {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.72rem;
  line-height: 1.4;
}

.appearance-swatch {
  height: 3.5rem;
  background: var(--swatch-colour, var(--surface-raised));
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px rgb(var(--overlay-rgb) / 0.12);
}

.appearance-colour-row {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: var(--space-2);
  align-items: center;
}

#settingsDialog .appearance-colour-row input[type="color"] {
  width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.2rem;
}

#settingsDialog .appearance-colour-row input[type="text"] {
  width: 100%;
  max-width: none;
  min-width: 0;
  font-family: var(--font-mono);
}

.appearance-sliders {
  display: grid;
  gap: var(--space-1);
}

/* Each slider is its name and number on one line, and its track below. */
.appearance-slider {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name value"
    "track track";
  column-gap: var(--space-2);
  align-items: center;
}

.appearance-slider-name {
  grid-area: name;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.appearance-slider > output {
  grid-area: value;
  color: var(--text);
  font: 700 0.78rem/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.appearance-slider > input[type="range"] {
  grid-area: track;
}

/* A slider is a gradient track (set from the script as --slider-track) with a
   ring for a thumb, so the colour under the thumb stays visible. */
#settingsDialog .appearance-slider input[type="range"] {
  --slider-thumb: 28px;
  --slider-track-height: 1.5rem;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  max-width: none;
  height: 2.75rem;
  min-height: 2.75rem;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: var(--cursor-pointer);
}

.appearance-slider input[type="range"]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.appearance-slider input[type="range"]::-webkit-slider-runnable-track {
  height: var(--slider-track-height);
  background: var(--slider-track, var(--surface-muted));
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--border);
}

.appearance-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: var(--slider-thumb);
  height: var(--slider-thumb);
  margin-top: calc((var(--slider-track-height) - var(--slider-thumb)) / 2);
  background: transparent;
  border: 3px solid var(--text-strong);
  border-radius: 50%;
  box-shadow:
    0 0 0 1px rgb(var(--shade-rgb) / 0.55),
    inset 0 0 0 1px rgb(var(--shade-rgb) / 0.55);
}

.appearance-slider input[type="range"]::-moz-range-track {
  height: var(--slider-track-height);
  background: var(--slider-track, var(--surface-muted));
  border: 0;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--border);
}

.appearance-slider input[type="range"]::-moz-range-thumb {
  box-sizing: border-box;
  width: var(--slider-thumb);
  height: var(--slider-thumb);
  background: transparent;
  border: 3px solid var(--text-strong);
  border-radius: 50%;
  box-shadow:
    0 0 0 1px rgb(var(--shade-rgb) / 0.55),
    inset 0 0 0 1px rgb(var(--shade-rgb) / 0.55);
}

/* On a phone the thumbs and buttons are 44px, the touch minimum. */
@media (max-width: 640px), (pointer: coarse) {
  #settingsDialog .appearance-slider input[type="range"] {
    --slider-thumb: 44px;
    height: 44px;
    min-height: 44px;
  }

  #settingsDialog .appearance-editor :is(select, input[type="text"], input[type="color"], .ghost-button) {
    min-height: 44px;
  }

  #settingsDialog .appearance-colour-row input[type="color"] {
    width: 44px;
  }

  .appearance-colour-row {
    grid-template-columns: 44px minmax(0, 1fr);
  }
}

.appearance-select-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: var(--space-3);
}

.appearance-select-grid > label {
  display: grid;
  grid-template-rows: auto 2.75rem;
  align-content: end;
  min-width: 0;
}

.appearance-select-grid > label > select:not(.custom-select-native),
.appearance-select-grid > label > .custom-select,
.appearance-select-grid .custom-select-trigger {
  height: 2.75rem;
  min-height: 2.75rem;
  max-height: 2.75rem;
}

/* One option = a toggle with its hint directly under it. */
.appearance-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  align-items: start;
}

.appearance-select-grid + .appearance-options {
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.appearance-option {
  display: grid;
  gap: var(--space-1);
  align-content: start;
  min-width: 0;
}

.appearance-option-hint {
  display: block;
  /* Lines up with the toggle label: the checkbox box plus its gap. */
  margin: 0 0 0 calc(var(--checkbox-size) + var(--space-2));
  color: var(--text-muted);
  font-size: 0.68rem;
  line-height: 1.35;
}

.appearance-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.appearance-footer > .settings-status {
  flex: 1 1 12rem;
  margin: 0;
}

@media (max-width: 480px) {
  .appearance-select-grid,
  .appearance-options {
    grid-template-columns: minmax(0, 1fr);
  }
}

html[data-uppercase="true"] body,
html[data-uppercase="true"] body * {
  text-transform: uppercase !important;
}

html[data-uppercase="false"] body,
html[data-uppercase="false"] body * {
  text-transform: none !important;
}

/* Typed sign-in details show exactly as typed, even with the capitals setting
   on (Jon 2026-10-02: "allow this to use lower case"). Email addresses and
   passwords are case-sensitive to read back. */
html[data-uppercase="true"] body :is(.auth-form input, input[type="email"], input[type="password"], #hubTeamOwner, #hubTeamMembers, #hubCreateTeamResults .job-what, #seatAddResults .job-what) {
  text-transform: none !important;
}

html[data-uppercase="true"] body :is(#hubTeamOwner, #hubTeamMembers)::placeholder {
  text-transform: none !important;
}

/* A message card is read, not scanned: keep its title and sentence in
   sentence case under the global uppercase setting (taste skill v2). */
html[data-uppercase="true"] body :is(.permission-dialog-card--inline .message-title, .permission-dialog-card--inline .message-text, .review-error-reason, .review-error-row-hint) {
  text-transform: none !important;
}

#settingsDialog header {
  padding-bottom: var(--space-3);
}

/* Jon's call (2026-07-28): close/cancel reads red everywhere, so the settings
   dialog uses the same solid danger treatment as every other close control
   rather than the muted outline it used to override to. */
#settingsDialog .close-button-danger {
  color: var(--on-colour-button);
  background: var(--action-danger);
  border: 1px solid var(--action-danger);
}

#settingsDialog .close-button-danger:hover {
  color: var(--on-colour-button);
  background: var(--action-danger-hover);
  border-color: var(--action-danger-hover);
}

#settingsDialog .close-button-danger:active {
  background: var(--action-danger-press);
  color: var(--on-colour-button);
  border-color: var(--action-danger-press);
}

#settingsDialog .settings-save-bar {
  justify-content: flex-end;
  padding: var(--space-3) var(--space-5);
}

#settingsDialog .settings-save-bar :is(.primary-button, .settings-cancel-button) {
  flex: 0 0 auto;
  /* 44px, not the 2.3rem this started at: the responsive audit measures
     every settings control against the minimum touch target. */
  min-height: 2.75rem;
  padding-inline: var(--space-4);
  font-size: 0.8rem;
  font-weight: 700;
}

/* Jon's call (2026-07-28): cancel and close both read red in this dialog, so
   the discard action is unmistakable next to the blue Save. */
#settingsDialog .settings-cancel-button {
  color: var(--on-colour-button);
  background: var(--action-danger);
  border: 1px solid var(--action-danger);
}

#settingsDialog .settings-cancel-button:hover {
  color: var(--on-colour-button);
  background: var(--action-danger-hover);
  border-color: var(--action-danger-hover);
}

#settingsDialog .settings-cancel-button:active {
  background: var(--action-danger-press);
  color: var(--on-colour-button);
  border-color: var(--action-danger-press);
}

/* Phones use a single native selector so every section name remains readable
   without turning the top of the sheet into a scrolling control strip. */
@media (max-width: 720px) {
  .settings-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }

  .settings-tabs {
    display: none;
  }

  .settings-mobile-nav {
    display: grid;
    gap: 0.4rem;
    min-width: 0;
    padding: var(--space-3) var(--space-4);
    background: rgb(var(--overlay-rgb) / 0.018);
    border-bottom: 1px solid var(--border);
  }

  .settings-mobile-nav > span {
    color: var(--text-muted);
    font: 700 0.68rem/1 var(--font-ui);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .settings-mobile-nav select {
    width: 100%;
    min-width: 0;
    height: 2.85rem;
    margin: 0;
    padding-block: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .account-fact {
    grid-template-columns: minmax(7rem, 0.7fr) minmax(0, 1.3fr);
  }

  .account-fact > :last-child:nth-child(3) {
    grid-column: 2;
  }
}

[data-settings-panel="saving"].settings-section {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

[data-settings-panel="saving"] .settings-section-header {
  align-items: start;
  padding: 0 var(--space-1) var(--space-2);
}

.saving-settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

.saving-settings-group {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  min-width: 0;
  margin: 0;
  padding: var(--space-4);
  background: rgb(var(--overlay-rgb) / 0.018);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.saving-settings-group legend {
  float: left;
  width: 100%;
  max-width: 100%;
  margin: 0 0 var(--space-2);
  padding: 0;
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.saving-settings-group legend + * {
  clear: both;
}

.saving-settings-group[data-saving-group="behavior"] {
  grid-template-columns: minmax(0, 1fr);
}

.saving-settings-group[data-saving-group="behavior"] legend,
.saving-settings-group[data-saving-group="naming"] {
  grid-column: 1 / -1;
}

.saving-settings-group[data-saving-group="naming"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.saving-settings-group[data-saving-group="naming"] legend,
.saving-settings-group .saving-file-name {
  grid-column: 1 / -1;
}

.saving-file-name .field-help {
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 400;
  line-height: 1.4;
}

#settingsDialog .settings-body .saving-file-name input:not([type="checkbox"]):not([type="color"]) {
  width: 100%;
  max-width: none;
}

.saving-settings-group[data-saving-group="behavior"] .save-toggle {
  align-items: flex-start;
  min-height: 0;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}

.saving-settings-group[data-saving-group="behavior"] .save-toggle strong {
  display: block;
  font: inherit;
  line-height: var(--checkbox-size);
}

#settingsDialog .saving-settings-group[data-saving-group="behavior"] .save-toggle input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  display: grid;
  flex: 0 0 var(--checkbox-size);
  place-content: center;
  align-self: flex-start;
  width: var(--checkbox-size);
  min-width: var(--checkbox-size);
  height: var(--checkbox-size);
  min-height: var(--checkbox-size);
  margin: 0;
  padding: 0;
  background: rgb(var(--overlay-rgb) / 0.04);
  border: 1px solid rgb(var(--overlay-rgb) / 0.28);
  border-radius: var(--checkbox-radius);
}

#settingsDialog .saving-settings-group[data-saving-group="behavior"] .save-toggle input[type="checkbox"]::before {
  content: "";
  width: var(--checkbox-tick);
  height: var(--checkbox-tick);
  background: var(--gloss);
  clip-path: polygon(14% 53%, 34% 72%, 82% 22%, 94% 34%, 35% 94%, 4% 64%);
  opacity: 0;
  transform: scale(0.7);
}

#settingsDialog .saving-settings-group[data-saving-group="behavior"] .save-toggle input[type="checkbox"]:checked {
  background: var(--accent-button);
  color: var(--on-colour-button);
  border-color: var(--accent-border);
}

#settingsDialog .saving-settings-group[data-saving-group="behavior"] .save-toggle input[type="checkbox"]:checked::before {
  opacity: 1;
  transform: scale(1);
}

#settingsDialog .saving-settings-group[data-saving-group="behavior"] .save-toggle input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.saving-settings-group[data-saving-group="behavior"] .save-toggle:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

@media (max-width: 760px) {
  .saving-settings-grid {
    gap: var(--space-6);
  }

  .saving-settings-group {
    gap: var(--space-5);
    padding-block: var(--space-6);
  }

  .saving-settings-group[data-saving-group="behavior"],
  .saving-settings-group[data-saving-group="naming"] {
    grid-template-columns: 1fr;
  }

  .saving-settings-group[data-saving-group="behavior"] legend,
  .saving-settings-group[data-saving-group="naming"] legend,
  .saving-settings-group .saving-file-name {
    grid-column: auto;
  }

  #settingsDialog.is-settings-stamp .stamp-library-grid,
  #settingsDialog.is-settings-stamp .stamp-library-foot {
    grid-template-columns: minmax(0, 1fr);
  }

  .stamp-library-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .stamp-library-heading .ghost-button {
    width: 100%;
  }

  .stamp-icon-selects {
    grid-template-columns: minmax(0, 1fr);
  }

  #settingsDialog.is-settings-stamp #stampLibraryStatus {
    text-align: left;
  }

}

.stamp-settings {
  gap: var(--space-5);
}

.stamp-library-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.stamp-library-heading h3,
.stamp-library-heading p {
  margin: 0;
}

.stamp-library-heading p {
  max-width: 52ch;
  margin-top: var(--space-1);
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.stamp-library-heading .ghost-button {
  flex: 0 0 auto;
  min-height: 2.75rem;
}

.stamp-preview-workbench,
.stamp-config-workbench {
  min-width: 0;
  padding: var(--space-3);
  background: rgb(var(--bg-rgb) / 0.52);
  border: 1px solid rgb(var(--overlay-rgb) / 0.08);
  border-radius: var(--radius-md);
}

.stamp-preview-workbench {
  display: grid;
  align-content: start;
  gap: var(--space-2);
}

.stamp-workbench-label {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}

.stamp-config-workbench {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  align-content: start;
  gap: var(--space-3);
}

.stamp-config-workbench > :is(label, .stamp-icon-selects, .stamp-library-actions) {
  width: 100%;
}

.stamp-config-workbench > :is(.stamp-icon-selects, .stamp-library-actions) {
  grid-column: 1 / -1;
}

.stamp-config-workbench .custom-select-trigger {
  height: 2.75rem;
}

.stamp-icon-selects {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.stamp-library-foot {
  display: grid;
  align-items: center;
  gap: var(--space-3);
}

.stamp-library-tile-grid {
  display: grid;
  align-content: start;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: var(--space-4);
  padding: clamp(var(--space-5), 4vw, var(--space-8));
  overflow-y: auto;
}

.stamp-library-tile {
  position: relative;
  display: grid;
  grid-template-rows: 8rem auto;
  align-self: start;
  gap: var(--space-3);
  min-width: 0;
  min-height: 11rem;
  padding: var(--space-3);
  color: var(--text);
  background: rgb(var(--overlay-rgb) / 0.035);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: default;
}

.stamp-library-tile:has(.stamp-library-tile-select:is(:hover, :focus-visible)),
.stamp-library-tile[aria-selected="true"] {
  background: rgb(var(--accent-wash-rgb) / 0.13);
  border-color: rgb(var(--accent-rgb) / 0.62);
}

.stamp-library-tile:has(.stamp-library-tile-select:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.stamp-library-tile-select {
  min-width: 0;
  min-height: 0;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: var(--cursor-pointer);
}

.stamp-library-tile-select img {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: var(--space-3);
  object-fit: contain;
  background: var(--paper);
  border-radius: var(--radius-sm);
}

.stamp-library-tile-name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-width: 0;
}

.stamp-library-tile-name strong {
  font-size: 0.8rem;
  line-height: 1.25;
  text-align: center;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.stamp-library-tile-rename,
.stamp-library-tile-delete {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  color: var(--text-strong);
  border-radius: var(--radius-sm);
  cursor: var(--cursor-pointer);
}

.stamp-library-tile-rename {
  background: rgb(var(--overlay-rgb) / 0.06);
  border: 1px solid var(--border);
}

.stamp-library-tile-delete {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  z-index: 1;
  background: var(--action-danger);
  color: var(--on-colour-button);
  border: 1px solid var(--action-danger);
}

.stamp-library-tile-rename svg,
.stamp-library-tile-delete svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#deleteStampButton {
  color: var(--on-colour-button);
  background: var(--action-danger);
  border-color: var(--action-danger);
}

#deleteStampButton:not(:disabled):hover {
  color: var(--on-colour-button);
  background: var(--action-danger-hover);
  border-color: var(--action-danger-hover);
}

#deleteStampButton:disabled {
  color: var(--on-colour-button);
  background: var(--action-danger-disabled-bg);
  border-color: var(--action-danger-disabled-border);
  opacity: 0.6;
}

.settings-section-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-4);
}

.settings-section-header h3 {
  margin: 0;
}

.settings-section-header span {
  max-width: 18rem;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
}

.stamp-upload-tab {
  display: grid;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: rgb(var(--overlay-rgb) / 0.02);
}

.stamp-upload-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  min-height: 3.45rem;
  padding: var(--space-2) var(--space-4);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-align: left;
  background:
    linear-gradient(180deg, rgb(var(--overlay-rgb) / 0.055), rgb(var(--overlay-rgb) / 0.012)),
    rgb(var(--overlay-rgb) / 0.018);
  border: 0;
  box-shadow:
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.08),
    inset 0 -1px 0 rgb(var(--shade-rgb) / 0.18);
  cursor: var(--cursor-pointer);
}

.stamp-upload-toggle:hover {
  background:
    linear-gradient(180deg, rgb(var(--overlay-rgb) / 0.09), rgb(var(--overlay-rgb) / 0.02)),
    rgb(var(--overlay-rgb) / 0.04);
}

.stamp-upload-toggle-label {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  overflow: visible;
  line-height: 1.25;
  text-overflow: clip;
  white-space: normal;
}

.stamp-upload-toggle-label svg {
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.stamp-upload-panel {
  display: none;
  padding: var(--space-3);
  border-top: 1px solid var(--border);
}

.stamp-upload-tab.is-open .stamp-upload-panel {
  display: block;
}

.stamp-upload-panel .stamp-dropzone {
  height: 11rem;
  margin: 0;
}

.stamp-dropzone {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--space-2);
  width: 100%;
  min-height: clamp(8rem, 18vh, 11rem);
  padding: var(--space-5) var(--space-4);
  text-align: center;
  cursor: var(--cursor-pointer);
  background: var(--surface);
  border: 1.5px dashed rgb(var(--text-muted-rgb) / 0.38);
  border-radius: var(--radius-lg);
  transition: background-color 140ms ease, border-color 140ms ease;
}

.stamp-dropzone:hover,
.stamp-dropzone.is-dragging {
  background: var(--surface-raised);
  border-color: var(--accent-strong);
}

.stamp-dropzone.is-dragging {
  border-style: solid;
}

.stamp-dropzone-icon {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  margin-bottom: var(--space-1);
  color: var(--accent);
  background: rgb(var(--accent-wash-rgb) / 0.12);
  border-radius: 999px;
}

.stamp-dropzone-icon svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.stamp-dropzone strong {
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.stamp-dropzone-hint {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.stamp-library-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  align-items: stretch;
}

/* The covers deliberately overlap, so only a sliver of a neighbour is
   clickable. These arrows are the dependable way to step through them. */
.stamp-carousel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: center;
}

.stamp-carousel-nav {
  display: grid;
  place-items: center;
  width: 2.75rem;
  min-width: 2.75rem;
  height: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  color: var(--text);
  background: rgb(var(--overlay-rgb) / 0.05);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: var(--cursor-pointer);
  transition: background 140ms ease, border-color 140ms ease, opacity 140ms ease;
}

.stamp-carousel-nav svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.stamp-carousel-nav:hover:not(:disabled) {
  background: rgb(var(--accent-wash-rgb) / 0.18);
  border-color: rgb(var(--accent-rgb) / 0.5);
}

.stamp-carousel-nav:disabled {
  opacity: 0.3;
  cursor: var(--cursor-arrow);
}

.stamp-coverflow {
  position: relative;
  z-index: 0;
  width: 100%;
  height: clamp(17.5rem, 36vh, 22rem);
  padding: clamp(1rem, 2.5vw, 1.35rem);
  overflow: hidden;
  /* Keep horizontal drags for the stamp swipe gesture on touch screens while
     letting vertical scrolls pass through to the settings panel. */
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  display: grid;
  place-items: center;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 90% at 50% 18%, rgb(var(--overlay-rgb) / 0.05), transparent 70%),
    rgb(var(--overlay-rgb) / 0.02);
}

.stamp-cover {
  position: absolute;
  width: min(15.5rem, calc(100% - 3.25rem));
  height: min(14.8rem, calc(100% - 2.75rem));
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: var(--cursor-pointer);
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), opacity 320ms ease;
}

.stamp-cover-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: clamp(0.65rem, 4.5%, 1.05rem);
  background: var(--paper);
  border: 1px solid rgb(var(--shadow-rgb) / 0.06);
  border-radius: var(--radius-md);
  box-shadow: 0 18px 40px rgb(var(--shadow-rgb) / 0.45);
  overflow: hidden;
}

.stamp-cover-box img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  margin: auto;
  object-fit: contain;
  object-position: center;
}

.stamp-cover[aria-selected="true"] {
  z-index: 6;
}

.stamp-cover[aria-selected="true"] .stamp-cover-box {
  border-color: var(--accent);
  box-shadow:
    0 0 0 2px var(--accent),
    0 22px 48px rgb(var(--shadow-rgb) / 0.5);
}

.stamp-cover-badge {
  position: absolute;
  top: -0.6rem;
  left: -0.6rem;
  z-index: 2;
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  min-width: 2.2rem;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0 0.5rem;
  color: var(--accent-ink);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  background: var(--accent);
  border: 2px solid var(--surface);
  border-radius: 999px;
  box-shadow: 0 6px 16px rgb(var(--shadow-rgb) / 0.45);
}

.stamp-cover-badge:not(.is-selected) {
  background: color-mix(in srgb, var(--text-muted) 61%, var(--surface));
  box-shadow: 0 4px 12px rgb(var(--shadow-rgb) / 0.4);
}

.stamp-cover-badge.is-selected {
  background: var(--accent);
  color: var(--accent-ink);
}

.stamp-cover-delete {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 12;
  display: grid;
  place-items: center;
  /* 36px circle, 44px target. The visible button stays the size the carousel
     was drawn for - growing it would cover the stamp art underneath - and the
     touch area is added around it instead. Same trick as the landing rail's
     dots: small mark, full-size hit box. */
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.25rem;
  background-clip: content-box;
  padding: 0;
  color: var(--on-colour-button);
  font: 700 1.35rem/1 Arial, sans-serif;
  background: var(--action-danger);
  border: 1px solid rgb(var(--overlay-rgb) / 0.25);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 20px rgb(var(--shadow-rgb) / 0.35);
  cursor: var(--cursor-pointer);
}

.stamp-cover-delete:hover {
  background: var(--oa-depth-marker);
  color: var(--oa-depth-ink);
}

.stamp-cover-delete:active {
  transform: translateY(1px);
}

.stamp-coverflow-empty {
  display: grid;
  place-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-4);
  color: var(--text-muted);
  text-align: center;
}

.stamp-coverflow-empty svg {
  width: 2.6rem;
  height: 2.6rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.7;
}

.stamp-coverflow-empty strong {
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.stamp-coverflow-empty span {
  font-size: 0.8rem;
  font-weight: 700;
}

/* Interactive approval-date position tool (settings). */
.date-pos-tool {
  display: grid;
  gap: var(--space-4);
}

.date-pos-stage {
  position: relative;
  width: min(13rem, 72%);
  margin-inline: auto;
  aspect-ratio: 556 / 792;
  background: var(--paper);
  border: 1px solid rgb(var(--shadow-rgb) / 0.1);
  border-radius: var(--radius-2xl);
  box-shadow: inset 0 0 0 1px rgb(var(--gloss-rgb) / 0.04);
  overflow: hidden;
  cursor: var(--cursor-pointer);
  touch-action: none;
  container-type: size;
}

.date-pos-stage.is-picking-date-colour {
  cursor: crosshair;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.date-pos-stamp {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.date-pos-marker {
  position: absolute;
  left: 50%;
  top: 78.5%;
  transform: translate(-50%, -50%);
  padding: 0.04rem 0.24rem;
  color: var(--stamp-date-color, var(--accent-on-paper));
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.64rem;
  font-size: calc(var(--stamp-date-size, 6.6) * 1cqh);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  background: rgb(var(--accent-wash-rgb) / 0.16);
  border: 1px dashed color-mix(in srgb, var(--accent-on-paper) 75%, transparent);
  border-radius: 4px;
  cursor: var(--cursor-move);
  touch-action: none;
}

.date-pos-marker:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.date-pos-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.date-pos-fields > label {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.date-pos-fields .date-pos-font {
  grid-column: auto;
}

.date-pos-fields .date-pos-colour {
  grid-column: 1 / -1;
}

/* The dropper and the colour well are controls, so they carry the 44px touch
   floor rather than the 32px they were drawn at.

   Wraps at every width rather than at a breakpoint. This row lives inside a
   two-column field grid inside the stamp panel, so how much space it actually
   gets depends on the panel, the stage beside it and the viewport at once - a
   single max-width query got the phones and missed the tablets. Flex wrap has
   no such blind spot: the palette drops to its own line exactly when it stops
   fitting, whatever the reason. */
.date-colour-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.date-colour-row #dateColorDropper {
  flex: 0 0 auto;
  width: 2.75rem;
  min-width: 2.75rem;
  height: 2.75rem;
  min-height: 2.75rem;
}

.date-colour-row #dateColor {
  flex: 0 0 auto;
}

.date-colour-row #dateColorValue {
  flex: 0 1 auto;
  min-width: 0;
}

/* Full width on whatever line it lands on, so the eight swatches always have
   the whole row to divide up and can never run past the edge. */
.date-colour-row .date-palette-row {
  flex: 1 0 100%;
  grid-template-columns: repeat(auto-fit, minmax(2rem, 1fr));
  margin-top: 0;
}

#dateColor {
  width: 2rem;
  height: 2rem;
  padding: 0.1rem;
  border-radius: var(--radius-md);
  cursor: var(--cursor-pointer);
}

#dateColorDropper {
  display: grid;
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
  min-height: 2rem;
  place-items: center;
  padding: 0;
}

#dateColorDropper svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#dateColorDropper.is-active {
  color: var(--on-colour-button);
  background: var(--accent-action-gradient);
  border-color: rgb(var(--accent-rgb) / 0.72);
}

.date-palette-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(8, 1.9rem);
  gap: 0.4rem;
  margin-top: 0;
}

.date-palette-row .comment-colour-swatch {
  width: 1.9rem;
  min-height: 1.9rem;
  padding: 0;
}

#dateColorValue {
  justify-self: start;
  min-width: 4.2rem;
  color: var(--text);
  font-size: 0.72rem;
  text-align: left;
}

.date-pos-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.date-pos-actions .ghost-button.compact {
  flex: 1 1 auto;
  color: var(--text-strong);
}

#datePosCenterX:not(:disabled) {
  background: linear-gradient(180deg, var(--rotate-cw-strong), var(--rotate-cw) 55%, color-mix(in srgb, var(--rotate-cw), var(--shade) 24%));
  border: 1px solid rgb(var(--success-rgb) / 0.5);
}

#datePosCenterY:not(:disabled) {
  background: var(--accent-action-gradient);
  color: var(--on-colour-button);
  border: 1px solid rgb(var(--accent-border-rgb) / 0.45);
}

#datePosReset:not(:disabled) {
  background: var(--complete-action-gradient);
  color: var(--on-colour-button);
  border: 1px solid rgb(var(--complete-border-rgb) / 0.5);
}

.stamp-library-grid > label {
  width: 100%;
}

.stamp-library-grid #stampLibrarySelect {
  width: 100%;
}

.stamp-preview-card {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: min(20rem, 100%);
  margin: 0 auto;
  aspect-ratio: 558 / 532;
  max-height: none;
  padding: var(--space-3);
  background: var(--paper);
  border-radius: var(--panel-radius);
}

.stamp-preview-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.stamp-library-actions {
  justify-content: start;
}

.danger-action {
  color: var(--danger-strong);
  font-weight: 600;
}

.danger-action:not(:disabled):hover {
  background: rgb(var(--danger-rgb) / 0.14);
}

@media (max-width: 1180px) {
  :root {
    --side-control-width: 100%;
  }

  .workspace[data-has~="review-screen"]:not(#has-pad) {
    height: auto;
    min-height: 0;
    overflow: visible;
    padding-bottom: var(--space-5);
  }

  /* Beat `#stampScreen .stamp-controls .ghost-button { width: 100% }` so the
     icon stays a compact square instead of stretching the row. */
  #stampScreen .stamp-controls .stamp-confirm-icon {
    display: inline-flex;
    flex: 0 0 auto;
    width: 2.75rem;
    min-width: 2.75rem;
    white-space: nowrap;
  }

  .review-layout,
  .stamp-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    height: auto;
  }

  /* Size the stamp/comments drawing to its aspect-ratio so the sheet can't
     overflow the canvas and spill its bottom-right corner over the controls
     panel + the "STAMP IS POSITIONED" button below it. Mirrors the
     .review-sheet-frame treatment used on the review screen. */
  #stampScreen .stamp-canvas {
    display: flex;
    flex-direction: column;
    height: auto;
    overflow: visible;
  }

  #stampScreen .stamp-frame:has(.stamp-sheet-scroll) {
    position: relative;
    width: 100%;
    /* Match the Export preview's PDF box: budget against the visible viewport,
       then bound the width to the aspect-width and centre it. */
    max-width: calc(min(calc(var(--app-visible-height) * 0.58), calc(var(--app-visible-height) - var(--workflow-offset) - 17rem)) * 1.3889);
    height: auto;
    flex: 0 0 auto;
    aspect-ratio: 1000 / 720;
    max-height: min(calc(var(--app-visible-height) * 0.58), calc(var(--app-visible-height) - var(--workflow-offset) - 17rem));
    margin-inline: auto;
  }

  /* Stacked under the sheet on narrow screens, the two control panels take their
     natural height and flow with the page instead of flexing into a fixed
     height (which would collapse them to zero). */
  #stampScreen .side-panel-wrap {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  #stampScreen .side-panel-wrap > .stamp-controls {
    flex: 0 0 auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
    overflow-y: visible;
  }

  .panel-resize-handle {
    display: none;
  }

  /* The right panel stacks below the drawing at this width. Put its blue rail in
     the same grid cell and join it to the panel's right edge instead of leaving
     an absolutely-positioned control floating over the drawings. */
  .review-layout > .panel-visibility-toggle,
  .stamp-layout > .panel-visibility-toggle,
  .save-layout > .panel-visibility-toggle {
    position: relative;
    top: auto;
    right: auto;
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    justify-self: end;
    margin: 0;
    transform: none;
    translate: none;
    border-radius: 0.65rem 0 0 0.65rem;
  }

  /* Stacked mode keeps the tab switcher inset inside the review panel while it
     stays pinned during findings scroll. The rail collapse arrow is redundant
     for an inline panel (boot forces the panel open at this width). */
  .review-layout > .panel-visibility-toggle {
    display: none;
  }

  .findings-panel {
    padding-top: var(--space-4);
  }

  .findings-panel .findings-tabbar {
    position: sticky;
    top: var(--space-4);
    z-index: 6;
    margin-inline: 0;
    border-radius: var(--panel-radius);
    /* Opaque enough that findings scrolling beneath never ghost through. */
    background:
      linear-gradient(180deg, rgb(var(--overlay-rgb) / 0.055), rgb(var(--overlay-rgb) / 0.02)),
      rgb(var(--bg-rgb) / 0.96);
  }

  .review-layout > .findings-panel,
  .stamp-layout > .side-panel-wrap,
  .save-layout > .save-panel {
    grid-column: 1;
    grid-row: 2;
  }

  #stampScreen .stamp-controls .stamp-size-panel {
    padding-inline: var(--sc-2);
  }

  /* Stack the stamp canvas toolbar (title above the actions) so the action row
     gets the full canvas width below the desktop split breakpoint. */
  #stampScreen .stamp-canvas .canvas-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  /* Keep the stamp canvas toolbar actions on a single row (Use approval stamp,
     zoom controls, collapse) instead of stacking them — the toolbar now spans
     the full canvas width here. Wraps only if truly tight. */
  #stampScreen .stamp-canvas-actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
  }

  #stampScreen .stamp-zoom-toolbar {
    width: auto;
    flex: 0 1 14rem;
  }

  .load-grid {
    grid-template-columns: 1fr;
  }

  .drawing-panes {
    height: auto;
  }

  .review-sheet-frame,
  .review-sheet-frame.sheet-frame {
    height: auto;
    min-height: 0;
    aspect-ratio: var(--sheet-aspect, 1.3889);
  }

  .findings-panel {
    position: static;
    grid-template-areas:
      "rail"
      "findings";
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    height: auto;
    overflow: visible;
  }

  .findings-panel,
  .side-panel-wrap,
  .save-layout .save-panel {
    width: 100%;
    max-width: 100%;
  }

  .findings-tab-panel,
  .findings-list-panel {
    overflow: visible;
  }

  .findings-list-panel {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .issue-preview {
    min-height: clamp(7rem, 18vh, 12rem);
    max-height: none;
    overflow: visible;
  }

  .finding-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1320px) {
  .load-grid {
    grid-template-columns: 1fr;
  }

  /* Account and Team go icon-only before the other actions do.
     The row already collapses everything to icons at 860px, and a comment
     there records why: text buttons stacked on the icon row squeeze
     .brand-block down to a sliver. Adding two more labelled controls
     reproduced that at 1280px, where nothing collapses yet - measured on the
     review screen with a lifetime badge in the account control, the row went
     509px -> 615px and #homeButton was left 173px for 190px of content.
     Collapsing only the two new buttons returns the row to its previous width
     at laptop sizes, so nothing that shipped before this looks different.
     They keep their tooltips, and their labels return above 1320px. */
  #teamLinkButton.top-history-button span {
    display: none;
  }

  #teamLinkButton.top-history-button {
    padding-inline: 0.55rem;
  }
}

/* Short stacked layouts can still page-scroll; desktop keeps scrolling inside
   the actual panels so the browser chrome never owns review movement. */
@media (max-height: 680px) and (max-width: 1180px) {
  .workspace[data-has~="review-screen"]:not(#has-pad) {
    height: auto;
    min-height: 0;
    overflow: visible;
    padding-bottom: var(--space-5);
  }

  .review-layout {
    height: auto;
  }

  .drawing-panes {
    height: auto;
  }

  .review-sheet-frame,
  .review-sheet-frame.sheet-frame {
    height: auto;
    min-height: 0;
    aspect-ratio: var(--sheet-aspect, 1.3889);
  }

  .findings-panel {
    height: auto;
    overflow: visible;
  }

  .findings-tab-panel,
  .findings-list-panel {
    overflow: visible;
  }

}

@media (min-width: 1321px) {
  .drop-zone h3 {
    font-size: clamp(1.22rem, 1.3vw, 1.55rem);
  }

  .drop-zone p,
  .fake-file {
    font-size: clamp(1.05rem, 1.05vw, 1.18rem);
  }

  .file-button {
    font-size: clamp(0.96rem, 0.94vw, 1.08rem);
  }
}

@media (min-width: 1180px) {
  #screenTitle {
    white-space: nowrap;
  }
}

@media (max-width: 860px) {
  :root {
    --workflow-offset: 8.5rem;
    --bottom-action-space: 4.5rem;
  }

  .app-shell {
    padding-top: var(--workflow-offset);
  }

  /* Opaque full-bleed strip behind the floating pill nav. Without it, page
     content scrolling underneath peeks through the pill's side gaps and
     rounded corners. Sits above content (auto) but below the pill (z 70). */
  .app-shell::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: calc(var(--workflow-offset) + var(--space-2));
    background: linear-gradient(to bottom, var(--bg) 72%, rgb(var(--bg-rgb) / 0.92) 88%, transparent);
    z-index: 60;
    pointer-events: none;
  }

  body:not(.panel-collapsed) .app-shell {
    padding-right: 0;
  }

  /* Compact workflow actions stay icon-only here, but keep the 44px touch
     floor used by the phone layout. The extra account buttons used to have no icon to collapse to
     and were left as full desktop-size text buttons - for a signed-in user that
     was two ~82px text buttons on top of the icon row, squeezing
     .brand-block (APPVLR wordmark) down to a sliver. Now they carry real
     icons (added to index.html) and collapse exactly like their siblings. */
  /* By class, not by an id list. The list below used to enumerate ids and
     silently excluded every button added later - Team and Account both stayed
     full-width text buttons here, which is the same squeeze this comment
     describes. All three classes are used only inside .sidebar-actions. */
  .sidebar-actions > .top-history-button,
  .sidebar-actions > .top-clear-button,
  .sidebar-actions > .top-settings-button {
    display: grid;
    place-items: center;
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
    border-radius: 999px;
  }

  /* Both icons the same size, centred in their circle. */
  .sidebar-actions > .top-history-button svg,
  .sidebar-actions > .top-clear-button .bin-icon,
  .sidebar-actions > .top-settings-button svg {
    width: 1.05rem;
    height: 1.05rem;
  }

  /* Icon-only on mobile: hide text labels. The tier badge is not a label and
     must survive, so this targets the text spans only. */
  .sidebar-actions > .top-history-button span:not(.tier-badge),
  .sidebar-actions > .top-clear-button .clear-label,
  .sidebar-actions > .top-settings-button span {
    display: none;
  }

  #settingsButton.top-settings-button,
  #privateNavButtonB.top-history-button,
  #logoutButton.top-history-button {
    color: var(--text);
    background: linear-gradient(180deg, rgb(var(--overlay-rgb) / 0.13), rgb(var(--overlay-rgb) / 0.04));
    border: 1px solid var(--border);
    box-shadow:
      0 2px 6px rgb(var(--shadow-rgb) / 0.3),
      inset 0 1px 0 rgb(var(--gloss-rgb) / 0.1);
  }

  .workspace {
    padding:
      var(--space-4)
      var(--workspace-gutter)
      var(--space-5)
      var(--workspace-gutter);
  }

  .topbar,
  .review-header,
  .canvas-toolbar {
    align-items: stretch;
    flex-direction: column;
    /* The base .review-header rule sets flex-wrap: wrap (to let the toolbar wrap
       beside the title on desktop). Combined with the column direction above that
       becomes column-WRAP: the header gets a definite height from its grid row, the
       stacked children exceed it, and the toolbar wraps into a phantom second column
       to the RIGHT of the title - pushing the whole review screen into ~1500px of
       horizontal overflow on tablets. The nowrap fix existed only in the <=640px
       block, orphaning 641-860px (same gap zone as the step-list bugs). Kill the
       wrap in the SAME rule that sets the column direction so they can never split. */
    flex-wrap: nowrap;
  }

  .topbar-main {
    align-items: stretch;
    flex-direction: column;
  }

  .loading-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .loading-steps span:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    min-height: 3.75rem;
  }

  .topbar-actions,
  .review-actions,
  .dialog-actions {
    width: 100%;
  }

  .load-actions {
    align-items: stretch;
    flex-direction: column;
    /* Stacked widths turn the fixed row into a proper opaque action bar so
       the full-width buttons never float over the card content beneath. */
    gap: var(--space-2);
    right: 0;
    left: 0;
    margin-inline: 0;
    padding: var(--space-3) var(--workspace-gutter) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    bottom: 0;
    background: linear-gradient(to top, var(--bg) 82%, transparent);
  }

  .page-actions {
    align-items: flex-end;
    justify-content: center;
    padding-inline: var(--workspace-gutter);
  }

  .settings-button {
    justify-content: center;
    width: auto;
  }

  .settings-section-header,
  .stamp-library-grid {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }

  .stamp-coverflow {
    height: clamp(18rem, 42vh, 22.5rem);
  }

  .stamp-preview-card {
    width: min(10rem, 100%);
  }

  .load-grid,
  .drawing-panes {
    grid-template-columns: 1fr;
  }

  .drawing-panes[data-layout="single-raeco"],
  .drawing-panes[data-layout="single-manufacture"] {
    grid-template-columns: minmax(0, 1fr);
  }

  .save-dialog {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 520px) {
  #screenTitle {
    font-size: 1.55rem;
  }

  .drop-zone,
  .decision-panel,
  .save-panel,
  .save-layout .save-panel {
    padding: var(--space-4);
  }

  .topbar-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .dialog-actions {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .dialog-actions > button {
    flex: 1 1 auto;
    min-width: min(100%, 7.5rem);
    white-space: normal;
  }

  .save-export-actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
  }

  .save-export-actions .primary-button,
  .save-export-actions .share-pdf-button,
  .save-export-actions .ghost-button {
    flex: 1 1 calc(33.333% - var(--space-3) * 2 / 3);
    width: auto;
    min-width: 0;
    white-space: nowrap;
  }

  .primary-button,
  .ghost-button {
    width: 100%;
    min-width: 0;
    white-space: nowrap;
  }

  .input-row {
    grid-template-columns: 1fr;
  }

  .file-button {
    width: auto;
    white-space: nowrap;
  }
}

/* Touch devices have no hover: keep tap affordances visible and comfortably sized */
@media (hover: none) {
  .expand-sheet-button,
  .review-zoom-control {
    width: 2.5rem;
    height: 2.5rem;
    opacity: 0.92;
  }

  .review-zoom-control {
    width: auto;
    height: auto;
  }
}

/* ============ Phone layout (max-width 640px) ============ */
@media (max-width: 640px) {
  /* The fixed top bar uses the viewport as its containing block, so a transient
     horizontal overflow (e.g. while the page-match / assignment screen lays out its
     two preview panes) makes the bar inflate to the overflow width, which locks in the
     overflow — the Review and page-assignment screens then render ~35px wider than the
     phone and stop tracking the screen width. Content actually fits; clip the phantom
     horizontal bleed at the root so every screen tracks the viewport. */
  html {
    overflow-x: clip;
  }

  :root {
    /* Notch/home-bar safe areas: the fixed stepper bar clears the notch and
       the workspace clears the rounded screen edges and home indicator. */
    --workflow-offset: calc(9.25rem + env(safe-area-inset-top, 0px));
    /* Softer corners on phones: ~25-30% rounder than desktop. */
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-2xl: 30px;
  }

  /* Phones: trim the canvas padding so the drawing frames span the full phone
     width, matching the review panes (which have no padding). The #id selectors
     keep this winning over the base .save-preview/.stamp-canvas rules that come
     later in the file. */
  .stamp-canvas,
  #saveScreen .save-preview {
    padding: var(--space-3) var(--space-2);
  }

  /* Phones: stamp/save and empty Review frames may still size from the
     drawing aspect-ratio. Loaded Review panes must not — height:auto plus an
     inline aspect-ratio turns a short leftover column into a centred stamp. */
  .review-sheet-frame:not(#raecoSheet):not(#manufactureSheet),
  .review-sheet-frame.sheet-frame:not(#raecoSheet):not(#manufactureSheet),
  #reviewScreen .drawing-pane:has(.empty-sheet-state) > .review-sheet-frame,
  #reviewScreen .drawing-pane:has(.empty-sheet-state) > .review-sheet-frame.sheet-frame {
    height: auto;
  }

  /* Phones: empty PDF/review panels sit on the app background without the
     faint light hairline that reads as a white outline in mobile browsers. */
  .drawing-pane {
    border-color: transparent;
    box-shadow: none;
  }

  /* Phones: the floating zoom pill must not sit ON the drawing. Give each review
     pane a third row and flow the control into it, so it sits in a strip BELOW
     the sheet instead of overlaying the bottom-left corner. */
  #reviewScreen .drawing-pane {
    grid-template-rows: auto auto auto;
  }

  #reviewScreen .drawing-pane > .review-zoom-control {
    position: static;
    grid-row: 3;
    grid-column: 1;
    justify-self: start;
    margin-top: var(--space-2);
    inset: auto;
    z-index: auto;
    opacity: 1;
  }

  /* Full-screen button rides the same footer strip as the zoom control (right
     end of the row), inline with it — not floating on the drawing corner. */
  #reviewScreen .drawing-pane > .expand-sheet-button {
    position: static;
    grid-row: 3;
    grid-column: 1;
    justify-self: end;
    align-self: center;
    margin-top: var(--space-2);
    /* Inset from the pane's right edge so the button (and its shadow) isn't
       clipped by the pane's overflow:hidden. */
    margin-right: var(--space-2);
    inset: auto;
    z-index: auto;
    opacity: 1;
  }

  #reviewScreen .drawing-pane:has(.empty-sheet-state) .empty-sheet-state {
    place-items: center;
    padding-bottom: calc(var(--space-4) + 2.75rem);
  }

  #reviewScreen .drawing-pane:has(.empty-sheet-state) .empty-sheet-message {
    margin-top: 0;
  }


  .drawing-pane {
    --control-h: 2.75rem;
  }

  .drawing-pane header {
    grid-template-rows: 0.86rem 2rem;
    height: 4.28rem;
    min-height: 4.28rem;
    max-height: 4.28rem;
    border-bottom-color: transparent;
  }

  /* Give the pane title its own row on phones. The five navigation controls
     need the full width below it; keeping them beside the title truncates
     MANUFACTURER DRAWING into an unreadable ellipsis. */
  .drawing-pane header {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    height: auto;
    min-height: 7.1rem;
    max-height: none;
    row-gap: 0.28rem;
    padding: 0.72rem;
  }

  .drawing-pane header > span:first-child {
    grid-column: 1;
    grid-row: 1;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
  }

  .drawing-pane header > strong {
    grid-column: 1;
    grid-row: 2;
    max-height: 2.2rem;
  }

  .drawing-pane header > .pane-header-controls {
    grid-column: 1;
    grid-row: 3;
    width: 100%;
    justify-content: flex-end;
  }

  .pane-header-controls {
    gap: 0.4rem;
  }

  .sidebar {
    top: calc(0.45rem + env(safe-area-inset-top, 0px));
    left: calc(var(--page-gutter) + env(safe-area-inset-left, 0px));
    right: calc(var(--page-gutter) + env(safe-area-inset-right, 0px));
    height: auto;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) auto auto auto auto;
    grid-template-areas:
      "brand undo redo clear more"
      "steps steps steps steps steps";
    grid-template-rows: auto auto;
    row-gap: 1rem;
    column-gap: 0.3rem;
    padding: 0.8rem 0.72rem 0.85rem;
    border-radius: 24px;
    align-content: center;
    align-items: center;
  }

  .brand-block > div {
    display: none;
    min-height: 1.45rem;
    min-width: 0;
    padding: 0.18rem 0 0.14rem clamp(0.5rem, 1.5vw, 0.8rem);
    border-left-color: rgb(var(--text-rgb) / 0.22);
  }

  .brand-block :is(h1, h2) {
    overflow: hidden;
    font-size: clamp(0.62rem, 1.9vw, 0.72rem);
    letter-spacing: 0.25em;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Every control in this row collapses to the same 44px touch square on
     mobile. Selected by class, not by an id list: the row is laid out with
     space-evenly, so one control keeping its label makes the centre-to-centre
     gaps unequal and eval_settings_stamp_saving fails on gapSpread. An id list
     silently excludes each new button - Team and Account were both 115px wide
     here until this rule stopped enumerating. All three classes are used only
     inside .sidebar-actions, so scoping to it cannot leak. */
  .sidebar-actions > .top-history-button,
  .sidebar-actions > .top-clear-button,
  .sidebar-actions > .top-settings-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    touch-action: manipulation;
  }

  .sidebar-actions {
    grid-area: steps;
    width: 100%;
    gap: 0;
    justify-content: space-evenly;
    justify-self: center;
    flex-wrap: nowrap;
    transform: none;
  }

  .workspace {
    padding:
      var(--space-4)
      calc(var(--workspace-gutter) + env(safe-area-inset-right, 0px))
      calc(var(--space-6) + env(safe-area-inset-bottom, 0px))
      calc(var(--workspace-gutter) + env(safe-area-inset-left, 0px));
  }

  #screenTitle {
    font-size: clamp(1.3rem, 5.8vw, 1.55rem);
    line-height: 1.14;
  }

  .topbar,
  .review-header,
  .canvas-toolbar {
    margin-bottom: var(--space-4);
  }

  /* The screen title already names the task — drop the duplicate panel heading */
  .canvas-toolbar h2 {
    display: none;
  }

  .review-header {
    flex-wrap: nowrap;
  }

  .review-header > div:first-child {
    width: 100%;
  }

  .toggle {
    justify-content: flex-start;
    text-align: left;
  }

  /* Comfortable touch targets */
  .primary-button,
  .ghost-button,
  .severity-tab,
  .comment-tab {
    min-height: 2.75rem;
  }

  .severity-tab {
    /* Never shrink below the 44px touch floor above, even when the rail narrows the
       pill scale down (--severity-pill-height can drop to ~28px). */
    min-height: max(2.75rem, var(--severity-pill-height, var(--review-pill-height)));
    height: var(--severity-pill-height, var(--review-pill-height));
  }

  /* The pane zoom controls (Review/Stamp/Save-preview screens) had no mobile override
     at all and were stuck at a 27px circular target — bring them in line with the rest
     of the mobile touch-target sizing. */
  .review-zoom-button {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1.2rem;
  }

  /* 16px floor stops mobile browsers auto-zooming focused fields */
  input,
  select,
  textarea,
  .settings-panel input,
  .settings-panel select,
  .stamp-size-grid input,
  .save-dialog input,
  .comment-tab-panel textarea {
    font-size: 1rem;
  }

  /* Review controls: 2x2 toggles, one full-width slider row each, then decision. */
  .review-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2mm;
    width: 100%;
    justify-content: stretch;
    justify-items: stretch;
    align-items: start;
    flex: 0 0 auto;
    /* Drop the desktop max-content floor so the grid can shrink to the phone width
       instead of forcing the whole review screen wider than the viewport. */
    min-width: 0;
  }

  .review-decision-actions {
    gap: 2mm;
  }

  .review-actions .toggle {
    width: 100%;
    min-width: 0;
    justify-self: stretch;
  }

  /* Keep both post-PDF actions on one row, Review again then Sheet manager. */
  .review-post-controls .review-again-button {
    margin-inline-start: 0;
    grid-column: 1;
    width: 100%;
    min-width: 0;
    min-height: 44px;
  }

  .review-post-controls .pairing-manager-button {
    grid-column: 2;
    width: 100%;
    min-width: 0;
    min-height: 44px;
  }

  .review-actions .review-tolerance-slider {
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .review-actions .review-tolerance-slider {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto var(--detail-control-height);
    width: 100%;
    min-width: 0;
    max-width: none;
    height: auto;
    margin-top: 0;
    justify-content: flex-start;
    justify-self: stretch;
  }

  .review-actions .review-tolerance-slider .detail-slider-scale {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    margin-bottom: 0.16rem;
    width: 100%;
  }

  .review-actions .review-tolerance-slider input[type="range"] {
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .review-actions .review-tolerance-control {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-end;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: auto;
    margin-top: 0;
  }

  .review-actions .review-tolerance-control .detail-slider {
    margin-top: 0;
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    max-width: none;
  }

  .review-decision-actions {
    grid-column: 1 / -1;
    width: 100%;
    justify-self: stretch;
  }

  .review-decision-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .review-decision-actions > button {
    width: 100%;
    justify-content: center;
  }

  .stamp-layout,
  .load-grid,
  .drawing-panes {
    gap: var(--space-3);
  }

  .findings-panel:has(.finding-list:empty):not(.is-collapsed) {
    grid-template-rows: auto;
    height: auto;
  }

  .findings-panel:has(.finding-list:empty) .issue-preview.is-disabled {
    min-height: 0;
    padding: var(--space-3);
  }

  .findings-panel:has(.finding-list:empty) .issue-preview-empty {
    min-height: 0;
    padding: var(--space-2) 0;
  }

  .drop-zone h3 {
    font-size: 1.05rem;
  }

  /* Preflight: top-aligned on phones, no dead viewport-centering gap */
  .workspace[data-has~="analysis-screen"]:not(#has-pad) {
    min-height: 0;
    align-content: start;
    padding-top: var(--space-4);
  }

  /* Inputs lose their intrinsic min-content floor so panels can't overflow */
  .save-dialog,
  .save-dialog > * {
    min-width: 0;
    max-width: 100%;
  }

  .workspace[data-has~="save-screen"]:not(#has-pad) {
    padding-top: calc(var(--space-4) + var(--space-2));
  }

  /* Bare 1fr tracks get floored by item min-content and burst the container;
     minmax(0, 1fr) keeps every stacked track inside the panel */
  .save-dialog,
  .save-dialog label,
  .input-row {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Text fields fill the row — but NOT checkboxes, which must stay their fixed
     size or they stretch full-width and crush the toggle label to zero. */
  .save-dialog input:not([type="checkbox"]),
  .input-row input:not([type="checkbox"]) {
    width: 100%;
    min-width: 0;
  }

  #saveScreen .save-dialog.real-export {
    --save-mobile-field-inset: clamp(0.75rem, 3.2vw, 1.25rem);
  }

  #saveScreen .save-dialog.real-export > label,
  #saveScreen .save-export-actions,
  #saveScreen .success-message {
    width: calc(100% - (var(--save-mobile-field-inset) * 2));
    max-width: calc(100% - (var(--save-mobile-field-inset) * 2));
    margin-inline: var(--save-mobile-field-inset);
  }

  #saveScreen .save-dialog.real-export > label {
    min-width: 0;
  }

  /* Settings modal becomes a full-height sheet */
  .settings-panel {
    padding: var(--space-2);
    place-items: stretch;
  }

  .settings-panel form {
    width: 100%;
    max-width: none;
  }

  .settings-save-bar .primary-button,
  .settings-save-bar .settings-cancel-button {
    flex: 1 1 auto;
  }
}

@media (max-width: 640px) and (pointer: coarse) {
  #saveScreen .save-export-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: no-preference) {
  .screen.is-active {
    animation: enter 180ms ease-out;
  }

  /* The enter keyframes move the screen, and a moving screen is the
     containing block for its fixed children: a Sheet manager that opens
     during those 180 ms (it opens on its own as Review appears) would fill
     the screen box, not the viewport. Same trap as .workspace below. */
  body.pairing-manager-open .screen.is-active {
    animation: none;
  }

  .diff {
    animation: diff-enter 680ms ease-out;
  }

  .focused-crop-svg .issue-crop-box,
  .issue-crop-svg .issue-crop-box {
    stroke-dasharray: 2.2 1.25;
    animation: crop-box-track 900ms linear infinite;
  }
}

@keyframes enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 currentColor;
  }
  65% {
    box-shadow: 0 0 0 9px transparent;
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

@keyframes diff-enter {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes crop-box-track {
  to {
    stroke-dashoffset: -6.9;
  }
}

/* ============ Motion layer (2026-06-11) ============
   Additive animation for existing elements only — no layout or color changes.
   Follows DESIGN-RULES motion: 140-180ms ease, no component shadows,
   everything gated behind prefers-reduced-motion. */

.loading-steps span {
  transition: background-color 180ms ease, color 180ms ease;
}

.settings-panel {
  transition:
    opacity 220ms ease,
    visibility 220ms ease,
    backdrop-filter 260ms ease,
    background-color 220ms ease;
}

@media (prefers-reduced-motion: no-preference) {
  /* --- Buttons: lift on hover, settle on press --- */
  .primary-button,
  .ghost-button,
  .icon-button,
  .file-button,
  .severity-tab,
  .comment-tab {
    transition:
      background-color 140ms ease,
      border-color 140ms ease,
      color 140ms ease,
      transform 140ms ease;
  }

  .primary-button:hover:not(:disabled),
  .ghost-button:hover:not(:disabled),
  .file-button:hover:not(:disabled) {
    transform: translateY(-1px);
  }

  .primary-button:active:not(:disabled),
  .ghost-button:active:not(:disabled),
  .file-button:active:not(:disabled),
  .icon-button:active:not(:disabled),
  .severity-tab:active:not(:disabled),
  .comment-tab:active:not(:disabled) {
    transform: translateY(0) scale(0.98);
  }

  /* --- Workflow step dots: one-shot ring when a step becomes active --- */
  .step.is-active .step-index {
    animation: pulse 650ms ease-out 1;
  }

  .step.is-active::after {
    animation: step-soft-glow 1200ms ease-in-out infinite;
  }

  .step.is-complete .step-index {
    animation: step-complete-pop 420ms cubic-bezier(0.2, 0.9, 0.3, 1.25) 1;
  }

  /* --- Drop zones: gentle lift while dragging a file over --- */
  .drop-zone {
    transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
  }

  .drop-zone.is-dragging,
  .drop-zone:hover {
    transform: translateY(-2px);
  }

  /* --- AI preflight: active stage gets a left-to-right scan inside the bar --- */

  /* --- AI preflight: status line gets a working ellipsis --- */
  .loading-panel:is([data-progress-state="indeterminate"], [data-progress-state="active"]) #analysisStatus::after {
    content: "";
    display: inline-block;
    width: 1.2em;
    text-align: left;
    animation: working-ellipsis 1.4s steps(1) infinite;
  }

  /* --- Findings: cards rise in with a slight stagger on render --- */
  .finding-list > * {
    animation: enter 240ms ease-out backwards;
  }

  .finding-list > *:nth-child(1) { animation-delay: 30ms; }
  .finding-list > *:nth-child(2) { animation-delay: 70ms; }
  .finding-list > *:nth-child(3) { animation-delay: 110ms; }
  .finding-list > *:nth-child(4) { animation-delay: 150ms; }
  .finding-list > *:nth-child(5) { animation-delay: 190ms; }
  .finding-list > *:nth-child(6) { animation-delay: 230ms; }

  /* --- Issue preview: crop content rises in when a finding is tapped --- */
  .issue-preview > * {
    animation: enter 200ms ease-out;
  }

  .finding.is-active {
    animation: finding-lock 360ms ease-out;
  }

  /* Fullscreen controls stay fixed and immediately usable. Re-rendering the
     selected sheet must not restart an opacity animation on the only toolbar. */
  .fullscreen-toolbar {
    animation: none;
  }

  .fullscreen-tool-button.is-active {
    animation: tool-confirm 520ms ease-out 1;
  }

  /* --- Settings sheet: native-feeling lift and settle --- */
  .settings-panel.is-open {
    animation: settings-backdrop-in 260ms ease-out both;
  }

  .settings-panel form {
    transform: translateY(16px) scale(0.965);
    transform-origin: 88% 8%;
  }

  .settings-panel.is-open form {
    animation: settings-sheet-in 420ms cubic-bezier(0.18, 0.9, 0.24, 1) both;
  }

  .settings-panel.is-open form > header,
  .settings-panel.is-open .settings-body > *,
  .settings-panel.is-open .settings-save-bar {
    animation: settings-content-in 300ms ease-out both;
  }

  .settings-panel.is-open form > header { animation-delay: 40ms; }
  .settings-panel.is-open .settings-body > *:nth-child(1) { animation-delay: 75ms; }
  .settings-panel.is-open .settings-body > *:nth-child(2) { animation-delay: 105ms; }
  .settings-panel.is-open .settings-body > *:nth-child(3) { animation-delay: 135ms; }
  .settings-panel.is-open .settings-save-bar { animation-delay: 155ms; }
}

/* Phone: kill the step glow at the motion source. Desktop discs stay 3D. */

@keyframes settings-backdrop-in {
  from {
    background: rgb(var(--bg-strong-rgb) / 0.28);
  }
  to {
    background: rgb(var(--bg-strong-rgb) / 0.82);
  }
}

@keyframes settings-sheet-in {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.955);
    filter: blur(8px);
  }
  62% {
    opacity: 1;
    transform: translateY(-2px) scale(1.012);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes settings-content-in {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes step-soft-glow {
  0%,
  100% {
    opacity: 0.25;
    transform: scale(0.82);
  }
  50% {
    opacity: 0.72;
    transform: scale(1);
  }
}

@keyframes step-complete-pop {
  0% {
    transform: scale(0.86);
  }
  58% {
    transform: scale(1.14);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes finding-lock {
  from {
    transform: translateX(-5px);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes toolbar-dock {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(10px) scale(1);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

@keyframes tool-confirm {
  0% {
    box-shadow:
      0 0 0 0 rgb(var(--accent-rgb) / 0.55),
      0 9px 20px rgb(var(--shadow-rgb) / 0.26),
      inset 0 1px 0 rgb(var(--gloss-rgb) / 0.18);
  }
  100% {
    box-shadow:
      0 0 0 9px rgb(var(--accent-rgb) / 0),
      0 9px 20px rgb(var(--shadow-rgb) / 0.26),
      inset 0 1px 0 rgb(var(--gloss-rgb) / 0.18);
  }
}

.loading-panel[data-progress-state="complete"] .loading-mark {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .loading-mark,
  .loading-steps span.is-active::before,
  .loading-panel #analysisStatus::after {
    animation: none !important;
  }

  .loading-steps span {
    transition: none;
  }
}

@keyframes cursor-target-pop {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.12);
  }
  100% {
    transform: scale(1);
  }
}


@keyframes loading-step-scan {
  0% {
    transform: translateX(-105%);
  }
  100% {
    transform: translateX(105%);
  }
}

@keyframes working-ellipsis {
  0% {
    content: "";
  }
  25% {
    content: ".";
  }
  50% {
    content: "..";
  }
  75% {
    content: "...";
  }
}

/* ============ Save screen: final preview + save panel ============ */
.save-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--side-control-width);
  gap: var(--space-4);
  /* Panel and preview share the same height */
  align-items: stretch;
  width: 100%;
  margin-inline: 0;
}

.save-layout .save-panel {
  display: grid;
  grid-template-rows: auto auto auto auto;
  align-content: start;
  gap: var(--space-2);
  width: auto;
  max-width: none;
  min-height: 0;
  padding: var(--space-4);
  background: var(--side-panel-fade-bg);
}

/* The dialog adjusts to the panel height and scrolls vertically if its content
   is taller — but never horizontally. */
.save-layout .save-dialog {
  align-content: start;
  gap: var(--space-3);
  min-height: 0;
  margin-top: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  /* Hug the panel edge instead of floating the scrollbar over the content. */
  margin-right: calc(-1 * var(--space-4));
  padding-right: var(--space-4);
  scrollbar-gutter: stable;
}

.save-layout .save-panel > .screen-label,
.save-layout .save-panel > h2,
.save-layout .save-panel > .success-message {
  margin: 0;
}

.save-preview {
  position: relative;
  min-width: 0;
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--panel-radius);
}

@media (min-width: 861px) {
  #saveScreen .save-preview {
    background:
      linear-gradient(180deg, rgb(var(--overlay-rgb) / 0.045), transparent 58%),
      radial-gradient(circle at 18% 10%, rgb(var(--complete-wash-rgb) / 0.18), transparent 38%),
      linear-gradient(135deg, rgb(var(--complete-wash-rgb) / 0.16), rgb(var(--surface-raised-rgb) / 0.9) 48%, rgb(var(--bg-rgb) / 0.18)),
      var(--surface);
    border-color: rgb(var(--complete-rgb) / 0.3);
    box-shadow:
      var(--shadow),
      inset 0 1px 0 rgb(var(--gloss-rgb) / 0.07);
  }
}

.save-preview .canvas-toolbar {
  margin-bottom: var(--space-3);
}

.save-preview-nav {
  display: flex;
  flex: 0 0 auto;
  gap: var(--space-2);
  align-items: center;
}

.save-preview-frame {
  position: relative;
  min-height: 14rem;
  overflow: hidden;
  background: var(--surface);
  cursor: var(--cursor-arrow);
  border-radius: var(--radius-md);
}

#saveScreen .save-preview-frame {
  background: var(--surface);
}

.save-preview-frame.is-zoomed {
  overflow: auto;
}

.save-preview-frame:has(.save-preview-scroll) {
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
  border-radius: 0;
  cursor: var(--cursor-zoom);
}

.save-preview:hover .review-zoom-control,
.save-preview-frame.is-zoomed ~ .review-zoom-control,
.review-zoom-control.save-preview-zoom-floating:focus-within {
  opacity: 1;
}

.save-preview:hover .save-preview-expand-button,
.save-preview-frame:focus-visible ~ .save-preview-expand-button {
  opacity: 0.92;
}

#saveScreen .save-preview-zoom-floating {
  left: calc(var(--space-2) + var(--space-4));
  bottom: calc(var(--space-2) + var(--space-4));
}

#saveScreen .save-preview-expand-button {
  right: calc(var(--space-2) + var(--space-4));
  bottom: calc(var(--space-2) + var(--space-4));
}

.save-preview-scroll {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  background: transparent;
}

.save-preview-viewport {
  position: relative;
  flex: 0 0 auto;
  overflow: visible;
  width: 100%;
  height: 100%;
  background: transparent;
  border-radius: 0;
  transition: width 180ms ease, height 180ms ease;
}

.save-preview-viewport > .rendered-sheet,
.save-preview-viewport > .empty-sheet-state {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
  .save-preview-scroll,
  .save-preview-viewport {
    transition: none;
  }
}

@media (max-width: 1180px) {
  .save-layout {
    grid-template-columns: 1fr;
  }

  /* Stacked layout has no side panel to match heights against, so the preview
     frame takes its full aspect-ratio height (a landscape sheet is ~70% as tall
     as it is wide) and pushes the sheet's bottom title block below the fold.
     Cap it to the viewport so the whole sheet stays visible at once; the sheet
     image is object-fit:contain, so it just scales down to fit, never clipped. */
  #saveScreen .save-preview-frame {
    height: auto;
    max-height: 72vh;
    /* Capping the height shrinks the aspect-true frame; keep it centred in the
       preview rather than pinned to the left with a gap on the right. */
    margin-inline: auto;
  }

  #saveScreen .save-preview-frame:has(.save-preview-scroll) {
    max-height: min(calc(var(--app-visible-height) * 0.58), calc(var(--app-visible-height) - var(--workflow-offset) - 17rem));
  }

  #saveScreen .save-preview-zoom-floating {
    left: calc(var(--space-2) + var(--space-4));
    bottom: calc(var(--space-2) + var(--space-4));
  }

  #saveScreen .save-preview-expand-button {
    right: calc(var(--space-2) + var(--space-4));
    bottom: calc(var(--space-2) + var(--space-4));
  }

  #stampScreen .stamp-zoom-floating {
    left: calc((100% - min(calc(100% - var(--space-4) - var(--space-4)), calc(min(calc(var(--app-visible-height) * 0.58), calc(var(--app-visible-height) - var(--workflow-offset) - 17rem)) * 1.3889))) / 2 + var(--space-2));
  }

  #stampScreen .expand-sheet-button {
    right: calc((100% - min(calc(100% - var(--space-4) - var(--space-4)), calc(min(calc(var(--app-visible-height) * 0.58), calc(var(--app-visible-height) - var(--workflow-offset) - 17rem)) * 1.3889))) / 2 + var(--space-2));
  }
}

/* Phones: every step keeps its title — number stacked above a small label */
@media (max-width: 640px) {
  .drawing-pane > .review-zoom-control {
    left: calc(var(--space-2) + var(--space-2));
    bottom: calc(var(--space-2) + var(--space-3));
  }

  .drawing-pane > .expand-sheet-button {
    right: calc(var(--space-2) + var(--space-2));
    bottom: calc(var(--space-2) + var(--space-3));
  }

  #stampScreen .stamp-zoom-floating,
  #saveScreen .save-preview-zoom-floating {
    left: calc(var(--space-2) + var(--space-2));
    bottom: calc(var(--space-2) + var(--space-3));
  }

  #stampScreen .expand-sheet-button,
  #saveScreen .save-preview-expand-button {
    right: calc(var(--space-2) + var(--space-2));
    bottom: calc(var(--space-2) + var(--space-3));
  }

  #stampScreen .stamp-frame:has(.stamp-sheet-scroll) {
    max-width: 100%;
    max-height: min(calc(var(--app-visible-height) * 0.42), calc(var(--app-visible-height) - var(--workflow-offset) - 18rem));
  }

  #saveScreen .save-preview-frame {
    width: 100%;
    max-width: 100%;
    min-height: 0;
  }

  #saveScreen .save-preview-frame:has(.save-preview-scroll) {
    max-height: min(calc(var(--app-visible-height) * 0.42), calc(var(--app-visible-height) - var(--workflow-offset) - 18rem));
  }

  #saveScreen .save-layout .save-dialog {
    margin-right: 0;
    padding-right: 0;
  }

  #saveScreen .save-layout .save-panel {
    --save-mobile-field-inset: clamp(0.75rem, 3.2vw, 1.25rem);
  }

  #saveScreen .save-layout .save-panel > .screen-label,
  #saveScreen .save-layout .save-panel > h2,
  #saveScreen .save-layout .save-panel > .save-dialog,
  #saveScreen .save-layout .save-panel > .success-message {
    width: calc(100% - (var(--save-mobile-field-inset) * 2));
    max-width: calc(100% - (var(--save-mobile-field-inset) * 2));
    margin-inline: var(--save-mobile-field-inset);
  }

  #saveScreen .save-dialog.real-export > label,
  #saveScreen .save-export-actions {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
  }

  .step-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-self: center;
    align-items: center;
    overflow: visible;
    height: auto;
    min-height: 0;
    padding-top: 0;
    transform: none;
  }

  .step-list .step-copy {
    display: block;
    min-height: 0;
    width: 100%;
    line-height: 1;
  }

  /* Zoom controls span the full width on phones (− [ level ] +) instead of
     bunching to the right. */
  #stampScreen .stamp-canvas-actions {
    justify-content: stretch;
  }

  #stampScreen .stamp-zoom-toolbar {
    width: 100%;
    flex: 1 1 100%;
  }

  /* Phones: remove the faint light outline Brave/mobile browsers draw around
     PDF panes and the nested sheet frames. */
  #reviewScreen .drawing-pane,
  #reviewScreen .drawing-pane header,
  #reviewScreen .review-sheet-frame,
  #stampScreen .stamp-frame,
  #saveScreen .save-preview-frame {
    border-color: transparent;
    box-shadow: none;
    outline: none;
  }
}

/* ============ Phone review: swipeable issue cards ============
   On phones the finding cards become a horizontal flick/swipe carousel with
   scroll-snap, so each issue gets full width and the list never overflows the
   page. The selected-issue detail (.issue-preview) already sits directly under
   the summary in the filter rail, so it stays visible above the cards. */
@media (max-width: 640px) {
  .finding-list {
    display: flex;
    flex-flow: column nowrap;
    grid-template-columns: none;
    gap: var(--space-3);
    overflow: visible;
    padding-bottom: var(--space-2);
  }

  .finding-list > .finding {
    flex: 0 0 auto;
    min-width: 0;
    width: 100%;
  }

  .finding-list > .finding-empty {
    flex: 0 0 auto;
    width: 100%;
  }
}

/* Scroll rails belong only on panels that can actually scroll. They remain slim
   and use the RAECO blue accent so overflow is discoverable without making the
   engineering workspace feel like a generic web page. */
.app-scroll-rail,
#stampScreen .comment-controls .comment-tab-panel.is-active {
  scrollbar-color: rgb(var(--accent-rgb) / 0.8) transparent;
  scrollbar-width: thin;
}

.app-scroll-rail::-webkit-scrollbar,
#stampScreen .comment-controls .comment-tab-panel.is-active::-webkit-scrollbar {
  display: block;
  width: 0.5rem;
  height: 0.5rem;
}

.app-scroll-rail::-webkit-scrollbar-track,
#stampScreen .comment-controls .comment-tab-panel.is-active::-webkit-scrollbar-track {
  background: transparent;
}

.app-scroll-rail::-webkit-scrollbar-thumb,
#stampScreen .comment-controls .comment-tab-panel.is-active::-webkit-scrollbar-thumb {
  background: rgb(var(--accent-rgb) / 0.72);
  border: 0.1rem solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

#settingsDialog .settings-body.app-scroll-rail {
  scrollbar-color: var(--accent) rgb(var(--overlay-rgb) / 0.04);
}

#settingsDialog .settings-body.app-scroll-rail::-webkit-scrollbar-track {
  background: rgb(var(--overlay-rgb) / 0.04);
}

#settingsDialog .settings-body.app-scroll-rail::-webkit-scrollbar-thumb {
  background: var(--accent);
  border: 2px solid var(--surface);
  background-clip: padding-box;
}

/* The Review panel keeps its inset rail and uses the RAECO blue accent. */
.findings-panel {
  scrollbar-color: rgb(var(--accent-rgb) / 0.9) transparent;
  scrollbar-width: thin;
}

.findings-panel::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.5rem;
}

.findings-panel::-webkit-scrollbar-thumb {
  background: rgb(var(--accent-rgb) / 0.9);
  border: 0.19rem solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

.findings-panel::-webkit-scrollbar-thumb:hover {
  background: rgb(var(--accent-rgb) / 0.72);
  background-clip: padding-box;
}

#settingsDialog .settings-body.app-scroll-rail::-webkit-scrollbar-thumb:hover {
  background: var(--accent-hover);
}

/* ============ Export actions, Brave banner, helpers ============ */

/* Share is the purple companion to the blue Export action. */
.share-action {
  color: var(--on-colour-button);
  background: linear-gradient(180deg, var(--complete-button), var(--complete-button) 48%, var(--complete-button-press));
  border-color: color-mix(in srgb, var(--complete-hover) 72%, transparent);
}
.share-action:not(:disabled):hover {
  background: linear-gradient(180deg, var(--complete-button-highlight), var(--complete-button) 42%, var(--complete-button-press));
  color: var(--on-colour-button);
}
.share-action:not(:disabled):active {
  background: linear-gradient(180deg, color-mix(in srgb, var(--complete-button) 90%, var(--shade)), color-mix(in srgb, var(--complete-button) 61%, var(--shade)));
  color: var(--on-colour-button);
}

/* Export follows the Yours colour (blue by default); Share is the purple companion. */
.export-action {
  color: var(--on-colour-button);
  background: linear-gradient(180deg, var(--accent-button), var(--accent-button) 48%, var(--accent-button-press));
  border-color: rgb(var(--accent-border-rgb) / 0.72);
}
.export-action:not(:disabled):hover {
  background: linear-gradient(180deg, var(--accent-button-highlight), var(--accent-button) 42%, var(--accent-button-press));
  color: var(--on-colour-button);
}
.export-action:not(:disabled):active {
  background: linear-gradient(180deg, var(--accent-button), var(--accent-button-press));
  color: var(--on-colour-button);
}

/* Brave / no-picker info banner in the Save panel (download-only mode). */
.brave-folder-banner {
  margin: var(--space-3) 0;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-md);
  background: rgb(var(--accent-wash-rgb) / 0.06);
  color: var(--text-muted);
  font-size: 0.9rem;
}
.brave-folder-banner[hidden] { display: none; }
.brave-folder-banner-title {
  font-weight: 600;
  color: var(--text);
  margin: 0 0 var(--space-1);
}
.brave-folder-banner-body { margin: 0 0 var(--space-2); }
.brave-folder-banner-steps { margin: 0 0 var(--space-3); padding-left: 1.2rem; }
.brave-folder-banner-steps li { margin-bottom: var(--space-1); }
.brave-folder-banner-actions { display: flex; align-items: center; gap: var(--space-3); }
.brave-folder-banner-dismiss { margin-left: auto; }

/* Settings helper line under the folder-mode toggle. */
.settings-helper {
  margin: var(--space-1) 0 var(--space-4) calc(1.1rem + var(--space-3));
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Cleanly hide Save-panel folder controls in download-only mode. */
.save-dialog label[hidden] { display: none; }

/* Zoom pill: compact, LEFT-aligned, only as wide as its buttons (equal spacing
   via the control's own gap). !important to win over the scattered per-screen
   left/bottom overrides without editing each. */
.review-zoom-control {
  left: var(--space-2) !important;
  right: auto !important;
  justify-content: flex-start !important;
  width: auto !important;
}

/* Sheet page-nav buttons sit on the RIGHT of their header/toolbar. */
.pane-header-controls,
.save-preview-nav { margin-left: auto; }

/* Batch-rotate control: a filled button in the sheet header, same height as the other
   header buttons. Ticked = the rotate buttons rotate EVERY sheet on that side at once.
   Side convention: your (RAECO) controls are blue, manufacturer controls are purple. */
.rotate-all-check {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  height: 30px;
  min-height: 30px;
  box-sizing: border-box;
  padding: 0 0.5rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--text-strong);
  border: 1px solid transparent;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  user-select: none;
  transition: background 140ms ease, border-color 140ms ease, opacity 140ms ease;
}
/* Filled side colours (unticked = solid, ticked = solid too — the checkbox shows state). */
.rotate-all-check:has([data-rotate-all-toggle="raeco"]) {
  background: var(--accent-action-gradient);
  color: var(--on-colour-button);
  border-color: rgb(var(--accent-border-rgb) / 0.45);
}
.rotate-all-check:has([data-rotate-all-toggle="manufacture"]) {
  background: var(--complete-action-gradient);
  color: var(--on-colour-button);
  border-color: rgb(var(--complete-border-rgb) / 0.5);
}
.rotate-all-check:active { opacity: 0.9; }
/* Hide the native checkbox; draw a white tick box ourselves so the tick is reliably white. */
.rotate-all-check input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  pointer-events: none;
}
.rotate-all-check-box {
  width: var(--control-icon);
  height: var(--control-icon);
  flex: 0 0 var(--control-icon);
  border-radius: 4px;
  border: 1.5px solid rgb(var(--text-strong-rgb) / 0.85);
  background: rgb(var(--overlay-rgb) / 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 140ms ease;
}
/* The 'ALL' label is always pure white on the filled blue/purple chip. */
.rotate-all-check-text { color: var(--on-colour-button) !important; }
.rotate-all-check-box::after {
  content: "";
  width: 0.42rem;
  height: 0.24rem;
  border-left: 1.8px solid var(--text-strong);
  border-bottom: 1.8px solid var(--text-strong);
  transform: rotate(-45deg) scale(0);
  transition: transform 140ms ease;
  margin-top: -2px;
}
.rotate-all-check:has(input:checked) .rotate-all-check-box { background: rgb(var(--gloss-rgb) / 0.95); }
.rotate-all-check:has(input:checked) .rotate-all-check-box::after {
  border-color: var(--accent-deep);
  transform: rotate(-45deg) scale(1);
}
.rotate-all-check:has([data-rotate-all-toggle="manufacture"]:checked) .rotate-all-check-box::after {
  border-color: var(--complete-button-press);
}
.rotate-all-check-icon {
  width: var(--control-icon);
  height: var(--control-icon);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.95;
  flex: 0 0 auto;
}
.rotate-all-check-text { font-size: var(--label-size); font-weight: 600; white-space: nowrap; letter-spacing: 0.01em; }

/* Phones: the rotate-all button keeps full height (matches the other header buttons)
   but sheds its text label below 480px so the crowded header still fits; the layers
   icon + white checkbox still convey "all sheets". */
@media (max-width: 640px) {
  .rotate-all-check { gap: 0.25rem; padding: 0 0.45rem; }
}
@media (max-width: 480px) {
  .rotate-all-check-text { display: none; }
  .rotate-all-check { padding: 0 0.5rem; }
}

@media (max-width: 640px) {
  .save-export-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* The full-screen issue box is draggable (it's absolute, so moving it never
   shifts the drawing underneath). Buttons inside keep their normal cursor. */
.fullscreen-discrepancy { cursor: move; touch-action: none; }
.measurement-panel {
  /* Top left, clear of the bottom toolbar; the header drags it anywhere
     (placeMeasurementPanel keeps it on screen). Solid, so the drawing never
     shows through the controls. Only its own controls take the pointer. */
  position: absolute;
  left: 1rem;
  top: 4.75rem;
  z-index: 24;
  box-sizing: border-box;
  width: min(23rem, calc(100% - 2rem));
  max-height: calc(100% - 11rem);
  overflow: auto;
  padding: 0.7rem 0.8rem 0.75rem;
  border: 1px solid var(--line, color-mix(in srgb, var(--ink-dark) 19%, var(--paper)));
  border-radius: var(--panel-radius);
  background: var(--surface, var(--gloss));
  box-shadow: 0 12px 36px rgb(var(--surface-raised-rgb) / 0.22);
  pointer-events: none;
}
.measurement-panel[hidden], .measurement-calibration-dialog[hidden] { display: none; }
.measurement-scale-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.measurement-panel > * { pointer-events: auto; }
.measurement-panel-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: -0.2rem 0 0.15rem;
  cursor: move;
  touch-action: none;
  user-select: none;
}
.measurement-panel-head strong { font-size: 0.95rem; letter-spacing: 0.04em; }
.measurement-panel-head .measurement-done-button { margin-left: auto; }
.measurement-panel.is-dragging { opacity: 0.96; }
.measurement-panel.is-dragging .measurement-panel-head { cursor: grabbing; }
.measurement-panel .measurement-status { font-size: 0.92rem; }
.measurement-panel .measurement-hint { margin: 0.55rem 0 0; font-size: 0.74rem; opacity: 0.72; }
.measurement-panel .measurement-calibration-help,
.measurement-calibration-dialog .measurement-calibration-help { margin: 0; font-size: 0.85rem; opacity: 0.8; }
.measurement-result-actions:not(:has(button:not([hidden]))) { display: none; }
/* A value waiting for a decision owns the panel: the set-up buttons and the
   hint come back once it is decided, so the panel stays short. */
.measurement-panel.has-decision .measurement-setup-actions,
.measurement-panel.has-decision .measurement-hint,
.measurement-panel.has-decision .measurement-scale-row { display: none; }
.measurement-panel .measurement-remove-button:not([hidden]) { color: var(--danger, #c62828); border-color: currentColor; }
.measurement-scale-chip {
  display: inline-block;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: 0.78rem;
  color: #ffffff;
  background: #4a5361;
}
.measurement-scale-chip[data-state="calibrated"] { background: var(--success-on-paper); }
.measurement-scale-chip[data-state="estimate"] { background: var(--comment-on-paper); }
.measurement-scale-detail { font-size: 0.8rem; opacity: 0.85; }
.measurement-panel p { margin: 0.35rem 0 0.65rem; }
.measurement-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.measurement-panel button,
.measurement-panel input,
.measurement-panel select,
.measurement-panel label { pointer-events: auto; }
.measurement-actions button,
#fullscreenMeasureButton,
.measurement-handle { min-width: 44px; min-height: 44px; }
.measurement-control-icon {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
}
.measurement-calibration-dialog {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background: rgb(var(--surface-raised-rgb) / 0.48);
}
.measurement-calibration-dialog form {
  display: grid;
  gap: 0.75rem;
  width: min(26rem, calc(100% - 2rem));
  padding: 1rem;
  border-radius: var(--panel-radius);
  background: var(--surface, var(--gloss));
}
.measurement-overlay { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 12; pointer-events: none; overflow: visible; }
/* Strokes use constant on-screen widths (non-scaling), so the line and its end
   dots stay crisp at every zoom. A white halo under each keeps them readable on
   dark print and filled areas; the coloured stroke uses the app accent. */
.measurement-overlay .measurement-halo,
.measurement-overlay .measurement-preview-halo {
  stroke: #ffffff;
  stroke-opacity: 0.9;
  stroke-width: 5px;
  stroke-linecap: round;
  fill: none;
  vector-effect: non-scaling-stroke;
}
.measurement-overlay .measurement-line,
.measurement-overlay .measurement-preview {
  stroke: var(--accent-on-paper);
  stroke-width: 2px;
  stroke-linecap: round;
  fill: none;
  vector-effect: non-scaling-stroke;
}
.measurement-overlay .measurement-preview { stroke-dasharray: 6 4; }
.measurement-overlay .measurement-dot {
  stroke: var(--accent-on-paper);
  stroke-width: 9px;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.measurement-overlay .measurement-dot.measurement-dot-halo { stroke: #ffffff; stroke-opacity: 0.95; stroke-width: 13px; }
.measurement-overlay .measurement-view { fill: color-mix(in srgb, var(--accent-on-paper) 8%, transparent); stroke: var(--accent-on-paper); stroke-width: 1.5px; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.measurement-overlay .measurement-estimated { stroke: var(--comment-on-paper); }
.measurement-overlay .measurement-dot.measurement-dot-halo.measurement-estimated { stroke: #ffffff; }
.measurement-overlay .measurement-dimension.is-reference .measurement-line,
.measurement-overlay .measurement-dimension.is-reference .measurement-dot:not(.measurement-dot-halo) { stroke-opacity: 0.75; }
.measurement-overlay .measurement-dimension.is-selected .measurement-line { stroke-width: 3px; }
.measurement-overlay .measurement-rejected { display: none; }
/* The value is an HTML chip: white text on a filled accent chip, a fixed
   on-screen size (1 / the fullscreen zoom), always inside the visible drawing
   (fitMeasurementTags writes --tag-rot / --tag-dx / --tag-dy / --tag-off). */
.fullscreen-frame .overlay-layer .measurement-tag {
  position: absolute;
  left: var(--mx, 50%);
  top: var(--my, 50%);
  z-index: 13;
  box-sizing: border-box;
  padding: 0.3rem 0.6rem;
  border: 1px solid #ffffff;
  border-radius: 0.5rem;
  background: var(--accent-on-paper);
  color: var(--on-accent, #ffffff);
  font: 700 0.9rem/1.2 var(--font-body, system-ui, sans-serif);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  box-shadow: 0 0 0 2px rgb(0 0 0 / 0.35), 0 2px 8px rgb(0 0 0 / 0.28);
  pointer-events: none;
  transform-origin: 0 0;
  /* Zoom cancel, screen-space clamp shift, line angle, then centre on the
     midpoint (with an optional perpendicular offset for short lines). */
  transform: scale(calc(1 / var(--fullscreen-zoom, 1))) translate(var(--tag-dx, 0px), var(--tag-dy, 0px)) rotate(var(--tag-rot, 0deg)) translate(-50%, calc(-50% + var(--tag-off, 0px)));
  transition: transform 120ms ease;
}
.fullscreen-frame .overlay-layer .measurement-tag[hidden] { display: none; }
.fullscreen-frame .overlay-layer .measurement-tag.measurement-estimated { background: var(--comment-on-paper); }
.fullscreen-viewer.is-open.is-measuring .fullscreen-sheet,
.fullscreen-viewer.is-open.is-measuring .fullscreen-page { touch-action: none; }
/* Measuring cursor: a ring with a blue centre dot and four arms that stop
   short of it, white-edged so it shows on line work and on dark fills. The
   hotspot is the dot, exactly where the endpoint is placed. */
.fullscreen-viewer.is-open.is-measuring .fullscreen-frame .rendered-sheet { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2244%22%20height%3D%2244%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cg%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M16%201.5v9M16%2021.5v9M1.5%2016h9M21.5%2016h9%22%20stroke%3D%22%23fff%22%20stroke-width%3D%224%22%2F%3E%3Cpath%20d%3D%22M16%201.5v9M16%2021.5v9M1.5%2016h9M21.5%2016h9%22%20stroke%3D%22%230b6fc3%22%20stroke-width%3D%222%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%224%22%20stroke%3D%22%23fff%22%20stroke-width%3D%223.5%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%224%22%20stroke%3D%22%230b6fc3%22%20stroke-width%3D%221.6%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%221.3%22%20fill%3D%22%231a8cff%22%20stroke%3D%22%23fff%22%20stroke-width%3D%22.6%22%2F%3E%3C%2Fsvg%3E") 22 22, crosshair; }
/* While measuring, the issue card steps aside: it covered the drawing and
   swallowed endpoint clicks. The pairing dimension bar stays. */
.fullscreen-viewer.is-open.is-measuring .fullscreen-discrepancy:not(.fullscreen-dimension-picker) { display: none; }
.fullscreen-viewer.is-open.is-measuring.is-space-pan .fullscreen-frame .rendered-sheet,
.fullscreen-viewer.is-open.is-measuring.is-space-pan .fullscreen-page { cursor: grab; }
.fullscreen-viewer.is-open.is-measuring .fullscreen-page.is-panning,
.fullscreen-viewer.is-open.is-measuring .fullscreen-page.is-panning .rendered-sheet { cursor: grabbing; }
/* A value not yet accepted reads as a draft: dashed line, outlined chip. */
.measurement-overlay .measurement-dimension.is-pending .measurement-line { stroke-dasharray: 7 4; }
.fullscreen-frame .overlay-layer .measurement-tag.is-pending {
  background: #ffffff;
  color: var(--accent-on-paper);
  border: 2px solid var(--accent-on-paper);
}
.fullscreen-frame .overlay-layer .measurement-tag.is-pending.measurement-estimated { background: #ffffff; color: var(--comment-on-paper); border-color: var(--comment-on-paper); }
.fullscreen-frame .overlay-layer .measurement-tag.is-reference { background: #4a5361; font-weight: 600; }
/* Automatic scale: its written dimension is drawn with points A and B. */
.fullscreen-frame .overlay-layer .measurement-end-letter {
  position: absolute;
  left: var(--mx, 50%);
  top: var(--my, 50%);
  z-index: 13;
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border: 1px solid #ffffff;
  border-radius: 50%;
  background: #4a5361;
  color: #ffffff;
  font: 700 0.75rem/1 var(--font-body, system-ui, sans-serif);
  box-shadow: 0 0 0 2px rgb(0 0 0 / 0.3);
  pointer-events: none;
  transform-origin: 0 0;
  transform: scale(calc(1 / var(--fullscreen-zoom, 1))) translate(-50%, -150%);
}
.fullscreen-frame .overlay-layer .measurement-tag.is-reference.is-pending { background: #ffffff; color: #4a5361; border-color: #4a5361; }
.measurement-overlay .measurement-dimension.is-reference .measurement-line,
.measurement-overlay .measurement-dimension.is-reference .measurement-dot:not(.measurement-dot-halo) { stroke: #4a5361; }
/* Saved values can be picked (to remove them) only while measuring. */
.fullscreen-viewer.is-open.is-measuring .fullscreen-frame .overlay-layer .measurement-tag[data-annotation-id] { pointer-events: auto; cursor: pointer; }
.fullscreen-frame .overlay-layer .measurement-tag.is-accepted.is-selected { box-shadow: 0 0 0 3px var(--danger, #c62828), 0 2px 8px rgb(0 0 0 / 0.28); }
.measurement-overlay .measurement-dimension.is-accepted.is-selected .measurement-line { stroke-width: 3.5px; }
#fullscreenMeasureButton { gap: 0.45rem; }
/* Shift slows the aim: the real pointer hides and this mark shows where a click lands. */
.fullscreen-viewer.is-open.is-measuring.is-fine-aim .fullscreen-frame .rendered-sheet { cursor: none; }
.measurement-fine-aim { position: fixed; z-index: 4002; width: 44px; height: 44px; margin: -22px 0 0 -22px; pointer-events: none; }
.measurement-fine-aim[hidden] { display: none; }
.measurement-fine-aim svg { display: block; }
/* Magnifier loupe that follows the cursor while measuring (updateMeasurementLoupe). */
.measurement-loupe {
  position: fixed;
  z-index: 4003;
  width: 176px;
  height: 176px;
  border-radius: 50%;
  border: 3px solid #ffffff;
  outline: 2px solid var(--accent-on-paper, #0b6fc3);
  background-color: #ffffff;
  background-repeat: no-repeat;
  box-shadow: 0 10px 28px rgb(0 0 0 / 0.38);
  overflow: hidden;
  pointer-events: none;
  image-rendering: auto;
}
.measurement-loupe[hidden] { display: none; }
.measurement-loupe svg { position: absolute; inset: 0; overflow: visible; }
.measurement-loupe .measurement-loupe-cross-halo { fill: none; stroke: #ffffff; stroke-width: 4.5; stroke-linecap: round; }
.measurement-loupe .measurement-loupe-cross { fill: none; stroke: var(--accent-on-paper, #0b6fc3); stroke-width: 2; stroke-linecap: round; }
.measurement-loupe .measurement-loupe-dot { fill: #1a8cff; stroke: #ffffff; stroke-width: 1.2; }
.measurement-loupe .measurement-loupe-line-halo,
.measurement-loupe .measurement-loupe-line,
.measurement-loupe .measurement-loupe-first { display: none; }
.measurement-loupe.has-first .measurement-loupe-line-halo { display: inline; stroke: #ffffff; stroke-width: 5; stroke-linecap: round; }
.measurement-loupe.has-first .measurement-loupe-line { display: inline; stroke: var(--accent-on-paper, #0b6fc3); stroke-width: 2; stroke-dasharray: 6 4; }
.measurement-loupe.has-first .measurement-loupe-first { display: inline; fill: var(--accent-on-paper, #0b6fc3); stroke: #ffffff; stroke-width: 2; }
.fullscreen-toolbar #fullscreenMeasureButton[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--on-colour-button, #ffffff), 0 0 0 2px var(--accent-strong); }
.fullscreen-discrepancy button,
.fullscreen-discrepancy a { cursor: pointer; }
.fullscreen-discrepancy.is-dragging { cursor: grabbing; user-select: none; opacity: 0.96; }

/* Sheet-header controls pull their size from ONE place (--control-h / --control-icon
   in :root) so page arrows, rotate buttons and the rotate-all chip always match in
   height and icon size. Change the token, not 20 rules. */
.pane-header-controls .sheet-page-button,
.pane-header-controls .rotate-sheet-button,
.pane-header-controls .rotate-all-check,
.canvas-toolbar .sheet-page-button,
.canvas-toolbar .rotate-sheet-button,
.canvas-toolbar .rotate-all-check {
  height: var(--control-h);
  min-height: var(--control-h);
  box-sizing: border-box;
}
.pane-header-controls .sheet-page-button,
.pane-header-controls .rotate-sheet-button,
.canvas-toolbar .sheet-page-button,
.canvas-toolbar .rotate-sheet-button {
  width: var(--control-h);
  min-width: var(--control-h);
}
.pane-header-controls .sheet-page-arrow,
.pane-header-controls .rotate-sheet-button > svg,
.pane-header-controls .rotate-all-check-icon,
.canvas-toolbar .sheet-page-arrow,
.canvas-toolbar .rotate-sheet-button > svg,
.canvas-toolbar .rotate-all-check-icon {
  width: var(--control-icon);
  height: var(--control-icon);
}
/* In the pane header rows every control is the same square: the rotate-all
   chip drops its icon + "ALL" text and shows only the white state checkbox,
   so the row reads as five equal buttons (the tooltip still explains it). */
.pane-header-controls .rotate-all-check {
  width: var(--control-h);
  min-width: var(--control-h);
  justify-content: center;
  gap: 0;
  padding: 0;
}
.pane-header-controls .rotate-all-check-icon,
.pane-header-controls .rotate-all-check-text {
  display: none;
}
/* Elsewhere (canvas toolbar) the chip keeps its "ALL" label. */
.rotate-all-check { padding-inline: 0.5rem; }
@media (min-width: 481px) {
  .canvas-toolbar .rotate-all-check-text { display: inline; }
}

/* ---- Full-screen sheet manager (whole-set previews + in-review reassign) ---- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

.pairing-overview {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  /* Same 10 mm edge gap as the Settings panel on desktop; the phone keeps 0. */
  padding: 10mm;
  background: rgb(var(--bg-strong-rgb) / 0.82);
  backdrop-filter: blur(10px);
}

/* Sheet Manager: the whole panel scrolls. Do not trap pages or Overall Size
   in a short inner pane. */
.pairing-overview[hidden] { display: none; }
body.pairing-manager-open { overflow: hidden; }

/* The manager is a modal workspace. Remove the fixed app chrome while it is
   open so the heading and controls keep the full viewport and cannot be
   covered by the workflow bar's separate stacking context. */
body.pairing-manager-open .sidebar {
  visibility: hidden;
  pointer-events: none;
}

body.pairing-manager-open .app-shell::before {
  visibility: hidden;
}

.pairing-manager-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: var(--detail-control-height, 2.5rem);
  height: var(--detail-control-height, 2.5rem);
  padding-inline: var(--space-3);
  white-space: nowrap;
  line-height: 1;
}

.pairing-manager-button svg {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
}

.pairing-manager-button > span {
  display: inline-flex;
  align-items: center;
  height: 1rem;
  line-height: 1;
}

.pairing-manager-count,
.app-queue-count {
  padding-left: 0.45rem;
  color: var(--text);
  font-size: 0.68rem;
  border-left: 1px solid rgb(var(--overlay-rgb) / 0.28);
}

/* Persistent queue indicator in the topbar. Visible on every screen so queued
   work is never more than one click away, whatever step the user is on. */
.app-queue-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  flex: 0 0 auto;
  align-self: center;
  min-height: 44px;
  padding-inline: var(--space-3);
  white-space: nowrap;
  line-height: 1;
}

.app-queue-button[hidden] { display: none; }

.app-queue-button svg {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
}

.app-queue-button > span {
  display: inline-flex;
  align-items: center;
  height: 1rem;
  line-height: 1;
}

.pairing-overview-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--space-3, 0.75rem);
  width: 100%;
  height: 100%;
  padding: var(--space-5);
  overflow: hidden;
  background: rgb(var(--surface-rgb) / 0.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow-panel);
}

/* The page-tile overview is a compact decision surface. Let it end after the
   PDF tiles instead of reserving the full detailed-matcher workspace height. */
.pairing-overview-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4, 1rem);
  width: 100%;
  margin: 0;
  padding: 0 3.5rem 0 0;
  position: relative;
}

.pairing-overview-title {
  margin: 0;
  font-size: var(--pairing-title-size);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}

.pairing-overview-stats {
  display: flex;
  align-items: center;
  min-height: 44px;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.pairing-overview-close {
  position: absolute;
  top: 50%;
  right: 0;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  font-size: 1.45rem;
  line-height: 1;
  z-index: 2;
}

.pairing-stat {
  padding: 0.05rem 0.45rem;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 999px;
  white-space: nowrap;
}

.pairing-stat-ok { color: var(--success); background: rgb(var(--success-rgb) / 0.14); }
.pairing-stat-warn { color: var(--warning); background: rgb(var(--warning-rgb) / 0.16); }
.pairing-stat-muted { color: var(--text-muted); background: rgb(var(--overlay-rgb) / 0.06); }

button.pairing-stat {
  position: relative;
  box-sizing: border-box;
  height: calc(var(--pairing-title-size) * 1.12);
  min-height: 0;
  border: 1px solid transparent;
  cursor: pointer;
}

/* Match the title visually while retaining a 44px pointer target. */
button.pairing-stat::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 44px;
  transform: translateY(-50%);
}

button.pairing-stat:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

button.pairing-stat[aria-pressed="true"] {
  border-color: currentColor;
}

.pairing-overview-banner {
  margin: 0;
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--text);
  background: rgb(var(--accent-wash-rgb) / 0.12);
  border: 1px solid rgb(var(--accent-rgb) / 0.4);
  border-radius: var(--panel-radius);
}

.pairing-overview-warn {
  background: rgb(var(--danger-rgb) / 0.12);
  border-color: rgb(var(--danger-rgb) / 0.45);
}

/* Wide dialogs fit two cards side by side; narrower ones keep one column. */
.pairing-page-inline-controls,
.pairing-page-arrow-controls {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  width: auto;
  min-width: 0;
}

.pairing-page-inline-controls .rotate-sheet-button,
.pairing-page-rotate-spacer {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
}

.pairing-detail-preview {
  position: relative;
  display: block;
  align-self: stretch;
  width: 100%;
  height: auto;
  min-height: 0;
  overflow: hidden;
  background: transparent;
}

.pairing-detail-canvas {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  min-width: 0;
  min-height: 0;
  transform-origin: center;
  transition: transform 120ms ease;
}

.pairing-detail-preview.is-zoomed,
.pairing-detail-preview.is-zoomed .pairing-detail-canvas,
.pairing-detail-preview.is-panning .pairing-detail-canvas {
  cursor: var(--cursor-grab);
}

.pairing-detail-preview.is-zoomed {
  touch-action: none;
}

.pairing-detail-preview:not(.is-zoomed) {
  touch-action: pan-y;
}

.pairing-detail-preview.is-panning .pairing-detail-canvas {
  transition: none;
}

.pairing-detail-zoom-control {
  opacity: 0.88;
}

.pairing-detail-preview:hover .pairing-detail-zoom-control,
.pairing-detail-zoom-control:focus-within,
.pairing-detail-preview.is-zoomed .pairing-detail-zoom-control,
.pairing-detail-preview:hover .pairing-detail-expand,
.pairing-detail-expand:focus-visible {
  opacity: 1;
}

.pairing-detail-expand {
  display: grid;
  width: 2rem;
  height: 2rem;
  padding: 0;
  place-items: center;
}

.pairing-detail-expand svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.1;
}

.pairing-dimension-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: visible;
  pointer-events: none;
}

.pairing-dimension-marker {
  position: absolute;
  z-index: 2;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.25rem 0.45rem;
  translate: -50% -50%;
  border: 2px dashed color-mix(in srgb, var(--accent) 43%, var(--gloss));
  border-radius: 0.75rem;
  background: rgb(var(--accent-button-rgb) / 0.96);
  box-shadow: inset 0 1px 0 rgb(var(--gloss-rgb) / 0.28), 0 0.3rem 0.9rem rgb(var(--accent-button-rgb) / 0.38);
  color: var(--on-colour-button);
  font: inherit;
  pointer-events: auto;
  cursor: pointer;
  white-space: nowrap;
}

.pairing-dimension-marker.is-selected {
  border-color: var(--complete-hover);
  box-shadow: 0 0 0 2px rgb(var(--complete-button-rgb) / 0.34);
  animation: pairing-marching-ants 0.7s linear infinite;
}

.pairing-dimension-marker.is-table-value {
  min-width: 0;
  min-height: 0;
  padding: 0;
  translate: none;
  border-width: 2px;
  border-style: solid;
  border-color: var(--accent-border);
  border-radius: 0.25rem;
  background: rgb(var(--accent-wash-rgb) / 0.22);
  box-shadow: 0 0 0 1px rgb(var(--accent-rgb) / 0.4);
}

.pairing-dimension-marker.is-table-value.has-bbox {
  z-index: 5;
}

.pairing-dimension-marker.is-table-value.is-point {
  z-index: 3;
}

.pairing-dimension-marker.is-table-value:hover,
.pairing-dimension-marker.is-table-value:focus-visible {
  background: rgb(var(--accent-rgb) / 0.34);
  box-shadow: 0 0 0 2px rgb(var(--accent-border-rgb) / 0.7);
}

.pairing-dimension-marker.is-table-value.is-selected,
.pairing-dimension-layer.is-yours .pairing-dimension-marker.is-table-value.is-selected {
  border-width: 2px;
  background: rgb(var(--accent-rgb) / 0.34);
  border-color: var(--accent-border);
}

.pairing-dimension-marker[data-pairing-dim-role="manufacture"],
.pairing-dimension-layer.is-supplied .pairing-dimension-marker {
  border-color: var(--complete-strong);
  background: rgb(var(--complete-rgb) / 0.96);
  color: var(--on-colour-button);
  box-shadow: inset 0 1px 0 rgb(var(--gloss-rgb) / 0.22), 0 0.3rem 0.9rem rgb(var(--complete-rgb) / 0.38);
}

.pairing-dimension-marker.is-table-value[data-pairing-dim-role="manufacture"],
.pairing-dimension-layer.is-supplied .pairing-dimension-marker.is-table-value {
  background: rgb(var(--complete-wash-rgb) / 0.12);
  box-shadow: 0 0 0 1px rgb(var(--complete-rgb) / 0.28);
}

.pairing-dimension-marker.is-table-value[data-pairing-dim-role="manufacture"]:hover,
.pairing-dimension-marker.is-table-value[data-pairing-dim-role="manufacture"]:focus-visible,
.pairing-dimension-layer.is-supplied .pairing-dimension-marker.is-table-value:hover,
.pairing-dimension-layer.is-supplied .pairing-dimension-marker.is-table-value:focus-visible {
  background: rgb(var(--complete-wash-rgb) / 0.24);
  box-shadow: 0 0 0 2px rgb(var(--complete-rgb) / 0.5);
}

.pairing-dimension-marker.is-table-value[data-pairing-dim-role="manufacture"].is-selected,
.pairing-dimension-layer.is-supplied .pairing-dimension-marker.is-table-value.is-selected {
  background: rgb(var(--complete-wash-rgb) / 0.3);
  border-color: var(--complete-strong);
}

@keyframes pairing-marching-ants {
  to { border-color: var(--accent-border); }
}

@media (prefers-reduced-motion: reduce) {
  .pairing-dimension-marker.is-selected { animation: none; }
  .pairing-detail-canvas { transition: none; }
}

.pairing-detail-dimension-controls { align-items: flex-start; }
.pairing-dimension-help {
  width: 100%;
  margin: 0;
  color: var(--text-muted);
  font-size: 0.72rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: visible;
}

.pairing-oa-dim-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  font-size: 1.1rem;
  line-height: 1.2;
  letter-spacing: 0.04em;
}

.pairing-oa-dim-head > span {
  color: var(--text);
  font-weight: 800;
}

.pairing-oa-dim-head > span > span {
  font-size: 0.85em;
}

.oa-dim-edit-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  margin-left: 0.28rem;
  color: var(--oa-height-text);
  vertical-align: middle;
  flex: 0 0 auto;
  pointer-events: none;
}

.oa-dim-edit-mark svg {
  display: block;
  width: 0.78rem;
  height: 0.78rem;
  margin: 0;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.oa-dim-val-main {
  display: inline-flex;
  align-items: center;
  gap: 0;
  min-width: 0;
}

.pairing-dimension-actions > .button-danger {
  width: min(100%, 16rem);
}

.pairing-dimension-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2, 0.5rem);
  width: 100%;
  margin-top: 0;
}

.pairing-dimension-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.pairing-auto-dimension-rows {
  display: grid;
  gap: 0;
  width: 100%;
}

.pairing-auto-dimension-row {
  --pairing-axis-color: var(--oa-height-marker, var(--accent));
  display: grid;
  cursor: default;
  transition: none;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
}

.pairing-auto-dimension-row .oa-dim-pick {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  height: auto;
  box-sizing: border-box;
  padding: 0.1rem 0.22rem;
  white-space: nowrap;
  overflow: visible;
}

.pairing-auto-dimension-row .oa-dim-side {
  display: inline;
  flex: 0 0 auto;
}

.pairing-auto-dimension-row .oa-dim-val-main {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  white-space: nowrap;
}

.oa-dim-val-yours.oa-dim-pick.is-picking,
.oa-dim-val-yours.oa-dim-pick.is-selected,
.oa-dim-pick[data-oa-pick-side="reference"].is-picking,
.oa-dim-pick[data-oa-pick-side="reference"].is-selected,
.oa-dim-pick[data-oa-pick-side="reference"][aria-pressed="true"],
.oa-dim-pick[data-pairing-oa-pick-side="reference"].is-picking,
.oa-dim-pick[data-pairing-oa-pick-side="reference"].is-selected,
.oa-dim-pick[data-pairing-oa-pick-side="reference"][aria-pressed="true"] {
  background: rgb(var(--accent-wash-rgb) / 0.22);
  box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / 0.55);
}

.oa-dim-val-supplied.oa-dim-pick.is-picking,
.oa-dim-val-supplied.oa-dim-pick.is-selected,
.oa-dim-pick[data-oa-pick-side="manufacturer"].is-picking,
.oa-dim-pick[data-oa-pick-side="manufacturer"].is-selected,
.oa-dim-pick[data-oa-pick-side="manufacturer"][aria-pressed="true"],
.oa-dim-pick[data-pairing-oa-pick-side="manufacturer"].is-picking,
.oa-dim-pick[data-pairing-oa-pick-side="manufacturer"].is-selected,
.oa-dim-pick[data-pairing-oa-pick-side="manufacturer"][aria-pressed="true"],
.pairing-auto-dimension-row .oa-dim-val-supplied.oa-dim-pick.is-picking {
  background: rgb(var(--complete-wash-rgb) / 0.22);
  box-shadow: inset 0 0 0 1px rgb(var(--complete-rgb) / 0.55);
}

.pairing-auto-dimension-row.axis-width {
  --pairing-axis-color: var(--oa-width-marker);
}

.pairing-auto-dimension-row.axis-depth {
  --pairing-axis-color: var(--oa-depth-marker);
}

.pairing-auto-dimension-row .oa-dim-axis {
  color: var(--pairing-axis-color);
}

.pairing-auto-dimension-row:hover {
  background: transparent;
  box-shadow: none;
}

.pairing-auto-dimension-row:active {
  transform: none;
}

#manufactureFullscreen .fullscreen-discrepancy.fullscreen-dimension-picker,
.fullscreen-dimension-picker {
  position: relative;
  left: 0 !important;
  top: auto !important;
  right: 0 !important;
  z-index: 83;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  box-sizing: border-box;
  width: 100% !important;
  max-width: none !important;
  min-width: 100%;
  min-height: 0;
  max-height: none;
  margin: 0;
  /* Right pad is the close-X slot (2.75rem button + gap + safe area). */
  padding: 0.45rem calc(3.5rem + var(--space-3) + env(safe-area-inset-right, 0px)) 0.45rem 0.85rem;
  overflow-x: visible;
  overflow-y: visible;
  border-radius: 0;
  box-shadow: none;
  cursor: default;
  touch-action: auto;
  flex: 0 0 auto;
}

#manufactureFullscreen .fullscreen-dimension-picker .pairing-detail-dimension-controls,
#manufactureFullscreen .fullscreen-dimension-picker .pairing-auto-dimensions,
#manufactureFullscreen .fullscreen-dimension-picker .oa-dim-panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0.2rem 0 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#manufactureFullscreen .fullscreen-dimension-picker .oa-dim-head,
#manufactureFullscreen .fullscreen-dimension-picker .pairing-oa-dim-head {
  flex: 0 0 auto;
}

/* Each row already names its axis and side, so the panel heading is not repeated. */
#manufactureFullscreen .fullscreen-dimension-picker .oa-dim-head,
#manufactureFullscreen .fullscreen-dimension-picker .pairing-oa-dim-head { display: none; }

#manufactureFullscreen .fullscreen-dimension-picker .pairing-auto-dimension-rows,
.fullscreen-dimension-picker .pairing-auto-dimension-rows {
  display: grid;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  /* One compact row, so the drawing below gets the height (no wasted space). */
  min-height: 0;
  /* One HEIGHT / WIDTH / DEPTH row. Center the group, keep column tops aligned. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto;
  gap: 0.55rem;
  align-items: stretch;
  align-content: center;
  justify-items: stretch;
}

#manufactureFullscreen .fullscreen-dimension-picker .oa-dim-row.pairing-auto-dimension-row,
#manufactureFullscreen .fullscreen-dimension-picker .pairing-auto-dimension-row,
.fullscreen-dimension-picker .oa-dim-row.pairing-auto-dimension-row,
.fullscreen-dimension-picker .pairing-auto-dimension-row {
  display: grid;
  position: static;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "axis"
    "yours"
    "supplied";
  align-items: start;
  justify-items: stretch;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  padding: 0.16rem 0.35rem;
  overflow: visible;
  row-gap: 0.25rem;
  column-gap: 0.35rem;
  white-space: normal;
}

#manufactureFullscreen .fullscreen-dimension-picker .oa-dim-row.pairing-auto-dimension-row.is-single-side,
#manufactureFullscreen .fullscreen-dimension-picker .pairing-auto-dimension-row.is-single-side,
.fullscreen-dimension-picker .oa-dim-row.pairing-auto-dimension-row.is-single-side,
.fullscreen-dimension-picker .pairing-auto-dimension-row.is-single-side {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "axis value";
  align-items: center;
  column-gap: 0.35rem;
  row-gap: 0;
  padding: 0.1rem 0.35rem;
}

#manufactureFullscreen .fullscreen-dimension-picker .pairing-auto-dimension-row.is-single-side .oa-dim-val-yours,
#manufactureFullscreen .fullscreen-dimension-picker .pairing-auto-dimension-row.is-single-side .oa-dim-val-supplied,
#manufactureFullscreen .fullscreen-dimension-picker .pairing-auto-dimension-row.is-single-side .oa-dim-val:nth-child(2),
#manufactureFullscreen .fullscreen-dimension-picker .pairing-auto-dimension-row.is-single-side .oa-dim-val:nth-child(3),
.fullscreen-dimension-picker .pairing-auto-dimension-row.is-single-side .oa-dim-val-yours,
.fullscreen-dimension-picker .pairing-auto-dimension-row.is-single-side .oa-dim-val-supplied,
.fullscreen-dimension-picker .pairing-auto-dimension-row.is-single-side .oa-dim-val:nth-child(2),
.fullscreen-dimension-picker .pairing-auto-dimension-row.is-single-side .oa-dim-val:nth-child(3) {
  grid-area: value;
}

#manufactureFullscreen .fullscreen-dimension-picker .pairing-auto-dimension-row .oa-dim-pick,
#manufactureFullscreen .fullscreen-dimension-picker .pairing-auto-dimension-row .oa-dim-val {
  min-height: 32px;
  height: auto;
  padding: 0.06rem 0.2rem;
}

#manufactureFullscreen .fullscreen-dimension-picker .pairing-auto-dimension-row .oa-dim-axis,
.fullscreen-dimension-picker .pairing-auto-dimension-row .oa-dim-axis {
  grid-area: axis;
  display: inline-flex;
  align-items: center;
  align-self: center;
  min-height: 32px;
  position: static;
  white-space: nowrap;
}

#manufactureFullscreen .fullscreen-dimension-picker .pairing-auto-dimension-row .oa-dim-val-yours,
#manufactureFullscreen .fullscreen-dimension-picker .pairing-auto-dimension-row .oa-dim-val:nth-child(2),
.fullscreen-dimension-picker .pairing-auto-dimension-row .oa-dim-val-yours,
.fullscreen-dimension-picker .pairing-auto-dimension-row .oa-dim-val:nth-child(2) {
  grid-area: yours;
  position: static;
}

#manufactureFullscreen .fullscreen-dimension-picker .pairing-auto-dimension-row .oa-dim-val-supplied,
#manufactureFullscreen .fullscreen-dimension-picker .pairing-auto-dimension-row .oa-dim-val:nth-child(3),
.fullscreen-dimension-picker .pairing-auto-dimension-row .oa-dim-val-supplied,
.fullscreen-dimension-picker .pairing-auto-dimension-row .oa-dim-val:nth-child(3) {
  grid-area: supplied;
  position: static;
}

.fullscreen-dimension-picker .pairing-auto-dimension-row + .pairing-auto-dimension-row {
  border-left: 1px solid rgb(var(--overlay-rgb) / 0.085);
  border-top: 0;
}

@media (min-width: 1200px) {
  /* Wide bar: YOURS and SUPPLIED sit side by side under the axis if they fit. */
  #manufactureFullscreen .fullscreen-dimension-picker .oa-dim-row.pairing-auto-dimension-row,
  #manufactureFullscreen .fullscreen-dimension-picker .pairing-auto-dimension-row,
  .fullscreen-dimension-picker .oa-dim-row.pairing-auto-dimension-row,
  .fullscreen-dimension-picker .pairing-auto-dimension-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "axis axis"
      "yours supplied";
    column-gap: 0.35rem;
  }

  #manufactureFullscreen .fullscreen-dimension-picker .oa-dim-row.pairing-auto-dimension-row.is-single-side,
  #manufactureFullscreen .fullscreen-dimension-picker .pairing-auto-dimension-row.is-single-side,
  .fullscreen-dimension-picker .oa-dim-row.pairing-auto-dimension-row.is-single-side,
  .fullscreen-dimension-picker .pairing-auto-dimension-row.is-single-side {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "axis value";
    align-items: center;
  }
}

@media (max-width: 680px) {
  /* Keep HEIGHT / WIDTH / DEPTH on one equal-width row. Values stay overflow: visible. */
  #manufactureFullscreen .fullscreen-dimension-picker .pairing-auto-dimension-rows,
  .fullscreen-dimension-picker .pairing-auto-dimension-rows {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto;
    align-items: stretch;
    align-content: center;
  }

  .fullscreen-dimension-picker .pairing-auto-dimension-row + .pairing-auto-dimension-row {
    border-left: 1px solid rgb(var(--overlay-rgb) / 0.085);
    border-top: 0;
  }

  #manufactureFullscreen .fullscreen-dimension-picker .oa-dim-row.pairing-auto-dimension-row,
  #manufactureFullscreen .fullscreen-dimension-picker .pairing-auto-dimension-row,
  .fullscreen-dimension-picker .oa-dim-row.pairing-auto-dimension-row,
  .fullscreen-dimension-picker .pairing-auto-dimension-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "axis axis"
      "yours supplied";
  }

  #manufactureFullscreen .fullscreen-dimension-picker .oa-dim-row.pairing-auto-dimension-row.is-single-side,
  #manufactureFullscreen .fullscreen-dimension-picker .pairing-auto-dimension-row.is-single-side,
  .fullscreen-dimension-picker .oa-dim-row.pairing-auto-dimension-row.is-single-side,
  .fullscreen-dimension-picker .pairing-auto-dimension-row.is-single-side {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "axis"
      "value";
  }

  /* Keep each mobile value's label and value/icon inside its own axis
     column. The three axis columns remain one aligned row. */
  #manufactureFullscreen .fullscreen-dimension-picker .pairing-auto-dimension-row .oa-dim-pick,
  .fullscreen-dimension-picker .pairing-auto-dimension-row .oa-dim-pick {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    align-content: start;
    min-height: 44px;
    white-space: normal;
  }

  #manufactureFullscreen .fullscreen-dimension-picker .pairing-auto-dimension-row .oa-dim-side,
  .fullscreen-dimension-picker .pairing-auto-dimension-row .oa-dim-side {
    display: block;
    flex: 0 0 auto;
    white-space: nowrap;
  }

  #manufactureFullscreen .fullscreen-dimension-picker .pairing-auto-dimension-row .oa-dim-val-main,
  .fullscreen-dimension-picker .pairing-auto-dimension-row .oa-dim-val-main {
    display: inline-flex;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: normal;
  }

  #manufactureFullscreen .fullscreen-dimension-picker .pairing-dimension-help,
  .fullscreen-dimension-picker .pairing-dimension-help {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: normal;
  }
}

.fullscreen-dimension-picker .oa-dim-head {
  padding-bottom: 0.22rem;
}

.fullscreen-dimension-picker .pairing-dimension-help {
  flex: 0 0 auto;
  margin-top: 0.2rem;
  margin-bottom: 0;
  overflow: visible;
  white-space: nowrap;
  color: var(--text-muted);
  background: none;
  border: 0;
}

#manufactureFullscreen.is-yours-drawing .fullscreen-discrepancy.fullscreen-dimension-picker {
  border-color: rgb(var(--accent-rgb) / 0.42);
  box-shadow: inset 0 -2px 0 rgb(var(--accent-rgb) / 0.45);
}

#manufactureFullscreen.is-supplied-drawing .fullscreen-discrepancy.fullscreen-dimension-picker {
  border-color: rgb(var(--complete-rgb) / 0.42);
  box-shadow: inset 0 -2px 0 rgb(var(--complete-rgb) / 0.45);
}

#manufactureFullscreen.is-yours-drawing .oa-dim-pick-hint {
  color: var(--accent-strong);
  background: rgb(var(--accent-wash-rgb) / 0.12);
  border: 1px solid rgb(var(--accent-rgb) / 0.4);
}

#manufactureFullscreen.is-supplied-drawing .oa-dim-pick-hint {
  color: var(--complete-strong);
  background: rgb(var(--complete-wash-rgb) / 0.12);
  border: 1px solid rgb(var(--complete-rgb) / 0.4);
}

#manufactureFullscreen.is-yours-drawing .pairing-dimension-help,
#manufactureFullscreen.is-supplied-drawing .pairing-dimension-help {
  color: var(--text-muted);
  background: none;
  border: 0;
}

.pairing-dimension-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.32rem 0.58rem;
  color: var(--accent-ink);
  font-weight: 700;
  background: rgb(var(--accent-rgb) / 0.76);
  border: 1px solid rgb(var(--accent-border-rgb) / 0.78);
  border-radius: 0.65rem;
  box-shadow: inset 0 1px 0 rgb(var(--gloss-rgb) / 0.16);
}

.pairing-dimension-chip.is-auto b {
  display: inline-grid;
  place-items: center;
  min-width: 1.25rem;
  min-height: 1.25rem;
  border-radius: 999px;
  background: rgb(var(--overlay-rgb) / 0.18);
}

.pairing-dimension-chip.is-table-value {
  flex-wrap: wrap;
}

.pairing-dimension-axis-label {
  display: inline-flex;
}

.pairing-dimension-axis {
  min-width: 7.5rem;
  height: 2.75rem;
  padding: 0 1.7rem 0 0.5rem;
  color: var(--text-strong);
  font: inherit;
  font-size: 0.72rem;
  background-color: color-mix(in srgb, color-mix(in srgb, var(--accent-wash) 14%, var(--bg)) 90%, transparent);
  border: 1px solid rgb(var(--accent-strong-rgb) / 0.6);
  border-radius: 0.45rem;
}

.pairing-detail-preview img {
  display: block;
  width: 100%;
  height: auto;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: none;
  object-fit: unset;
  vertical-align: top;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

.pairing-detail-preview:has(.pairing-detail-empty) {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  height: 100%;
  min-height: 12rem;
}

.pairing-detail-preview:has(.pairing-detail-empty) .pairing-detail-canvas {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  flex: 1 1 auto;
}

.pairing-detail-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  max-width: 18rem;
  margin: 0 auto;
  padding: var(--space-4, 1rem);
  color: var(--ink-dark);
  text-align: center;
}

@media (min-width: 641px) {
      .pairing-detail-preview {
    min-height: 0;
  }
}

/* Tile: label + status pill share the top line, the match line sits beneath, and the
   reassign picker fills the bottom of the card. */
/* Separate native actions avoid nesting Ignore inside the preview button. */
/* Side convention: your (mine) labels blue, manufacturer labels purple. */
/* A matched tile shows both sheets side by side (blue = yours, purple = supplied),
   each under its label. An unmatched or extra supplied tile shows one preview. */
.pairing-thumb-cell {
  display: grid;
  align-content: start;
  gap: 0.2rem;
  min-width: 0;
}

.pairing-thumb-label {
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.pairing-thumb-label-your { color: var(--accent-strong); }
.pairing-thumb-label-mfr { color: var(--complete-strong); }

/* Ignore is a neutral ghost on every card; Open keeps the side colour. */
/* Shared painted edges: generic ghost-button shadows must not make Ignore
   appear a different height from Open. Focus stays inside the same box. */
.pairing-thumb {
  min-width: 0;
  width: 100%;
  height: clamp(14rem, 36vh, 24rem);
  overflow: hidden;
  background: var(--gloss);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
}

.pairing-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.pairing-thumb img.pairing-preview-rotate-180,
.pairing-detail-canvas > img.pairing-preview-rotate-180 {
  transform: rotate(180deg);
  transform-origin: center;
}

/* PC Sheet Manager: size each page to the card width. A short clamped frame
   letterboxes the drawing and makes the sheet too small to read. */
/* Tint each preview frame to its side colour (blue = yours, purple = manufacturer). */
.pairing-thumb-your { border-color: rgb(var(--accent-border-rgb) / 0.55); }
.pairing-thumb-mfr { border-color: rgb(var(--complete-border-rgb) / 0.55); }

.pairing-overview-submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3, 0.75rem);
  padding-top: var(--space-3, 0.75rem);
}

.pairing-overview-submit p {
  margin: 0 auto 0 0;
  color: var(--text-muted);
  font-size: 0.72rem;
}

.pairing-overview-submit button {
  min-width: 12rem;
  min-height: 44px;
}

@media (max-width: 640px) {
  .pairing-overview { padding: 0; }
  .pairing-overview-card { width: 100%; height: auto; border-radius: var(--panel-radius); }
  .pairing-overview-head { gap: var(--space-2, 0.5rem); }
                                                  .pairing-detail-preview { min-height: 0; }
                                                .pairing-overview-submit { align-items: stretch; flex-direction: column; }
                  .pairing-overview-submit button { width: 100%; }
}

/* ---- Always-on overall-size (H/W/D) readout in Review ---- */
.oa-dim-panel {
  display: grid;
  gap: 0.34rem;
  margin: 0;
  padding: 0.62rem 0.72rem;
  background:
    radial-gradient(circle at 0% 0%, rgb(var(--accent-wash-rgb) / 0.16), transparent 34%),
    linear-gradient(180deg, rgb(var(--overlay-rgb) / 0.052), rgb(var(--overlay-rgb) / 0.024)),
    var(--surface-raised);
  border: 1px solid rgb(var(--overlay-rgb) / 0.085);
  border-radius: var(--panel-radius);
  box-shadow:
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.06),
    0 10px 24px rgb(var(--shadow-rgb) / 0.16);
}

.oa-dim-head {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}

.oa-dim-head span {
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
}

.oa-dim-row {
  display: grid;
  grid-template-columns: 4.2rem minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.44rem;
  min-height: 2rem;
  padding: 0.2rem 0.36rem;
  font-size: 0.76rem;
  border-top: 1px solid rgb(var(--overlay-rgb) / 0.065);
  border-radius: 6px;
  cursor: pointer;
  transition: background 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.oa-dim-row:hover,
.oa-dim-row:focus-visible {
  background: rgb(var(--overlay-rgb) / 0.07);
  box-shadow:
    inset 0 0 0 1px rgb(var(--gloss-rgb) / 0.07),
    0 5px 14px rgb(var(--shadow-rgb) / 0.12);
  outline: none;
}

.oa-dim-row:active {
  transform: translateY(1px);
}

.oa-dim-row.is-selected {
  background:
    linear-gradient(180deg, rgb(var(--accent-wash-rgb) / 0.2), rgb(var(--accent-wash-rgb) / 0.1));
  box-shadow:
    inset 0 0 0 1px rgb(var(--accent-rgb) / 0.5),
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.08);
}

.oa-dim-axis {
  font-weight: 800;
  color: var(--oa-axis-color, var(--text));
  letter-spacing: 0.03em;
}

.oa-dim-row[data-oa-axis="height"] {
  --oa-axis-color: var(--oa-height-marker, var(--accent));
}

.oa-dim-row[data-oa-axis="width"] {
  --oa-axis-color: var(--oa-width-marker);
}

.oa-dim-row[data-oa-axis="depth"] {
  --oa-axis-color: var(--oa-depth-marker);
}

.oa-dim-val {
  color: var(--text);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
}

#manufactureFullscreen .fullscreen-dimension-picker .oa-dim-row {
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
  overflow-wrap: normal;
  min-width: 0;
  max-width: 100%;
}

#manufactureFullscreen .fullscreen-dimension-picker .oa-dim-val,
#manufactureFullscreen .fullscreen-dimension-picker .oa-dim-val-main,
#manufactureFullscreen .fullscreen-dimension-picker .oa-dim-pick {
  overflow: visible;
  text-overflow: unset;
  white-space: nowrap;
  overflow-wrap: normal;
  min-width: 0;
  max-width: 100%;
}

/* Each value cell is a button that starts "re-pick this dimension on the drawing". */
.oa-dim-pick {
  display: grid;
  gap: 0.03rem;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.05;
  min-width: 0;
  background: none;
  border: 0;
  padding: 0.12rem 0.3rem;
  border-radius: 5px;
  cursor: pointer;
  text-align: left;
}

.oa-dim-pick:hover,
.oa-dim-pick:focus-visible {
  background: rgb(var(--overlay-rgb) / 0.1);
  outline: none;
}

.oa-dim-pick.is-picking {
  background: rgb(var(--accent-wash-rgb) / 0.22);
  box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / 0.55);
}

.oa-dim-pick:disabled {
  cursor: default;
}

.oa-dim-pick:disabled:hover,
.oa-dim-pick:disabled:focus-visible {
  background: none;
}

.oa-dim-pick-hint {
  margin: 0.15rem 0;
  padding: 0.3rem 0.45rem;
  font-size: 0.68rem;
  line-height: 1.35;
  color: var(--text);
  background: rgb(var(--accent-wash-rgb) / 0.12);
  border: 1px solid rgb(var(--accent-rgb) / 0.4);
  border-radius: 6px;
}

.oa-dim-side {
  display: block;
  color: var(--text-muted);
  font-size: 0.56rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.oa-dim-val-yours .oa-dim-side,
.oa-dim-pick[data-oa-pick-side="reference"] .oa-dim-side,
.oa-dim-pick[data-pairing-oa-pick-side="reference"] .oa-dim-side {
  color: var(--accent-strong);
}

.oa-dim-val-supplied .oa-dim-side,
.oa-dim-pick[data-oa-pick-side="manufacturer"] .oa-dim-side,
.oa-dim-pick[data-pairing-oa-pick-side="manufacturer"] .oa-dim-side {
  color: var(--complete-strong);
}

.oa-dim-status {
  justify-self: end;
  min-width: 3.8rem;
  padding: 0.08rem 0.42rem;
  font-size: 0.64rem;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
  border-radius: 999px;
}

.oa-dim-status.oa-ok { color: var(--success); background: rgb(var(--success-rgb) / 0.14); }
.oa-dim-status.oa-bad { color: var(--danger); background: rgb(var(--danger-rgb) / 0.14); }
.oa-dim-status.oa-unsure { color: var(--warning); background: rgb(var(--warning-rgb) / 0.16); }

.drawing-note-section {
  display: grid;
  gap: 0.42rem;
  margin-top: 0.34rem;
  padding-top: 0.48rem;
  border-top: 1px solid rgb(var(--overlay-rgb) / 0.08);
}

.drawing-notes-summary > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 44px;
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.drawing-notes-summary > summary > span:first-child {
  color: var(--text);
}

.drawing-notes-summary > summary > span:last-child {
  margin-left: auto;
  color: var(--text-muted);
  font-weight: 600;
}

.drawing-notes-summary > summary::after {
  content: "";
  color: inherit;
  flex-shrink: 0;
}

.drawing-notes-summary[open] > summary::after {
  transform: rotate(225deg);
}

.drawing-notes-summary-body {
  display: grid;
  gap: 0.75rem;
  padding-bottom: 0.25rem;
}

.drawing-note-status-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.42rem;
}

.drawing-note-status-cell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 0.35rem;
  min-width: 0;
  padding: 0.42rem 0.5rem;
  color: var(--text-muted);
  border: 1px solid rgb(var(--note-status-rgb, var(--accent-rgb)) / 0.82);
  border-radius: 8px;
  background:
    linear-gradient(
      180deg,
      rgb(var(--note-status-rgb, var(--accent-rgb)) / 0.22),
      rgb(var(--note-status-rgb, var(--accent-rgb)) / 0.08)
    );
  box-shadow:
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.08),
    0 0 0.7rem rgb(var(--note-status-rgb, var(--accent-rgb)) / 0.12);
}

.drawing-note-status-cell strong {
  font-size: 0.88rem;
  line-height: 1;
}

.drawing-note-status-cell span {
  overflow: hidden;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  text-transform: uppercase;
}

.drawing-note-status-cell.oa-bad {
  --note-status-rgb: var(--danger-rgb);
  color: var(--danger-text);
}

.drawing-note-status-cell.oa-missing {
  --note-status-rgb: var(--comment-accent-rgb);
  color: var(--comment-text);
}

.drawing-note-status-cell.oa-ok {
  --note-status-rgb: var(--success-rgb);
  color: var(--success-text);
}

.drawing-note-status-cell.oa-unsure {
  --note-status-rgb: var(--accent-rgb);
  color: var(--accent-strong);
}

.drawing-notes-summary .oa-dim-status.oa-missing {
  color: var(--comment-text);
  background: rgb(var(--comment-accent-rgb) / 0.14);
}

.drawing-notes-summary .oa-dim-status.oa-unsure {
  color: var(--accent-strong);
  background: rgb(var(--accent-wash-rgb) / 0.14);
}

.drawing-note-help {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.66rem;
  line-height: 1.35;
}

.drawing-note-list {
  display: grid;
  gap: 0.42rem;
}

.drawing-note-card {
  display: grid;
  gap: 0.34rem;
  padding: 0.5rem;
  border: 1px solid rgb(var(--overlay-rgb) / 0.095);
  border-radius: var(--panel-radius);
  background: rgb(var(--well-rgb) / 0.08);
}

.drawing-note-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  color: var(--text-muted);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.drawing-note-comparison-values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.drawing-note-requirement,
.drawing-note-evidence {
  display: grid;
  gap: 0.1rem;
  margin: 0;
  color: var(--text);
  font-size: 0.7rem;
  line-height: 1.35;
}

.drawing-note-requirement strong,
.drawing-note-evidence strong {
  color: var(--text-muted);
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.drawing-note-requirement span,
.drawing-note-evidence span,
.drawing-note-supports span {
  overflow-wrap: anywhere;
}

.drawing-note-supports {
  display: grid;
  gap: 0.1rem;
  margin: 0;
  color: var(--accent-strong);
  font-size: 0.66rem;
  line-height: 1.35;
}

.drawing-note-supports strong {
  color: var(--text-muted);
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.drawing-note-empty {
  margin: 0;
  padding: 0.65rem;
  color: var(--text-muted);
  font-size: 0.68rem;
  line-height: 1.35;
  text-align: center;
  border: 1px solid rgb(var(--overlay-rgb) / 0.08);
  border-radius: 8px;
}

.drawing-note-parts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.3rem 0.5rem;
  margin: 0.08rem 0 0;
}

.drawing-note-parts div {
  min-width: 0;
}

.drawing-note-parts dt {
  color: var(--text-muted);
  font-size: 0.56rem;
  text-transform: uppercase;
}

.drawing-note-parts dd {
  margin: 0.04rem 0 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 0.66rem;
}

.oa-material-head {
  margin-top: 0.25rem;
  padding-top: 0.38rem;
  border-top: 1px solid rgb(var(--overlay-rgb) / 0.08);
}

.oa-material-list {
  display: grid;
  gap: 0.42rem;
  min-width: 0;
}

.oa-material-criteria-list {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}

.oa-material-criteria-row {
  --criteria-state-color: var(--warning);
  display: grid;
  grid-template-columns: minmax(7.5rem, 1.1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.45rem;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.38rem 0.48rem;
  border: 1px solid rgb(var(--warning-rgb) / 0.5);
  border-radius: var(--radius-sm);
  background: rgb(var(--well-rgb) / 0.08);
  font-size: 0.68rem;
}

.oa-material-criteria-row.is-match {
  --criteria-state-color: var(--success);
  border-color: rgb(var(--success-rgb) / 0.55);
}

.oa-material-criteria-row.is-conflict {
  --criteria-state-color: var(--danger);
  border-color: rgb(var(--danger-rgb) / 0.72);
}

.oa-material-criteria-name,
.oa-material-criteria-side {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.oa-material-criteria-name strong {
  color: var(--text);
}

.oa-material-criteria-status,
.oa-material-criteria-side > span {
  color: var(--criteria-state-color);
  font-size: 0.6rem;
  line-height: 1.25;
}

.oa-material-criteria-side > span {
  color: var(--text-muted);
}

.oa-material-criteria-side strong {
  color: var(--text);
  overflow-wrap: anywhere;
}

.oa-material-card {
  --panel-text-scale: 0.78rem;
  display: block;
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid rgb(var(--overlay-rgb) / 0.095);
  border-radius: var(--review-card-radius);
  background:
    linear-gradient(180deg, rgb(var(--overlay-rgb) / 0.055), rgb(var(--overlay-rgb) / 0.026)),
    rgb(var(--well-rgb) / 0.06);
  cursor: default;
  transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
  box-shadow: inset 0 1px 0 rgb(var(--gloss-rgb) / 0.045);
}

.oa-material-card > summary {
  list-style: none;
  cursor: pointer;
}

.oa-material-card > summary::-webkit-details-marker {
  display: none;
}

.oa-material-card > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.oa-material-card:hover {
  background:
    linear-gradient(180deg, rgb(var(--overlay-rgb) / 0.072), rgb(var(--overlay-rgb) / 0.034)),
    rgb(var(--well-rgb) / 0.07);
  border-color: rgb(var(--overlay-rgb) / 0.16);
  box-shadow:
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.065),
    0 8px 18px rgb(var(--shadow-rgb) / 0.14);
}

.oa-material-card:active {
  transform: translateY(1px);
}

.oa-material-card.is-selected {
  border-color: color-mix(in srgb, color-mix(in srgb, var(--comment-accent) 96%, var(--shade)) 68%, transparent);
  background:
    radial-gradient(circle at 0% 0%, rgb(var(--comment-accent-rgb) / 0.2), transparent 40%),
    linear-gradient(180deg, rgb(var(--comment-accent-rgb) / 0.13), rgb(var(--comment-accent-rgb) / 0.048));
  box-shadow:
    inset 0 0 0 1px rgb(var(--comment-accent-rgb) / 0.26),
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.08),
    0 10px 22px rgb(var(--shadow-rgb) / 0.16);
}

.oa-material-card:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--comment-text) 75%, transparent);
  outline-offset: 2px;
}

.oa-material-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  min-width: 0;
}

.oa-material-card-title {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
  gap: 0.22rem;
}

.oa-material-card-title .oa-material-name {
  text-align: left;
}

.oa-material-card-head > .manual-dimension-chevron {
  margin-left: auto;
}

.oa-material-counterpart-hint {
  flex: 1 0 100%;
  color: var(--text-muted);
  font-size: var(--panel-text-scale);
  line-height: 1.3;
}

.oa-material-name {
  min-width: 0;
  color: var(--text);
  font-size: var(--panel-text-scale);
  font-weight: 800;
  line-height: 1.15;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.oa-material-card-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: var(--space-2);
  min-width: 0;
  margin-top: var(--space-3);
}

.oa-material-fields-title {
  grid-column: 1 / -1;
  color: var(--text-strong);
  font-size: var(--panel-text-scale);
  font-weight: 800;
  line-height: 1.25;
}

.oa-material-side {
  display: grid;
  align-content: start;
  gap: var(--space-1);
  min-width: 0;
}

.oa-material-side-label {
  display: none;
}

.oa-material-source-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding-inline: var(--space-2);
  color: var(--text-strong);
  font-size: var(--panel-text-scale);
  font-weight: 800;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.oa-material-card .oa-material-source-button {
  min-height: 44px;
}

#reviewPanel .oa-material-source-button {
  padding-inline: 0;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}

.oa-material-source-button .manual-dimension-edit-glyph {
  width: 1em;
  height: 1em;
  flex: 0 0 1em;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.oa-material-source-button[data-material-source-focus-side="reference"] {
  background: var(--accent-action-gradient);
  color: var(--on-colour-button);
  border-color: rgb(var(--accent-rgb) / 0.72);
}

.oa-material-source-button[data-material-source-focus-side="manufacturer"] {
  background: var(--complete-action-gradient);
  color: var(--on-colour-button);
  border-color: rgb(var(--complete-border-rgb) / 0.72);
}

.oa-material-source-button[data-material-source-focus-side="reference"]:hover,
.oa-material-source-button[data-material-source-focus-side="reference"][aria-pressed="true"] {
  background: linear-gradient(180deg, var(--accent-button-highlight), var(--accent-button) 55%, var(--accent-button-press));
  color: var(--on-colour-button);
}

.oa-material-source-button[data-material-source-focus-side="manufacturer"]:hover,
.oa-material-source-button[data-material-source-focus-side="manufacturer"][aria-pressed="true"] {
  background: linear-gradient(180deg, var(--complete-button-hover), var(--complete-button) 55%, color-mix(in srgb, var(--complete-button) 86%, var(--shade)));
  color: var(--on-colour-button);
}

.oa-material-side-values {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--space-1);
  width: 100%;
  min-width: 0;
}

.oa-material-value {
  display: inline-grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  color: var(--text-muted);
  font-size: 0.62rem;
  font-weight: 800;
  background: var(--surface-muted);
  border: 1px solid rgb(var(--overlay-rgb) / 0.09);
  border-radius: var(--radius-sm);
}

.oa-material-value input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0.45rem 0.25rem 0.45rem 0.55rem;
  color: var(--text);
  font: inherit;
  background: transparent;
  border: 0;
  outline: 0;
}

.oa-material-value > span:last-child {
  padding-right: 0.55rem;
}

.oa-material-value:focus-within {
  border-color: rgb(var(--accent-rgb) / 0.72);
  box-shadow: 0 0 0 2px rgb(var(--accent-rgb) / 0.2);
}

.oa-material-focus {
  appearance: none;
  min-width: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.oa-material-focus:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.oa-material-actions {
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
}

.oa-material-actions [data-material-action="comment"] {
  grid-column: 1 / -1;
}

.oa-material-actions .finding-card-action-accept {
  color: var(--on-colour-button);
}

.oa-material-comment {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--space-2);
}

.oa-material-comment[hidden] {
  display: none;
}

.oa-material-comment label {
  display: grid;
  gap: var(--space-1);
}

.oa-material-comment > .finding-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.oa-material-card[open] .manual-dimension-chevron {
  transform: rotate(225deg);
}

@media (max-width: 640px) {
  .oa-dim-row { grid-template-columns: 3.4rem minmax(0, 1fr) minmax(0, 1fr) auto; font-size: 0.72rem; }
  .oa-material-card-body { grid-template-columns: 1fr; }
  .oa-material-criteria-row { grid-template-columns: minmax(7rem, 1fr) minmax(0, 1fr); }
  .oa-material-criteria-name { grid-row: span 2; }
}

/* ---- Page-match preview rotation (visual, to read sideways sheets) ---- */
.page-match-frame { container-type: size; }
.page-match-img { transition: transform 0.15s ease; }
.page-match-img.rot-180 { transform: rotate(180deg); }
/* For 90/270, swap the box to the frame's perpendicular size (container query units)
   so the rotated drawing still fits and stays readable. */
.page-match-img.rot-90 { width: 100cqh; height: 100cqw; transform: rotate(90deg); }
.page-match-img.rot-270 { width: 100cqh; height: 100cqw; transform: rotate(270deg); }

/* ---- Public landing ---- */
.landing-page {
  --landing-bg: var(--bg-strong);
  --landing-bg-deep: var(--bg-strong);
  --landing-surface: var(--surface-raised);
  --landing-ink: var(--text);
  --landing-muted: var(--text-muted);
  --landing-border: var(--border);
  --landing-accent: var(--accent);
  /* Every stop clears 4.5:1 against white button text. */
  --landing-action: linear-gradient(180deg, var(--accent-button-highlight), var(--accent-button-press) 48%, var(--accent-button-press));
  --landing-action-hover: linear-gradient(180deg, var(--accent-button-highlight), var(--accent-button-highlight) 42%, var(--accent-button-press));
  --landing-action-signup: linear-gradient(180deg, var(--complete-button), var(--complete-button-press) 48%, var(--complete-button-press));
  --landing-action-signup-hover: linear-gradient(180deg, var(--complete-button), var(--complete-button-press) 48%, var(--complete-button-press));
  --landing-nav-purple-rgb: var(--complete-rgb);
  position: relative;
  z-index: 70;
  min-height: 100dvh;
  overflow-x: clip;
  color: var(--landing-ink);
  background-color: var(--landing-bg-deep);
  background-image:
    radial-gradient(circle at 82% 0%, rgb(var(--accent-wash-rgb) / 0.08), transparent 32rem),
    linear-gradient(165deg, var(--surface) 0%, var(--landing-bg) 46%, var(--landing-bg-deep) 100%);
  font-family: var(--font-body);
  letter-spacing: 0;
  text-transform: none;
  color-scheme: dark;
}

/* While the public landing is shown, hide the authenticated body-level chrome
   that follows it. The app-shell and auth-gate already display:none, but the
   Help/Feedback support dock did not - it kept a visibility:hidden 44px box
   below the landing's bottom, adding a black dead band under the CTA on
   mobile. It must occupy zero space on the public page. */
.landing-page:not([hidden]) ~ .app-shell,
.landing-page:not([hidden]) ~ .support-launcher-dock {
  display: none;
}

.landing-page h1,
.landing-page h2,
.landing-page h3 {
  margin-top: 0;
  color: var(--landing-ink);
  font-family: var(--font-head);
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.landing-page p {
  margin-top: 0;
  text-wrap: pretty;
}

.landing-page :is(a, button):focus-visible {
  outline: 3px solid var(--landing-accent);
  outline-offset: 3px;
}

.landing-hero,
.landing-process,
.landing-review-tools,
.landing-ai,
.landing-capabilities,
.landing-reliability,
.landing-record,
.landing-cta,
.landing-footer {
  position: relative;
  z-index: 1;
  width: min(calc(100% - clamp(1.5rem, 6vw, 5rem)), var(--content-measure));
  margin-inline: auto;
}

/* The pill bar is fixed, so the page starts below it and an anchor jump lands
   one --space-4 under it instead of behind it. */
.landing-page {
  padding-top: calc(var(--pillbar-inset) + var(--pillbar-bar-height) + env(safe-area-inset-top, 0px));
}

#landingMainContent > section {
  scroll-margin-top: calc(var(--pillbar-inset) + var(--pillbar-bar-height) + var(--space-4) + env(safe-area-inset-top, 0px));
}

/* Load has its own sticky submit bar, so the support dock sits above it. */
body[data-has~="load-screen"]:not(#has-pad) > .support-launcher-dock {
  bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
}

/* Phone and tablet shells already have a fixed two-row workflow header. Put
   the support launchers in its top row, immediately left of More, instead of
   floating over page content. */
@media (max-width: 860px) {
  body {
    --mobile-menu-width: 5rem;
    --mobile-control-gap: var(--space-2);
  }

  body > .support-launcher-dock,
  body[data-has~="load-screen"]:not(#has-pad) > .support-launcher-dock {
    top: calc(var(--space-3) + var(--space-2) + env(safe-area-inset-top, 0px));
    right: calc(var(--page-gutter) + var(--mobile-menu-width) + var(--mobile-control-gap) + env(safe-area-inset-right, 0px));
    bottom: auto;
    gap: var(--mobile-control-gap);
  }

  .drawer-visibility-toggle,
  .mobile-actions-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: var(--radius-md);
  }

  .drawer-visibility-toggle span {
    display: none;
  }

  .mobile-actions-button {
    display: flex;
    justify-content: center;
    width: var(--mobile-menu-width);
    padding-inline: var(--space-3);
    gap: var(--space-2);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
  }

  .mobile-actions-button svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 1.8;
  }

  #clearAllButton.top-clear-button {
    grid-area: clear;
    display: inline-flex;
    justify-content: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 999px;
  }

  #undoButton.top-history-button {
    grid-area: undo;
  }

  #redoButton.top-history-button {
    grid-area: redo;
  }

  /* Centred on the screen, not hung off the More button. The pill is symmetric
     about the viewport, so 50% of its padding box IS the screen centre; the
     translate keeps that true even at ≤640px where the panel is deliberately
     wider than the pill's padding box (auto margins cannot centre an
     overflowing box — they collapse to 0). */
  .sidebar-action-menu {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(20rem, calc(100vw - var(--page-gutter) - var(--page-gutter)));
  }

  .sidebar-action-menu-list {
    position: static;
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .sidebar-action-menu .sidebar-action-menu-list > .ghost-button {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    border-radius: var(--radius-md);
  }

  .sidebar-action-menu .sidebar-action-menu-list > .ghost-button > :is(svg, .account-avatar) {
    flex: 0 0 auto;
  }

  .sidebar-action-menu .sidebar-action-menu-list > .ghost-button > span {
    align-self: center;
    line-height: 1;
  }

  .sidebar-action-menu #logoutButton {
    color: var(--danger-text);
  }

  .sidebar-action-menu #logoutButton:hover {
    color: var(--danger-text);
  }

  .sidebar-action-menu .top-settings-button span,
  .sidebar-action-menu #teamLinkButton span {
    display: inline;
  }
}

@media (max-width: 640px) {
  body {
    --mobile-menu-width: 44px;
    --mobile-control-gap: var(--space-1);
  }

  body > .support-launcher-dock,
  body[data-has~="load-screen"]:not(#has-pad) > .support-launcher-dock {
    top: calc(1.25rem + env(safe-area-inset-top, 0px));
  }

}



/* ---- Nav: the pill bar ----
   nav.landing-nav is the same floating pill as the signed-in header
   (#workflowPanel): the shell comes from the shared --pillbar-* properties
   (defined once, above .sidebar), so the two bars cannot drift apart. Brand on
   the left, the six page sections where the app keeps its steps, Log in and
   Sign up on the right. The logo tile and Sign up sit the same distance from
   the bar's edges (--pillbar-edge-inset, the app header's own inset), and the
   links sit centred in the room between the brand and the buttons, so the
   gap on either side of them is the same. As the screen narrows: the tagline
   goes first, then the six links fold into the Sections menu (the button
   before Log in); on a phone the bar is one 44px row like the first row of
   the app header. The widths below were measured with the real fonts, not
   guessed. */
.landing-nav {
  position: fixed;
  top: calc(var(--pillbar-inset) + env(safe-area-inset-top, 0px));
  right: calc(var(--pillbar-inset) + env(safe-area-inset-right, 0px));
  left: calc(var(--pillbar-inset) + env(safe-area-inset-left, 0px));
  z-index: 70;
  box-sizing: border-box;
  display: grid;
  /* The brand and the buttons take only the room they need and the links sit
     centred in what is left between them. That makes the space from the brand
     to the first link equal to the space from the last link to the first
     button at every width, with no empty column reserved to centre the links
     on the screen. The middle track never shrinks below the links
     (max-content), and the links fold into the Sections menu before they
     could be squeezed (see the width note below). */
  grid-template-columns: max-content minmax(max-content, 1fr) max-content;
  grid-template-areas: "brand links actions";
  align-items: center;
  gap: var(--pillbar-gap);
  min-height: var(--pillbar-bar-height);
  margin: 0;
  /* Left: the bar's padding, then the brand's own room before the logo.
     Right: the same total, so Sign up ends as far inside the bar as the logo
     starts. */
  padding: var(--pillbar-pad-y) var(--pillbar-edge-inset) var(--pillbar-pad-y) var(--pillbar-pad-x);
  background: var(--pillbar-background);
  border: 1px solid var(--pillbar-border-color);
  border-radius: var(--pillbar-radius);
  box-shadow: var(--pillbar-shadow);
  text-transform: uppercase;
}

.landing-brand {
  grid-area: brand;
  display: flex;
  align-items: center;
  justify-self: start;
  gap: var(--space-2);
  min-height: 44px;
  min-width: 44px;
  padding-left: var(--pillbar-brand-inset);
  color: var(--text-strong);
  text-decoration: none;
}

/* The logo tile is the app's .brand-logo: --logo-color with the mark cut out
   of it by the shared mask rule (.landing-logo::before is in that selector). */
.landing-logo {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: var(--pillbar-logo-size);
  height: var(--pillbar-logo-size);
  background: var(--logo-color);
  color: var(--accent-ink);
  border-radius: var(--radius-sm);
}

.landing-brand-name {
  color: var(--text-strong);
  font-family: var(--font-head);
  font-size: var(--pillbar-word-size);
  font-weight: 700;
  letter-spacing: var(--pillbar-word-tracking);
  line-height: 1;
  white-space: nowrap;
}

.landing-brand-tag {
  display: flex;
  align-items: center;
  min-height: 2rem;
  padding-left: clamp(0.45rem, 1vw, var(--space-4));
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--pillbar-tag-size);
  font-weight: 500;
  letter-spacing: var(--pillbar-tag-tracking);
  line-height: 1;
  white-space: nowrap;
  border-left: 1px solid color-mix(in srgb, var(--border) 72%, var(--text));
}

/* The middle group: where the app keeps its steps, in the step-label type
   (uppercase, 700, 0.04em), no number circles. */
.landing-nav-links {
  grid-area: links;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  gap: clamp(0.1rem, 0.4vw, 0.4rem);
}

.landing-nav-links a,
.landing-nav-menu-list a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 44px;
  padding: 0 clamp(0.55rem, 0.9vw, 0.9rem);
  color: var(--text-muted);
  font-size: var(--pillbar-label-size);
  font-weight: 700;
  letter-spacing: var(--pillbar-label-tracking);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease;
}

.landing-nav-links a:hover,
.landing-nav-links a:focus-visible,
.landing-nav-menu-list a:hover,
.landing-nav-menu-list a:focus-visible {
  color: var(--text-strong);
  background-color: rgb(var(--overlay-rgb) / 0.07);
}

/* The section in view: a filled primary pill with its ink, the same blue
   gradient the app uses for its active step circle and the Menu button. */
.landing-nav-links a[aria-current="true"],
.landing-nav-menu-list a[aria-current="true"] {
  color: var(--on-colour-button);
  background-color: transparent;
  background-image: var(--accent-action-gradient);
  border-color: rgb(var(--accent-border-rgb) / 0.55);
  box-shadow: inset 0 1px 0 rgb(var(--gloss-rgb) / 0.22);
}

/* The right-hand group: Sections (when the links are folded), Log in, Sign up. */
.landing-nav-actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  justify-self: end;
  gap: var(--pillbar-action-gap);
  min-width: 0;
}

.landing-nav .landing-nav-actions .landing-button,
.landing-nav-menu > summary {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  height: var(--pillbar-button-height);
  min-height: var(--pillbar-button-height);
  padding: 0 0.625rem;
  font-size: var(--pillbar-button-size);
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  white-space: nowrap;
  text-transform: uppercase;
  border-radius: var(--pillbar-button-radius);
  box-shadow: none;
}

/* Log in is the primary (blue) button, exactly the app's Menu button. */
.landing-nav .landing-nav-actions .landing-button-secondary,
.landing-nav-menu > summary {
  color: var(--on-colour-button);
  background: var(--accent-action-gradient);
  border: 1px solid rgb(var(--accent-border-rgb) / 0.55);
}

.landing-nav .landing-nav-actions .landing-button-secondary:hover,
.landing-nav-menu > summary:hover,
.landing-nav-menu[open] > summary {
  color: var(--on-colour-button);
  background: var(--accent-action-gradient-hover);
  border-color: rgb(var(--accent-border-rgb) / 0.72);
}

/* Sign up is the secondary (purple) one. */
.landing-nav .landing-nav-actions .landing-button-signup {
  color: var(--on-colour-button);
  background: var(--complete-action-gradient);
  border: 1px solid rgb(var(--complete-border-rgb) / 0.55);
}

.landing-nav .landing-nav-actions .landing-button-signup:hover {
  color: var(--on-colour-button);
  background: var(--complete-action-gradient-hover);
  border-color: rgb(var(--complete-border-rgb) / 0.72);
}

/* Sections menu. Closed it is a button; the list opens under the bar (the bar
   is its containing block, so the list lines up with the bar's right edge and
   never runs off a phone). Hidden while the six links are on show. */
.landing-nav-menu {
  display: none;
  position: static;
}

.landing-nav-menu > summary {
  cursor: pointer;
  list-style: none;
}

.landing-nav-menu > summary::-webkit-details-marker {
  display: none;
}

.landing-nav-menu-icon,
.landing-nav-menu-chevron {
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.landing-nav-menu-icon {
  display: none;
  width: 20px;
  height: 20px;
}

.landing-nav-menu-chevron {
  width: 0.9rem;
  height: 0.9rem;
  transition: transform 140ms ease;
}

.landing-nav-menu[open] .landing-nav-menu-chevron {
  transform: rotate(180deg);
}

.landing-nav-menu-list {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  z-index: 90;
  display: grid;
  gap: 2px;
  box-sizing: border-box;
  width: min(20rem, 100%);
  padding: var(--space-2);
  background: var(--pillbar-background);
  border: 1px solid var(--pillbar-border-color);
  border-radius: var(--panel-radius);
  box-shadow: var(--pillbar-shadow);
}

.landing-nav-menu-list a {
  justify-content: flex-start;
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
}

/* Widths, measured with the real fonts at every pixel from 1040 to 1300: with
   the brand word, the six links and the two buttons on show, the space on each
   side of the links is at least 16px (a link's own gap is 4 to 6px) from
   1060px up, so they show from 1060px and fold into Sections below it
   instead of being squeezed. The tagline needs a further 112px, so it shows
   from 1280px and goes first as the screen narrows. */
@media (max-width: 1279px) {
  .landing-brand-tag {
    display: none;
  }
}

@media (max-width: 1059px) {
  .landing-nav {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand actions";
  }

  .landing-nav-links {
    display: none;
  }

  .landing-nav-menu {
    display: block;
  }
}

@media (pointer: coarse) {
  body {
    --pillbar-button-height: 44px;
  }
}

/* Phone: one 44px row, like the first row of the app header. Sections turns
   into the round hamburger the app's phone Menu uses (its label stays in the
   accessible name); Log in and Sign up are 44px pills. */
@media (max-width: 640px) {
  body {
    --pillbar-bar-height: 3.375rem;
    --pillbar-button-height: 44px;
  }

  .landing-nav {
    gap: var(--space-1);
    border-radius: var(--panel-radius);
  }

  .landing-brand {
    gap: var(--space-2);
  }

  .landing-logo {
    width: 34px;
    height: 34px;
  }

  .landing-brand-name {
    font-size: clamp(12.5px, calc((100vw - 260px) / 5.4), 19.5px);
    letter-spacing: 0.08em;
  }

  .landing-nav .landing-nav-actions .landing-button {
    min-width: 44px;
    padding: 0 0.7rem;
    border-radius: 999px;
  }

  .landing-nav-menu > summary {
    width: 44px;
    padding: 0;
    border-radius: 50%;
  }

  .landing-nav-menu > summary > span,
  .landing-nav-menu-chevron {
    display: none;
  }

  .landing-nav-menu-icon {
    display: block;
  }
}

@media (max-width: 340px) {
  .landing-logo {
    width: 28px;
    height: 28px;
  }
}

.landing-text-link {
  color: var(--landing-muted);
  font-weight: 600;
  text-decoration: none;
}

.landing-text-link:hover {
  color: var(--accent-strong);
}

/* ---- App typography transfer ---- */
/* Exact .screen-label declarations from the app (mono blue micro-label). */
.landing-eyebrow,
.landing-screen-label {
  margin: 0 0 var(--space-1);
  color: var(--accent-strong);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* The app's #drawingMeta line under the review title, bound to demo state. */
.landing-meta {
  margin: 0 0 1.1rem;
  color: var(--accent-strong);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.landing-hero h1 {
  max-width: 100%;
  margin: 0 0 0.7rem;
  color: var(--text);
  /* The app's base h1 is the tiny nowrap brand line (styles.css h1 rule);
     this landing headline must wrap to its 2 balanced lines. */
  white-space: normal;
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.08;
  /* The app's #screenTitle tracking. */
  letter-spacing: 0.045em;
  /* Fallback for browsers without container-query units; the cqi rule below
     overrides it where supported. Sized so the UPPERCASE sentence "SEE WHAT
     THE MANUFACTURER CHANGED." wraps to 2 lines (not 3) in the ~44% hero
     copy column (~490px under the 72rem content cap): the longer balanced
     line "MANUFACTURER CHANGED." measures up to ~15.2em in caps Archivo 700
     incl. 0.045em tracking (avg ~0.7em/cap), so font-size stays <=
     container/15.2 (~6.2cqi leaves a 6% margin). At 490px that is ~30px,
     ~34px at the coordinator's 545px column figure. */
  font-size: clamp(1.5rem, 2.35vw, 2.55rem);
  font-size: clamp(1.5rem, 6.2cqi, 2.55rem);
  text-wrap: balance;
}

/* App section titles = the #screenTitle style (huge, condensed, uppercase). */
.landing-outcome h2,
.landing-evidence h2,
.landing-cta h2 {
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  color: var(--text);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.65rem, 2.2vw, 3rem);
  line-height: 1.05;
  letter-spacing: 0.045em;
  /* Even multi-line splits (no orphaned "UP." on the CTA heading); balance
     never changes the line count, so the h1's 2-line guarantee is untouched
     (it has carried text-wrap: balance since v2). */
  text-wrap: balance;
}

.landing-lede {
  max-width: 30rem;
  margin-bottom: 1.5rem;
  color: var(--text-muted);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.62;
}

/* Scroll-reveal (item 2): each section's mono label + heading fades/rises in
   as a pair the first time the section enters view, matching the cards
   below it. JS (initLandingScrollReveal) adds .is-visible to the SECTION
   once, and never under reduced motion / without IntersectionObserver, so
   these never depend on the animation firing. */
.landing-outcome > .landing-screen-label,
.landing-outcome > h2,
.landing-evidence > .landing-screen-label,
.landing-evidence > h2,
.landing-cta > .landing-screen-label,
.landing-cta > h2 {
  opacity: 0;
  transform: translateY(1.5rem) scale(0.97);
  transition: opacity 480ms cubic-bezier(0.16, 1, 0.3, 1), transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
}

.landing-outcome.is-visible > .landing-screen-label,
.landing-outcome.is-visible > h2,
.landing-evidence.is-visible > .landing-screen-label,
.landing-evidence.is-visible > h2,
.landing-cta.is-visible > .landing-screen-label,
.landing-cta.is-visible > h2 {
  opacity: 1;
  transform: none;
}

/* Heading trails its label by ~90ms, the same stagger cadence as the cards. */
.landing-outcome > h2,
.landing-evidence > h2,
.landing-cta > h2 {
  transition-delay: 90ms;
}

.landing-eyebrow,
.landing-meta {
  margin-bottom: 0.75rem;
  color: var(--landing-accent);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.landing-hero h1 {
  /* 24ch, not 20: uppercase sets wider than mixed case and the headline
     spilled to a third line at 1440 once the landing stopped opting out of
     the app's transform. The rendered eval pins it at two. */
  max-width: 24ch;
  margin: 0 0 1rem;
  color: var(--landing-ink);
  font-family: var(--font-head);
  font-size: clamp(2.25rem, 3.4vw, 3.35rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.045em;
  white-space: normal;
}

.landing-lede {
  max-width: 34rem;
  margin-bottom: 1.35rem;
  color: var(--landing-muted);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  font-weight: 400;
  line-height: 1.65;
}

.landing-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
}

/* ---- Desktop hero ----
   The hero is deliberately one column: the demo monitor holds two full
   drawings plus the findings panel and needs the whole row. That left the
   copy using 832px of a 1344px row with the right half empty, and pushed the
   monitor below the fold at 1440x900.

   So the COPY splits instead. Headline on the left, the lede and the call to
   action beside it, which fills the row and halves the block's height. The
   monitor moves up by about the same amount and lands inside the first
   screen, which is the point of a hero. */
@media (min-width: 1200px) {
  .landing-page .landing-hero-copy {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
    max-width: none;
  }

  .landing-page .landing-hero-copy > .landing-eyebrow {
    grid-column: 1 / -1;
  }

  /* 1.15fr and no ch cap: the headline has to hold two lines here, and
     uppercase sets wide enough that a character-based measure broke it into
     three. The rendered eval pins it at two. */
  .landing-page .landing-hero-copy > h1 {
    grid-column: 1;
    grid-row: 2 / span 3;
    max-width: none;
    margin-bottom: 0;
  }

  .landing-page .landing-hero-copy > .landing-lede {
    grid-column: 2;
    grid-row: 2;
    max-width: none;
  }

  .landing-page .landing-hero-copy > .landing-hero-actions {
    grid-column: 2;
    grid-row: 3;
  }

  .landing-page .landing-hero-copy > .landing-meta {
    grid-column: 2;
    grid-row: 4;
    margin-bottom: 0;
  }
}

/* ---- Public buttons ---- */

/* #landingPage sets text-transform:none so the public copy reads as prose, but
   a global `button, input, textarea, select` rule sets uppercase and a direct
   element rule beats inheritance every time - so every control stayed shouting
   while the prose around it did not.
   Named classes rather than `.landing-page button`, which would also catch the
   demo monitor: that one mimics the app on purpose and its controls are meant
   to stay uppercase. */
.landing-page .landing-button,
.landing-page .landing-capability-tab,
.landing-page .landing-text-link {
  text-transform: none;
}

.landing-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.38rem;
  min-height: 2.75rem;
  padding: 0 1.15rem;
  color: var(--text-strong);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
  border-radius: 9px;
  cursor: pointer;
  transform: translateY(0);
  transition:
    transform 140ms ease,
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease,
    box-shadow 140ms ease;
}

/* Blue login and purple signup mirror the annotated navigation brief. */
.landing-button-primary {
  background: var(--landing-action);
  color: var(--on-colour-button);
  border: 1px solid rgb(var(--accent-border-rgb) / 0.45);
  box-shadow: var(--shadow-control), inset 0 -2px 0 rgb(var(--shade-rgb) / 0.18);
}

.landing-button-primary:hover {
  background: var(--landing-action-hover);
  color: var(--on-colour-button);
}

.landing-button-secondary {
  color: var(--on-colour-button);
  background: var(--landing-action);
  border: 1px solid rgb(var(--accent-border-rgb) / 0.45);
  box-shadow: var(--shadow-control), inset 0 -2px 0 rgb(var(--shade-rgb) / 0.18);
}

.landing-button-secondary:hover {
  background: var(--landing-action-hover);
  color: var(--on-colour-button);
  border-color: rgb(var(--accent-border-rgb) / 0.62);
}

.landing-button-signup {
  background: var(--landing-action-signup);
  color: var(--on-colour-button);
  border-color: rgb(var(--landing-nav-purple-rgb) / 0.62);
}

.landing-button-signup:hover {
  background: var(--landing-action-signup-hover);
  color: var(--on-colour-button);
  border-color: rgb(var(--landing-nav-purple-rgb) / 0.78);
}

.landing-demo-monitor .landing-button-primary {
  background: var(--landing-action);
  color: var(--on-colour-button);
  border: 1px solid rgb(var(--accent-border-rgb) / 0.45);
  box-shadow: var(--shadow-control), inset 0 -2px 0 rgb(var(--shade-rgb) / 0.18);
}

.landing-demo-monitor .landing-button-danger {
  background: var(--action-danger);
  color: var(--on-colour-button);
  border-color: var(--action-danger);
}

/* Cross glyph on the reject button, same mask as the app's .reject-button. */
.landing-demo-monitor .landing-button-danger::before {
  content: "";
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  margin-right: 0.4em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%20120'%3E%3Cpath%20d='M30%2030%20L90%2090%20M90%2030%20L30%2090'%20fill='none'%20stroke='black'%20stroke-width='24'%20stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%20120'%3E%3Cpath%20d='M30%2030%20L90%2090%20M90%2030%20L30%2090'%20fill='none'%20stroke='black'%20stroke-width='24'%20stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat;
}

.landing-button:focus-visible {
  box-shadow:
    0 0 0 2px var(--landing-bg),
    0 0 0 4px var(--landing-accent);
  outline: none;
}

.landing-demo-monitor .landing-demo-pin:focus-visible,
.landing-demo-monitor .landing-demo-finding:focus-visible {
  box-shadow:
    0 0 0 2px var(--bg),
    0 0 0 4px var(--focus);
  outline: none;
}

.landing-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  min-height: auto;
  padding-block: clamp(2.5rem, 6vh, 4rem);
  align-items: start;
}

.landing-hero > * {
  min-width: 0;
  max-width: 100%;
}

.landing-hero-copy {
  container-type: inline-size;
  max-width: 52rem;
}

.landing-hero-copy > * {
  opacity: 0;
  transform: translateY(0.9rem);
  animation: landing-rise 480ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* The landing is [hidden] during boot. If the entrance animation runs in
   that display:none window it finishes there, and the static opacity:0
   stays after showLanding(). Hold the animation until the page is shown. */
#landingPage[hidden] .landing-hero-copy > *,
#landingPage[hidden] .landing-demo {
  animation: none;
}

/* Deliberate ~70ms cadence (eyebrow -> h1 -> meta -> lede), not an even
   ease-out default, so the hero copy reads as one intentional entrance. */
.landing-hero-copy > *:nth-child(1) { animation-delay: 30ms; }
.landing-hero-copy > *:nth-child(2) { animation-delay: 100ms; }
.landing-hero-copy > *:nth-child(3) { animation-delay: 170ms; }
.landing-hero-copy > *:nth-child(4) { animation-delay: 240ms; }

@keyframes landing-rise {
  from { opacity: 0; transform: translateY(0.9rem); }
  to { opacity: 1; transform: none; }
}

/* The demo monitor rises/fades in just after the last copy line settles, so
   the hero reads copy-first, then the live demonstration (entrance
   hierarchy). Reduced motion collapses this to the instant end state via the
   page-wide duration override below, exactly like the copy stagger above. */
.landing-demo {
  opacity: 0;
  transform: translateY(1rem);
  animation: landing-rise-monitor 480ms cubic-bezier(0.16, 1, 0.3, 1) 300ms both;
}

@keyframes landing-rise-monitor {
  from { opacity: 0; transform: translateY(1rem); }
  to { opacity: 1; transform: none; }
}

/* ---- Demo monitor shell ---- */
.landing-demo {
  position: relative;
}

.landing-demo::before {
  content: "";
  position: absolute;
  /* Horizontal inset stays at 0: a negative right inset on an absolute box
     counts as scrollable overflow even under the page's overflow-x: clip,
     and was the exact 4% (~15px at 390px) that failed the phone-overflow
     eval. The radial ellipse still reads as an underglow without the bleed. */
  inset: -8% 0;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 42%, rgb(var(--accent-wash-rgb) / 0.12) 0%, rgb(var(--accent-wash-rgb) / 0.06) 38%, transparent 68%);
  pointer-events: none;
}

.landing-demo-monitor {
  --landing-finding: var(--complete-button);
  position: relative;
  width: 100%;
  /* Size container: the app bar and the findings strip below adapt to the
     MONITOR's real width (~604px content at the 72rem cap, full content
     width when the hero stacks), not the viewport. */
  container-type: inline-size;
  overflow: hidden;
  padding: var(--space-2);
  color: var(--text);
  background: linear-gradient(175deg, var(--surface-raised), var(--bg-strong) 80%);
  font-family: var(--font-body);
  letter-spacing: var(--track-base);
  text-transform: uppercase;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow:
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.06),
    0 26px 54px -18px color-mix(in srgb, var(--bg-strong) 72%, transparent),
    0 10px 24px -10px color-mix(in srgb, var(--bg-strong) 55%, transparent),
    0 16px 40px -6px rgb(var(--accent-rgb) / 0.14);
}

/* ---- Demo title row ----
   File title on the left, the "Live demo, try it" marker, then the status.
   There is no mini app bar inside the page: the pill bar above is the only one. */
.landing-monitor-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  min-height: 1.9rem;
  padding-inline: var(--space-2);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: var(--track-caps);
  line-height: 1;
}

.landing-monitor-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.landing-demo-monitor .landing-demo-status {
  flex: none;
  white-space: nowrap;
}

.landing-demo-monitor .landing-demo-status[data-demo-status="comparing"] { color: var(--accent-strong); }
.landing-demo-monitor .landing-demo-status[data-demo-status="found"] { color: var(--complete-strong); }
.landing-demo-monitor .landing-demo-status[data-demo-status="approved"] { color: var(--success); }
.landing-demo-monitor .landing-demo-status[data-demo-status="rejected"] { color: var(--danger); }

/* ---- Monitor interior: panes + findings sidebar (the real review screen) ---- */
/* 2-row monitor at every width: panes row, then the findings strip below.
   A side findings panel needs ~1100px of panes like the real app has; at
   the monitor's ~604px it starved the panes (~200px) and left dead space. */
.landing-demo-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
}

.landing-demo-sheets {
  position: relative;
  display: grid;
  /* minmax(0,...) like the app's .drawing-panes: plain 1fr's auto minimum
     would let a pane's nowrap header text propagate min-content width up
     and overflow the monitor on phones. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  align-content: start;
}

/* Miniature of the app's .drawing-pane. */
.landing-demo-sheet {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

/* Pane header: the app's .drawing-pane header. Label and file name on the left,
   page arrows and rotate buttons on the right. Blue tint for YOUR, violet for
   SUPPLIED, as in the app. Each pane is a size container so the rotate buttons
   step aside before the file name would have to be cut. */
.landing-demo-sheet {
  container-type: inline-size;
}

.landing-demo-sheet > figcaption {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px var(--space-3);
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  background: rgb(var(--accent-wash-rgb) / 0.14);
  border-bottom: 1px solid rgb(var(--accent-rgb) / 0.32);
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
}

.landing-pane-label {
  grid-column: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--accent-strong);
  font-size: 0.75rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landing-pane-soft {
  color: var(--text-muted);
  font-weight: 600;
}

.landing-demo-sheet > figcaption > strong {
  grid-column: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.22;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landing-pane-controls {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* The app's .sheet-page-button and .rotate-sheet-button: real buttons with the
   same size, fill and corners. The page arrows stay unavailable because the demo
   has one sheet. They use aria-disabled rather than disabled so they remain
   focusable and their "One sheet in this demo" tooltip still shows, and they look
   as the app's unavailable arrows do, which keep their fill. */
.landing-pane-button {
  box-sizing: border-box;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  color: var(--on-colour-button);
  background: var(--accent-action-gradient);
  border: 1px solid rgb(var(--accent-border-rgb) / 0.45);
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 0 rgb(var(--gloss-rgb) / 0.24);
  cursor: pointer;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.landing-pane-button[aria-disabled="true"] {
  cursor: default;
}

.landing-pane-button:hover:not([aria-disabled="true"]),
.landing-pane-button:focus-visible {
  background: var(--accent-action-gradient-hover);
  color: var(--on-colour-button);
}

.landing-pane-button:focus-visible {
  outline: none;
  box-shadow:
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.24),
    0 0 0 2px var(--bg),
    0 0 0 4px var(--focus);
}

.landing-pane-button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.landing-pane-button svg:not(.landing-pane-arrow) {
  width: 18px;
  height: 18px;
}

/* A narrow pane cannot hold the file name and four buttons side by side. The
   buttons drop to their own row under the name, so every one of them stays on
   every phone. */
@container (max-width: 299.98px) {
  .landing-demo-sheet > figcaption {
    grid-template-columns: minmax(0, 1fr);
  }

  .landing-pane-controls {
    grid-column: 1;
    grid-row: 3;
    justify-self: end;
    margin-top: var(--space-1);
  }
}

@media (max-width: 767px) {
  .landing-pane-controls {
    gap: 4px;
  }
}

.landing-demo-monitor .landing-demo-sheet-mfr > figcaption {
  background: rgb(var(--complete-wash-rgb) / 0.14);
  border-bottom-color: rgb(var(--complete-rgb) / 0.32);
}

.landing-demo-monitor .landing-demo-sheet-mfr .landing-pane-label {
  color: var(--complete-strong);
}

.landing-demo-monitor .landing-demo-sheet-mfr .landing-pane-button {
  color: var(--on-colour-button);
  background: var(--complete-action-gradient);
  border-color: rgb(var(--complete-border-rgb) / 0.45);
}

.landing-demo-monitor .landing-demo-sheet-mfr .landing-pane-button:hover:not([aria-disabled="true"]),
.landing-demo-monitor .landing-demo-sheet-mfr .landing-pane-button:focus-visible {
  background: var(--complete-action-gradient-hover);
  color: var(--on-colour-button);
}

/* The white sheet with its overlay stage. Overlays (ants, pins, stamp,
   reject) are stage children, NOT children of the clipped sheet div, so
   pin tap-targets near the bottom edge are never clipped. */
.landing-sheet-viewport {
  position: relative;
  grid-row: 2;
  min-width: 0;
  min-height: 0;
  overflow: clip;
  aspect-ratio: 1491 / 1055;
  background: var(--paper);
  overscroll-behavior: none;
  touch-action: none;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.landing-sheet-viewport::-webkit-scrollbar {
  display: none;
}

/* Zoomed, a sheet can be moved: dragged, or with the arrow keys once it has focus (landing.js,
   bindLandingPan). It is scrolled by script, so it is `hidden`, not scrollable by the wheel,
   which keeps scrolling the page. At 100% the whole sheet is in view and nothing here applies.
   Phones scroll a zoomed sheet by touch themselves (the max-width: 767px rule below). */
.landing-demo-sheet:not(.is-landing-fit) .landing-sheet-viewport {
  overflow: hidden;
  cursor: grab;
}

.landing-demo-sheet.is-landing-panning .landing-sheet-viewport {
  cursor: grabbing;
}

/* The wheel over a zoomed sheet belongs to the page: with overscroll-behavior none a hidden
   scroller would swallow it. (A phone keeps none, so a touch that reaches a sheet's edge does
   not start scrolling the page.) */
@media (min-width: 768px) {
  .landing-demo-sheet:not(.is-landing-fit) .landing-sheet-viewport {
    overscroll-behavior: auto;
  }
}

.landing-sheet-viewport:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

.landing-sheet-stage {
  position: relative;
  width: 100%;
  min-width: 100%;
  aspect-ratio: 1491 / 1055;
  background: var(--paper);
  border-radius: 0;
}

/* Everything on the sheet (the drawing, its ants boxes, ticks, stamp and the
   H / W / D and ISSUE badges) sits in this layer, which is what the rotate buttons
   turn. It is the query container, so the finding pins size in cqw and track the
   sheet exactly like the SVG OA bubbles (OA circle = 5.67% of the sheet width),
   turned or not. It only gets a transform once a sheet is actually turned. */
.landing-sheet-turn {
  position: absolute;
  inset: 0;
  container-type: inline-size;
}

.landing-sheet-stage[data-landing-turn="90"] { --landing-turn: 90deg; }
.landing-sheet-stage[data-landing-turn="180"] { --landing-turn: 180deg; }
.landing-sheet-stage[data-landing-turn="270"] { --landing-turn: 270deg; }

.landing-sheet-stage:not([data-landing-turn="0"]) > .landing-sheet-turn {
  rotate: var(--landing-turn);
}

/* A quarter turn makes the sheet portrait. The stage takes the portrait shape, so
   zoom and pan keep working on what is shown, and the layer inside keeps the
   landscape shape the drawing was laid out in and turns about the stage's centre. */
.landing-sheet-stage[data-landing-quarter="true"] {
  min-width: 0;
  margin-inline: auto;
  aspect-ratio: 1055 / 1491;
}

.landing-sheet-stage[data-landing-quarter="true"] > .landing-sheet-turn {
  inset: auto;
  left: 50%;
  top: 50%;
  width: calc(100% * 1491 / 1055);
  height: calc(100% * 1055 / 1491);
  translate: -50% -50%;
}

/* The portrait page sits on the pane's dark ground, like the app's turned pages. */
.landing-demo-sheet.is-landing-turned .landing-sheet-viewport {
  background: var(--bg);
}

.landing-sheet {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1491 / 1055;
  border-radius: inherit;
}

.landing-trolley-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Discourages casually saving the landing's drawings (the demo sheets, the PO
   check's drawing and the review record sample): no text selection, no touch
   callout, no image drag. initLandingDrawingGuard in features/landing.js also
   blocks the context menu and drag on these elements only. This does not prevent
   downloading: the browser still fetches the file it shows. */
:is(#landingPage, #landingFullscreenViewer) :is(.landing-sheet-viewport, .landing-trolley-image, .landing-po-drawing-preview, .landing-po-review figure, .landing-mini-sheet) {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

:is(#landingPage, #landingFullscreenViewer) :is(.landing-trolley-image, .landing-po-drawing-preview img, .landing-po-review figure img) {
  -webkit-user-drag: none;
}

.landing-demo-monitor .landing-demo-mark {
  position: absolute;
  z-index: 4;
  display: block;
  width: clamp(0.9rem, 3.4%, 1.6rem);
  aspect-ratio: 1 / 1;
  translate: -50% -50%;
  filter: drop-shadow(0 2px 2px rgb(var(--shadow-rgb) / 0.28));
  pointer-events: none;
}

.landing-demo.is-armed .landing-demo-monitor .landing-demo-mark {
  opacity: 0;
  scale: 0.3;
  transition: opacity 200ms ease, scale 460ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.landing-demo.is-armed .landing-demo-monitor .landing-demo-mark.is-cross {
  transition-delay: 160ms;
}

.landing-demo.is-armed:is(
  [data-demo-state="found"],
  [data-demo-state="approved"],
  [data-demo-state="rejected"]
) .landing-demo-monitor .landing-demo-mark {
  opacity: 1;
  scale: 1;
}

.landing-demo-monitor .landing-demo-mark svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* YOUR and SUPPLIED are different drawings, so each sheet places its own tick
   and cross inline (left / top are the mark's centre, as a share of that sheet). */
.landing-demo-monitor .landing-demo-mark.is-tick {
  color: var(--success-text);
}

.landing-demo-monitor .landing-demo-mark.is-cross {
  color: var(--action-danger);
}

.landing-trolley-crop {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  background: var(--paper);
}

.landing-trolley-crop > .landing-trolley-image {
  position: absolute;
  left: var(--crop-image-left);
  top: var(--crop-image-top);
  width: var(--crop-image-width);
  max-width: none;
  height: var(--crop-image-height);
  object-fit: fill;
}

.landing-trolley-crop-overlay {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Real controls live in their own footer under each sheet: the zoom pill
   (minus, 100%, plus, reset) at the left and the full screen button at the
   right, on one centre line. The app floats them over the drawing; here nothing
   floats over the title block, which carries the revision finding.

   The pill is the app's drawing zoom control, measured on the Review screen: a
   surface pill at 78% with a blur, 0.18rem of padding, 0.15rem between buttons,
   1.7rem round buttons in the pane's colour at 80%, a 0.66rem mono readout, and
   a 2rem full screen button with 8px corners. On phones and touch screens the
   buttons grow to 44px and the pill grows round them, as the app's does, so no
   button ever hangs out of it. */
.landing-sheet-controls {
  position: relative;
  z-index: 7;
  grid-row: 3;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin: 1rem 0 var(--space-2);
  padding: 0 var(--space-2);
}

.landing-zoom {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.18rem;
  background: rgb(var(--surface-rgb) / 0.78);
  border: 1px solid rgb(var(--overlay-rgb) / 0.16);
  border-radius: 999px;
  box-shadow:
    0 14px 38px rgb(var(--shadow-rgb) / 0.38),
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.15),
    inset 0 -2px 0 rgb(var(--shade-rgb) / 0.18);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.landing-zoom-button,
.landing-expand {
  box-sizing: border-box;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  margin: 0;
  padding: 0;
  color: var(--on-colour-button);
  background-color: transparent;
  background-image: linear-gradient(var(--accent-button), var(--accent-button));
  border: 1px solid rgb(var(--accent-rgb) / 0.6);
  box-shadow:
    0 4px 12px rgb(var(--shadow-rgb) / 0.24),
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.18);
  cursor: pointer;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: filter 140ms ease, transform 120ms ease, opacity 140ms ease;
}

.landing-zoom-button {
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
}

.landing-zoom-button svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The reset arrow keeps its own ink, as in the app, and sits a little apart. */
.landing-zoom-reset {
  margin-left: clamp(0.2rem, 1vw, 0.38rem);
}

.landing-zoom-reset svg {
  stroke: var(--text-strong);
}

.landing-zoom-value {
  display: block;
  min-width: 2.6rem;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
}

.landing-expand {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-sm);
}

.landing-expand svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: var(--text-strong);
  stroke-width: 3.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.landing-demo-monitor .landing-demo-sheet-mfr .landing-zoom-button,
.landing-demo-monitor .landing-demo-sheet-mfr .landing-expand {
  color: var(--on-colour-button);
  background-image: linear-gradient(var(--complete-button), var(--complete-button));
  border-color: rgb(var(--complete-border-rgb) / 0.6);
}

.landing-zoom-button:hover:not(:disabled),
.landing-expand:hover,
.landing-zoom-button:focus-visible,
.landing-expand:focus-visible {
  color: var(--on-colour-button);
  filter: none;
  background-image: linear-gradient(var(--accent-button-hover), var(--accent-button-hover));
  outline: none;
}

.landing-demo-monitor .landing-demo-sheet-mfr .landing-zoom-button:hover:not(:disabled),
.landing-demo-monitor .landing-demo-sheet-mfr .landing-expand:hover,
.landing-demo-monitor .landing-demo-sheet-mfr .landing-zoom-button:focus-visible,
.landing-demo-monitor .landing-demo-sheet-mfr .landing-expand:focus-visible {
  color: var(--on-colour-button);
  background-image: linear-gradient(var(--complete-button-hover), var(--complete-button-hover));
}

.landing-zoom-button:focus-visible,
.landing-expand:focus-visible {
  box-shadow:
    0 4px 12px rgb(var(--shadow-rgb) / 0.24),
    0 0 0 2px var(--bg),
    0 0 0 4px var(--focus);
}

.landing-zoom-button:active:not(:disabled),
.landing-expand:active {
  transform: translateY(1px);
  color: var(--on-colour-button);
  background-image: linear-gradient(var(--accent-button-press), var(--accent-button-press));
}

.landing-demo-monitor .landing-demo-sheet-mfr .landing-zoom-button:active:not(:disabled),
.landing-demo-monitor .landing-demo-sheet-mfr .landing-expand:active {
  color: var(--on-colour-button);
  background-image: linear-gradient(var(--complete-button-press), var(--complete-button-press));
}

/* An unavailable button keeps its fill and dims only its icon, as in the app. */
.landing-zoom-button:disabled {
  cursor: default;
}

.landing-zoom-button:disabled svg {
  opacity: 0.5;
}

/* Touch screens: 44px buttons, with the pill growing round them. Phone widths get
   the same from the monitor-wide 44px rule; this adds touch screens that are wider. */
@media (pointer: coarse) {
  .landing-zoom-button,
  .landing-expand,
  .landing-pane-button {
    min-width: 2.75rem;
    min-height: 2.75rem;
  }

  .landing-expand {
    border-radius: var(--radius-md);
  }
}

@media (max-width: 767px) {
  .landing-expand {
    border-radius: var(--radius-md);
  }
}

body.landing-sheet-fullscreen-open {
  overflow: hidden;
}

/* Match Review's fixed fullscreen viewer. Remove transformed/container
   ancestors so the selected sheet is always anchored to the viewport. */
body.landing-sheet-fullscreen-open .landing-demo {
  transform: none !important;
  animation: none !important;
}

body.landing-sheet-fullscreen-open .landing-demo-monitor {
  overflow: visible;
  container-type: normal;
}

.landing-fullscreen-viewer {
  position: fixed;
  inset: 0;
  z-index: 10000;
  overflow: hidden;
  background: var(--bg-strong);
}

.landing-fullscreen-viewer[hidden] {
  display: none;
}

.landing-demo-sheet.is-landing-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  background: var(--surface);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.landing-demo-sheet.is-landing-fullscreen > figcaption {
  padding-top: max(0.65rem, env(safe-area-inset-top));
  padding-inline: max(var(--space-3), env(safe-area-inset-left)) max(var(--space-3), env(safe-area-inset-right));
}

.landing-demo-sheet.is-landing-fullscreen .landing-sheet-viewport {
  display: grid;
  min-height: 0;
  aspect-ratio: auto;
  background: var(--bg);
}

/* Auto margins centre the sheet while it is smaller than the viewer, and let it start at the
   edge, scrollable, once it is zoomed past it (centring it with place-items would cut its
   start off where no scrollbar can reach). */
.landing-demo-sheet.is-landing-fullscreen .landing-sheet-stage {
  min-width: 0;
  margin: auto;
}

.landing-demo-sheet.is-landing-fullscreen .landing-sheet-controls {
  padding-right: max(var(--space-2), env(safe-area-inset-right));
  padding-bottom: max(var(--space-2), env(safe-area-inset-bottom));
  padding-left: max(var(--space-2), env(safe-area-inset-left));
}

/* Blue scan sweep clipped to each PDF during COMPARING (transform/opacity only). */
.landing-demo-monitor .landing-demo-scan {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: none;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent 18%,
    rgb(var(--accent-wash-rgb) / 0.18) 34%,
    rgb(var(--accent-rgb) / 0.9) 49%,
    rgb(var(--accent-wash-rgb) / 0.28) 56%,
    transparent 72%
  );
  color: var(--on-colour-button);
  filter: drop-shadow(0 0 8px rgb(var(--accent-rgb) / 0.6));
}

.landing-demo[data-demo-state="comparing"] .landing-demo-monitor .landing-demo-scan {
  /* 650ms to match the SCAN_MS constant in initLandingDemo(). */
  display: block;
  visibility: visible;
  animation: landing-scan-sweep 650ms ease-in-out;
}

/* The auto tour plays the scan slower (landing.js sets --landing-scan-ms), so it can be followed. */
.landing-demo[style*="--landing-scan-ms"][data-demo-state="comparing"] .landing-demo-monitor .landing-demo-scan {
  animation-duration: var(--landing-scan-ms);
}

@keyframes landing-scan-sweep {
  0% { transform: translateX(-100%); opacity: 0; }
  10% { opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}

.landing-demo-monitor .landing-dimension-ants,
.landing-demo-monitor .landing-oa-ants {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

/* Shared box geometry for issue and OA-dimension marching ants. */
.landing-demo-monitor .landing-dimension-ants rect,
.landing-demo-monitor .landing-oa-ants rect {
  fill: none;
  stroke-width: 2.2;
  stroke-dasharray: 9 7;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: 0.98;
  animation: diff-border-pulse 650ms linear infinite;
}

/* Issue findings are one violet unit (.diff.is-issue #8b5cf6 = --complete). */
.landing-demo-monitor .landing-dimension-ants rect {
  stroke: var(--complete);
  /* Opacity only. No x/y/width/height transition: the highlight must not glide
     across the sheet when you switch findings - every finding already has its
     own box in place, so the emphasis snaps to the selected one. */
  animation: diff-border-pulse 650ms linear infinite;
  filter:
    drop-shadow(0 0 1px rgb(var(--gloss-rgb) / 0.6))
    drop-shadow(0 1px 2px rgb(var(--shadow-rgb) / 0.26));
  transition: opacity 180ms ease;
}

/* Hero demo cascade (item 2): the issue ants box holds hidden until its own
   step in the top-down reveal adds .is-revealed. Gated on .is-armed (JS-only),
   so the "how it works" REVIEW vignette's ants box and reduced-motion/no-JS
   visitors are unaffected and see it. */
.landing-demo.is-armed .landing-demo-monitor .landing-dimension-ants rect:not(.is-revealed) {
  opacity: 0;
}

/* Each finding keeps a dimmer static box while its selected box marches above
   it. Revision uses the established amber treatment on both layers. */
.landing-rest-ants {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.landing-demo-monitor .landing-rest-box {
  fill: none;
  stroke: var(--complete);
  stroke-width: 2.2;
  stroke-dasharray: 9 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: 0.42;
  transition: opacity 320ms ease;
}

/* Cascade-gated like the OA boxes: hidden until their step adds .is-revealed,
   but only while armed (JS), so reduced-motion / no-JS visitors see them all. */
.landing-demo.is-armed .landing-demo-monitor .landing-rest-box:not(.is-revealed) {
  opacity: 0;
}

/* Scroll gate sentinel: 1px at the very top of #landingPage. It intersects at
   scrollY 0 and stops intersecting the moment the user scrolls, which the demo
   reads as "hasScrolled". Zero layout footprint. */
.landing-scroll-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* Matched OA dimensions in the app's axis colours (.diff.axis-*): confirmations,
   not findings; decorative + aria-hidden. Each rect/bubble reveals on its own
   cascade step (.is-revealed); hidden only while armed (JS), so reduced-motion
   and no-JS visitors see all of them. */
.landing-demo-monitor .landing-oa-ants rect {
  transition: opacity 320ms ease;
}

.landing-demo.is-armed .landing-demo-monitor .landing-oa-ants rect:not(.is-revealed),
.landing-demo.is-armed .landing-demo-monitor .landing-oa-bubble:not(.is-revealed) {
  opacity: 0;
  pointer-events: none;
}

.landing-demo-monitor .landing-oa-width { stroke: var(--oa-width-marker); }
.landing-demo-monitor .landing-oa-height { stroke: var(--oa-height-marker); }
.landing-demo-monitor .landing-oa-depth { stroke: var(--oa-depth-marker); }

/* Exact public counterpart of Review's .diff-badge. HTML text stays sharp
   while the drawing zooms; the visual badge size and mobile scale use the same
   constants, flat axis fill, optical centring, and zero chrome. */
.landing-demo-monitor .landing-oa-bubble {
  /* Fixed, and half what it was. These sit ON the drawing, so they should be
     a constant mark at every size rather than something that grows with the
     viewport. The phone override below is gone for the same reason. */
  --review-badge-scale: 0.56;
  --diff-badge-size: calc(1.62rem * var(--review-badge-scale));
  --marker-color: var(--accent);
  position: absolute;
  left: var(--landing-badge-x);
  top: var(--landing-badge-y);
  z-index: 6;
  display: grid;
  box-sizing: border-box;
  width: max(44px, var(--diff-badge-size));
  height: max(44px, var(--diff-badge-size));
  min-width: 44px;
  min-height: 44px;
  place-items: center;
  margin: 0;
  padding: 0;
  color: var(--marker-color);
  font-family: var(--font-body);
  background: transparent;
  border: 0;
  border-radius: 9999px;
  box-shadow: none;
  /* Match Review's detached marker clearance: anchor at the ants corner, then
     move the visible badge one radius plus the shared 4px gap outside it. */
  translate:
    calc(-50% + var(--diff-badge-half))
    calc(-50% - var(--diff-badge-half));
  contain: layout;
  cursor: pointer;
  touch-action: manipulation;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 320ms ease;
}

.landing-demo-monitor .landing-oa-bubble-width { --marker-color: var(--oa-width-marker); }
/* A badge whose box is too near the sheet's top edge to fit it above the corner
   (the top dimensions on YOUR sheet) hangs from the box's bottom-right corner
   instead, so it is never clipped by the pane. Same clearance: one radius plus 4px. */
.landing-demo-monitor .landing-oa-bubble.is-below {
  translate:
    calc(-50% + var(--diff-badge-half))
    calc(-50% + var(--diff-badge-half));
}
.landing-demo-monitor .landing-oa-bubble-height {
  --marker-color: var(--oa-height-marker);
  /* The height badge uses the equally tethered top-left corner so it cannot
     collide with the selected shelf-height issue pill above the next box. */
  translate:
    calc(-50% - var(--diff-badge-half))
    calc(-50% - var(--diff-badge-half));
}
.landing-demo-monitor .landing-oa-bubble-depth { --marker-color: var(--oa-depth-marker); }

.landing-demo-monitor .landing-oa-bubble > b {
  display: grid;
  box-sizing: border-box;
  width: var(--diff-badge-size);
  height: var(--diff-badge-size);
  min-width: var(--diff-badge-size);
  min-height: var(--diff-badge-size);
  place-items: center;
  padding: 0;
  color: var(--danger-ink);
  font-size: calc(0.82rem * var(--review-badge-scale));
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-align: center;
  background: var(--marker-color);
  border: 0;
  border-radius: 9999px;
  box-shadow: none;
  clip-path: circle(50% at 50% 50%);
}

.landing-demo-monitor .landing-oa-bubble > b > span {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  font: inherit;
  line-height: 1;
  text-align: center;
  text-box: trim-both cap alphabetic;
  translate: 0.01em -0.01em;
}

.landing-demo-monitor .landing-oa-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  translate: -50% -50%;
  border-radius: 50%;
}

.landing-demo-monitor .landing-oa-bubble:focus-visible {
  outline: none;
}

.landing-demo-monitor .landing-oa-bubble:focus-visible > b {
  box-shadow:
    0 0 0 2px var(--paper),
    0 0 0 4px var(--focus);
}

@media (hover: hover) and (pointer: fine) {
  .landing-demo-monitor .landing-oa-bubble:hover > b {
    animation: cursor-target-pop 520ms cubic-bezier(0.2, 0.9, 0.3, 1.2) 1;
  }
}



/* The revision box and pill take the shared revision look (the rules beside
   .diff.is-revision above); nothing revision-specific is drawn here. */

.landing-demo-monitor .landing-demo-finding[data-finding="1"] .landing-demo-finding-badge {
  background:
    radial-gradient(circle at 45% 35%, rgb(var(--overlay-rgb) / 0.42), transparent 44%),
    linear-gradient(180deg, color-mix(in srgb, var(--revision-marker) 74%, var(--gloss)), var(--revision-marker) 64%, color-mix(in srgb, var(--revision-marker) 83%, var(--shade)));
  color: var(--revision-ink);
  text-shadow: 0 1px 1.5px rgb(var(--shade-rgb) / 0.5);
}

.landing-demo-monitor .landing-demo-pin {
  position: absolute;
  z-index: 6;
  /* Sized to sit just above the OA dimension bubbles (~17px), not dwarf them.
     The old 24px body + 3px outer glow ring read ~1.6x their size. */
  /* cqw against .landing-sheet-stage: the OA circle is 5.67% of the stage
     width, so 5.67cqw makes pin and OA bubble the same size at EVERY viewport,
     not only desktop. */
  width: 5.67cqw;
  height: 5.67cqw;
  margin: -2.835cqw 0 0 -2.835cqw;
  display: grid;
  place-items: center;
  padding: 0;
  /* White numeral (#f6f2ff) per the design call, matching the app's step
     badges on this same violet gradient. */
  color: var(--on-colour-button);
  /* Glossy violet step-badge gradient. */
  background:
    radial-gradient(circle at 45% 35%, rgb(var(--overlay-rgb) / 0.38), transparent 44%),
    linear-gradient(180deg, var(--complete-button-hover), var(--complete-button) 64%, var(--complete-button-press));
  border: 1.5px solid rgb(var(--on-complete-rgb) / 0.85);
  border-radius: 50%;
  font-family: var(--font-mono);
  /* 3.33cqw ~= the OA letter's 40/1200 of stage width, so numerals and OA
     letters render the same size at every viewport. */
  font-size: 3.33cqw;
  font-weight: 700;
  line-height: 1;
  /* Dark halo so the white numeral reads on the light amber revision pin, the
     HTML equivalent of the OA letters' paint-order stroke. */
  text-shadow: 0 1px 1.5px rgb(var(--shade-rgb) / 0.55);
  cursor: pointer;
  /* Outer violet glow ring dropped so the pin's visual footprint matches the OA
     bubbles; keep the drop shadow for depth + the badge inset highlights. */
  box-shadow: 0 3px 8px rgb(var(--shadow-rgb) / 0.35), inset 0 1px 0 rgb(var(--gloss-rgb) / 0.26), inset 0 -2px 4px rgb(var(--shade-rgb) / 0.18);
  transition: opacity 320ms cubic-bezier(0.34, 1.56, 0.64, 1), transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 160ms ease;
}

/* Issue findings reuse Review's real .diff-badge.is-issue-pill component.
   This rule only supplies landing-sheet positioning and clears the old round
   pin chrome; the pill's dimensions, type, violet fill, and mobile scale come
   from the authenticated component above. */
.landing-demo-monitor .landing-demo-pin.landing-demo-issue-pill {
  /* Fixed at half the previous size, and deliberately not responsive: the
     pill is a mark on a drawing, so it should measure the same on a phone as
     on a desktop rather than tracking the viewport. Only the VISUAL is fixed;
     the 44px min-width/min-height below is the tap target and is unchanged. */
  --review-badge-scale: 0.45;
  /* The pill is a mark on the drawing: 11.7px high and 4.3px type on a sheet 479px wide or
     more, shrinking with the sheet below that, so on a phone it covers no more of the
     drawing than it does on a desktop. cqw is the sheet's own width (.landing-sheet-turn). */
  --landing-pill-font: clamp(3.16px, 0.9cqw, 4.32px);
  --diff-badge-size: clamp(8.4px, 2.43cqw, 11.66px);
  --diff-pill-pad: clamp(3.2px, 0.94cqw, 4.5px);
  /* The pill's width is its label's: --pill-chars is the label's length (set on each pin),
     0.58em a letter (a hair more than the 0.55 they measure, so the target is never narrower
     than the pill). It sizes the 44px target and clears a turned sheet's box. */
  --diff-pill-width: calc(var(--pill-chars, 7) * 0.58 * var(--landing-pill-font) + 2 * var(--diff-pill-pad));
  --landing-issue-detach: calc(var(--diff-badge-size) / 2 + 4px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max(44px, var(--diff-pill-width));
  height: max(44px, var(--diff-badge-size));
  inline-size: max(44px, var(--diff-pill-width));
  block-size: max(44px, var(--diff-badge-size));
  min-width: 44px;
  max-width: var(--diff-pill-width);
  min-height: 44px;
  max-height: none;
  margin: 0;
  padding: 0;
  color: var(--marker-color);
  font-family: var(--font-body);
  font-size: inherit;
  text-shadow: none;
  background: transparent;
  border: 0;
  border-radius: 9999px;
  box-shadow: none;
  translate: -50% calc(-50% - var(--landing-issue-detach));
}

.landing-demo-monitor .landing-demo-pin.landing-demo-issue-pill::before {
  content: none;
  display: none;
}

/* The label's length: "ISSUE: SHELF HEIGHT" and "ISSUE: REV" (see --diff-pill-width above). */
.landing-demo-monitor .landing-demo-pin.landing-demo-issue-pill[data-finding="0"] {
  --pill-chars: 19;
}

.landing-demo-monitor .landing-demo-pin.landing-demo-issue-pill[data-finding="1"] {
  --pill-chars: 10;
}

/* The target is the button; the pill inside it is the label's own width and does not stretch
   to it (the pill is a flex item: it must not take the round badge's fixed flex-basis). */
.landing-demo-monitor .landing-demo-pin.landing-demo-issue-pill b {
  flex: 0 0 auto;
  width: max-content;
  height: var(--diff-badge-size);
  max-height: 20px;
  font-size: var(--landing-pill-font);
  padding: 0 var(--diff-pill-pad);
}

/* The pills that hang off a box sit against the edge nearest it, so the target grows away
   from the box and the pill itself is exactly 4px from it. */
.landing-demo-monitor .landing-sheet-stage[data-landing-turn="0"] .landing-demo-pin.landing-demo-revision-pill {
  justify-content: flex-end;
}

.landing-demo-monitor .landing-sheet-stage[data-landing-turn="0"] .landing-demo-pin.landing-demo-revision-pill[data-pill-side="right"] {
  justify-content: flex-start;
}

.landing-demo-monitor .landing-demo-pin.landing-demo-issue-pill.landing-demo-revision-pill {
  /* left and top are set inline per sheet: the pill hangs off its REV box's left
     edge, level with the box (the two title blocks differ). */
  translate: calc(-100% - 4px) -50%;
  transform-origin: right center;
}

/* Where the text beside the REV cell is in the way (YOUR sheet: DEMO-001 sits to its
   left), the pill hangs off the box's right edge instead, over the empty lower part of
   the company-mark cell. */
.landing-demo-monitor .landing-demo-pin.landing-demo-issue-pill.landing-demo-revision-pill[data-pill-side="right"] {
  translate: 4px -50%;
  transform-origin: left center;
}

/* The revision pill is the app's own .diff-badge.is-issue-pill.is-revision: its
   colour, ink and ramp come from the shared revision rules beside .diff.is-revision
   (Review's marker rules), not from here. */

/* A turned sheet. Badges are marks on the sheet, not part of the print: their places
   turn with the sheet but their lettering stays upright, as in the app. */
.landing-demo-monitor .landing-sheet-stage:not([data-landing-turn="0"]) .landing-oa-bubble,
.landing-demo-monitor .landing-sheet-stage:not([data-landing-turn="0"]) .landing-demo-pin {
  rotate: calc(var(--landing-turn) * -1);
}

/* A wide pill that sat above its box now sits to the side of it on screen, so it
   clears the box by half its own width, not half its height. */
.landing-demo-monitor .landing-sheet-stage[data-landing-quarter="true"] .landing-demo-pin.landing-demo-issue-pill {
  translate: -50% calc(-50% - var(--diff-pill-width) / 2 - 4px);
}

/* The revision pill stays on the same side of its box after a quarter turn. The box
   edge it hangs from now runs up and down the screen, so the pill (which stays
   upright) clears it by half its own height, not its width. */
.landing-demo-monitor .landing-sheet-stage[data-landing-quarter="true"] .landing-demo-pin.landing-demo-issue-pill.landing-demo-revision-pill {
  translate: calc(-50% - var(--landing-issue-detach)) -50%;
}

.landing-demo-monitor .landing-sheet-stage[data-landing-quarter="true"] .landing-demo-pin.landing-demo-issue-pill.landing-demo-revision-pill[data-pill-side="right"] {
  translate: calc(-50% + var(--landing-issue-detach)) -50%;
}

/* The pill is turned back about its own centre. Its entrance scales it from its
   right edge, which would swing it across its box under a counter-turn. */
.landing-demo-monitor .landing-sheet-stage:not([data-landing-turn="0"]) .landing-demo-pin.landing-demo-issue-pill.landing-demo-revision-pill {
  transform-origin: center;
}

/* >=44px tap target around the smaller, sheet-scaled pin. */
.landing-demo-monitor .landing-demo-pin::after {
  content: "";
  position: absolute;
  inset: -17px;
}

.landing-demo.is-armed .landing-demo-monitor .landing-demo-pin:not(.is-in) {
  opacity: 0;
  transform: scale(0.35);
  pointer-events: none;
}

.landing-demo-monitor .landing-demo-pin.is-in[aria-pressed="true"] {
  animation: landing-pin-pulse 1.6s ease-in-out infinite;
}

.landing-demo-monitor .landing-demo-pin.landing-demo-issue-pill.is-in[aria-pressed="true"] {
  animation: none;
}

@keyframes landing-pin-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.14); }
}

.landing-demo-monitor .landing-demo-stamp {
  position: absolute;
  z-index: 7;
  /* The empty field between the isometric and the top view on the SUPPLIED sheet,
     so the stamp covers neither the company mark nor the REV cell the revision
     finding marks. */
  left: 37%;
  top: 12%;
  width: clamp(3.5rem, 17%, 5.5rem);
  transform: rotate(-8deg);
}

.landing-demo-monitor .landing-demo-stamp .landing-generic-stamp {
  display: block;
  width: 100%;
  /* Square geometry keeps the circular generic stamp undistorted. */
  aspect-ratio: 1 / 1;
  filter: drop-shadow(0 10px 18px rgb(var(--shadow-rgb) / 0.4));
}

/* Self-contained generic approval stamp: single green ink, double ring,
   APPROVED / REVIEWED, no name or company mark. */
.landing-demo-monitor .landing-generic-stamp {
  color: var(--success);
  opacity: 0.9;
  overflow: visible;
}

.landing-demo-monitor .landing-generic-stamp circle,
.landing-demo-monitor .landing-generic-stamp line,
.landing-demo-monitor .landing-stamp-tick {
  stroke: currentColor;
}

.landing-demo-monitor .landing-generic-stamp text {
  fill: currentColor;
  font-family: var(--font-head);
  font-weight: 700;
  text-anchor: middle;
}

.landing-stamp-word {
  font-size: 17px;
  letter-spacing: 0.8px;
}

.landing-stamp-sub {
  font-size: 8.5px;
  letter-spacing: 2.5px;
}

.landing-demo[data-demo-state="approved"] .landing-demo-monitor .landing-demo-stamp:not([hidden]) {
  animation: landing-stamp-settle 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes landing-stamp-settle {
  0% { opacity: 0; transform: rotate(-26deg) scale(1.5); }
  65% { opacity: 1; transform: rotate(-4deg) scale(0.96); }
  100% { opacity: 1; transform: rotate(-8deg) scale(1); }
}

.landing-demo-monitor .landing-demo-reject {
  position: absolute;
  z-index: 7;
  left: 56%;
  top: 55%;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  max-width: 72%;
  padding: 0.5rem 0.75rem;
  color: var(--on-colour-button);
  background: var(--accent-button);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: clamp(0.48rem, 1.2cqw, 0.72rem);
  font-weight: 700;
  letter-spacing: var(--track-caps);
  line-height: 1.15;
  text-transform: uppercase;
  box-shadow: 0 10px 20px rgb(var(--shadow-rgb) / 0.32), inset 0 -2px 0 color-mix(in srgb, color-mix(in srgb, var(--danger) 52%, var(--shade)) 22%, transparent);
}

.landing-demo-monitor .landing-demo-reject > span:last-child {
  max-width: 12ch;
  white-space: normal;
}

.landing-demo-monitor .landing-demo-reject {
  /* Same empty field as the stamp (between the isometric and the top view), clear of
     the item table, the front view's 800 box and both views' edges. */
  left: 35.8%;
  top: 19%;
  background: var(--oa-depth-marker);
  color: var(--oa-depth-ink);
}

.landing-comment-cross {
  flex: 0 0 auto;
  color: var(--text-strong);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.45em;
  font-weight: 900;
  line-height: 0.8;
}

/* ---- Review panel: the app's .findings-panel in miniature ----
   Heading ("Review" over "Sheet 1 of 1"), two tabs (Summary, Drawing Details),
   the panel body, and the Approve / Reject row at the bottom, as on the
   signed-in Review screen. */
.landing-demo-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  min-height: 0;
  padding: 10px 14px;
  container-type: inline-size;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 74%, transparent), color-mix(in srgb, var(--bg-strong) 80%, transparent));
  border: 1px solid rgb(var(--overlay-rgb) / 0.1);
  border-radius: var(--panel-radius);
  box-shadow:
    0 18px 40px rgb(var(--shadow-rgb) / 0.45),
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.06);
}

.landing-panel-heading {
  display: grid;
  gap: 2px;
  padding-bottom: 2px;
}

.landing-panel-heading strong {
  color: var(--text);
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1;
}

.landing-panel-heading small {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1;
}

/* The app's .findings-tabbar: a dark well holding two tabs; the active one is
   the raised primary pill. */
.landing-tabbar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  padding: var(--space-1);
  background: rgb(var(--well-rgb) / 0.35);
  border-radius: 12px;
  box-shadow:
    inset 0 1px 2px rgb(var(--shade-rgb) / 0.5),
    inset 0 0 0 1px rgb(var(--overlay-rgb) / 0.05);
}

.landing-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  min-width: 0;
  min-height: 2rem;
  padding: 0 var(--space-2);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-align: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
}

.landing-tab-text {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.landing-demo-monitor .landing-tab.is-active {
  color: var(--on-colour-button);
  background:
    radial-gradient(circle at 45% 25%, rgb(var(--overlay-rgb) / 0.18), transparent 44%),
    linear-gradient(180deg, var(--accent-button-hover), var(--accent-button) 58%, var(--accent-button-press));
  border-color: rgb(var(--accent-rgb) / 0.72);
  box-shadow:
    0 8px 18px rgb(var(--accent-rgb) / 0.24),
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.22);
}

/* The status chip does one pop the moment the demo lands in "found",
   punctuating the reveal. Keyed off the state attribute the JS already sets,
   so it is a one-shot per state change, not a loop. */
.landing-demo-monitor [data-demo-status="found"] {
  animation: landing-chip-pop 380ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes landing-chip-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.22); }
  100% { transform: scale(1); }
}

/* Tab panels: one visible at a time (JS toggles [hidden]). The [hidden] rule
   needs the extra ancestor so it outweighs the grid display. */
.landing-tab-panel {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  min-width: 0;
  padding-top: var(--space-1);
}

.landing-demo-panel .landing-tab-panel[hidden] {
  display: none;
}

/* Drawing Details: "OA height, width and depth (mm)", then one card each. */
.landing-demo-monitor .landing-oa-head {
  margin: 0;
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.3;
}

.landing-demo-monitor .landing-oa-head span {
  color: var(--text-muted);
  font-weight: 500;
}

.landing-demo-monitor .landing-oa-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The app's .oa-material-card (dimension-review.js, renderManualOverallDimensionsCard):
   amber while it needs input, a chevron, the axis name in its marker colour, the
   "!" status mark, then YOURS and SUPPLIED beside each other. As in the app the
   head opens the card (the chevron button covers it), and the axis name is its
   own button that shows that axis on both drawings, like its H / W / D badge.
   Open, the card shows a value box for each drawing (mm), then Accept, Reject,
   Comment and Pick on drawing in a two-by-two grid. */
.landing-demo-monitor .landing-oa-card {
  --landing-axis: var(--oa-height-text);
  box-sizing: border-box;
  position: relative;
  width: 100%;
  padding: 12px;
  color: var(--text);
  text-align: left;
  white-space: normal;
  background:
    linear-gradient(rgb(var(--warning-rgb) / 0.04), rgb(var(--warning-rgb) / 0.04)),
    var(--surface-card);
  border: 1px solid rgb(var(--warning-rgb) / 0.48);
  border-radius: var(--radius-sm);
}

.landing-demo-monitor .landing-oa-card.axis-width {
  --landing-axis: var(--oa-width-text);
}

.landing-demo-monitor .landing-oa-card.axis-depth {
  --landing-axis: var(--oa-depth-text);
}

/* The tint follows the mark the card shows, as the app's follows its status
   class: green once Correct, red once Wrong, quiet once Ignored. */
.landing-demo-monitor .landing-oa-card[data-oa-mark="accepted"] {
  background:
    linear-gradient(rgb(var(--success-rgb) / 0.04), rgb(var(--success-rgb) / 0.04)),
    var(--surface-card);
  border-color: rgb(var(--success-rgb) / 0.48);
}

.landing-demo-monitor .landing-oa-card[data-oa-mark="rejected"] {
  background:
    linear-gradient(rgb(var(--danger-rgb) / 0.04), rgb(var(--danger-rgb) / 0.04)),
    var(--surface-card);
  border-color: rgb(var(--danger-rgb) / 0.48);
}

.landing-demo-monitor .landing-oa-card[data-oa-mark="ignored"] {
  background: var(--surface-card);
  border-color: rgb(var(--text-rgb) / 0.28);
}

.landing-demo-monitor .landing-oa-card.is-active {
  border-color: var(--landing-axis);
  box-shadow: inset 0 0 0 1.5px var(--landing-axis);
}

.landing-demo-monitor .landing-oa-card-head {
  position: relative;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 8px;
  min-height: 44px;
}

/* The whole head is one button: open or close the card. The axis name sits above
   it as the second, separate target. */
.landing-demo-monitor .landing-oa-toggle {
  position: absolute;
  inset: -12px -12px 0;
  z-index: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: calc(var(--radius-sm) - 1px);
  cursor: pointer;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.landing-demo-monitor .landing-oa-card:not(.is-open) .landing-oa-toggle {
  bottom: -12px;
}

/* Open, the head is as short as the app's (its name row and two empty rows' gaps),
   so the button reaches 6px into the gap below it to stay a 44px target. */
.landing-demo-monitor .landing-oa-card.is-open .landing-oa-card-head {
  min-height: 0;
  padding-bottom: 12px;
}

.landing-demo-monitor .landing-oa-card.is-open .landing-oa-toggle {
  bottom: -6px;
}

.landing-demo-monitor .landing-oa-toggle:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

.landing-demo-monitor .landing-oa-chevron {
  width: 7px;
  height: 7px;
  margin-left: 1px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 160ms ease;
}

.landing-demo-monitor .landing-oa-card.is-open .landing-oa-chevron {
  transform: rotate(45deg);
}

.landing-demo-monitor .landing-oa-name {
  position: relative;
  z-index: 2;
  justify-self: start;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  color: var(--landing-axis);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.landing-demo-monitor .landing-oa-name:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

/* The status mark: "!" while it needs input, a tick once Correct, a cross once
   Wrong, nothing once Ignored (13px, bold, the app's symbol). Its words stay in
   the label for screen readers. */
.landing-demo-monitor .landing-oa-status {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  color: var(--warning-text);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 800;
  line-height: 1;
}

.landing-demo-monitor .landing-oa-card[data-oa-mark="accepted"] .landing-oa-status {
  color: var(--success-text);
}

.landing-demo-monitor .landing-oa-card[data-oa-mark="rejected"] .landing-oa-status {
  color: var(--danger-text);
}

.landing-demo-monitor .landing-oa-glance {
  grid-column: 2 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.landing-demo-monitor .landing-oa-card.is-open .landing-oa-glance {
  display: none;
}

.landing-demo-monitor .landing-oa-side {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  min-width: 0;
  overflow: hidden;
  color: var(--text-strong);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

/* The boxes take any number, so a long one has to give way: the label keeps its place and the
   value is clipped with an ellipsis; its tooltip (landing.js) holds the whole of it. */
.landing-demo-monitor .landing-oa-side > .landing-oa-label {
  flex: 0 0 auto;
}

.landing-demo-monitor .landing-oa-side > span:last-child {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.landing-demo-monitor .landing-oa-label {
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.landing-demo-monitor .landing-oa-label-yours {
  color: var(--accent-strong);
}

.landing-demo-monitor .landing-oa-label-supplied {
  color: var(--complete-text);
}

/* Open: YOURS and SUPPLIED value boxes, then the decision buttons. */
.landing-demo-monitor .landing-oa-body {
  display: grid;
  gap: 10px;
  max-width: 30rem;
  margin: 10px 0 0 22px;
}

.landing-demo-monitor .landing-oa-body[hidden] {
  display: none;
}

.landing-demo-monitor .landing-oa-sides {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.landing-demo-monitor .landing-oa-field-side {
  display: grid;
  align-content: start;
  gap: var(--space-1);
  min-width: 0;
}

.landing-demo-monitor .landing-oa-field-side .landing-oa-label {
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.5;
  text-transform: uppercase;
}

/* The app's .oa-material-value: a 36px box, the number on the left and MM on the right. */
.landing-demo-monitor .landing-oa-field {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 36px;
  color: var(--text-strong);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.5;
  text-transform: uppercase;
  background: var(--surface-card);
  border: 1px solid rgb(var(--overlay-rgb) / 0.1);
  border-radius: var(--radius-sm);
}

.landing-demo-monitor .landing-oa-field > span {
  padding-right: 0.55rem;
}

.landing-demo-monitor .landing-oa-field input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0 4px 0 0.55rem;
  color: var(--text-strong);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: normal;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  outline: 0;
}

.landing-demo-monitor .landing-oa-field:focus-within {
  border-color: rgb(var(--accent-rgb) / 0.72);
  box-shadow: 0 0 0 2px rgb(var(--accent-rgb) / 0.2);
}

.landing-demo-monitor .landing-oa-field:has(input[aria-invalid="true"]) {
  border-color: var(--danger);
}

.landing-demo-monitor .landing-oa-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

/* The app's finding-card actions: 34px, 12px caps, 8px corners. */
.landing-demo-monitor .landing-oa-action {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.38rem;
  min-width: 0;
  min-height: 34px;
  margin: 0;
  padding: 0 4px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  cursor: pointer;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow:
    0 10px 24px rgb(var(--shadow-rgb) / 0.28),
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.14),
    inset 0 -2px 0 rgb(var(--shade-rgb) / 0.18);
}

.landing-demo-monitor .landing-oa-action svg {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
}

.landing-demo-monitor .landing-oa-action.is-accept {
  color: var(--on-colour-button);
  background: linear-gradient(180deg, var(--action-success-hover), var(--action-success) 48%, var(--action-success-press));
  border: 1px solid rgb(var(--action-success-rgb) / 0.55);
}

.landing-demo-monitor .landing-oa-action.is-reject {
  color: var(--on-colour-button);
  background:
    linear-gradient(180deg, rgb(var(--overlay-rgb) / 0.16), transparent 40%),
    linear-gradient(180deg, var(--action-danger-hover), var(--action-danger) 55%, var(--action-danger));
  border: 1px solid rgb(var(--danger-rgb) / 0.65);
}

.landing-demo-monitor .landing-oa-action.is-comment {
  color: var(--on-colour-button);
  background: var(--accent-button-press);
  border: 1px solid rgb(var(--accent-border-rgb) / 0.55);
}

.landing-demo-monitor .landing-oa-action.is-pick,
.landing-demo-monitor .landing-oa-action.is-ignore {
  color: var(--text-strong);
  background:
    linear-gradient(rgb(var(--overlay-rgb) / 0.075), rgb(var(--overlay-rgb) / 0.016)),
    var(--surface-card);
  border: 1px solid rgb(var(--overlay-rgb) / 0.12);
}

/* Picking on the drawing: the button stays lifted until you choose or cancel. */
.landing-demo-monitor .landing-oa-action.is-pick[aria-pressed="true"] {
  background:
    linear-gradient(rgb(var(--overlay-rgb) / 0.1), rgb(var(--overlay-rgb) / 0.02)),
    var(--surface-card);
  box-shadow:
    0 13px 26px rgb(var(--shadow-rgb) / 0.32),
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.2),
    inset 0 -2px 0 rgb(var(--shade-rgb) / 0.16);
}

.landing-demo-monitor .landing-oa-action:hover {
  filter: brightness(1.1);
}

/* Filled coloured buttons keep white at 4.5:1 on hover: no brightening. */
.landing-demo-monitor .landing-oa-action:is(.is-accept, .is-reject, .is-comment):hover {
  filter: none;
}

.landing-demo-monitor .landing-oa-action:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Comment opens under the four buttons: the label, a text box and, as in the app,
   Ignore (44px, quiet). */
.landing-demo-monitor .landing-oa-comment {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  min-width: 0;
}

.landing-demo-monitor .landing-oa-comment[hidden] {
  display: none;
}

.landing-demo-monitor .landing-oa-comment label {
  display: grid;
  gap: var(--space-1);
}

.landing-demo-monitor .landing-oa-comment label > span {
  color: var(--text-strong);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.038em;
  line-height: 1.5;
  text-transform: uppercase;
}

.landing-demo-monitor .landing-oa-comment textarea {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-height: 3.2rem;
  margin: 0;
  padding: 8px;
  color: var(--text-strong);
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.5;
  text-transform: uppercase;
  resize: none;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.landing-demo-monitor .landing-oa-comment textarea::placeholder {
  color: var(--text-strong);
}

.landing-demo-monitor .landing-oa-comment textarea:focus {
  border-color: var(--accent);
  outline: 0;
  box-shadow: 0 0 0 2px rgb(var(--accent-rgb) / 0.2);
}

.landing-demo-monitor .landing-oa-comment .landing-oa-action.is-ignore {
  min-height: 44px;
  color: var(--text);
  background:
    linear-gradient(rgb(var(--overlay-rgb) / 0.075), rgb(var(--overlay-rgb) / 0.016)),
    var(--surface-raised);
  border-color: var(--border);
}

/* Phones and touch screens: 44px actions, as the app's finding actions are, and a
   44px box around the small axis name. Its padding is given back as a negative
   margin, so the card is no taller for it. */
@media (max-width: 767px), (pointer: coarse) {
  .landing-demo-monitor .landing-oa-action {
    min-height: 44px;
  }

  .landing-demo-monitor .landing-oa-name {
    padding: 14px 8px;
    margin: -14px -8px;
  }
}

/* Each button keeps the app's 4px inside padding with its label on one line
   ("Pick on drawing" is the widest, 118px, so a button needs 126px: a card at
   least 308px across). On a narrower card the app switches its action grid to
   one column (its 12rem container rule), so the four buttons stack. */
@container (max-width: 19.25rem) {
  .landing-demo-monitor .landing-oa-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Pick on drawing: an outlined box over that size on each sheet, like the app's
   pick markers over each reading (yours in the action colour, supplied in the
   complete colour). The visible box is the reading; the touch target is 44px. */
.landing-demo-monitor .landing-pick-marker {
  position: absolute;
  z-index: 5;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: rgb(var(--accent-button-rgb) / 0.08);
  border: 1px solid color-mix(in srgb, var(--accent) 43%, var(--gloss));
  border-radius: 0.25rem;
  box-shadow: 0 0 0 1px rgb(var(--accent-button-rgb) / 0.18);
  cursor: pointer;
  appearance: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.landing-demo-monitor .landing-pick-marker[hidden] {
  display: none;
}

.landing-demo-monitor .landing-pick-marker::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  translate: -50% -50%;
}

.landing-demo-monitor .landing-pick-marker[data-landing-pick-side="supplied"] {
  background: rgb(var(--complete-wash-rgb) / 0.12);
  border-color: var(--complete-strong);
  box-shadow: 0 0 0 1px rgb(var(--complete-rgb) / 0.28);
}

.landing-demo-monitor .landing-pick-marker:hover,
.landing-demo-monitor .landing-pick-marker:focus-visible {
  background: rgb(var(--accent-button-rgb) / 0.22);
  box-shadow: 0 0 0 2px rgb(var(--accent-button-rgb) / 0.46);
}

.landing-demo-monitor .landing-pick-marker[data-landing-pick-side="supplied"]:hover,
.landing-demo-monitor .landing-pick-marker[data-landing-pick-side="supplied"]:focus-visible {
  background: rgb(var(--complete-wash-rgb) / 0.24);
  box-shadow: 0 0 0 2px rgb(var(--complete-rgb) / 0.5);
}

.landing-demo-monitor .landing-pick-marker:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* "2 to review", then the finding cards. */
.landing-demo-panel-label {
  margin: 0;
  color: var(--accent-strong);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
}

.landing-demo-monitor .landing-demo-findings {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The app's .finding card: a numbered badge, the title with its tag, the
   sheet, then the explanation. */
.landing-demo-monitor .landing-demo-finding {
  display: grid;
  grid-template-columns: 1.45rem minmax(0, 1fr);
  align-items: start;
  gap: 6px;
  width: 100%;
  padding: 6px 8px;
  color: var(--text);
  /* The app's global button rule sets white-space: nowrap; these cards are
     prose, so they wrap. */
  white-space: normal;
  text-align: left;
  background: rgb(var(--surface-card-rgb) / 0.92);
  border: 1px solid rgb(var(--text-rgb) / 0.28);
  border-radius: var(--radius-md);
  cursor: pointer;
  opacity: 1;
  transform: none;
  transition: opacity 380ms cubic-bezier(0.34, 1.56, 0.64, 1), transform 380ms cubic-bezier(0.34, 1.56, 0.64, 1), border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.landing-demo.is-armed .landing-demo-monitor .landing-demo-finding:not(.is-in) {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}

.landing-demo-monitor .landing-demo-finding[aria-pressed="true"] {
  border-color: rgb(var(--accent-rgb) / 0.72);
  box-shadow: inset 0 0 0 1.5px rgb(var(--accent-rgb) / 0.85);
}

.landing-demo-monitor .landing-demo-finding[data-finding="1"][aria-pressed="true"] {
  border-color: rgb(var(--revision-marker-rgb) / 0.78);
  box-shadow: inset 0 0 0 1.5px rgb(var(--revision-marker-rgb) / 0.9);
}

.landing-demo-monitor .landing-demo-finding-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.45rem;
  height: 1.45rem;
  margin-top: 1px;
  color: var(--on-danger);
  font-size: 0.76rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: 0;
  background: var(--danger);
  border-radius: 999px;
}

/* The revision finding keeps its own colour, the same as its pill on the sheets. */
.landing-demo-monitor .landing-demo-finding[data-finding="1"] .landing-demo-finding-badge {
  color: var(--revision-ink);
  background: var(--revision-marker);
}

.landing-demo-monitor .landing-demo-finding-body {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.landing-demo-monitor .landing-demo-finding-heading {
  display: grid;
  gap: 2px;
}

.landing-demo-monitor .landing-demo-finding-heading strong {
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.landing-demo-monitor .landing-demo-finding-tag {
  /* --muted-action, not --text-muted: muted on the card fill is a hair under AA. */
  color: var(--muted-action);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
}

.landing-demo-monitor .landing-demo-finding-sheet {
  color: var(--accent-strong);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
}

.landing-demo-monitor .landing-demo-finding-detail {
  color: var(--muted-action);
  font-size: 0.75rem;
  line-height: 1.45;
  letter-spacing: var(--track-base);
  overflow-wrap: anywhere;
}

/* Summary: the app's #aiSummaryPanel surface and bulleted text. */
.landing-demo-monitor .landing-summary-status {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-3);
  background:
    linear-gradient(180deg, rgb(var(--overlay-rgb) / 0.04), transparent 55%),
    var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.landing-demo-monitor .landing-summary-points {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
}

.landing-demo-monitor .landing-summary-lead {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.42;
  letter-spacing: normal;
}

.landing-demo-monitor .landing-summary-points ul {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.landing-demo-monitor .landing-summary-points li {
  position: relative;
  padding-left: 1rem;
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.42;
  letter-spacing: normal;
}

.landing-demo-monitor .landing-summary-points li::before {
  content: "";
  position: absolute;
  top: 0.52em;
  left: 0;
  width: 0.38rem;
  height: 0.38rem;
  background: var(--accent);
  border-radius: 999px;
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.18);
}

/* Desktop: the panel is as tall as the drawings beside it and its body
   scrolls, like the app's findings rail. contain: size stops the panel's own
   content from setting the row height. */
@media (min-width: 1200px) {
  .landing-demo-panel {
    contain: size;
    overflow: hidden;
  }

  .landing-demo-panel .landing-tab-panel:not([hidden]) {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}

/* Stacked layouts give the panel the full monitor width: three overall-size
   cards across, the two findings side by side. */
@container (min-width: 520px) {
  .landing-demo-monitor .landing-oa-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* An open card needs room for its value boxes and buttons, so it takes the whole row. */
  .landing-demo-monitor .landing-oa-list > li:has(.landing-oa-card.is-open) {
    grid-column: 1 / -1;
  }

  .landing-demo-monitor .landing-demo-findings {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .landing-demo-monitor .landing-demo-findings > li {
    display: grid;
  }
}

.landing-po-demo {
  position: relative;
  z-index: 1;
  width: min(calc(100% - clamp(1.5rem, 6vw, 5rem)), var(--content-measure));
  margin-inline: auto;
  padding-block: clamp(3.75rem, 7vw, 6.5rem);
}

.landing-po-demo .landing-section-copy {
  max-width: 66ch;
}

.landing-po-demo .landing-section-copy > p:last-child {
  margin-top: 1rem;
  color: var(--landing-muted);
  font-size: clamp(0.98rem, 1.25vw, 1.1rem);
  line-height: 1.65;
}

.landing-po-workspace {
  margin-top: clamp(2rem, 5vw, 3.75rem);
  overflow: hidden;
  background:
    linear-gradient(135deg, rgb(var(--accent-wash-rgb) / 0.08), transparent 42%),
    var(--landing-surface);
  border: 1px solid var(--landing-border);
  border-radius: 14px;
  box-shadow: 0 24px 80px rgb(var(--shadow-rgb) / 0.28);
}

.landing-po-upload-card > header {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
}

/* Card names are the app's Load screen names: YOUR FILE and SUPPLIED FILE
   (where a purchase order is dropped). */
.landing-po-upload-card > header span {
  color: var(--landing-ink);
  font-family: var(--font-head);
  font-weight: 700;
}

.landing-po-upload-card > header b {
  color: var(--success-text);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.landing-po-uploads {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  padding: clamp(1rem, 2.5vw, 1.5rem);
}

.landing-po-upload-card {
  display: grid;
  /* Preview row hugs its image (no stretched letterbox); leftover card
     height collects after the filename row instead. */
  grid-template-rows: auto auto auto 1fr;
  gap: 0.75rem;
  min-width: 0;
  margin: 0;
  padding: 0.9rem;
  background: rgb(var(--overlay-rgb) / 0.025);
  border: 1px solid var(--landing-border);
  border-radius: var(--panel-radius);
}

.landing-po-upload-card > header span {
  font-size: 0.82rem;
}

.landing-po-drawing-preview,
.landing-po-sheet-preview {
  /* Both panels share the drawing's aspect box so the cards line up at every
     width; each image is contained inside it, never cropped. */
  width: 100%;
  aspect-ratio: 1491 / 1055;
  overflow: hidden;
  background: var(--paper);
  border-radius: 6px;
}

.landing-po-drawing-preview {
  display: grid;
  place-items: center;
}

.landing-po-drawing-preview img,
.landing-po-review > figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.landing-po-sheet-preview {
  display: grid;
  gap: 1rem;
  align-content: center;
  padding: clamp(1.25rem, 3vw, 2rem);
  color: color-mix(in srgb, var(--ink-dark) 95%, var(--paper));
}

.landing-po-document-preview {
  place-items: center;
  padding: 0;
  /* One full-height row: without this the grid row sizes to the image's
     intrinsic height and the portrait PO overflows the aspect box. */
  grid-template-rows: 100%;
}

.landing-po-document-preview img {
  display: block;
  width: auto;
  height: 100%;
}

.landing-po-sheet-preview > span {
  color: color-mix(in srgb, var(--ink-dark) 67%, var(--paper));
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
}

.landing-po-sheet-preview > strong {
  font-family: var(--font-head);
  font-size: clamp(1rem, 2vw, 1.35rem);
}

.landing-po-sheet-preview dl,
.landing-po-pair {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
}

.landing-po-sheet-preview dl > div {
  padding-top: 0.65rem;
  border-top: 1px solid color-mix(in srgb, var(--ink-dark) 23%, var(--paper));
}

.landing-po-sheet-preview dt,
.landing-po-sheet-preview dd {
  margin: 0;
}

.landing-po-sheet-preview dt {
  color: color-mix(in srgb, var(--ink-dark) 67%, var(--paper));
  font-size: 0.68rem;
}

.landing-po-sheet-preview dd {
  margin-top: 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
}

.landing-po-upload-card > p {
  display: grid;
  gap: 0.2rem;
  margin: 0;
}

.landing-po-upload-card > p strong {
  overflow-wrap: anywhere;
  color: var(--landing-ink);
  font-family: var(--font-mono);
  font-size: 0.76rem;
}

.landing-po-upload-card > p span {
  color: var(--landing-muted);
  font-size: 0.75rem;
}

.landing-po-upload-card > p a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.landing-po-upload-card > p a:hover,
.landing-po-upload-card > p a:focus-visible {
  text-decoration: underline;
}

.landing-po-check {
  padding: 0 clamp(1rem, 2.5vw, 1.5rem) clamp(1rem, 2.5vw, 1.5rem);
}

.landing-po-check > summary {
  position: relative;
  display: grid;
  min-height: 44px;
  place-items: center;
  padding: 0.75rem 1rem;
  color: var(--on-colour-button);
  font-family: var(--font-head);
  font-size: 0.82rem;
  font-weight: 700;
  background: linear-gradient(180deg, var(--accent-button-hover), var(--accent-button) 58%, var(--accent-button-press));
  border: 1px solid rgb(var(--accent-rgb) / 0.75);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgb(var(--gloss-rgb) / 0.2);
  cursor: pointer;
  list-style: none;
}

.landing-po-check > summary::-webkit-details-marker {
  display: none;
}

.landing-po-check-complete,
.landing-po-check[open] .landing-po-check-idle,
.landing-po-check[open] .landing-po-check-status {
  display: none;
}

/* "Ready to check": the check's state, kept beside the button that runs it. */
.landing-po-check-status {
  margin-top: 0.15rem;
  color: var(--on-colour-button);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  opacity: 1;
}

@media (min-width: 640px) {
  .landing-po-check-status {
    position: absolute;
    top: 50%;
    right: 1rem;
    margin-top: 0;
    translate: 0 -50%;
  }
}

.landing-po-check[open] .landing-po-check-complete {
  display: inline;
}

.landing-po-review {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 1rem;
  padding-top: 1rem;
}

.landing-po-review > figure {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--landing-border);
  border-radius: 8px;
}

.landing-po-review > figure figcaption {
  padding: 0.55rem 0.7rem;
  color: var(--landing-muted);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  background: var(--landing-surface);
  border-top: 1px solid var(--landing-border);
}

.landing-po-comparison {
  display: grid;
  gap: 0.9rem;
  align-content: start;
  min-width: 0;
  padding: 1rem;
  background: rgb(var(--overlay-rgb) / 0.025);
  border: 1px solid var(--landing-border);
  border-radius: 8px;
}

.landing-po-comparison > header {
  display: grid;
  gap: 0.35rem;
}

.landing-po-intro {
  margin: 0;
  color: var(--landing-muted);
  font-size: 0.875rem;
  line-height: 1.45;
}

.landing-po-match {
  margin: 0;
  color: var(--landing-muted);
  font-size: 0.875rem;
  line-height: 1.45;
}

.landing-po-pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.landing-po-pair article {
  min-width: 0;
  padding: 0.75rem;
  background: rgb(var(--overlay-rgb) / 0.025);
  border: 1px solid var(--landing-border);
  border-radius: 8px;
}

.landing-po-pair article > span,
.landing-po-pair p span {
  color: var(--landing-muted);
  font-size: 0.75rem;
}

.landing-po-pair article > strong,
.landing-po-pair p b {
  display: block;
  color: var(--landing-ink);
  font-family: var(--font-mono);
  overflow-wrap: anywhere;
}

.landing-po-pair article > strong {
  margin-top: 0.25rem;
  font-size: 0.75rem;
}

.landing-po-pair p {
  margin: 0.5rem 0 0;
  padding-top: 0.5rem;
  border-top: 1px solid var(--landing-border);
}

.landing-po-pair p b {
  margin-top: 0.2rem;
  font-size: 0.875rem;
}

.landing-po-match {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
}

.landing-po-match strong {
  color: var(--success-text);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 720px) {
  .landing-po-review {
    grid-template-columns: 1fr;
  }

  .landing-po-uploads,
  .landing-po-pair {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The Approve / Reject row: the app's .review-decision-actions. It sits at the
   foot of the panel under whichever tab is open. The line under it is the
   demo's status note; at rest it carries the page's promise. */
.landing-demo-decision {
  display: grid;
  flex: 0 0 auto;
  gap: var(--space-2);
  padding-top: var(--space-1);
  opacity: 1;
  transform: none;
  transition: opacity 340ms ease, transform 340ms ease;
}

.landing-demo-decision-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.landing-demo-decision-actions > * {
  width: 100%;
  min-height: 44px;
  padding-inline: var(--space-4);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: var(--radius-md);
}

.landing-demo-decision-actions svg {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.landing-demo-note {
  min-height: 1.2em;
  margin: 0;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.45;
  letter-spacing: normal;
  overflow-wrap: anywhere;
}

/* ---- Outcome: the finished record the hero demo above produces ---- */
.landing-outcome {
  padding-block: clamp(4.5rem, 9vw, 7rem);
  border-top: 1px solid var(--border);
}

/* One compact panel, not a card rail: the finished sheet on the left, the
   artifacts it produces on the right. Reveals as a single scroll-triggered
   unit (initLandingScrollReveal), same recipe as the evidence cards. */
.landing-outcome-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
  opacity: 1;
  transform: none;
  transition: opacity 480ms cubic-bezier(0.16, 1, 0.3, 1), transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
}

.landing-outcome-panel.is-visible {
  opacity: 1;
  transform: none;
}

.landing-outcome-vignette {
  min-width: 0;
}

/* Miniature drawing pane used by the outcome vignette. Decorative only:
   everything inside is aria-hidden. */
.landing-mini-stage {
  position: relative;
  overflow: hidden;
  background: var(--paper);
}

.landing-mini-sheet {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.landing-mini-sheet .landing-sheet {
  aspect-ratio: 1491 / 1055;
}

.landing-mini-stamp {
  position: absolute;
  z-index: 4;
  top: 12%;
  left: 37%;
  /* Keep the stamp in the drawing's blank field between the isometric and the
     top view, clear of the geometry and the title block. */
  width: 18%;
  aspect-ratio: 1 / 1;
  transform: rotate(-8deg);
  filter: drop-shadow(0 6px 12px rgb(var(--shadow-rgb) / 0.4));
}

.landing-record .landing-mini-mark {
  position: absolute;
  z-index: 4;
  width: clamp(0.9rem, 3.4%, 1.6rem);
  aspect-ratio: 1 / 1;
  translate: -50% -50%;
  filter: drop-shadow(0 2px 2px rgb(var(--shadow-rgb) / 0.28));
  pointer-events: none;
}

.landing-record .landing-mini-mark svg {
  display: block;
  width: 100%;
  height: 100%;
}

.landing-record .landing-mini-mark.is-tick {
  color: var(--success-text);
}

/* Just under the top view's 800, between its dimension line and the view, clear of the figures. */
.landing-record .landing-mini-mark.is-tick.is-width {
  left: 69.75%;
  top: 10.1%;
}

.landing-record .landing-mini-mark.is-tick.is-height {
  left: 42.198%;
  top: 61%;
}

/* Right of the end view's 450 (its dimension line), clear of the SIDE VIEW label. */
.landing-record .landing-mini-mark.is-tick.is-depth {
  left: 85.51%;
  top: 77.54%;
}

.landing-record .landing-mini-mark.is-cross {
  left: 51.933%;
  top: 67.521%;
  color: var(--action-danger);
}

/* The finished record shows a rejected outcome, using the same danger color
   as the app's rejection controls and comments. */
.landing-record .landing-generic-stamp {
  color: var(--action-danger);
  opacity: 0.9;
  overflow: visible;
}

.landing-record .landing-generic-stamp circle,
.landing-record .landing-generic-stamp line,
.landing-record .landing-stamp-cross {
  stroke: currentColor;
}

.landing-record .landing-generic-stamp text {
  fill: currentColor;
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-anchor: middle;
}

.landing-record .landing-mini-comment {
  position: absolute;
  z-index: 4;
  left: 54.933%;
  top: 63.521%;
  display: inline-flex;
  align-items: center;
  padding: 0.26rem 0.45rem;
  color: var(--on-colour-button);
  gap: 0.34rem;
  background: linear-gradient(180deg, var(--action-danger), var(--action-danger) 64%, var(--action-danger-press));
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: var(--track-caps);
  line-height: 1.2;
  text-transform: uppercase;
  max-width: 24ch;
  white-space: normal;
  text-shadow: 0 1px 1px rgb(var(--shade-rgb) / 0.24);
  box-shadow:
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.28),
    0 5px 12px rgb(var(--shadow-rgb) / 0.35);
}

.landing-mini-comment-cross {
  flex: 0 0 auto;
  font-family: var(--font-head);
  font-size: 1rem;
  line-height: 0.8;
}

.landing-vignette-export {
  /* Sheet on top, save/share actions below. */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.landing-vignette-export .landing-mini-sheet {
  width: 100%;
  max-width: none;
}

.landing-mini-chips {
  display: grid;
  width: 100%;
  max-width: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.landing-vignette-export .landing-mini-chips {
  margin-inline: auto;
}

/* Export buttons: the app's primary Save PDF and secondary Share PDF. */
.landing-export-btn {
  display: inline-flex;
  width: 100%;
  min-height: 2.75rem;
  gap: 0.45rem;
  align-items: center;
  justify-content: center;
  padding-inline: 0.95rem;
  font-family: inherit;
  text-transform: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  border-radius: var(--radius-md);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: var(--track-caps);
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: var(--shadow-control), inset 0 -2px 0 rgb(var(--shade-rgb) / 0.18);
}

.landing-export-btn.is-primary {
  color: var(--on-colour-button);
  background: var(--landing-action);
  border: 1px solid rgb(var(--accent-border-rgb) / 0.45);
}

.landing-export-btn.is-secondary {
  color: var(--on-colour-button);
  background: linear-gradient(180deg, var(--complete-button-hover), var(--complete-button) 55%, var(--complete-button-press));
  border: 1px solid rgb(var(--complete-rgb) / 0.62);
}

.landing-export-btn:focus-visible {
  outline: 3px solid var(--landing-accent);
  outline-offset: 3px;
}

.landing-export-btn:active {
  transform: translateY(1px);
}

/* What the two buttons do here, said plainly under them. */
.landing-record-note {
  max-width: 34rem;
  margin: 0.75rem auto 0;
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.5;
  text-align: center;
}

.landing-export-btn svg {
  width: 0.92rem;
  height: 0.92rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.landing-guardrails h3 {
  margin: 0 0 0.4rem;
  color: var(--text);
  font-family: var(--font-head);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.3;
}

.landing-outcome-copy p {
  max-width: 34rem;
  margin: 0 0 0.9rem;
  color: var(--text-muted);
  /* Phone floor per Jon: >=0.85rem at >=1.6 line-height; applied at every
     width so the floor can never regress via a missing media query. */
  font-size: 0.85rem;
  line-height: 1.6;
}

.landing-outcome-copy p:last-child {
  margin-bottom: 0;
}

.landing-outcome-copy strong {
  color: var(--text);
}

/* ---- Evidence + guardrails: app panel cards ---- */
.landing-evidence {
  padding-block: clamp(4.5rem, 9vw, 7rem);
  border-top: 1px solid var(--border);
}

.landing-evidence-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

.landing-panel-card {
  padding: var(--space-5);
}

.landing-evidence-row {
  padding-block: 1.1rem;
  opacity: 1;
  transform: none;
  transition: opacity 480ms cubic-bezier(0.16, 1, 0.3, 1), transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
}

.landing-evidence-row.is-visible {
  opacity: 1;
  transform: none;
}

.landing-evidence-row:first-child {
  padding-top: 0;
}

.landing-evidence-row:last-child {
  padding-bottom: 0;
}

.landing-evidence-row + .landing-evidence-row {
  border-top: 1px solid var(--border);
}

/* Mono chip like the app's side/material chips. */
.landing-evidence-tag {
  display: inline-flex;
  align-items: center;
  margin-bottom: 0.45rem;
  padding: 0.16rem 0.52rem;
  color: var(--accent-strong);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  background: rgb(var(--accent-wash-rgb) / 0.13);
  border: 1px solid rgb(var(--accent-rgb) / 0.25);
  border-radius: 999px;
  white-space: nowrap;
}

.landing-evidence-row p {
  max-width: 34rem;
  margin: 0;
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.55;
}

.landing-guardrails {
  opacity: 1;
  transform: none;
  transition: opacity 480ms cubic-bezier(0.16, 1, 0.3, 1), transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
}

.landing-guardrails.is-visible {
  opacity: 1;
  transform: none;
}

.landing-guardrails p {
  margin: 0 0 0.9rem;
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.6;
}

.landing-guardrails p:last-child {
  margin-bottom: 0;
}

/* ---- Final CTA ---- */
.landing-cta {
  /* Flex column with one gap so the eyebrow, heading, button, and note are all
     equally spaced (individual element margins are zeroed below so only this
     gap applies). */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.9rem;
  padding-block: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--border);
  text-align: center;
}

.landing-cta .landing-screen-label {
  margin-bottom: 0;
}

.landing-cta h2 {
  max-width: 26ch;
  margin: 0;
}

.landing-cta .landing-button {
  margin-inline: auto;
}

/* Extra specificity (.landing-cta .landing-cta-note) is required: the shared
   `.landing-page p { margin-top: 0 }` reset (0,1,1) out-specifies a bare
   `.landing-cta-note` (0,1,0) and was silently zeroing this gap. */
.landing-cta .landing-cta-note {
  /* Spacing handled by the CTA flex gap so all four elements are equal. */
  margin-top: 0;
  color: var(--text-muted);
  font-size: 0.78rem;
}

/* ---- App-styled review-first sections ---- */
.landing-process,
.landing-review-tools,
.landing-ai,
.landing-capabilities,
.landing-reliability,
.landing-record,
.landing-cta {
  padding-block: clamp(3.75rem, 6vw, 5.5rem);
  border-top: 1px solid var(--landing-border);
}

.landing-process h2,
.landing-review-tools h2,
.landing-ai h2,
.landing-capabilities h2,
.landing-reliability h2,
.landing-record h2,
.landing-cta h2 {
  margin: 0 0 clamp(1.75rem, 4vw, 3rem);
  color: var(--landing-ink);
  font-family: var(--font-head);
  font-size: clamp(1.85rem, 3vw, 3rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.035em;
  opacity: 1;
  transform: none;
}

.landing-process-list,
.landing-reliability-grid,
.landing-capability-panel ul {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.landing-process-list {
  counter-reset: landing-process;
  gap: 0;
  border-block: 1px solid var(--landing-border);
}

.landing-process-list li,
.landing-tool-facts p,
.landing-ai-signals li,
.landing-reliability-grid p,
.landing-capability-panel {
  margin: 0;
  padding: 1.35rem;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.landing-process-list li {
  counter-increment: landing-process;
}

.landing-process-list li + li {
  border-left: 1px solid var(--landing-border);
}

.landing-process-list li::before {
  content: "0" counter(landing-process);
  display: block;
  margin-bottom: 1.5rem;
  color: var(--landing-accent);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
}

.landing-process-list strong,
.landing-tool-facts strong,
.landing-ai-signals strong,
.landing-reliability-grid strong {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--landing-ink);
  font-family: var(--font-head);
  font-size: 1rem;
}

.landing-process-list span,
.landing-tool-facts span,
.landing-ai-signals span,
.landing-reliability-grid span,
.landing-section-copy p:not(.landing-eyebrow, .landing-lede),
.landing-ai-copy > p:not(.landing-eyebrow, .landing-lede),
.landing-outcome-copy p,
.landing-cta p {
  color: var(--landing-muted);
  font-size: 0.95rem;
  line-height: 1.65;
}

.landing-review-tools,
.landing-ai,
.landing-record {
  display: grid;
  grid-template-columns: minmax(17rem, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

.landing-record {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.landing-review-tools h2,
.landing-ai h2,
.landing-record h2 {
  max-width: 14ch;
}

.landing-tool-facts,
.landing-ai-signals {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.landing-tool-facts {
  border-block: 1px solid var(--landing-border);
}

.landing-tool-facts p + p {
  border-top: 1px solid var(--landing-border);
}

.landing-ai-signals {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  align-self: stretch;
}

.landing-ai-signals li {
  background: var(--landing-surface);
  border: 1px solid var(--landing-border);
  border-radius: 12px;
}

.landing-capability-switcher {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.35rem;
  background: var(--surface-muted);
  border: 1px solid var(--landing-border);
  border-radius: var(--radius-lg);
}

.landing-capability-tab {
  min-width: 0;
  padding: 0.7rem 0.85rem;
  color: var(--landing-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-weight: 600;
  overflow-wrap: anywhere;
  white-space: normal;
  cursor: pointer;
}

.landing-capability-tab[aria-selected="true"] {
  color: var(--on-colour-button);
  background: var(--landing-action);
  border-color: rgb(var(--accent-border-rgb) / 0.45);
  box-shadow: var(--shadow-control), inset 0 -2px 0 rgb(var(--shade-rgb) / 0.18);
}

.landing-capability-panel {
  min-height: 10rem;
  background: var(--landing-surface);
  border: 1px solid var(--landing-border);
  border-radius: var(--panel-radius);
}

.landing-capability-panel[hidden] {
  display: none;
}

.landing-capability-panel ul {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem 1.5rem;
}

.landing-capability-panel li {
  position: relative;
  padding-left: 1rem;
  color: var(--landing-muted);
  line-height: 1.5;
}

.landing-capability-panel li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  background: var(--landing-accent);
  color: var(--accent-ink);
  border-radius: 50%;
}

.landing-reliability-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 2rem;
  border-block: 1px solid var(--landing-border);
}

.landing-reliability-grid p {
  border-top: 1px solid var(--landing-border);
}

.landing-reliability-grid p:nth-child(-n + 2) {
  border-top: 0;
}

.landing-record .landing-outcome-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--landing-surface);
  border: 1px solid var(--landing-border);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow-panel);
}

.landing-record .landing-outcome-copy p {
  margin: 0;
}

.landing-record .landing-outcome-copy {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

.landing-cta {
  display: grid;
  justify-items: center;
  gap: 1rem;
  text-align: center;
}

.landing-cta h2,
.landing-cta p {
  margin: 0;
}

/* The CTA is centred and full width, so this ran to 122 characters a line at
   1440 against roughly 50 everywhere else on the page. The last paragraph
   before the sign-up button is the worst place to make someone's eye track
   that far back.

   Paragraph only: the rule above covers the h2 as well, and .landing-cta h2
   carries its own bottom margin, which a shorthand here would silently drop
   and close up the gap above the button. */
.landing-cta p {
  max-width: 52ch;
  margin-inline: auto;
}

.landing-footer {
  display: flex;
  min-height: 4.5rem;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  color: var(--landing-muted);
  font-size: 0.82rem;
  border-top: 1px solid var(--landing-border);
}

.landing-footer strong {
  color: var(--landing-ink);
  font-family: var(--font-head);
  letter-spacing: 0.06em;
}

/* ---- Hover-capable refinements (app hover physics) ---- */
@media (hover: hover) and (pointer: fine) {
  .landing-button:hover {
    transform: translateY(-1px);
    box-shadow:
      0 13px 26px rgb(var(--shadow-rgb) / 0.32),
      inset 0 1px 0 rgb(var(--gloss-rgb) / 0.2),
      inset 0 -2px 0 rgb(var(--shade-rgb) / 0.16);
  }

  .landing-demo-monitor .landing-button:hover {
    transform: translateY(-1px);
    box-shadow:
      0 13px 26px rgb(var(--shadow-rgb) / 0.32),
      inset 0 1px 0 rgb(var(--gloss-rgb) / 0.2),
      inset 0 -2px 0 rgb(var(--shade-rgb) / 0.16);
  }

  .landing-demo-monitor .landing-button:active {
    transform: translateY(1px) scale(0.97);
    box-shadow:
      inset 0 2px 3px rgb(var(--shade-rgb) / 0.22),
      inset 0 1px 0 rgb(var(--gloss-rgb) / 0.05);
  }

  .landing-button-primary:hover {
    background: var(--landing-action-hover);
    color: var(--on-colour-button);
  }

  .landing-button-primary:active {
    background: color-mix(in srgb, var(--accent-button) 53%, var(--shade));
    color: var(--on-colour-button);
  }

  .landing-demo-monitor .landing-button-primary:hover {
    background: var(--landing-action-hover);
    color: var(--on-colour-button);
  }

  .landing-demo-monitor .landing-button-primary:active {
    background: color-mix(in srgb, var(--accent-button) 53%, var(--shade));
    color: var(--on-colour-button);
  }

  .landing-demo-monitor .landing-button-danger:hover {
    background: var(--action-danger-hover);
    color: var(--on-colour-button);
    border-color: var(--action-danger-hover);
  }

  .landing-demo-monitor .landing-button-danger:active {
    background: var(--action-danger-press);
    color: var(--on-colour-button);
    border-color: var(--action-danger-press);
  }

  .landing-demo-monitor .landing-demo-finding:hover {
    background: rgb(var(--surface-card-rgb) / 0.95);
  }
}

/* ---- Touch tap feedback (item 3) ---- */
/* hover:none devices (touch) never match the hover-capable block above, so
   the existing :active press in there never reaches them. This gives every
   button and the finding cards their own tap press, independent of the
   fine-pointer hover lift, which stays exactly as it was. */
@media (hover: none) {
  .landing-button:active,
  .landing-tab:active {
    transform: scale(0.97);
  }

  .landing-demo-monitor .landing-demo-finding:active,
  .landing-demo-monitor .landing-demo-pin:active,
  .landing-demo-monitor .landing-tab:active {
    transform: scale(0.97);
  }
}

/* ---- Responsive ---- */

@media (max-width: 767px) {
  .landing-hero {
    grid-template-columns: minmax(0, 1fr);
    min-height: auto;
    padding-block: 2.5rem 3.5rem;
  }

  .landing-hero-copy {
    max-width: 40rem;
  }

  .landing-evidence-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Stack the guardrail principle ("The verdict is yours.") above the evidence
     type list on phones, so the principle leads. */
  .landing-guardrails {
    order: -1;
  }

  .landing-outcome-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .landing-record .landing-outcome-copy {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }
}

@media (max-width: 480px) {
  .landing-hero,
  .landing-process,
  .landing-review-tools,
  .landing-ai,
  .landing-capabilities,
  .landing-reliability,
  .landing-record,
  .landing-outcome,
  .landing-evidence,
  .landing-cta,
  .landing-footer {
    width: calc(100% - 1.5rem);
  }

  .landing-hero {
    gap: 2rem;
    padding-block: 2rem 2.75rem;
  }

  .landing-demo-monitor {
    padding: 0.4rem;
  }

  .landing-demo-sheets {
    grid-template-columns: minmax(0, 1fr);
  }

  .landing-demo-monitor .landing-demo-pin::after {
    /* Pin scales via cqw now; just widen the tap halo where the pin renders
       smallest at phone widths. */
    inset: -18px;
  }

  .landing-panel-card {
    padding: var(--space-4);
  }

  .landing-demo-monitor .landing-demo-reject {
    font-size: 0.48rem;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .landing-process-list,
  .landing-capability-panel ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .landing-reliability-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .landing-hero,
  .landing-review-tools,
  .landing-ai,
  .landing-record { grid-template-columns: minmax(0, 1fr); }
  .landing-process-list,
  .landing-reliability-grid,
  .landing-capability-panel ul { grid-template-columns: minmax(0, 1fr); }
  .landing-button,
  .landing-capability-tab { min-height: 44px; }

  .landing-demo-monitor button {
    min-width: 44px;
    min-height: 44px;
  }

  /* Round pins keep a 44px hit box. Do not restyle ISSUE pills here — that
     rule used to replace ISSUE:1 / ISSUE:REV with a 17px dot. */
  .landing-demo-monitor .landing-demo-pin:not(.landing-demo-issue-pill) {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    margin: -22px 0 0 -22px;
    color: transparent;
    background: transparent;
    border: 0;
    font-size: 0;
    box-shadow: none;
  }

  .landing-demo-monitor .landing-demo-pin:not(.landing-demo-issue-pill)::before {
    content: "1";
    display: grid;
    width: 17px;
    height: 17px;
    place-items: center;
    color: var(--on-colour-button);
    background:
      radial-gradient(circle at 45% 35%, rgb(var(--overlay-rgb) / 0.38), transparent 44%),
      linear-gradient(180deg, var(--complete-button-hover), var(--complete-button) 64%, var(--complete-button-press));
    border: 1.5px solid rgb(var(--on-complete-rgb) / 0.85);
    border-radius: 50%;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 1px 1.5px rgb(var(--shade-rgb) / 0.55);
    box-shadow: 0 3px 8px rgb(var(--shadow-rgb) / 0.35), inset 0 1px 0 rgb(var(--gloss-rgb) / 0.26), inset 0 -2px 4px rgb(var(--shade-rgb) / 0.18);
  }

  .landing-demo-monitor .landing-demo-pin:not(.landing-demo-issue-pill)::after {
    display: none;
  }

  /* Zoom crops the drawing, so its viewport must remain reachable by native
     scroll/touch input. Keep the 100% fit and desktop containment unchanged. */
  .landing-demo-sheet:not(.is-landing-fit) .landing-sheet-viewport {
    overflow: auto;
    touch-action: pan-x pan-y;
  }

  /* The pill's size, its 44px target and its distance from its box come from the base rule
     (the pill is a fixed mark on the sheet, the same at every width); a phone only drops the
     entrance scale. */
  .landing-demo-monitor .landing-demo-pin.landing-demo-issue-pill,
  .landing-demo.is-armed .landing-demo-monitor .landing-demo-pin.landing-demo-issue-pill {
    color: var(--marker-color);
    font-size: inherit;
    background: transparent;
    transform: none;
  }

  .landing-demo-monitor .landing-demo-pin.landing-demo-issue-pill::before {
    content: none;
    display: none;
  }

  .landing-hero h1 {
    max-width: 100%;
    font-size: clamp(1.55rem, 7.4vw, 2.15rem);
  }

  .landing-page.is-reveal-armed [data-wipe-reveal] {
    mask-image: none;
  }

  .landing-text-link {
    display: inline-flex;
    min-height: 44px;
    min-width: 44px;
    align-items: center;
  }

  .landing-capability-switcher {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 44px;
  }

  .landing-capability-tab {
    height: 44px;
    padding: 0.25rem 0.5rem;
    font-size: 0.78rem;
    line-height: 1.1;
  }

  .landing-tool-facts,
  .landing-ai-signals {
    grid-template-columns: minmax(0, 1fr);
  }

  .landing-ai-signals {
    grid-template-rows: none;
    align-self: start;
  }

  .landing-process-list li + li {
    border-left: 0;
    border-top: 1px solid var(--landing-border);
  }

  .landing-reliability-grid {
    gap: 0;
  }

  .landing-reliability-grid p:nth-child(2) {
    border-top: 1px solid var(--landing-border);
  }

  .landing-record .landing-outcome-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .landing-process,
  .landing-review-tools,
  .landing-ai,
  .landing-capabilities,
  .landing-reliability,
  .landing-record,
  .landing-cta,
  .landing-footer {
    padding-block: 1.5rem;
  }

  .landing-hero {
    padding-block: 1.15rem;
  }

  .landing-process h2,
  .landing-review-tools h2,
  .landing-ai h2,
  .landing-capabilities h2,
  .landing-reliability h2,
  .landing-record h2,
  .landing-cta h2,
  .landing-outcome h2,
  .landing-evidence h2 {
    margin-bottom: 0.75rem;
  }

  .landing-outcome,
  .landing-evidence,
  .landing-po-demo {
    padding-block: 1.5rem;
  }

  .landing-footer {
    min-height: 0;
    padding-block: 1.15rem;
  }
}

/* ---- Desktop review workspace ---- */
/* At desktop width the monitor uses Review's real drawings-plus-panel
   hierarchy (22rem: the width at which the opened card's four buttons keep
   the app's 4px inside padding with "Pick on drawing" on one line). The landing content measure grows without leaking into the
   authenticated app-shell, which is a sibling rather than a descendant. */
@media (min-width: 1200px) {
  .landing-page {
    --content-measure: 84rem;
  }

  .landing-demo-body {
    grid-template-columns: minmax(0, 1fr) 22rem;
    align-items: stretch;
  }
}

@media (min-width: 1600px) {
  .landing-page {
    --content-measure: 96rem;
  }
}

/* ================================================================
   Motion layer

   Every rule below lives inside .landing-page, so the reduced-motion
   blanket at the end of this block neutralises all of it in one place -
   no per-effect media query, and nothing can be added here that escapes
   the kill switch by accident.

   Two hard constraints shape the choices:
   1. No transform that changes a measured box. The rendered eval checks
      44px hit targets and heading line counts with getBoundingClientRect
      and Range rects, and those run while animations may still be in
      flight. So: translate / opacity / filter only on anything that
      contains a control. No scale or rotate on ancestors of controls.
   2. The independent `translate` property, never `transform`. Landing
      markers already own `transform` (and the revision pill owns
      `translate` itself, which is why it is never a reveal target).
   ================================================================ */

.landing-page {
  /* Expo-out. Long tail, fast start: motion arrives and settles rather
     than easing in and out symmetrically, which is what separates this
     from a default fade. */
  --landing-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --landing-reveal-ms: 420ms;
}

/* Sales copy stays visible at every scroll position. The observer still adds
   .is-visible for interaction checks, but content never waits on motion. */
.landing-page.is-reveal-armed [data-reveal] {
  opacity: 1;
  translate: none;
  filter: none;
}

.landing-page.is-reveal-armed [data-reveal].is-visible {
  opacity: 1;
  translate: none;
  filter: none;
}

/* ---- Masked line reveal ----
   The signature move: each rendered line sits in its own overflow-hidden
   box and slides up from below it, so text is uncovered rather than
   faded. JS splits the heading into .landing-line blocks after layout,
   which is also why each line is display:block - it freezes the exact
   line breaks that were measured, so the split can never re-wrap the
   heading into a different number of lines than the browser chose. */
/* PS-042: at large text sizes one long word can be wider than the column.
   Let it break rather than be clipped sideways by the line mask, and clip
   the mask vertically only (the reveal slides up, never sideways). */
.landing-page [data-line-reveal] {
  overflow-wrap: break-word;
}

.landing-page .landing-line-mask {
  display: block;
  overflow-x: visible;
  overflow-y: clip;
  /* Section headings run at line-height 0.98, so the glyph box overflows the
     line box top and bottom. Only the bottom matters here: the clip would
     otherwise slice the descenders off a 'g' or a 'y'. Ascenders reach cap
     height, comfortably inside the top edge. */
  padding-bottom: 0.2em;
  margin-bottom: -0.2em;
}

/* ---- Wipe reveal (hero headline) ----
   A gradient mask sweeps across the text instead of moving it. Paint-only:
   no wrapper elements, no extra boxes, so the headline still measures as
   exactly the lines the browser laid out. That is the whole reason the hero
   uses this and the section headings use line masks. */
.landing-page.is-reveal-armed [data-wipe-reveal] {
  mask-image: linear-gradient(95deg, #000 0 34%, rgb(0 0 0 / 0) 62%);
  mask-size: 320% 100%;
  mask-position: 100% 0;
  mask-repeat: no-repeat;
  transition:
    opacity var(--landing-reveal-ms) var(--landing-ease) var(--reveal-delay, 0ms),
    translate var(--landing-reveal-ms) var(--landing-ease) var(--reveal-delay, 0ms),
    filter var(--landing-reveal-ms) var(--landing-ease) var(--reveal-delay, 0ms),
    mask-position 520ms var(--landing-ease) var(--reveal-delay, 0ms);
}

.landing-page.is-reveal-armed [data-wipe-reveal].is-visible {
  mask-position: 0 0;
}

@media (max-width: 767px) {
  .landing-page.is-reveal-armed [data-wipe-reveal],
  .landing-page.is-reveal-armed [data-wipe-reveal].is-visible {
    mask-image: none;
  }

  .landing-hero h1 {
    max-width: 100%;
    font-size: clamp(1.25rem, 6vw, 1.7rem);
    letter-spacing: 0.03em;
  }

  .landing-hero,
  .landing-process,
  .landing-review-tools,
  .landing-ai,
  .landing-capabilities,
  .landing-reliability,
  .landing-record,
  .landing-cta,
  .landing-outcome,
  .landing-evidence,
  .landing-po-demo {
    padding-block: 1.15rem;
  }
}

.landing-page.is-reveal-armed .landing-line {
  display: block;
  translate: none;
}

.landing-page.is-reveal-armed [data-line-reveal].is-visible .landing-line {
  translate: none;
}

/* A split heading carries its motion on the lines, so the block itself
   only fades. Without this the heading would translate twice. */
.landing-page.is-reveal-armed [data-line-reveal].is-split {
  --reveal-shift: 0px;
  --reveal-blur: 0px;
}

/* ---- Cursor ring ----
   difference blending inverts the ring against whatever it crosses, so a
   single element reads correctly on the near-black page AND on the white
   drawing sheets. Built by JS only for fine pointers with motion allowed;
   [hidden] until then. The system cursor is never hidden. */
/* ---- Pointer spotlight on fact cards ----
   One delegated pointermove writes --mx/--my; the glow is a composited
   pseudo-element, so hovering a card never triggers layout. */
.landing-page [data-spotlight] {
  position: relative;
  isolation: isolate;
  transition:
    translate 180ms var(--landing-ease),
    border-color 180ms var(--landing-ease),
    box-shadow 180ms var(--landing-ease);
}

.landing-page [data-spotlight]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    16rem circle at var(--mx, 50%) var(--my, 0%),
    rgb(var(--accent-wash-rgb) / 0.16),
    transparent 62%
  );
  border-radius: inherit;
  opacity: 0;
  transition: opacity 180ms var(--landing-ease);
}

@media (hover: hover) and (pointer: fine) {
  .landing-page [data-spotlight]:hover {
    translate: 0 -4px;
    border-color: rgb(var(--accent-rgb) / 0.45);
  }

  .landing-page [data-spotlight]:hover::after {
    opacity: 1;
  }
}

/* ---- Buttons: press, magnetism, shine ---- */
.landing-page .landing-button {
  /* `scale` as its own property: .landing-button already animates
     `transform`, and [data-magnetic] writes `translate`. Three
     independent channels, no clobbering. */
  transition:
    transform 140ms ease,
    scale 150ms ease-out,
    translate 220ms var(--landing-ease),
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease,
    box-shadow 140ms ease;
}

.landing-page .landing-button:active {
  scale: 0.96;
}

.landing-page .landing-button-primary {
  overflow: hidden;
}

/* One-pass shine on hover. Keyframes, not a transition: it is a one-shot
   sequence that should always play in full, never retarget. */
.landing-page .landing-button-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 30%,
    rgb(var(--overlay-rgb) / 0.28) 50%,
    transparent 70%
  );
  translate: -100% 0;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .landing-page .landing-button-primary:hover::after {
    animation: landing-button-shine 420ms var(--landing-ease);
  }
}

@keyframes landing-button-shine {
  from { translate: -100% 0; }
  to { translate: 100% 0; }
}

/* ---- Time saved ---- */
.landing-saved {
  position: relative;
  z-index: 1;
  width: min(calc(100% - clamp(1.5rem, 6vw, 5rem)), var(--content-measure));
  margin-inline: auto;
  padding-block: clamp(3.75rem, 6vw, 5.5rem);
}

.landing-saved h2 {
  max-width: 21ch;
  font-size: clamp(1.75rem, 3vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.landing-saved-lede {
  max-width: 56ch;
  margin-top: clamp(1.25rem, 3vw, 2rem);
  color: var(--landing-muted);
  font-size: clamp(0.98rem, 1.25vw, 1.1rem);
  line-height: 1.65;
}

.landing-saved-monitors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.75rem);
  align-items: start;
  margin-top: clamp(2.25rem, 5vw, 4rem);
}

.landing-saved-monitor {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 0.75rem;
  min-width: 0;
  margin: 0;
  background: transparent;
}

.landing-saved-monitor figcaption {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
}

.landing-saved-monitor figcaption strong {
  color: var(--landing-ink);
  font-family: var(--font-head);
  font-size: 0.95rem;
  font-weight: 700;
}

.landing-saved-monitor figcaption span {
  color: var(--landing-muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

.landing-saved-monitor-with figcaption :is(strong, span) {
  color: var(--landing-accent);
}

.landing-saved-monitor-stage {
  position: relative;
  display: grid;
  width: 100%;
  min-width: 0;
  aspect-ratio: 1280 / 683;
  overflow: clip;
  place-items: center;
  background: transparent;
}

.landing-saved-monitor img {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  object-fit: contain;
  transform: translate(-50%, -50%);
}

.landing-saved-monitor-details {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  align-content: start;
  padding: 0;
}

.landing-saved-monitor-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin: 0;
}

.landing-saved-monitor-stats > div {
  display: grid;
  gap: 0.3rem;
}

.landing-saved-monitor-stats dt {
  color: var(--landing-muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.landing-saved-monitor-stats dd {
  display: flex;
  gap: 0.65rem;
  align-items: baseline;
  margin: 0;
  color: var(--landing-ink);
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 2.4vw, 2.15rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 1;
}

.landing-saved-monitor-details > p {
  width: 100%;
  max-width: none;
  margin: 0;
  color: var(--landing-muted);
  font-size: 0.9rem;
  line-height: 1.55;
  text-wrap: pretty;
}

.landing-saved-context {
  margin-top: clamp(2rem, 4vw, 3rem);
}

.landing-saved-explanation {
  max-width: 88ch;
  margin: 0;
  color: var(--landing-muted);
  font-size: 1rem;
  line-height: 1.65;
  text-wrap: pretty;
}

@media (max-width: 720px) {
  .landing-saved-monitors {
    grid-template-columns: 1fr;
  }

  .landing-saved-monitor figcaption {
    align-items: start;
  }

}

/* ---- Proof numbers ---- */
.landing-proof {
  position: relative;
  z-index: 1;
  width: min(calc(100% - clamp(1.5rem, 6vw, 5rem)), var(--content-measure));
  margin-inline: auto;
  padding-block: clamp(2rem, 5vw, 3.25rem);
}

.landing-proof-row {
  display: grid;
  gap: clamp(1rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin: 0;
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-block: 1px solid var(--landing-border);
}

.landing-proof-row dt {
  color: var(--landing-ink);
  font-family: var(--font-head);
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  /* Tabular figures so a counting number never shifts the copy beside it. */
  font-variant-numeric: tabular-nums;
}

.landing-proof-row dd {
  max-width: 26ch;
  margin: 0.6rem 0 0;
  color: var(--landing-muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

/* ---- "Live demo" chip ---- */
.landing-demo-monitor .landing-demo-live {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  margin-left: auto;
  padding: 0.2rem 0.55rem;
  color: var(--landing-muted);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgb(var(--overlay-rgb) / 0.04);
  border: 1px solid rgb(var(--overlay-rgb) / 0.09);
  border-radius: 999px;
}

.landing-demo-monitor .landing-demo-live-dot {
  width: 6px;
  height: 6px;
  background: var(--landing-accent);
  color: var(--accent-ink);
  border-radius: 999px;
  animation: landing-live-pulse 2.4s ease-in-out infinite;
}

@keyframes landing-live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

/* ---- Auto tour (landing.js initLandingTour) ----
   The demo plays a tour of itself. The "Live demo, try it" chip names the beat while
   it plays, a pause / play pill sits beside it, a thin line along the title row shows
   how far through the loop it is, and a ghost pointer glides to each control the
   tour presses. The pointer, the line and the caption move by transform and opacity
   only; the pressed states below are the controls' own :active looks, held for the
   moment the tour presses them. */
.landing-monitor-bar {
  position: relative;
}

.landing-demo-monitor .landing-tour-toggle {
  display: inline-flex;
  flex: none;
  gap: 0.4rem;
  align-items: center;
  margin: 0 0 0 auto;
  padding: 0.2rem 0.6rem;
  color: var(--accent-strong);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  background: rgb(var(--accent-wash-rgb) / 0.16);
  border: 1px solid rgb(var(--accent-rgb) / 0.45);
  border-radius: 999px;
  cursor: pointer;
}

.landing-demo-monitor .landing-tour-toggle[hidden] {
  display: none;
}

.landing-demo-monitor .landing-tour-toggle:hover {
  background: rgb(var(--accent-wash-rgb) / 0.3);
}

.landing-demo-monitor .landing-tour-toggle:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--bg),
    0 0 0 4px var(--focus);
}

.landing-demo-monitor .landing-tour-toggle:active {
  transform: translateY(1px) scale(0.97);
}

.landing-demo-monitor .landing-tour-icon {
  display: block;
  width: 0.7rem;
  height: 0.7rem;
  fill: currentColor;
}

.landing-demo-monitor .landing-tour-icon-pause,
.landing-demo[data-landing-tour-state="playing"] .landing-tour-icon-play {
  display: none;
}

.landing-demo[data-landing-tour-state="playing"] .landing-tour-icon-pause {
  display: block;
}

/* With the pill beside it, the chip no longer needs to push itself to the right. */
.landing-demo-monitor .landing-tour-toggle:not([hidden]) + .landing-demo-live {
  margin-left: 0;
}

.landing-demo-monitor .landing-demo-live-text {
  display: inline-block;
}

.landing-demo-monitor .landing-demo-live-text.is-new {
  animation: landing-tour-caption-in 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes landing-tour-caption-in {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}

.landing-demo[data-landing-tour-state="playing"] .landing-demo-live,
.landing-demo[data-landing-tour-state="paused"] .landing-demo-live {
  color: var(--accent-strong);
  border-color: rgb(var(--accent-rgb) / 0.4);
}

/* The chip keeps one width while it plays, so the pill and status beside it stay put
   as the caption changes. */
@media (min-width: 768px) {
  .landing-demo[data-landing-tour-state="playing"] .landing-demo-live-text,
  .landing-demo[data-landing-tour-state="paused"] .landing-demo-live-text {
    /* The longest caption: "Load \00b7 Your file and supplied file". */
    min-width: 34ch;
  }
}

.landing-tour-progress {
  position: absolute;
  inset: auto var(--space-2) 0;
  height: 2px;
  overflow: hidden;
  background: rgb(var(--overlay-rgb) / 0.08);
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease-out;
}

.landing-demo[data-landing-tour-state="playing"] .landing-tour-progress,
.landing-demo[data-landing-tour-state="paused"] .landing-tour-progress {
  opacity: 1;
}

.landing-tour-progress-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--landing-accent);
  color: var(--accent-ink);
  transform: scaleX(0);
  transform-origin: left center;
}

/* The ghost pointer. Its tip is the point it presses; it sits above everything in the
   monitor and never takes a pointer event. Under reduced motion it is not drawn. */
.landing-demo-monitor .landing-tour-pointer {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 40;
  width: 0;
  height: 0;
  pointer-events: none;
  opacity: 0;
  transition:
    opacity 180ms ease-out,
    transform var(--tour-glide, 460ms) cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

.landing-demo-monitor .landing-tour-pointer.is-on {
  opacity: 0.94;
}

.landing-demo-monitor .landing-tour-pointer svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 14px;
  height: 20px;
  max-width: none;
  overflow: visible;
  fill: var(--text-strong);
  stroke: var(--bg-strong);
  stroke-linejoin: round;
  stroke-width: 1.4;
  filter: drop-shadow(0 2px 3px rgb(var(--shadow-rgb) / 0.5));
  transition: transform 90ms ease-out;
  transform-origin: 1px 1px;
}

.landing-demo-monitor .landing-tour-pointer.is-pressing svg {
  transform: scale(0.86);
}

.landing-demo-monitor .landing-tour-ripple {
  position: absolute;
  top: -15px;
  left: -15px;
  width: 30px;
  height: 30px;
  border: 2px solid var(--accent-strong);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.3);
}

.landing-demo-monitor .landing-tour-ripple.is-rippling {
  animation: landing-tour-ripple 520ms ease-out;
}

@keyframes landing-tour-ripple {
  0% { opacity: 0.9; transform: scale(0.3); }
  100% { opacity: 0; transform: scale(1.5); }
}

.landing-demo[data-landing-tour-motion="still"] .landing-tour-pointer {
  display: none;
}

/* "Your file" and "Supplied file" light up as the pointer passes over them. */
.landing-demo-monitor .landing-demo-sheet.is-tour-look {
  outline: 2px solid rgb(var(--accent-rgb) / 0.75);
  outline-offset: -2px;
}

.landing-demo-monitor .landing-demo-sheet-mfr.is-tour-look {
  outline-color: rgb(var(--complete-rgb) / 0.75);
}

/* Pressed by the tour: the control's own :active look. */
.landing-demo-monitor .is-tour-press {
  transform: translateY(1px) scale(0.97);
  filter: none;
}

.landing-demo-monitor .landing-zoom-button.is-tour-press,
.landing-demo-monitor .landing-expand.is-tour-press {
  color: var(--on-colour-button);
  background-image: linear-gradient(var(--accent-button-press), var(--accent-button-press));
}

.landing-demo-monitor .landing-demo-sheet-mfr .landing-zoom-button.is-tour-press,
.landing-demo-monitor .landing-demo-sheet-mfr .landing-expand.is-tour-press {
  color: var(--on-colour-button);
  background-image: linear-gradient(var(--complete-button-press), var(--complete-button-press));
}

.landing-demo-monitor .landing-zoom-button.is-tour-press,
.landing-demo-monitor .landing-expand.is-tour-press {
  transform: translateY(1px);
}

.landing-demo-monitor .landing-button.is-tour-press {
  box-shadow:
    inset 0 2px 3px rgb(var(--shade-rgb) / 0.22),
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.05);
}

.landing-demo-monitor .landing-button-primary.is-tour-press {
  background: color-mix(in srgb, var(--accent-button) 53%, var(--shade));
  color: var(--on-colour-button);
}

.landing-demo-monitor .landing-button-danger.is-tour-press {
  background: var(--action-danger-press);
  color: var(--on-colour-button);
  border-color: var(--action-danger-press);
}

.landing-demo-monitor .landing-demo-finding.is-tour-press {
  background: rgb(var(--surface-card-rgb) / 0.95);
}

/* The head of a size card is one transparent button, so its press shows as a wash. */
.landing-demo-monitor .landing-oa-toggle.is-tour-press {
  background: rgb(var(--overlay-rgb) / 0.07);
  filter: none;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .landing-page *,
  .landing-page *::before,
  .landing-page *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}

#landingPage,
#landingPage * {
  text-transform: uppercase;
}

/* ---- Section rhythm ----
   One token spaces every section from the hero to the call to action: each
   pads --landing-section-space top and bottom, so any two neighbours sit the
   same distance apart and no band is bigger than its neighbour. This is the
   last word on section padding; the per-section values earlier in this file
   (52px to 101px on desktop, 18px on phones) no longer apply. */
.landing-page {
  --landing-section-space: clamp(2rem, 5vw, 4rem);
}

.landing-page #landingMainContent > section {
  padding-block: var(--landing-section-space);
}

/* ---- Section names ----
   Each section the top bar links to is headed by the link's own words as its
   big heading ("How it works", "Review tools", ...), so the bar and the page
   share one set of names. The sentence that used to be the heading stays under
   it as the section's subtitle, in the page's lead style (.landing-lede, the
   hero's line under its headline). The heading is the first thing in its
   section, so a jump lands it one --space-4 under the bar: the offset is the
   bar plus --space-4, less the section's own padding and its 1px top rule. */
#landingMainContent > :is(#howReviewWorks, #reviewTools, #aiAssistance, #capabilities, #reviewRecord, #landingReliability) {
  scroll-margin-top: calc(var(--pillbar-inset) + var(--pillbar-bar-height) + var(--space-4) + env(safe-area-inset-top, 0px) - var(--landing-section-space) - 1px);
}

/* A name is one line: lift the 14ch cap the old sentences carried (it would
   wrap "Trained models" and "Review record"). Heading to subtitle is the hero's
   1rem, less the 0.2em the split heading's descender mask gives back, as on
   every other heading of the page. */
:is(#howReviewWorks, #reviewTools, #aiAssistance, #capabilities, #reviewRecord, #landingReliability) h2 {
  max-width: none;
  margin-bottom: var(--space-4);
}

/* Subtitle to what follows. Where the section's content comes straight after,
   it keeps the gap the sentence-as-heading used to leave there on desktop (the
   shared heading margin, 3rem at most), and on a phone the same --space-4 the
   heading leaves above it. Inside a copy column the body paragraph follows, a
   --space-4 below, as the PO section's lead and text sit. */
#howReviewWorks > .landing-lede,
#capabilities > .landing-lede,
#landingReliability > .landing-lede,
#reviewRecord .landing-section-head > .landing-lede {
  margin-bottom: clamp(1.75rem, 4vw, 3rem);
}

#reviewTools .landing-section-copy > .landing-lede,
#aiAssistance .landing-ai-copy > .landing-lede {
  margin-bottom: var(--space-4);
}

@media (max-width: 767px) {
  #howReviewWorks > .landing-lede,
  #capabilities > .landing-lede,
  #landingReliability > .landing-lede,
  #reviewRecord .landing-section-head > .landing-lede {
    margin-bottom: var(--space-4);
  }
}

/* The review record is a one-column grid; its heading and subtitle travel
   together so the grid's row gap does not open a gap between them. The row
   gap used to stack on the old heading's own margin (88px at 1440 from
   heading to panel); the subtitle's margin alone spaces the panel now, the
   same as every other section. */
.landing-section-head {
  min-width: 0;
}

#reviewRecord {
  row-gap: 0;
}

/* ---- Hero demo: the bigger monitor, the final decision, the tour's stages (2026-10-05) ---- */

/* The monitor is as wide as the top bar: from the bar's left edge to its right, up to 115rem.
   The hero copy keeps the left edge it had (the page's content measure), so the headline still
   lines up with every section below it. */
.landing-page {
  --landing-hero-max: 115rem;
}

@media (min-width: 768px) {
  .landing-hero {
    width: min(calc(100% - 2 * var(--pillbar-inset)), var(--landing-hero-max));
  }

  .landing-hero-copy {
    margin-inline: calc((100% - min(100% + 2 * var(--pillbar-inset) - clamp(1.5rem, 6vw, 5rem), var(--content-measure))) / 2);
  }
}

/* The tour opens and closes cards and swaps tabs while the page may be scrolled well away from
   the top of the demo (a phone). The browser's scroll anchoring would answer each change in
   height with a small nudge of the page, which is the page scrolling by itself. */
.landing-page {
  overflow-anchor: none;
}

/* The skip link lands here; focus moves to it without a ring. */
#landingMainContent:focus {
  outline: none;
}

/* ---- Tour stages ---- */
/* Load: the drawings arrive in their panes, YOUR file first. Until then a pane is empty. */
.landing-demo-monitor .landing-sheet-stage {
  transition: opacity 420ms var(--landing-ease), transform 560ms cubic-bezier(0.34, 1.32, 0.64, 1);
}

.landing-demo[data-landing-loading="both"] .landing-demo-monitor .landing-sheet-stage,
.landing-demo[data-landing-loading="manufacturer"] .landing-demo-monitor .landing-demo-sheet-mfr .landing-sheet-stage {
  opacity: 0;
  transform: translateY(0.6rem) scale(0.965);
}

.landing-demo[data-landing-loading="both"] .landing-demo-monitor .landing-sheet-viewport,
.landing-demo[data-landing-loading="manufacturer"] .landing-demo-monitor .landing-demo-sheet-mfr .landing-sheet-viewport {
  background: var(--bg);
}

/* ---- The auto tour's own scenes (landing.js initLandingTour) ----
   Everything below moves by transform and opacity only, stays inside the monitor and is
   aria-hidden. The reduced-motion block turns the animations off, and under reduced motion
   the script does not build these elements at all. */

/* Load: an empty slot in each pane, and a file card that drops into it. */
.landing-demo-monitor .landing-tour-drop {
  --drop-rgb: var(--accent-rgb);
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

.landing-demo-monitor .landing-tour-drop.is-manufacturer {
  --drop-rgb: var(--complete-rgb);
}

.landing-demo-monitor .landing-tour-drop.is-hint {
  opacity: 1;
  visibility: visible;
}

.landing-demo-monitor .landing-tour-drop.is-done {
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms ease, visibility 0s linear 300ms;
}

.landing-demo-monitor .landing-tour-slot {
  grid-area: 1 / 1;
  width: 31cqw;
  aspect-ratio: 4 / 5;
  border: 2px dashed rgb(var(--drop-rgb) / 0.5);
  border-radius: var(--radius-lg);
  background: rgb(var(--drop-rgb) / 0.06);
  animation: landing-tour-slot 1.4s ease-in-out infinite;
}

.landing-demo-monitor .landing-tour-drop.is-fall .landing-tour-slot {
  animation: none;
  opacity: 0.35;
}

@keyframes landing-tour-slot {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.03); }
}

.landing-demo-monitor .landing-tour-file {
  grid-area: 1 / 1;
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  box-sizing: border-box;
  width: 29cqw;
  padding: 0.7rem 0.6rem 0.6rem;
  background: var(--surface-raised);
  border: 1px solid rgb(var(--drop-rgb) / 0.65);
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 28px rgb(var(--shadow-rgb) / 0.42);
  opacity: 0;
}

.landing-demo-monitor .landing-tour-drop.is-fall .landing-tour-file {
  animation: landing-tour-drop 680ms cubic-bezier(0.3, 0, 0.2, 1) both;
}

/* Drop and settle: it falls in tilted, lands, bounces once and rests. */
@keyframes landing-tour-drop {
  0% { opacity: 0; transform: translateY(-150%) rotate(-10deg) scale(1.06); }
  16% { opacity: 1; }
  58% { opacity: 1; transform: translateY(0) rotate(3deg) scale(1); }
  74% { transform: translateY(-9%) rotate(-1.5deg) scale(1.01); }
  88% { transform: translateY(0) rotate(0.6deg) scale(0.995); }
  100% { opacity: 1; transform: none; }
}

.landing-demo-monitor .landing-tour-file svg {
  display: block;
  width: 2.1rem;
  height: auto;
  max-width: none;
  overflow: visible;
}

.landing-demo-monitor .landing-tour-doc-body {
  fill: rgb(var(--drop-rgb) / 0.88);
}

.landing-demo-monitor .landing-tour-doc-fold {
  fill: rgb(var(--overlay-rgb) / 0.4);
}

.landing-demo-monitor .landing-tour-doc-lines {
  fill: none;
  stroke: rgb(var(--on-colour-button-rgb) / 0.85);
  stroke-linecap: round;
  stroke-width: 2.4;
}

.landing-demo-monitor .landing-tour-file-name {
  max-width: 100%;
  overflow: hidden;
  color: var(--text-strong);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landing-demo-monitor .landing-tour-bar {
  display: block;
  width: 100%;
  height: 4px;
  overflow: hidden;
  background: rgb(var(--overlay-rgb) / 0.14);
  border-radius: 999px;
}

.landing-demo-monitor .landing-tour-bar i {
  display: block;
  width: 100%;
  height: 100%;
  background: rgb(var(--drop-rgb));
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: left center;
}

.landing-demo-monitor .landing-tour-drop.is-upload .landing-tour-bar i {
  transform: scaleX(1);
  transition: transform 820ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* The tick that says the file is in, as the app's load card shows. */
.landing-demo-monitor .landing-tour-file::after {
  content: "\2713";
  position: absolute;
  top: -0.45rem;
  right: -0.45rem;
  display: grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  color: var(--on-colour-button);
  background: var(--action-success);
  border-radius: 50%;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  opacity: 0;
  transform: scale(0);
}

.landing-demo-monitor .landing-tour-drop.is-upload .landing-tour-file::after {
  animation: landing-tour-badge 380ms cubic-bezier(0.34, 1.56, 0.64, 1) 780ms both;
}

@keyframes landing-tour-badge {
  from { opacity: 0; transform: scale(0); }
  to { opacity: 1; transform: scale(1); }
}

/* "Preparing review", while the pages are matched. */
.landing-demo-monitor .landing-tour-chip {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.28rem 0.7rem;
  color: var(--accent-strong);
  background: var(--surface-raised);
  border: 1px solid rgb(var(--accent-rgb) / 0.5);
  border-radius: 999px;
  box-shadow: 0 8px 18px rgb(var(--shadow-rgb) / 0.35);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, calc(-50% - 8px)) scale(0.92);
  transition: opacity 200ms ease, transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.landing-demo-monitor .landing-tour-chip.is-on {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.landing-demo-monitor .landing-tour-spin {
  display: block;
  width: 0.7rem;
  height: 0.7rem;
  border: 2px solid rgb(var(--accent-rgb) / 0.3);
  border-top-color: var(--accent-strong);
  border-radius: 50%;
  animation: landing-tour-spin 700ms linear infinite;
}

@keyframes landing-tour-spin {
  to { transform: rotate(360deg); }
}

/* The count ticks up: a small pop each time the status changes. */
.landing-demo-monitor .landing-demo-status.is-tick {
  animation: landing-tour-tick 380ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes landing-tour-tick {
  0% { transform: scale(0.8); opacity: 0.5; }
  60% { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Accept: the tick on the card springs in. */
.landing-demo-monitor .landing-oa-card[data-oa-mark="accepted"] .landing-oa-status {
  animation: landing-tour-tick-pop 460ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes landing-tour-tick-pop {
  0% { opacity: 0; transform: scale(0.2) rotate(-24deg); }
  100% { opacity: 1; transform: none; }
}

/* The overall-size badges and boxes land with a spring, one after the other. */
.landing-demo.is-armed .landing-demo-monitor .landing-oa-bubble {
  transition: opacity 240ms ease, scale 480ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.landing-demo.is-armed .landing-demo-monitor .landing-oa-bubble:not(.is-revealed) {
  scale: 0.35;
}

/* The stamp lands with a small thump of the sheet, and a few sparks round it. */
.landing-demo-monitor .landing-demo-sheet.is-tour-thump {
  animation: landing-tour-thump 380ms cubic-bezier(0.3, 0, 0.2, 1) 220ms;
}

@keyframes landing-tour-thump {
  0% { transform: none; }
  30% { transform: translateY(2px) scale(0.992); }
  100% { transform: none; }
}

.landing-demo-monitor .landing-tour-spark {
  position: absolute;
  z-index: 8;
  width: 0.38rem;
  height: 0.38rem;
  margin: -0.19rem 0 0 -0.19rem;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: landing-tour-spark 760ms cubic-bezier(0.2, 0.7, 0.3, 1) 240ms both;
}

.landing-demo-monitor .landing-tour-spark.is-0 {
  color: var(--on-colour-button);
  background: var(--action-success);
}

.landing-demo-monitor .landing-tour-spark.is-1 {
  color: var(--accent-ink);
  background: var(--accent-strong);
}

.landing-demo-monitor .landing-tour-spark.is-2 {
  color: var(--complete-ink);
  background: var(--complete-strong);
}


@keyframes landing-tour-spark {
  0% { opacity: 0; transform: translate(0, 0) scale(0.3); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--spark-x), var(--spark-y)) scale(0.9); }
}

/* The pair line and the note light up as the pointer reaches them. */
.landing-demo-monitor .landing-summary-points li.is-tour-look {
  color: var(--text-strong);
}

.landing-demo-monitor .landing-summary-points li.is-tour-look::before {
  box-shadow: 0 0 0 5px rgb(var(--accent-rgb) / 0.38);
}

.landing-demo-monitor .landing-demo-note.is-tour-look {
  color: var(--accent-strong);
}

/* ---- Review final decision (the app's #approvalConfirmationDialog) ---- */
.landing-demo-monitor .landing-decision-dialog {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: var(--space-3);
  background: color-mix(in srgb, var(--bg-strong) 78%, transparent);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.landing-demo-monitor .landing-decision-dialog[hidden] {
  display: none;
}

.landing-demo-monitor .landing-decision-card {
  display: grid;
  width: min(100%, 31rem);
  gap: var(--space-2);
  padding: var(--space-4) var(--space-4) var(--space-3);
  color: var(--text);
  text-align: center;
  background: linear-gradient(175deg, var(--surface-raised), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 48px -14px rgb(var(--shadow-rgb) / 0.55);
}

.landing-demo-monitor .landing-decision-label {
  margin: 0;
  color: var(--accent-strong);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: var(--track-caps);
}

/* The mark in the same tile as the top bar's (the app plays its animated logo here). */
.landing-demo-monitor .landing-decision-logo {
  justify-self: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: var(--radius-md);
}

.landing-demo-monitor .landing-decision-card h2 {
  margin: 0;
  color: var(--text-strong);
  font-family: var(--font-head);
  font-size: 1.15rem;
  line-height: 1.2;
}

.landing-demo-monitor .landing-decision-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: normal;
}

.landing-demo-monitor .landing-decision-card p[hidden],
.landing-demo-monitor .landing-decision-warning[hidden] {
  display: none;
}

.landing-demo-monitor .landing-decision-card .landing-decision-label {
  color: var(--accent-strong);
  letter-spacing: var(--track-caps);
}

.landing-demo-monitor .landing-decision-warning {
  padding: 0.5rem 0.65rem;
  color: var(--warning-text);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.4;
  background: rgb(var(--warning-rgb) / 0.12);
  border: 1px solid rgb(var(--warning-rgb) / 0.4);
  border-radius: var(--radius-md);
}

.landing-demo-monitor .landing-decision-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  margin-top: var(--space-1);
}

.landing-demo-monitor .landing-decision-actions .landing-button {
  flex: 1 1 8.5rem;
  min-height: 2.6rem;
  font-size: 0.72rem;
}

.landing-demo-monitor .landing-decision-actions .landing-button:disabled {
  opacity: 0.55;
  cursor: default;
}

.landing-demo-monitor .landing-decision-actions svg {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The tall, stacked monitor (below 1200px) keeps the card where the visitor is looking: it
   sticks under the top bar instead of sitting at the middle of a monitor that may be mostly
   off screen. */
@media (max-width: 1199px) {
  .landing-demo-monitor .landing-decision-dialog {
    place-items: start center;
  }

  .landing-demo-monitor .landing-decision-card {
    position: sticky;
    top: calc(var(--pillbar-inset) + var(--pillbar-bar-height) + var(--space-3) + env(safe-area-inset-top, 0px));
  }
}

/* ---- The title row stays in view on a stacked monitor ---- */
/* Below 1200px the monitor is tall: the sheets, then the review panel. Scrolled down to the
   panel, the title row (Pause, the caption naming the stage, the status) would be off
   screen while the tour works down there. It sticks under the top bar for as long as the
   monitor is in view. `overflow: clip` keeps the rounded corners without making the monitor
   a scroll container, which would stop it sticking. */
@media (max-width: 1199px) {
  .landing-demo-monitor {
    overflow: clip;
  }

  .landing-demo-monitor .landing-monitor-bar {
    position: sticky;
    top: calc(var(--pillbar-inset) + var(--pillbar-bar-height) + var(--space-2) + env(safe-area-inset-top, 0px));
    z-index: 25;
    padding-block: var(--space-1);
    background: var(--surface-raised);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 14px -10px rgb(var(--shadow-rgb) / 0.6);
  }
}

@media (max-width: 767px) {
  .landing-demo-monitor .landing-monitor-bar {
    flex-wrap: wrap;
    gap: 2px var(--space-2);
    font-size: 0.66rem;
  }

  /* The title takes a row of its own; Pause, the caption and the status share the next. */
  .landing-demo-monitor .landing-monitor-title {
    flex: 1 1 100%;
  }

  /* The caption takes the room the Pause control and the status leave, on one line. */
  .landing-demo-monitor .landing-demo-live {
    flex: 1 1 0;
    min-width: 0;
    margin-left: 0;
  }

  .landing-demo-monitor .landing-demo-live-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .landing-demo-monitor .landing-tour-toggle {
    margin-left: 0;
  }
}

/* ---- Account login ---- */
.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  background:
    radial-gradient(circle at 50% 0%, rgb(var(--accent-wash-rgb) / 0.22), transparent 26rem),
    var(--bg-strong);
}

.auth-gate[hidden] {
  display: none;
}

/* While the session check is in flight only the dark scrim shows — a
   logged-in user refreshing must never see the login card flash before the
   app returns (auth-pending is removed by applyAuthenticatedUser or
   showAuthGate, whichever the check lands on). */
.auth-pending .auth-gate .auth-card {
  visibility: hidden;
}

/* !important: while the landing page or the sign-in gate is showing, the signed-in
   app, header included, must never paint. Screen layouts set display on the shell
   with more specificity (for example #appShell#appShell:has(#loadScreen.is-active)
   { display: flex }, the Load screen fill), and without this the header drew over
   the landing nav at 641px and wider. */
.auth-locked .app-shell {
  display: none !important;
  pointer-events: none;
  filter: none;
}

.auth-locked .support-drawer,
.auth-locked .mini-help,
.auth-locked .shortcuts-page,
.auth-locked .support-launcher-dock {
  display: none;
  pointer-events: none;
}

/* Premium dark raised panel matching the landing monitor/panel language: the
   landing card's subtle top-highlight gradient over a deep charcoal, a faint
   blue underglow like the demo monitor, and a soft 1px hairline. Shared with
   the app's expired-session re-login (same dialog); appearance only. */
.auth-card {
  position: relative;
  isolation: isolate;
  width: min(500px, 100%);
  margin-block: auto;
  border-radius: var(--panel-radius);
  border: 1px solid rgb(var(--overlay-rgb) / 0.09);
  background:
    linear-gradient(180deg, rgb(var(--overlay-rgb) / 0.05), transparent 46%),
    linear-gradient(180deg, var(--surface-raised), var(--surface));
  padding: 1.5rem;
  box-shadow:
    0 30px 80px -22px rgb(var(--shadow-rgb) / 0.7),
    0 14px 34px -14px rgb(var(--accent-rgb) / 0.2),
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.07);
}

.auth-card.is-mvp-pro,
.pg-row.is-mvp-pro,
#logoutButton.is-mvp-pro {
  border-color: var(--warning);
  /* !important: .auth-gate:not([hidden]) .auth-card (higher specificity,
     defined later for the entrance pop) would otherwise win the animation
     shorthand and silently replace this loop with appvlr-card-enter. */
  animation: mvp-pro-card-flash 1.25s ease-in-out infinite alternate !important;
}

#logoutButton.is-mvp-pro {
  color: color-mix(in srgb, var(--tier-gold) 25%, var(--text-strong));
  background: linear-gradient(180deg, rgb(var(--tier-gold-rgb) / 0.18), color-mix(in srgb, color-mix(in srgb, var(--warning) 36%, var(--bg)) 34%, transparent));
}

.mvp-pro-welcome {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle, color-mix(in srgb, color-mix(in srgb, var(--warning) 21%, var(--bg)) 74%, transparent), rgb(var(--bg-strong-rgb) / 0.94) 68%);
  transition: opacity 420ms ease;
}

.mvp-pro-welcome[hidden] { display: none; }
.mvp-pro-welcome.is-active { opacity: 1; }

.mvp-pro-welcome-burst {
  position: absolute;
  width: min(78vw, 58rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg, rgb(var(--tier-gold-rgb) / 0.22) 0deg 2deg, transparent 2deg 14deg),
    radial-gradient(circle, rgb(var(--tier-gold-rgb) / 0.2), transparent 62%);
  animation: mvp-pro-welcome-burst 4.2s cubic-bezier(0.2, 0.75, 0.2, 1) both;
}

.mvp-pro-welcome-copy {
  position: relative;
  display: grid;
  justify-items: center;
  gap: clamp(0.65rem, 2vw, 1.2rem);
  padding: 2rem;
  text-align: center;
  filter: drop-shadow(0 0 2.4rem rgb(var(--tier-gold-rgb) / 0.48));
  animation: mvp-pro-welcome-reveal 4.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.mvp-pro-welcome-copy strong {
  color: var(--text-strong);
  font: 900 clamp(2.5rem, 8vw, 7rem)/0.92 var(--font-body);
  letter-spacing: -0.055em;
  text-shadow: 0 0 0.12em var(--gloss), 0 0 0.42em rgb(var(--tier-gold-rgb) / 0.8);
}

.mvp-pro-welcome-kicker,
.mvp-pro-welcome-name {
  color: var(--warning-text);
  font: 800 clamp(0.7rem, 1.5vw, 1rem)/1.2 var(--font-mono);
  letter-spacing: 0.24em;
}

.mvp-pro-welcome-name {
  color: var(--danger-text);
  font-size: clamp(1rem, 2.4vw, 1.65rem);
}

@keyframes mvp-pro-welcome-reveal {
  0% { opacity: 0; transform: scale(0.64) translateY(2rem); }
  18%, 76% { opacity: 1; transform: scale(1) translateY(0); }
  100% { opacity: 0; transform: scale(1.08) translateY(-0.5rem); }
}

@keyframes mvp-pro-welcome-burst {
  0% { opacity: 0; transform: scale(0.2) rotate(-12deg); }
  22%, 72% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.35) rotate(18deg); }
}

.mvp-pro-login-badge,
.tier-badge.is-mvp-pro {
  color: var(--text-strong);
  background: linear-gradient(180deg, color-mix(in srgb, var(--warning) 36%, var(--bg)), color-mix(in srgb, var(--text) 7%, var(--bg)));
  border: 1px solid rgb(var(--tier-gold-rgb) / 0.78);
  box-shadow: inset 0 1px 0 rgb(var(--gloss-rgb) / 0.18), 0 4px 14px rgb(var(--warning-rgb) / 0.26);
  animation: mvp-pro-label-shift 3.2s ease-in-out infinite alternate;
}

.mvp-pro-login-badge {
  display: none;
  margin-left: auto;
  padding: 0.22rem 0.58rem;
  border-radius: 999px;
  font: 800 0.64rem/1.4 var(--font-mono);
  letter-spacing: var(--track-caps);
  white-space: nowrap;
}

.auth-card.is-mvp-pro .mvp-pro-login-badge {
  display: inline-flex;
}

.mvp-pro-stars {
  position: absolute;
  inset: -0.58rem;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
}

.is-mvp-pro > .mvp-pro-stars {
  opacity: 1;
}

.mvp-pro-star {
  position: absolute;
  width: 0.82rem;
  aspect-ratio: 1;
  overflow: visible;
  background: var(--tier-gold);
  clip-path: polygon(50% 0%, 61% 36%, 100% 38%, 69% 60%, 80% 100%, 50% 76%, 20% 100%, 31% 60%, 0% 38%, 39% 36%);
  filter: drop-shadow(0 0 0.35rem rgb(var(--tier-gold-rgb) / 0.72));
  animation: mvp-pro-star-twinkle 900ms ease-in-out infinite alternate;
}

.mvp-pro-star:nth-child(1) { left: 8%; top: -0.08rem; }
.mvp-pro-star:nth-child(2) { right: 10%; top: -0.1rem; animation-delay: -180ms; }
.mvp-pro-star:nth-child(3) { left: -0.1rem; top: 29%; animation-delay: -360ms; }
.mvp-pro-star:nth-child(4) { right: -0.1rem; top: 36%; animation-delay: -540ms; }
.mvp-pro-star:nth-child(5) { left: 12%; bottom: -0.12rem; animation-delay: -240ms; }
.mvp-pro-star:nth-child(6) { right: 8%; bottom: -0.1rem; animation-delay: -420ms; }
.mvp-pro-star:nth-child(7) { left: 48%; top: -0.16rem; animation-delay: -600ms; }
.mvp-pro-star:nth-child(8) { right: 43%; bottom: -0.16rem; animation-delay: -720ms; }

.auth-card > :not(.mvp-pro-stars),
.pg-row > :not(.mvp-pro-stars) {
  position: relative;
  z-index: 3;
}

@keyframes mvp-pro-card-flash {
  from {
    border-color: var(--warning);
    box-shadow: 0 0 0 1px rgb(var(--warning-rgb) / 0.42), 0 0 24px rgb(var(--warning-rgb) / 0.32), inset 0 1px 0 rgb(var(--gloss-rgb) / 0.14);
  }
  to {
    border-color: var(--tier-gold);
    box-shadow: 0 0 0 2px rgb(var(--tier-gold-rgb) / 0.66), 0 0 42px rgb(var(--tier-gold-rgb) / 0.62), inset 0 1px 0 rgb(var(--gloss-rgb) / 0.3);
  }
}

@keyframes mvp-pro-star-twinkle {
  from { opacity: 0.48; transform: scale(0.72) rotate(-10deg); }
  to { opacity: 1; transform: scale(1.12) rotate(10deg); }
}

@keyframes mvp-pro-label-shift {
  from { color: var(--text-strong); }
  to { color: var(--danger-text); }
}

@media (prefers-reduced-motion: reduce) {
  .auth-card.is-mvp-pro,
  .pg-row.is-mvp-pro,
  #logoutButton.is-mvp-pro,
  .mvp-pro-welcome-copy,
  .mvp-pro-welcome-burst,
  .mvp-pro-star,
  .mvp-pro-login-badge,
  .tier-badge.is-mvp-pro {
    animation: none !important;
  }
}

/* Login navigation uses the same blue action surface and 44px target as the
   rest of the primary control set. */
.auth-back-button {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  width: fit-content;
  margin: 0 0 0 auto;
  padding: 0 0.9rem;
  color: var(--on-colour-button);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  background: linear-gradient(180deg, var(--accent-button-highlight), var(--accent-button-press) 48%, var(--accent-button-press));
  border: 1px solid rgb(var(--accent-border-rgb) / 0.45);
  border-radius: var(--radius-md);
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.auth-back-button::before {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.auth-back-button:hover {
  color: var(--on-colour-button);
  filter: none;
  background-image: linear-gradient(var(--accent-button-hover), var(--accent-button-hover));
  border-color: rgb(var(--accent-border-rgb) / 0.72);
}

.auth-back-button:active {
  transform: translateY(1px);
}

.auth-card-head {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.auth-card-head .mvp-pro-login-badge {
  margin-left: 0;
}

.auth-card-head .auth-back-button {
  margin-left: auto;
}

.auth-card-head img {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.7rem;
}

.auth-card :is(h1, h2) {
  margin: 0;
  font-family: var(--font-head);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.auth-copy {
  margin: 1rem 0 1.25rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.auth-switch {
  margin: 0;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.82rem;
}

.auth-switch[hidden] {
  display: none;
}

.auth-switch-link {
  background: none;
  border: 0;
  padding: 0;
  color: var(--accent-text);
  font: inherit;
  font-weight: 800;
  text-decoration: underline;
  cursor: pointer;
}

.auth-switch-link:hover {
  color: var(--accent-text);
}

.auth-form {
  display: none;
  gap: 0.875rem;
}

.auth-form.is-active {
  display: grid;
}

.auth-form > .primary-button,
.auth-form > .google-auth-button {
  min-height: 44px;
}

#authStatus {
  margin: var(--space-5) 0 0;
  text-align: center;
}

.auth-form label {
  display: grid;
  gap: var(--space-2);
  color: var(--text-muted);
  font-size: var(--label-size);
  font-weight: 800;
  text-transform: uppercase;
}

/* One line under the title when the page was opened from an invite link. */
.auth-invite-note {
  margin: 0;
}

.auth-form label.toggle {
  display: flex;
  align-items: center;
  font-weight: 600;
  text-transform: none;
}

/* Same square-with-tick look as every other checkbox in the app (the native
   control renders as a round circle on iOS and reads as a foreign element). */
.auth-form label.toggle input {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  flex: 0 0 1.6rem;
  width: 1.6rem;
  height: 1.6rem;
  min-height: 0;
  padding: 0;
  border: 1px solid rgb(var(--accent-rgb) / 0.65);
  border-radius: var(--radius-md);
  background: rgb(var(--bg-rgb) / 0.58);
}

.auth-form label.toggle input::before {
  content: "";
  width: 0.85rem;
  height: 0.85rem;
  background: var(--gloss);
  clip-path: polygon(14% 53%, 34% 72%, 82% 22%, 94% 34%, 35% 94%, 4% 64%);
  opacity: 0;
  transform: scale(0.72);
  transition:
    opacity 120ms ease,
    transform 120ms ease;
}

.auth-form label.toggle input:checked {
  background: linear-gradient(180deg, var(--accent-button-hover), var(--accent-button));
  color: var(--on-colour-button);
  border-color: rgb(var(--accent-border-rgb) / 0.85);
}

.auth-form label.toggle input:checked::before {
  opacity: 1;
  transform: scale(1);
}

.auth-form label.toggle input:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.auth-form input {
  width: 100%;
  min-height: 2.7rem;
  border-radius: var(--radius-md);
  border: 1px solid rgb(var(--overlay-rgb) / 0.12);
  background: rgb(var(--bg-rgb) / 0.72);
  box-shadow: inset 0 1px 2px rgb(var(--shade-rgb) / 0.32);
  color: var(--text);
  padding: 0 0.9rem;
  font: 600 0.95rem var(--font-body);
  /* Never uppercase typed values: two similar-looking names look identical
     at a glance, which hid a real login typo (2026-07-16). Labels stay
     uppercase; what the user types renders as typed. */
  text-transform: none;
}

.account-avatar {
  width: 1.65rem;
  height: 1.65rem;
  flex: 0 0 1.65rem;
  object-fit: cover;
  border: 1px solid rgb(var(--overlay-rgb) / 0.45);
  border-radius: 50%;
  box-shadow: 0 4px 12px rgb(var(--shadow-rgb) / 0.35);
}

.account-avatar[hidden] {
  display: none;
}

/* Identity row: the avatar IS the picker (click it to change, camera overlay
   on hover/focus), a quiet Remove underneath, and the name fields beside it.
   Replaces the old avatar + two-pill-buttons strip. */
.profile-identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: flex-start;
  gap: var(--space-5);
  width: 100%;
}

.profile-avatar-editor {
  display: grid;
  justify-items: center;
  gap: 2mm;
  margin-top: calc(0.984rem + 0.4rem);
}

.manual-dimension-row[data-manual-dim-result="match"],
.oa-material-card.is-material-status-ok {
  color: var(--text-strong);
  border-color: var(--success);
  background: rgb(var(--success-rgb) / 0.3);
  box-shadow: inset 0 0 0 1px var(--success);
}

.manual-dimension-row[data-manual-dim-result="mismatch"],
.oa-material-card.is-material-status-bad {
  color: var(--text-strong);
  border-color: var(--danger);
  background: rgb(var(--danger-rgb) / 0.3);
  box-shadow: inset 0 0 0 1px var(--danger);
}

.manual-dimension-row:is([data-manual-dim-result="unsure"], [data-manual-dim-result="needs_input"], [data-manual-dim-result="missing"], [data-manual-dim-result="ambiguous"]),
.oa-material-card.is-material-status-unsure {
  color: var(--text-strong);
  border-color: var(--warning);
  background: rgb(var(--warning-rgb) / 0.3);
  box-shadow: inset 0 0 0 1px var(--warning);
}

.oa-material-card :is(.manual-dimension-status, .oa-material-value, input, textarea, label > span, .oa-material-counterpart-hint) {
  color: var(--text-strong);
}

.manual-dimension-row label:has([data-manual-dim-input="reference"]) > span,
.oa-material-side[data-side="reference"] .oa-material-side-label {
  color: var(--accent-strong);
}

.manual-dimension-row label:has([data-manual-dim-input="manufacturer"]) > span,
.oa-material-side[data-side="manufacturer"] .oa-material-side-label {
  color: color-mix(in srgb, var(--complete) 31%, var(--text-strong));
}

.manual-dimension-row[data-manual-dim-result]:not([data-manual-dim-result="ignored"]) textarea::placeholder,
.oa-material-card textarea::placeholder {
  color: var(--text-strong);
  opacity: 1;
}

.oa-material-collapse {
  min-width: 44px;
  min-height: 44px;
  margin-left: auto;
  padding: 0.2rem 0.42rem;
  color: var(--text-strong);
  font: inherit;
  font-size: 0.58rem;
  font-weight: 800;
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}

.oa-material-collapse:hover {
  border-color: transparent;
  background: transparent;
}

.oa-material-collapse[aria-expanded="true"] .manual-dimension-chevron {
  transform: rotate(225deg);
}

.oa-material-collapse:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.profile-avatar-frame {
  position: relative;
  display: block;
  width: 6rem;
  height: 6rem;
  overflow: hidden;
  border: 2px solid rgb(var(--accent-rgb) / 0.55);
  border-radius: 50%;
  box-shadow: 0 10px 24px rgb(var(--shadow-rgb) / 0.35);
  cursor: var(--cursor-pointer);
}

.profile-avatar-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-avatar-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 0.15rem;
  justify-items: center;
  color: var(--text-strong);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  background: rgb(var(--bg-rgb) / 0.62);
  opacity: 0;
  transition: opacity 140ms ease;
}

.profile-avatar-overlay svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linejoin: round;
}

.profile-avatar-frame:hover .profile-avatar-overlay,
.profile-avatar-editor:has(#profileAvatarInput:focus-visible) .profile-avatar-overlay {
  opacity: 1;
}

.profile-avatar-editor:has(#profileAvatarInput:focus-visible) .profile-avatar-frame {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Remove is a quiet text action, not a boxed button: it competes with
   nothing and disappears into the column when there is no picture. */
.profile-avatar-remove {
  position: relative;
  min-width: 4.5rem;
  min-height: 2.75rem;
  padding: 0.2rem 0.45rem;
  color: var(--danger-text);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.profile-avatar-remove:hover:not(:disabled) {
  color: var(--danger-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.profile-avatar-remove:disabled {
  opacity: 0.35;
}

.profile-identity-fields {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  width: min(36rem, 100%);
  min-width: 0;
  max-width: 36rem;
  justify-self: start;
}

.profile-identity-fields > label + label {
  margin-top: 0.7rem;
}

#settingsDialog .settings-body .profile-identity-fields input:not([type="checkbox"]):not([type="color"]) {
  width: 100%;
  max-width: 36rem;
  min-height: 3.25rem;
}

@media (max-width: 640px) {
  .profile-identity {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    align-items: center;
  }

  .profile-identity-fields {
    width: 100%;
  }

  .profile-avatar-editor {
    margin-top: 0;
  }
}

.change-password-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  width: min(32rem, 100%);
  min-width: 0;
  padding: 0;
  border: 0;
}

#settingsDialog .settings-body .change-password-fields input:not([type="checkbox"]):not([type="color"]) {
  width: 100%;
  max-width: none;
}

#settingsPanelSecurity #changePasswordButton {
  justify-self: start;
}

@media (max-width: 640px) {
  .change-password-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

.google-auth-button {
  min-height: 2.65rem;
  border-radius: var(--radius-md);
  border: 1px solid rgb(var(--overlay-rgb) / 0.16);
  background: var(--paper);
  color: var(--ink-dark);
  font: 800 0.82rem var(--font-body);
  text-transform: uppercase;
}

.google-auth-button[hidden] {
  display: none;
}

/* ---- Page shell (shared by the team and account pages) ---- */
.pg-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 18% 12%, rgb(var(--accent-wash-rgb) / 0.16), transparent 28rem),
    radial-gradient(circle at 86% 18%, rgb(var(--success-rgb) / 0.12), transparent 24rem),
    linear-gradient(180deg, var(--surface-raised) 0%, var(--bg) 100%);
  color: var(--text);
  overflow-y: auto;
}

/* The shell pages (team, profile) have no .app-shell, so they never get the header
   band. Kept as a guard so a band re-added to body can't reappear here. */
.pg-page::before {
  display: none;
}

.pg-shell {
  width: min(1240px, calc(100vw - 2rem));
  margin: 0 auto;
  padding: clamp(1rem, 2vw, 2rem) 0 2rem;
}

.pg-hero,
.pg-login-card,
.pg-panel {
  border: 1px solid rgb(var(--overlay-rgb) / 0.1);
  border-radius: var(--panel-radius);
  background: linear-gradient(180deg, rgb(var(--overlay-rgb) / 0.075), rgb(var(--overlay-rgb) / 0.035));
  box-shadow: inset 0 1px 0 rgb(var(--gloss-rgb) / 0.08), 0 16px 40px rgb(var(--shadow-rgb) / 0.28);
}

.pg-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 1.2rem;
  margin-bottom: var(--space-4);
}

.pg-open-app-button {
  display: inline-flex;
  align-items: center;
  min-width: 7.5rem;
  min-height: 2.45rem;
  justify-content: center;
  padding-inline: 1rem;
  white-space: nowrap;
}

.pg-open-app-button,
#privateNavButtonB {
  text-decoration: none;
}

.pg-hero h1,
.pg-login-card h2,
.pg-panel h2 {
  margin: 0;
  font-family: var(--font-head);
  letter-spacing: 0;
}

.pg-login-card {
  max-width: 460px;
  padding: 1.2rem;
}

.pg-dashboard {
  display: grid;
  gap: var(--space-4);
}

.pg-tabs {
  position: sticky;
  top: var(--space-2);
  z-index: 10;
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2);
  background: rgb(var(--bg-rgb) / 0.92);
  border: 1px solid rgb(var(--overlay-rgb) / 0.1);
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 30px rgb(var(--shadow-rgb) / 0.32);
  backdrop-filter: blur(14px);
}

.pg-tab {
  display: inline-flex;
  min-height: 2.8rem;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--text-muted);
  background: rgb(var(--overlay-rgb) / 0.04);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font: 800 0.78rem var(--font-body);
  text-transform: uppercase;
}

.pg-tab.is-active {
  color: var(--on-colour-button);
  background: linear-gradient(180deg, var(--accent-button-hover), var(--accent-button) 48%, var(--accent-button-press));
  border-color: rgb(var(--accent-border-rgb) / 0.56);
  box-shadow: 0 8px 20px rgb(var(--accent-rgb) / 0.3), inset 0 1px 0 rgb(var(--gloss-rgb) / 0.24);
}

.pg-tab-badge {
  min-width: 1.45rem;
  flex: 0 0 auto;
  padding: 0.15rem 0.42rem;
  color: var(--danger-ink);
  background: var(--danger);
  border-radius: 999px;
  font-size: 0.68rem;
}

.pg-section[hidden] {
  display: none;
}

.approval-receipts-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.approval-receipts-status-row .settings-status {
  flex: 1 1 auto;
}

.ghost-button.compact.approval-receipts-retry {
  min-height: 44px;
  flex: 0 0 auto;
}

.pg-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-3);
}

.pg-stat {
  min-height: 6.2rem;
  padding: 1rem;
  border: 1px solid rgb(var(--overlay-rgb) / 0.1);
  border-radius: var(--radius-lg);
  background: rgb(var(--bg-rgb) / 0.44);
  box-shadow: inset 0 1px 0 rgb(var(--gloss-rgb) / 0.07);
}

/* Alerts being off means feedback arrives and nobody hears about it, so the
   card says so in the warning colour rather than reading as just another
   count. Border and text only - no fill, so it stays a stat card and not a
   banner competing with the numbers beside it. */
.pg-stat.is-warning {
  border-color: rgb(var(--warning-rgb) / 0.55);
}

.pg-stat.is-warning strong {
  color: var(--warning-text);
}

.pg-stat span{
  display: block;
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.pg-stat strong {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--font-head);
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1;
}

.pg-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-4);
}

.pg-panel {
  padding: 1rem;
}

.pg-panel-wide {
  grid-column: 1 / -1;
}

.pg-form {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.pg-form label {
  display: grid;
  gap: var(--space-2);
  color: var(--text-muted);
  font-size: var(--label-size);
  font-weight: 800;
  text-transform: uppercase;
}

.pg-form input {
  width: 100%;
  min-height: 2.65rem;
  border-radius: var(--radius-md);
  border: 1px solid rgb(var(--overlay-rgb) / 0.14);
  background: rgb(var(--bg-rgb) / 0.58);
  color: var(--text);
  padding: 0 0.85rem;
  font: 600 0.95rem var(--font-body);
}

/* PS-057: 44px fields on the shell page (the team page keeps its own). */
.pg-page:not(.team-page) .pg-form input {
  min-height: 2.75rem;
}

.pg-controls {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) auto;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.pg-controls input {
  min-height: 2.75rem;
  border-radius: var(--radius-md);
  border: 1px solid rgb(var(--overlay-rgb) / 0.14);
  background: rgb(var(--bg-rgb) / 0.58);
  color: var(--text);
  padding: 0 0.85rem;
  font: 700 0.86rem var(--font-body);
}

.pg-filter {
  display: flex;
  min-width: 0;
  border: 1px solid rgb(var(--overlay-rgb) / 0.12);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.pg-filter-button {
  flex: 1 1 0;
  min-height: 2.75rem;
  border: 0;
  border-right: 1px solid rgb(var(--overlay-rgb) / 0.1);
  background: rgb(var(--overlay-rgb) / 0.04);
  color: var(--text-muted);
  padding: 0 0.8rem;
  font: 800 0.68rem var(--font-body);
  text-transform: uppercase;
}

.pg-filter-button:last-child {
  border-right: 0;
}

.pg-filter-button.is-active {
  background: linear-gradient(180deg, var(--accent-button-hover), var(--accent-button));
  color: var(--on-colour-button);
}

.pg-invite-result {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  margin-top: var(--space-3);
  padding: 0.65rem;
  border-radius: var(--radius-md);
  background: rgb(var(--accent-wash-rgb) / 0.12);
  border: 1px solid rgb(var(--accent-rgb) / 0.28);
}

.pg-invite-result span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--mono-font);
  color: var(--text);
}

.pg-list {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.pg-row {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) minmax(13rem, 1.1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: 0.72rem;
  border-radius: var(--radius-md);
  background: rgb(var(--bg-rgb) / 0.46);
  border: 1px solid rgb(var(--overlay-rgb) / 0.08);
}

.pg-row.approval-receipt-row {
  grid-template-columns: minmax(10rem, 0.75fr) minmax(13rem, 1.25fr) minmax(10rem, 1fr);
  align-items: start;
}

/* Team approval receipts: the fingerprint and receipt id are long unbroken
   strings. They wrap inside the card and the card stacks on a narrow screen,
   so the page never scrolls sideways. */
.pg-row.team-receipt-row > * {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  .pg-row.team-receipt-row {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .pg-row.team-receipt-row > :is(strong, span) {
    white-space: normal;
  }
}

.pg-row.is-banned {
  border-color: rgb(var(--danger-rgb) / 0.32);
  background: color-mix(in srgb, color-mix(in srgb, var(--danger) 30%, var(--bg)) 28%, transparent);
}

.pg-row strong,
.pg-row span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pg-row span,
.pg-row em {
  color: var(--text-muted);
  font-style: normal;
  font-size: 0.78rem;
}

.pg-open-app-button:hover {
  color: var(--on-colour-button);
  background: linear-gradient(180deg, var(--accent-button-highlight), var(--accent-button-hover) 44%, var(--accent-button));
  border-color: rgb(var(--accent-border-rgb) / 0.72);
}

.settings-status.is-error {
  color: var(--danger-strong);
}

/* Inline field errors (PS-078, PS-104, PS-129) use the same error colour. */
.field-error.is-error {
  margin: 0.25rem 0 0;
  color: var(--danger-strong);
  font-size: 0.8rem;
}

@media (max-width: 1080px) {
  .pg-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pg-grid,
  .pg-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .pg-controls{
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .pg-hero,
  .pg-invite-result {
    align-items: stretch;
    flex-direction: column;
  }
  .pg-tabs {
    overflow-x: auto;
  }
  .pg-tab {
    min-width: 7rem;
  }
}

/* PDF contact owns the gesture. Page scrolling resumes after the final touch
   releases, including after a pinch collapses back to one finger. */
.review-sheet-frame {
  touch-action: none;
}

html.pdf-touch-active,
body.pdf-touch-active {
  overflow: hidden;
  overscroll-behavior: none;
}

.stamp-frame:has(.stamp-sheet-scroll),
.save-preview-frame:has(.save-preview-scroll),
.fullscreen-sheet {
  touch-action: none;
}

body.fullscreen-open,
body.settings-open,
body.review-queue-open {
  overflow: hidden;
}

.fullscreen-viewer,
.settings-body {
  overscroll-behavior: contain;
}

@media (max-width: 640px) {
  .settings-panel {
    padding: 0;
    place-items: stretch;
    min-height: 100dvh;
  }

  .settings-panel form {
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: 100dvh;
    border: 0;
    border-radius: var(--panel-radius);
    transform: none;
  }

  .stamp-library-dialog {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    border: 0;
    border-radius: var(--panel-radius);
  }

  .settings-panel.is-open form {
    animation: none;
  }

  .settings-panel form > header {
    padding: calc(var(--space-4) + env(safe-area-inset-top, 0px)) var(--space-4) var(--space-3);
  }

  .settings-tabs {
    display: none;
  }

  .settings-tabs::-webkit-scrollbar {
    display: none;
  }

  .settings-tab {
    flex: 1 0 auto;
    min-height: 2.75rem;
    padding-inline: var(--space-3);
    font-size: 0.82rem;
  }

  .settings-body {
    display: block;
    padding: var(--space-4);
    padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
    margin-right: 0;
    overflow-y: auto;
    scrollbar-gutter: auto;
  }

  .settings-tab-panel,
  .settings-section {
    gap: var(--space-4);
  }

  .settings-section {
    padding: var(--space-4);
    margin-bottom: var(--space-4);
  }

  #settingsDialog.is-settings-stamp .settings-body,
  [data-settings-panel="saving"].settings-section {
    display: block;
  }

  #settingsDialog.is-settings-stamp .stamp-settings,
  #settingsDialog.is-settings-stamp .date-position-section {
    padding: var(--space-4);
    margin-bottom: var(--space-4);
  }

  #settingsDialog.is-settings-stamp .stamp-coverflow {
    height: clamp(18rem, 42vh, 22rem);
  }

  #settingsDialog.is-settings-stamp .stamp-cover {
    width: min(15rem, calc(100% - 3rem));
    height: min(14rem, calc(100% - 2.5rem));
  }

  #settingsDialog.is-settings-stamp .date-pos-stage {
    width: min(13rem, 72%);
  }

  .date-pos-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .settings-section-header {
    display: grid;
    gap: var(--space-2);
    align-items: start;
  }

  .settings-section-header span {
    max-width: none;
    font-size: 0.9rem;
  }

  .settings-panel label {
    gap: var(--space-2);
    font-size: 0.85rem;
  }

  .settings-panel input,
  .settings-panel select,
  .settings-panel textarea {
    min-height: 2.85rem;
    font-size: 1rem;
  }

  .settings-save-bar {
    padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  }

  .settings-save-bar .primary-button,
  .settings-save-bar .settings-cancel-button {
    min-height: 2.85rem;
    flex: 1 1 0;
  }
}
.orientation-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin: var(--space-2) 0 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid rgb(var(--warning-rgb) / 0.5);
  border-radius: var(--radius-sm);
  background: rgb(var(--warning-rgb) / 0.12);
}

.orientation-status[hidden] {
  display: none;
}

@media (max-width: 640px) {
  .orientation-status {
    align-items: stretch;
    flex-direction: column;
  }

}

.revision-prompt-card {
  max-width: 38rem;
}

.revision-prompt-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.revision-prompt-fields label:last-child {
  grid-column: 1 / -1;
}

@media (max-width: 640px) {
  .revision-prompt-fields {
    grid-template-columns: 1fr;
  }
}

.revision-review-panel {
  padding: var(--space-3);
  overflow: auto;
}

/* Supplied requirements extend the existing load and modal surfaces without
   changing the drawing source panel or its role colours. */
.drop-zone > .supplied-source-tabs {
  position: relative;
  z-index: 3;
  grid-area: 1 / 1;
  top: -0.3rem;
  right: auto;
  justify-self: end;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(62%, 23.5rem);
  min-height: 44px;
  margin-bottom: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.supplied-source-card {
  --drop-zone-ant-rgb: var(--complete-rgb);
  --drop-zone-ant: rgb(var(--drop-zone-ant-rgb));
  position: relative;
  min-width: 0;
  border-radius: var(--panel-radius);
}

.supplied-source-card:has(#manualSpecsPanel:not([hidden])) {
  --drop-zone-ant-rgb: var(--pane-raeco-rgb);
}

.supplied-source-card:has(.supplied-source-panel:not([hidden]).has-file) > .supplied-source-ants {
  display: block;
}

@media (min-width: 1181px) {
  .load-grid > .drop-zone,
  .supplied-source-card {
    min-height: 0;
    height: clamp(26rem, 38vh, 30rem);
  }

  .supplied-source-panel {
    height: 100%;
  }

  .supplied-files-panel {
    overflow: hidden;
  }

  /* Two classified files add a confirmation list to the fixed-height load
     card. Compact only that populated state so every row remains visible
     without changing the empty blue/purple card alignment. */
  .supplied-files-panel.has-file {
    row-gap: var(--space-1);
    padding-block: var(--space-4);
  }

  .supplied-source-tabs .findings-tab {
    min-height: 44px;
    padding-block: 0;
  }
}

.supplied-source-tabs .findings-tab {
  width: 100%;
}

.supplied-source-tabs .findings-tab:not(.is-active) {
  color: var(--text-muted);
  background: var(--surface-muted);
  border-color: rgb(var(--overlay-rgb) / 0.075);
}

.supplied-source-tab[data-supplied-source="files"].is-active {
  background:
    radial-gradient(circle at 45% 25%, rgb(var(--overlay-rgb) / 0.18), transparent 44%),
    linear-gradient(180deg, var(--complete-button-hover), var(--complete-button) 58%, var(--complete-button-press));
  color: var(--on-colour-button);
  border-color: rgb(var(--complete-rgb) / 0.72);
  box-shadow:
    0 8px 18px rgb(var(--complete-rgb) / 0.24),
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.22);
}

.supplied-source-tab[data-supplied-source="manual"].is-active {
  background:
    radial-gradient(circle at 45% 25%, rgb(var(--overlay-rgb) / 0.18), transparent 44%),
    linear-gradient(180deg, var(--action-success-hover), var(--action-success) 58%, color-mix(in srgb, var(--action-success) 76%, var(--shade)));
  color: var(--on-colour-button);
  border-color: rgb(var(--pane-raeco-rgb) / 0.72);
  box-shadow:
    0 8px 18px rgb(var(--pane-raeco-rgb) / 0.24),
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.22);
}

.supplied-source-panel {
  width: 100%;
  box-sizing: border-box;
}

.supplied-files-panel .file-button,
.supplied-files-panel .file-clear-button {
  width: auto;
  justify-self: start;
}

.drop-zone .file-button,
.drop-zone .file-clear-button {
  width: min(13.5rem, 100%);
}

.supplied-files-panel {
  grid-template-columns: minmax(0, 1fr);
}

.supplied-files-panel > h3 {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  width: max-content;
  max-width: 36%;
  white-space: nowrap;
}

.supplied-files-panel > p:first-of-type {
  grid-column: 1;
}

.supplied-files-panel > .fake-file {
  grid-column: 1;
}

.supplied-files-panel > .file-button {
  grid-column: 1;
}

.supplied-files-panel > .supplied-source-status {
  grid-column: 1;
}

.supplied-files-panel > .file-clear-button {
  grid-column: 1;
}

.supplied-source-panel[hidden] {
  display: none;
}

.supplied-source-panel.supplied-document-panel {
  overflow: hidden;
}

.supplied-document-panel > h3 {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  width: max-content;
  max-width: 36%;
}

.supplied-document-panel > p:first-of-type {
  grid-column: 1;
}

.supplied-document-panel > .manual-intake {
  grid-column: 1;
}

.supplied-source-panel .supplied-text-label {
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 700;
}

.supplied-source-panel textarea {
  width: 100%;
  min-width: 0;
  min-height: 8rem;
  box-sizing: border-box;
  padding: var(--space-3);
  resize: vertical;
  color: var(--text);
  line-height: 1.45;
  text-transform: none;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.manual-intake {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(8rem, 1fr) auto auto;
  gap: var(--space-2);
  width: 100%;
  min-height: 0;
  overflow: hidden;
}

@media (min-width: 1181px) {
  .supplied-source-panel.supplied-document-panel {
    row-gap: var(--space-2);
  }

  .manual-intake {
    gap: var(--space-1);
    grid-template-rows: auto minmax(4rem, 1fr) auto auto;
  }

  .manual-intake > textarea {
    height: 4rem;
    min-height: 4rem;
    resize: none;
  }

}

.manual-organise-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: var(--space-2);
  align-items: center;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  background: rgb(var(--pane-raeco-rgb) / 0.08);
  border: 1px solid rgb(var(--pane-raeco-rgb) / 0.34);
  border-radius: var(--radius-md);
}

.manual-organise-result[hidden] {
  display: none;
}

.manual-organise-result .supplied-source-status {
  min-width: 0;
}

.manual-organise-result #splitRequirementsButton {
  width: auto;
}

@media (min-width: 1181px) {
  .manual-organise-result {
    padding: 0;
    background: transparent;
    border: 0;
  }
}

.supplied-source-panel .supplied-source-status {
  min-height: 1.2rem;
  margin: 0;
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.supplied-source-panel .supplied-source-status.is-error {
  color: var(--danger-text);
}

.supplied-source-panel .supplied-source-status.is-success {
  color: var(--success-text);
}

.supplied-source-panel .supplied-source-status:empty {
  display: none;
}

.supplied-files-panel .supplied-source-status:empty {
  display: none;
}

.requirements-confirmation {
  place-items: stretch;
  padding: clamp(0.5rem, 1vw, 1rem);
}

.requirements-confirmation .requirements-confirmation-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(26rem, 32rem);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  padding: 0;
  overflow: hidden;
  text-transform: none;
}

/* Full-width top bar: the "ITEM REQUIREMENTS" heading spans the drawing view and
   the panel as a single header, in the app's charcoal/blue uppercase style. */
.requirements-confirmation-heading {
  grid-column: 1 / -1;
  grid-row: 1;
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-3) var(--space-5);
  padding-right: 4rem;
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border);
}

.requirements-confirmation-heading .screen-label {
  margin: 0;
  color: var(--accent-text);
}

.requirements-confirmation-heading h2 {
  margin: 0;
  color: var(--text);
  font: 700 0.98rem/1.2 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.requirements-confirmation-heading p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

.requirement-drawing-view {
  grid-column: 1;
  grid-row: 2;
}

.requirements-confirmation-panel {
  grid-column: 2;
  grid-row: 2;
}

/* Plain-language deterministic summary of what was read and what to check. */
.requirement-confirmation-summary {
  margin: 0;
  padding: var(--space-3);
  color: var(--text);
  font-size: 0.82rem;
  line-height: 1.5;
  /* The authored copy is sentence case per the AI-copy rules; the app's global
     uppercase appearance mode renders it in the house charcoal/blue style, the
     same as every other label, so do not fight it here. */
  background: rgb(var(--accent-wash-rgb) / 0.08);
  border: 1px solid rgb(var(--accent-rgb) / 0.28);
  border-radius: var(--radius-md);
}

.requirement-confirmation-summary:empty {
  display: none;
}

.requirement-drawing-view {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
}

.requirement-drawing-view > header {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  justify-content: space-between;
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border);
}

.requirement-drawing-view > header p,
.requirement-drawing-view > header h2 {
  margin: 0;
}

.requirement-drawing-heading {
  min-width: 0;
}

.requirement-drawing-view > header select {
  max-width: min(22rem, 45%);
  min-height: 44px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.requirement-drawing-view > header h2 {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font: 700 0.78rem/1.35 var(--font-mono);
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.requirement-drawing-preview {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  aspect-ratio: auto;
  background: var(--paper);
  border-radius: 0;
}

.requirement-drawing-preview object,
.requirement-drawing-preview img {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.requirement-drawing-preview img {
  object-fit: contain;
  background: var(--paper);
}

.requirement-drawing-empty {
  display: grid;
  gap: var(--space-2);
  max-width: 24rem;
  padding: var(--space-5);
  color: var(--text-muted);
  text-align: center;
}

.requirement-drawing-empty strong {
  color: var(--text);
}

.requirements-confirmation-panel {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  min-width: 0;
  min-height: 0;
  padding: var(--space-4);
  overflow-y: auto;
  background: var(--panel);
}

.requirements-confirmation-panel > h2,
.requirements-confirmation-panel > p {
  margin: 0;
}

.requirements-confirmation .permission-dialog-actions > button {
  min-height: 44px;
}

.requirement-review-context {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0;
}

.requirement-review-context:empty {
  display: none;
}

.requirement-review-context > div {
  min-width: 0;
  padding: var(--space-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.requirement-review-context dt {
  color: var(--text-muted);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.requirement-review-context dd {
  margin: var(--space-1) 0 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font: 0.7rem/1.35 var(--font-mono);
}

.requirement-match-summary {
  padding: var(--space-2) var(--space-3);
  color: var(--text);
  font-size: 0.76rem;
  font-weight: 750;
  background: rgb(var(--accent-wash-rgb) / 0.1);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
}

.requirement-match-summary:empty {
  display: none;
}

.requirement-match-summary.is-manual {
  background: rgb(var(--warning-rgb) / 0.1);
  border-left-color: var(--warning);
}

.requirements-confirmation .requirement-item-picker {
  min-width: 0;
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.requirements-confirmation .requirement-item-picker legend,
.requirements-confirmation .requirement-source-evidence h3 {
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.requirements-confirmation .requirement-item-list {
  display: grid;
  gap: var(--space-1);
  max-height: min(25rem, 34dvh);
  overflow-y: auto;
}

.requirements-confirmation .requirement-item-option {
  display: grid;
  grid-template-columns: 1.25rem 1.45rem minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: start;
  min-height: 4rem;
  padding: var(--space-2);
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.requirements-confirmation .requirement-item-option.is-selected {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.requirements-confirmation .requirement-item-option:hover {
  background: var(--surface-muted);
  border-color: rgb(var(--accent-rgb) / 0.6);
}

.requirements-confirmation .requirement-item-option:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.requirements-confirmation .requirement-item-option input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.12rem 0 0;
  accent-color: var(--accent);
}

.requirements-confirmation .requirement-item-index {
  margin-top: 0.02rem;
  background: var(--surface-muted);
}

.requirements-confirmation .requirement-item-option.is-selected .requirement-item-index {
  background: var(--accent-strong);
  color: var(--accent-strong-ink);
}

.requirements-confirmation .requirement-item-copy {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.requirements-confirmation .requirement-item-heading {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.requirements-confirmation .requirement-item-copy span {
  overflow-wrap: anywhere;
}

/* The item name wraps on word boundaries; break-word (not anywhere) keeps its
   min-content at the longest word so the grid column can't collapse to one
   letter per line when the status column is wide. */
.requirements-confirmation .requirement-item-heading > strong {
  min-width: 0;
  overflow-wrap: break-word;
}

.requirements-confirmation .requirement-item-code {
  display: inline-flex;
  flex: 0 0 auto;
  gap: var(--space-1);
  align-items: baseline;
  color: var(--text-muted);
  font-size: 0.68rem;
}

.requirements-confirmation .requirement-item-code small {
  font-weight: 800;
  text-transform: uppercase;
}

.requirements-confirmation .requirement-item-code b {
  color: var(--accent-strong);
  font: 800 0.74rem/1.2 var(--font-mono);
}

.requirements-confirmation .requirement-item-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
}

.requirements-confirmation .requirement-item-facts > span {
  display: grid;
  gap: 0.12rem;
  min-width: 5.5rem;
  padding-left: var(--space-2);
  background: transparent;
  border: 0;
  border-left: 2px solid var(--border);
  border-radius: 0;
}

.requirements-confirmation .requirement-item-facts small {
  color: var(--text-muted);
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
}

.requirements-confirmation .requirement-item-facts b {
  color: var(--text);
  font: 0.72rem/1.25 var(--font-mono);
}

.requirements-confirmation .requirement-item-source {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text-muted);
  font: 0.68rem/1.4 var(--font-mono);
  line-clamp: 2;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.requirements-confirmation .requirement-suggestion,
.requirements-confirmation .requirement-selected-label {
  color: var(--text-muted);
  font: 800 0.62rem/1.2 var(--font-mono);
}

.requirements-confirmation .requirement-item-signals {
  display: grid;
  justify-items: end;
  gap: var(--space-1);
}

.requirements-confirmation .requirement-suggestion,
.requirements-confirmation .requirement-selected-label {
  padding: 0.28rem 0.55rem;
  border: 1px solid currentColor;
  border-radius: 0.7rem;
  text-transform: uppercase;
  /* The status pill ("Automatic match: unique exact code 100%") is longer than
     its column; wrap it inside the column instead of clipping past the card's
     right edge. A softer radius keeps a wrapped two-line chip tidy. */
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}

.requirements-confirmation .requirement-suggestion {
  color: var(--accent-strong);
}

.requirements-confirmation .requirement-selected-label {
  color: var(--success-text);
}

.requirement-field-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  min-width: 0;
}

.requirement-review-summary {
  --requirement-tile-gap: var(--space-2);
  display: grid;
  gap: var(--requirement-tile-gap);
  min-width: 0;
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--panel-radius);
}

.requirement-review-section {
  display: grid;
  gap: var(--requirement-tile-gap);
  min-width: 0;
}

.requirement-review-section h3 {
  margin: 0;
  color: var(--accent-strong);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.requirement-repeatable-review {
  display: grid;
  gap: var(--requirement-tile-gap);
  min-width: 0;
}

.requirement-repeatable-review > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: center;
}

.requirement-repeatable-review h3 {
  margin: 0;
  color: var(--pane-raeco-strong);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.requirement-repeatable-review > header button {
  min-width: 5rem;
  min-height: 44px;
  padding-inline: var(--space-3);
  color: var(--pane-raeco-strong);
  font-weight: 800;
  background: rgb(var(--pane-raeco-rgb) / 0.1);
  border: 1px solid rgb(var(--pane-raeco-rgb) / 0.42);
  border-radius: var(--radius-sm);
}

.requirement-review-summary .requirement-item-facts {
  gap: var(--requirement-tile-gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.requirement-review-summary .requirement-review-dimensions {
  align-items: start;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.requirement-review-dimensions .requirement-axis-height {
  --requirement-axis-color: var(--oa-height-marker);
}

.requirement-review-dimensions .requirement-axis-width {
  --requirement-axis-color: var(--oa-width-marker);
}

.requirement-review-dimensions .requirement-axis-depth {
  --requirement-axis-color: var(--oa-depth-marker);
}

.requirement-review-summary .requirement-review-dimensions > span {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--requirement-axis-color) 22%, var(--surface-muted)),
      color-mix(in srgb, var(--requirement-axis-color) 9%, var(--surface-muted))
    );
  border-color: color-mix(in srgb, var(--requirement-axis-color) 68%, var(--border));
  box-shadow: inset 0 1px 0 rgb(var(--gloss-rgb) / 0.08);
}

.requirement-review-summary .requirement-review-dimensions small {
  color: var(--requirement-axis-color);
}

.requirement-review-summary .requirement-item-facts > span {
  min-height: 3.4rem;
}

.requirement-review-summary .requirement-tile {
  position: relative;
  align-content: start;
}

.requirement-tile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  min-width: 0;
}

.requirement-tile-head > small {
  flex: 1 1 auto;
  min-width: 0;
}

.requirement-tile-scope {
  color: var(--pane-raeco-strong);
}

.requirement-tile-action {
  display: inline-grid;
  flex: 0 0 1.7rem;
  width: 1.7rem;
  min-width: 1.7rem;
  height: 1.7rem;
  min-height: 1.7rem;
  padding: 0;
  place-items: center;
  color: var(--text-strong);
  background: rgb(var(--overlay-rgb) / 0.055);
  border: 1px solid rgb(var(--overlay-rgb) / 0.14);
  border-radius: var(--radius-sm);
}

.requirement-tile-action:not(:disabled):hover,
.requirement-tile-action:not(:disabled):focus-visible {
  color: var(--text-strong);
  background: rgb(var(--accent-wash-rgb) / 0.3);
  border-color: rgb(var(--accent-rgb) / 0.72);
}

.requirement-tile-remove {
  color: var(--danger);
  background: rgb(var(--danger-rgb) / 0.1);
  border-color: rgb(var(--danger-rgb) / 0.7);
}

.requirement-tile-remove:not(:disabled):hover,
.requirement-tile-remove:not(:disabled):focus-visible {
  color: var(--danger);
  background: rgb(var(--danger-rgb) / 0.2);
  border-color: var(--danger);
}

.requirement-tile-action svg {
  width: 0.95rem;
  height: 0.95rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.requirement-tile-editor {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.requirement-tile-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-1);
  min-width: 0;
}

.requirement-tile-control input,
.requirement-tile-control select {
  width: 100%;
  min-width: 0;
  min-height: 2.5rem;
  padding: 0 var(--space-2);
  color: var(--text);
  font: 0.82rem/1 var(--font-mono);
  text-transform: none;
  background: var(--surface);
  border: 1px solid rgb(var(--overlay-rgb) / 0.2);
  border-radius: var(--radius-sm);
}

.requirement-tile-range {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-1);
  min-width: 0;
}

.requirement-tile-range label {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.requirement-tile-range label > span {
  color: var(--text-muted);
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
}

.requirement-tile-control select {
  width: 4.2rem;
  text-transform: uppercase;
}

.requirement-tile-applies {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.requirement-tile-applies input {
  width: 100%;
  min-width: 0;
  min-height: 2.5rem;
  box-sizing: border-box;
  padding: 0 var(--space-2);
  color: var(--text);
  font: 0.82rem/1 var(--font-mono);
  text-transform: none;
  background: var(--surface);
  border: 1px solid rgb(var(--overlay-rgb) / 0.2);
  border-radius: var(--radius-sm);
}

.requirement-tile-unit {
  display: grid;
  min-width: 2.4rem;
  padding-inline: var(--space-1);
  place-items: center;
  color: var(--text-muted);
  font: 0.72rem/1 var(--font-mono);
  text-transform: uppercase;
}

.requirement-tile-edit-actions {
  display: flex;
  gap: var(--requirement-tile-gap);
}

/* Every tile is a live editor now (no pencil gate), so each reserves room for the
   label, the input row, and the reset/clear actions. */
.requirement-review-summary .requirement-tile {
  min-height: 6rem;
}

.requirement-review-summary .requirement-item-facts b {
  font-size: clamp(0.78rem, 2vw, 0.9rem);
}

.requirement-review-summary .requirement-review-tolerance {
  grid-column: 1 / -1;
}

.requirement-source-disclosure {
  min-width: 0;
  border-bottom: 1px solid var(--border);
}

.requirement-source-disclosure > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--accent-text);
  cursor: pointer;
  font: 850 0.78rem/1.2 var(--font-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.requirement-field-grid .requirement-field {
  display: grid;
  align-content: start;
  gap: var(--space-1);
  min-width: 0;
}

.requirement-field-grid .requirement-field > label {
  color: var(--text);
  font-size: 0.76rem;
  font-weight: 700;
}

.requirement-field-grid .requirement-field-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
}

.requirement-field-grid .requirement-tolerance-label {
  margin-top: var(--space-1);
  color: var(--text-muted);
}

.requirement-field-grid .requirement-tolerance-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.75rem;
  gap: var(--space-2);
  align-items: center;
}

.requirement-field-grid .requirement-tolerance-control span {
  color: var(--text-muted);
  font: 0.74rem/1 var(--font-mono);
  text-align: center;
  text-transform: uppercase;
}

.requirement-field-grid input,
.requirement-field-grid select {
  width: 100%;
  min-width: 0;
  min-height: 2.75rem;
  box-sizing: border-box;
  padding: 0 var(--space-3);
  color: var(--text);
  text-transform: none;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.requirement-field-grid select {
  width: 4.75rem;
  text-transform: uppercase;
}

.requirement-field-grid .requirement-field-error {
  min-height: 1rem;
  color: var(--danger-text);
  font-size: 0.7rem;
  font-weight: 700;
}

.requirement-field-grid .requirements-empty {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--text-muted);
}

.requirement-source-evidence {
  min-width: 0;
  padding: 0;
  background: transparent;
  border: 0;
}

.requirement-source-evidence h3,
.requirement-source-evidence p {
  margin: 0;
}

.requirement-source-disclosure > div {
  display: grid;
  gap: var(--space-2);
  padding: 0 0 var(--space-3);
}

.requirement-source-evidence p + p {
  margin-top: var(--space-2);
}

.requirement-source-evidence p {
  color: var(--text-muted);
  font: 0.74rem/1.45 var(--font-mono);
  overflow-wrap: anywhere;
}

.requirements-confirmation .requirements-confirmation-status {
  min-height: 1.2rem;
  color: var(--danger-text);
  font-size: 0.76rem;
  font-weight: 700;
}

/* PO results reuse the standard finding-list chrome so the panel reads the same
   as a normal drawing review. */
.requirement-results {
  display: grid;
  gap: var(--space-3);
}

.requirement-results[hidden] {
  display: none;
}

.requirement-results-list {
  display: grid;
  gap: var(--space-2);
  overflow: visible;
  scrollbar-gutter: auto;
}

.requirement-results-toolbar {
  margin: 0;
}

/* The card is the standard .finding shell (badge + content grid). Only the
   text-transform reset and the PO-specific inner pieces below are added. */
.requirement-result-card {
  text-transform: none;
}

/* Same active behaviour as the normal findings list: when one card is selected,
   the siblings dim so the active one stands out, and hovering a dimmed one
   brings it back. The results list uses its own class, so mirror the rule here. */
.requirement-results-list:has(.finding.is-active) .finding:not(.is-active) {
  opacity: 0.4;
}

.requirement-results-list:has(.finding.is-active) .finding:not(.is-active):hover {
  opacity: 0.82;
}

.requirement-result-card .finding-heading {
  align-items: start;
}

.requirement-result-card .finding-heading > strong {
  text-transform: capitalize;
}

.requirement-result-values {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.requirement-result-values > span {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: var(--space-1);
}

.requirement-result-values small {
  color: var(--text-muted);
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
}

.requirement-result-values b {
  color: var(--text);
  font: 700 0.72rem/1.25 var(--font-mono);
  overflow-wrap: anywhere;
}

.requirement-result-source {
  grid-column: 1 / -1;
}

@media (prefers-reduced-motion: reduce) {
  .requirements-confirmation .requirement-item-option {
    transition: none;
  }
}

.supplied-file-kind {
  display: grid;
  grid-column: 1;
  min-width: 0;
  gap: var(--space-2);
}

.supplied-file-kind[hidden] {
  display: none;
}

.supplied-file-kind > span {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.3;
}

.supplied-file-kind-list {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  max-height: 12rem;
  padding-right: var(--space-1);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.supplied-file-kind-row {
  display: grid;
  grid-template-columns: minmax(6rem, 1fr) minmax(15rem, auto);
  min-width: 0;
  align-items: center;
  gap: var(--space-2);
}

.supplied-file-kind-row > span {
  overflow: hidden;
  color: var(--text);
  font: 700 0.7rem/1.3 var(--font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.supplied-file-kind-row > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-1);
}

.supplied-file-kind button {
  min-height: 44px;
  padding-inline: var(--space-3);
  white-space: nowrap;
}

.supplied-file-kind .ghost-button.is-active {
  color: var(--on-colour-button);
  background: var(--complete-action-gradient);
  border-color: var(--complete-strong);
}

@media (max-width: 640px) {
  .supplied-file-kind-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Legal access and consent use the same controls and motion language as the
   existing app. The checkbox remains native to the shared auth pattern. */
.auth-legal-consent {
  align-items: flex-start !important;
  line-height: 1.45;
  text-transform: uppercase !important;
}

.auth-legal-consent a,
.landing-privacy-link a,
.landing-footer a,
.page-legal-links a {
  color: var(--accent-text);
  text-underline-offset: 0.18em;
  transition: color 160ms ease, transform 160ms ease;
}

.auth-legal-consent a:hover,
.landing-privacy-link a:hover,
.landing-footer a:hover,
.page-legal-links a:hover {
  color: var(--text-strong);
}

.auth-decline-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-self: center;
}

.landing-privacy-link {
  max-width: 64ch;
  margin: var(--space-5) auto 0;
  color: var(--landing-muted);
  text-align: center;
}

.landing-footer nav,
.page-legal-links {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.landing-footer nav {
  margin-left: auto;
}

.landing-privacy-link a,
.landing-footer a,
.page-legal-links a {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}

.save-destination-note {
  margin: 0 0 var(--space-4);
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.page-legal-links {
  justify-content: center;
  margin-top: var(--space-6);
  color: var(--text-muted);
  font-size: 0.85rem;
  animation: appvlr-legal-links-enter 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes appvlr-legal-links-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 640px) {
  .landing-footer {
    flex-wrap: wrap;
    padding-block: var(--space-4);
  }

  .landing-footer nav {
    width: 100%;
    margin-left: 0;
  }
}

/* Phone signed-out landing and login only. Desktop rules above stay as they
   are. Do not reuse this block for signed-in workflow screens. */
@media (max-width: 767px) {
  #landingPage .landing-cta .landing-button {
    width: 100%;
    max-width: none;
    min-height: 44px;
    justify-self: stretch;
  }

  #landingPage .landing-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    align-items: start;
    gap: 0.15rem;
    min-height: 0;
    padding-block: 0.75rem;
  }

  #landingPage .landing-footer nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    margin-left: 0;
    gap: 0;
  }

  #landingPage .landing-footer a {
    width: 100%;
    min-height: 44px;
    justify-content: flex-start;
  }

  .auth-gate {
    padding: 0.75rem;
    align-items: stretch;
  }

  .auth-gate .auth-card {
    width: 100%;
    max-width: none;
    margin-block: 0.5rem auto;
    padding: 1.15rem;
    border-radius: var(--panel-radius);
  }

  .auth-gate .auth-card-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
  }

  .auth-gate .auth-card-head .mvp-pro-login-badge {
    justify-self: start;
  }

  .auth-gate .auth-card-head .auth-back-button {
    grid-column: 1 / -1;
    width: 100%;
    margin: 0;
    justify-content: center;
  }

  .auth-gate .auth-card :is(h1, h2) {
    overflow-wrap: anywhere;
  }

  .auth-gate .auth-form input:not([type="checkbox"]):not([type="hidden"]) {
    min-height: 44px;
  }

  .auth-gate .auth-form label {
    font-size: max(12px, var(--label-size));
  }

  .auth-gate .auth-form > .primary-button,
  .auth-gate .auth-form > .google-auth-button {
    width: 100%;
    min-height: 44px;
  }

  .auth-gate .auth-switch {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 44px;
  }

  .auth-gate .auth-switch-link {
    display: inline-flex;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0 0.4rem;
  }

  .auth-gate .auth-form label.toggle,
  .auth-gate .auth-legal-consent {
    min-height: 44px;
  }

  .auth-gate .auth-legal-consent a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-legal-links {
    animation: none;
  }

  .auth-legal-consent a,
  .landing-privacy-link a,
  .landing-footer a,
  .page-legal-links a {
    transition: none;
  }
}

.requirement-result-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  max-width: 100%;
  margin-top: 0.15rem;
  padding: 0.2rem 0.48rem;
  color: var(--text-muted);
  font: 700 0.64rem/1.3 var(--font-mono);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  overflow-wrap: anywhere;
  border: 1px solid currentColor;
  border-radius: 999px;
}

.requirement-result-status.is-matched {
  color: var(--success-text);
}

.requirement-result-status.is-different {
  color: var(--danger-text);
}

.requirement-result-status.is-manual {
  color: var(--warning-text);
}

.requirement-result-symbol {
  background: var(--text-muted);
}

.requirement-result-symbol.is-matched {
  color: var(--success-ink);
  background: var(--success);
}

.requirement-result-symbol.is-different {
  background: var(--danger);
  color: var(--danger-ink);
}

.requirement-result-symbol.is-manual {
  color: var(--warning-ink);
  background: var(--warning);
}

.requirement-result-card .finding-actions {
  grid-template-columns: minmax(0, 1fr);
  margin-top: var(--space-2);
}

/* Inline dimension correction on a PO result card. Reuses the finding-action
   button styles; only the small stacked editor layout is added here. */
.requirement-correction {
  display: grid;
  grid-column: 1 / -1;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: var(--space-2);
  background: rgb(var(--accent-wash-rgb) / 0.06);
  border: 1px solid rgb(var(--accent-rgb) / 0.32);
  border-radius: var(--radius-sm);
}

.requirement-correct-field {
  display: grid;
  gap: 0.2rem;
}

.requirement-correct-field > span {
  color: var(--text-muted);
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
}

.requirement-correct-field input {
  width: 100%;
  min-height: 40px;
  padding: var(--space-2);
  color: var(--text);
  font: 700 0.82rem/1.2 var(--font-mono);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.requirement-correct-pick.is-picking {
  color: var(--on-colour-button);
  background: var(--accent-button-hover);
  border-color: var(--accent-strong);
}

.requirement-po-source-control {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  width: 100%;
  min-width: 0;
  min-height: 44px;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding-inline: var(--space-3);
  text-align: left;
}

.requirement-po-source-control svg {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.requirement-po-source-control span,
.requirement-po-source-control strong {
  white-space: nowrap;
}

.requirement-po-source-control strong {
  min-width: 0;
  overflow: hidden;
  font: 700 0.68rem/1.2 var(--font-mono);
  text-overflow: ellipsis;
}

/* ---- Pop-out Original-PO viewer: a large charcoal/blue overlay over the review
   with full-range zoom, drag-to-pan and page navigation. ---- */
.requirement-po-viewer {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: stretch;
  padding: clamp(0.5rem, 2vw, 1.5rem);
  background: rgb(var(--bg-rgb) / 0.82);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 160ms ease;
}

.requirement-po-viewer[hidden] {
  display: none;
}

.requirement-po-viewer.is-open {
  opacity: 1;
}

.requirement-po-viewer-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgb(var(--overlay-rgb) / 0.04), transparent 40%),
    var(--surface, var(--surface-raised));
  border: 1px solid rgb(var(--accent-rgb) / 0.34);
  border-radius: var(--panel-radius);
  box-shadow: 0 24px 60px rgb(var(--shadow-rgb) / 0.55);
}

.requirement-po-viewer-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border);
}

.requirement-po-viewer-heading {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.requirement-po-viewer-heading .screen-label {
  margin: 0;
  color: var(--accent-text);
}

.requirement-po-viewer-heading h2 {
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font: 700 0.9rem/1.2 var(--font-mono);
  letter-spacing: 0.05em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.requirement-po-viewer-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.requirement-po-viewer-pages {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.requirement-po-viewer-pages[hidden] {
  display: none;
}

.requirement-po-viewer-page-label {
  color: var(--text-muted);
  font: 700 0.7rem/1 var(--font-mono);
  text-transform: uppercase;
  white-space: nowrap;
}

.requirement-po-viewer-zoom {
  position: static;
  opacity: 1;
}

.requirement-po-viewer-pages .review-zoom-button svg {
  width: 0.85rem;
  height: 0.85rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.requirement-po-viewer-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background:
    repeating-linear-gradient(45deg, rgb(var(--overlay-rgb) / 0.015) 0 12px, transparent 12px 24px),
    var(--surface);
  cursor: default;
  touch-action: none;
}

.requirement-po-viewer-stage.is-zoomed {
  cursor: grab;
}

.requirement-po-viewer-stage.is-panning {
  cursor: grabbing;
}

.requirement-po-viewer-stage img {
  max-width: 100%;
  max-height: 100%;
  transform-origin: center center;
  transition: transform 120ms ease;
  user-select: none;
  -webkit-user-drag: none;
}

.requirement-po-viewer-stage.is-panning img {
  transition: none;
}

body.po-viewer-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .requirement-po-viewer,
  .requirement-po-viewer-stage img {
    transition: none;
  }
}

/* PO review only has one live tab, but the segmented control keeps the standard
   three-slot silhouette so the panel head does not change shape between modes.
   The one live tab sits in the middle slot; the empty slots read as inactive tabs. */
/* In PO review there is only the PO Details section, so the tabbar becomes a
   single full-width header bar (left-aligned like the panel's other section
   headers) rather than a lone centered pill floating in a 3-column grid. */
#reviewPanel[data-review-mode="requirements"] .findings-tabbar {
  grid-template-columns: 1fr;
}

#reviewPanel[data-review-mode="requirements"] #aiSummaryTab {
  grid-column: 1 / -1;
  justify-content: flex-start;
  text-align: left;
}

/* Wrap complete desktop control groups before the fixed-width tolerance range
   can overflow its flex item and intercept the adjacent decision buttons. */
@media (min-width: 1181px) {
  #reviewScreen .review-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
    box-sizing: border-box;
  }

  #reviewScreen .review-actions > * {
    flex: 0 1 auto;
  }

  #reviewScreen .review-decision-actions {
    flex: 0 0 auto;
  }

  .drawing-panes[data-review-mode="requirements"][data-layout="single-raeco"] {
    justify-items: center;
  }

  .drawing-panes[data-review-mode="requirements"][data-layout="single-raeco"] .drawing-pane:has(#raecoSheet) {
    width: min(100%, calc((var(--app-visible-height) - var(--workflow-offset) - 8rem) * 1.3889));
    height: 100%;
    max-height: 100%;
    grid-template-rows: auto minmax(0, 1fr);
    align-self: stretch;
  }

  .drawing-panes[data-review-mode="requirements"] .review-sheet-frame,
  .drawing-panes[data-review-mode="requirements"] .review-sheet-frame.sheet-frame {
    width: auto;
    max-width: 100%;
    height: 100%;
    min-height: 0;
    aspect-ratio: var(--sheet-aspect, 1.3889);
    align-self: center;
    justify-self: center;
  }
}

.paste-destination .paste-destination-card {
  width: min(32rem, calc(100vw - 2rem));
}

.paste-destination-hint {
  min-height: 1.4em;
  color: var(--text-muted);
}

.paste-destination-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.paste-destination .paste-destination-actions .paste-destination-cancel {
  margin-inline-start: auto;
}

.paste-destination .paste-destination-choice,
.paste-destination .paste-destination-cancel {
  min-height: 44px;
}

@media (max-width: 640px) {
  .paste-destination-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .paste-destination .paste-destination-actions .paste-destination-choice,
  .paste-destination .paste-destination-actions .paste-destination-cancel {
    min-width: 0;
    width: 100%;
  }

  .paste-destination .paste-destination-actions .paste-destination-cancel {
    grid-column: 1 / -1;
    justify-self: stretch;
    margin-inline-start: 0;
  }
}

@media (max-width: 520px) {
  .paste-destination .paste-destination-choice,
  .load-decision-actions > button {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.2;
  }
}

@media (max-width: 640px) {
  .supplied-source-tabs .findings-tab,
  .supplied-source-panel .primary-button,
  .drop-zone .file-button,
  .drop-zone .file-clear-button,
  .requirements-confirmation button,
  .requirement-evidence-action,
  .requirements-confirmation .requirement-item-option,
  .requirement-field-grid input,
  .requirement-field-grid select {
    min-height: 44px;
  }

  .requirements-confirmation .requirements-confirmation-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(14rem, 40dvh) minmax(0, 1fr);
    max-height: none;
    padding: 0;
  }

  .requirements-confirmation-heading {
    grid-column: 1;
    grid-row: 1;
    padding: var(--space-3);
    padding-right: 3.5rem;
  }

  .requirement-drawing-view,
  .requirements-confirmation-panel {
    grid-column: 1;
  }

  .requirement-drawing-view {
    grid-row: 2;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .requirements-confirmation-panel {
    grid-row: 3;
    padding: var(--space-3);
  }

  .requirement-drawing-view > header {
    align-items: stretch;
    flex-direction: column;
  }

  .requirement-drawing-view > header select {
    width: 100%;
    max-width: none;
    min-height: 44px;
  }

  .requirement-review-context {
    grid-template-columns: minmax(0, 1fr);
  }

  .requirements-confirmation .requirement-item-option {
    grid-template-columns: 1.25rem 1.45rem minmax(0, 1fr);
  }

  .requirements-confirmation .requirement-item-signals {
    grid-column: 3;
    justify-items: start;
  }

  .requirements-confirmation .requirement-item-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .requirement-field-grid {
    grid-template-columns: 1fr;
  }

  .requirement-review-summary .requirement-review-dimensions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .requirement-tile-control {
    grid-template-columns: minmax(0, 1fr);
  }

  .requirement-tile-control select {
    width: 100%;
  }

  .requirement-tile-range {
    grid-template-columns: minmax(0, 1fr);
  }

  .requirement-repeatable-review .requirement-item-facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .requirements-confirmation .requirement-tile-remove {
    width: 44px;
    min-width: 44px;
  }

  .manual-organise-result {
    grid-template-columns: minmax(0, 1fr);
  }

  .manual-organise-result #splitRequirementsButton {
    width: 100%;
  }
}

.revision-review-panel > header,
.revision-group h3,
.revision-finding,
.revision-finding-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.revision-review-panel > header,
.revision-group h3 {
  justify-content: space-between;
}

.revision-group {
  margin-top: var(--space-3);
}

.revision-finding {
  align-items: flex-start;
  flex-direction: column;
  margin-top: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.revision-finding-actions button {
  min-height: 2.25rem;
}

/* iOS zooms the whole page when a focused form control's font is under 16px
   and keeps that zoom after blur — the site then looks "zoomed too far" with
   headings clipped at the right edge. Give every focusable text control a
   16px floor on touch/phone screens so focusing never triggers the zoom.
   max(16px, 1em) leaves already-larger controls untouched. */
@media (max-width: 640px), (pointer: coarse) {
  input,
  textarea,
  select,
  [contenteditable="true"],
  [contenteditable="plaintext-only"],
  .auth-form input,
  .stamp-controls input,
  .stamp-controls textarea,
  .stamp-controls select,
  #stampScreen .stamp-controls input,
  #stampScreen .stamp-controls textarea,
  #stampScreen .stamp-controls select {
    font-size: max(16px, 1em);
  }

  /* Checkbox/radio glyphs never take keyboard focus text entry — exempt them
     so the custom square toggles keep their drawn size. */
  input[type="checkbox"],
  input[type="radio"],
  input[type="range"] {
    font-size: inherit;
  }
}

/* Phones keep the same named Help/Feedback launchers and shared
   data-panel-toggle wiring, with safe-area spacing and reserved page room. */
@media (max-width: 640px) {
  body > .support-launcher-dock {
    gap: var(--space-2);
    margin-inline: max(var(--space-2), env(safe-area-inset-right, 0px));
  }

  .drawer-visibility-toggle {
    min-height: 44px;
    padding-inline: var(--space-2);
  }

  .app-shell {
    padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
  }

  .load-actions {
    /* width:100% + negative side margins SHIFTS the bar 12px left instead of
       stretching it — auto lets both margins pull it truly full-bleed. */
    width: auto;
    padding-right: var(--workspace-gutter);
    bottom: 0;
  }
}

.sidebar-action-menu #teamLinkButton span,
.sidebar-action-menu #privateNavButtonA span,
.sidebar-action-menu #privateNavButtonB span,
.sidebar-action-menu #settingsButton span,
.sidebar-action-menu #logoutButton span {
  display: inline;
}

.sidebar-action-menu .sidebar-action-menu-list > :is(.ghost-button, .menu-support-button) {
  color: var(--text-strong);
}

.sidebar-action-menu :is(#teamLinkButton, #privateNavButtonA, #privateNavButtonB, #settingsButton) {
  color: var(--text-strong);
}

.sidebar-action-menu #teamLinkButton {
  color: var(--text-strong);
  background: transparent;
  border-color: transparent;
}

.sidebar-action-menu #teamLinkButton:hover {
  color: var(--text-strong);
  background: transparent;
  border-color: transparent;
}

.sidebar-action-menu #logoutButton {
  max-width: none;
  color: var(--danger-text);
  background: transparent;
  border-color: transparent;
}

.sidebar-action-menu #logoutButton:hover {
  color: var(--danger-text);
  background: transparent;
  border-color: transparent;
}

.sidebar-action-menu .menu-support-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  height: 44px;
  padding-inline: var(--space-3);
  gap: var(--space-2);
  color: var(--text-strong);
  background: transparent;
  border-color: transparent;
  border-radius: var(--radius-md);
  box-shadow: none;
  filter: none;
}

.sidebar-action-menu .menu-support-button span {
  display: inline;
}

.sidebar-action-menu .menu-support-button::before {
  content: none;
}

.sidebar-action-menu .menu-support-button[data-panel-toggle="help"] {
  background: transparent;
  border-color: transparent;
}

.sidebar-action-menu .menu-support-button[data-panel-toggle="feedback"] {
  background: transparent;
  border-color: transparent;
}

.sidebar-action-menu .menu-support-button[data-panel-toggle="help"]:hover {
  color: var(--text-strong);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  filter: none;
  transform: none;
}

.sidebar-action-menu .menu-support-button[data-panel-toggle="feedback"]:hover {
  color: var(--text-strong);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  filter: none;
  transform: none;
}

@media (min-width: 641px) {
  .sidebar-action-menu-list > :is(
    #teamLinkButton,
    #privateNavButtonA,
    #privateNavButtonB,
    .menu-support-button,
    #settingsButton
  ) {
    padding-inline: var(--space-3);
  }

  .sidebar-action-menu :is(
    #teamLinkButton,
    #privateNavButtonA,
    #privateNavButtonB,
    .menu-support-button,
    #settingsButton
  ) > svg {
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    padding: 0.42rem;
    box-sizing: border-box;
    color: var(--text-strong);
    fill: none;
    stroke: var(--text-strong);
    border-radius: 50%;
    margin: 0;
  }

  .sidebar-action-menu #teamLinkButton > svg {
    background: linear-gradient(180deg, var(--leader-button-hover), var(--leader-button) 52%, var(--leader-button-press));
    color: var(--on-colour-button);
    border: 1px solid rgb(var(--leader-rgb) / 0.62);
  }

  .sidebar-action-menu #privateNavButtonA > .private-nav-icon {
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
  }

  .sidebar-action-menu #privateNavButtonB > svg {
    background: linear-gradient(180deg, var(--action-success-hover), var(--action-success) 54%, var(--action-success-press));
    color: var(--on-colour-button);
    border: 1px solid rgb(var(--success-rgb) / 0.7);
  }

  .sidebar-action-menu .menu-support-button[data-panel-toggle="help"] > svg {
    background: var(--accent-action-gradient);
    color: var(--on-colour-button);
    border: 1px solid rgb(var(--accent-border-rgb) / 0.55);
  }

  .sidebar-action-menu .menu-support-button[data-panel-toggle="feedback"] > svg {
    background: var(--complete-action-gradient);
    color: var(--on-colour-button);
    border: 1px solid rgb(var(--complete-border-rgb) / 0.62);
  }

  .sidebar-action-menu #settingsButton > svg {
    background: linear-gradient(180deg, rgb(var(--overlay-rgb) / 0.14), rgb(var(--overlay-rgb) / 0.055));
    border: 1px solid rgb(var(--overlay-rgb) / 0.16);
  }
}

@media (min-width: 641px) {
  .sidebar-action-menu .sidebar-action-menu-list #teamLinkButton:is(:hover, :focus-visible) {
    background-color: rgb(var(--leader-rgb) / 0.2);
    border-color: rgb(var(--leader-rgb) / 0.46);
  }

  .sidebar-action-menu .sidebar-action-menu-list #privateNavButtonA:is(:hover, :focus-visible) {
    background-color: rgb(var(--success-rgb) / 0.16);
    border-color: rgb(var(--success-rgb) / 0.42);
  }

  .sidebar-action-menu .sidebar-action-menu-list #privateNavButtonB:is(:hover, :focus-visible) {
    background-color: rgb(var(--success-rgb) / 0.2);
    border-color: rgb(var(--success-rgb) / 0.46);
  }

  .sidebar-action-menu .sidebar-action-menu-list .menu-support-button[data-panel-toggle="help"]:is(:hover, :focus-visible) {
    background-color: rgb(var(--accent-wash-rgb) / 0.2);
    border-color: rgb(var(--accent-rgb) / 0.46);
  }

  .sidebar-action-menu .sidebar-action-menu-list .menu-support-button[data-panel-toggle="feedback"]:is(:hover, :focus-visible) {
    background-color: rgb(var(--complete-wash-rgb) / 0.2);
    border-color: rgb(var(--complete-rgb) / 0.46);
  }
}

@media (max-width: 640px) {
  /* Phone: the panel spans the pill it drops out of, so it is centred on the
     screen by construction. 100vw cannot do that — it counts a classic
     scrollbar the layout viewport does not have, which pushed the panel off
     centre by the scrollbar width. */
  .sidebar-action-menu {
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    transform: none;
  }

  .sidebar-action-menu-list > :is(
    #teamLinkButton,
    #privateNavButtonA,
    #privateNavButtonB,
    .menu-support-button,
    #settingsButton
  ) {
    padding-inline: var(--space-3);
  }

  .sidebar-action-menu #teamLinkButton,
  .sidebar-action-menu #teamLinkButton:hover,
  .sidebar-action-menu #privateNavButtonA,
  .sidebar-action-menu #privateNavButtonA:hover,
  .sidebar-action-menu .menu-support-button[data-panel-toggle="help"],
  .sidebar-action-menu .menu-support-button[data-panel-toggle="help"]:hover,
  .sidebar-action-menu .menu-support-button[data-panel-toggle="feedback"],
  .sidebar-action-menu .menu-support-button[data-panel-toggle="feedback"]:hover {
    color: var(--text-strong);
    background: transparent;
    border-color: transparent;
  }

  .sidebar-action-menu :is(#teamLinkButton, .menu-support-button) > svg {
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    padding: 0.42rem;
    color: var(--text-strong);
    border-radius: 50%;
    box-sizing: border-box;
    fill: none;
    stroke: var(--text-strong);
  }

  .sidebar-action-menu #privateNavButtonA > .private-nav-icon {
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
  }

  .sidebar-action-menu #teamLinkButton > svg {
    background: linear-gradient(180deg, var(--leader-button-hover), var(--leader-button) 52%, var(--leader-button-press));
    color: var(--on-colour-button);
    border: 1px solid rgb(var(--leader-rgb) / 0.62);
  }

  .sidebar-action-menu .menu-support-button[data-panel-toggle="help"] > svg {
    background: var(--accent-action-gradient);
    color: var(--on-colour-button);
    border: 1px solid rgb(var(--accent-border-rgb) / 0.55);
  }

  .sidebar-action-menu .menu-support-button[data-panel-toggle="feedback"] > svg {
    background: var(--complete-action-gradient);
    color: var(--on-colour-button);
    border: 1px solid rgb(var(--complete-border-rgb) / 0.62);
  }

  .sidebar-action-menu :is(#privateNavButtonB, #settingsButton),
  .sidebar-action-menu :is(#privateNavButtonB, #settingsButton):hover {
    color: var(--text-strong);
    background: transparent;
    border-color: transparent;
    box-shadow: none;
  }

  .sidebar-action-menu :is(#privateNavButtonB, #settingsButton) > svg {
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    padding: 0.42rem;
    box-sizing: border-box;
    color: var(--text-strong);
    fill: none;
    stroke: var(--text-strong);
    background: linear-gradient(180deg, rgb(var(--overlay-rgb) / 0.14), rgb(var(--overlay-rgb) / 0.055));
    border: 1px solid rgb(var(--overlay-rgb) / 0.16);
    border-radius: 50%;
    margin: 0;
  }

  .sidebar-action-menu #privateNavButtonB > svg {
    background: linear-gradient(180deg, var(--action-success-hover), var(--action-success) 54%, var(--action-success-press));
    color: var(--on-colour-button);
    border-color: rgb(var(--success-rgb) / 0.7);
  }
}

.sidebar-action-menu-list > #logoutButton {
  padding-inline: var(--space-3);
}

.sidebar-action-menu #privateNavButtonA {
  color: var(--text-strong);
  background: transparent;
  border-color: transparent;
}

.sidebar-action-menu #privateNavButtonA:hover {
  color: var(--text-strong);
}

.sidebar-action-menu #privateNavButtonA > .private-nav-icon {
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  margin: 0;
  color: var(--private-nav-icon-ink);
  background: var(--private-nav-icon-background);
  border: 1px solid color-mix(in srgb, color-mix(in srgb, var(--success) 64%, var(--gloss)) 62%, transparent);
  border-radius: 50%;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1;
}

.sidebar-action-menu #logoutButton > svg {
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  box-sizing: border-box;
  margin: 0;
}

.sidebar-action-menu #logoutButton > svg {
  padding: 0.42rem;
}

.sidebar-action-menu #logoutButton,
.sidebar-action-menu #logoutButton:hover,
.sidebar-action-menu #logoutButton:focus-visible {
  color: var(--danger-text);
  padding-left: calc(var(--space-3) + 1px);
  background: transparent;
  border: 0;
  box-shadow: none;
}

#logoutButton {
  max-width: min(16rem, 26vw);
}

#logoutButton .tier-badge {
  flex: 0 0 auto;
}

.pg-shell,
.pg-dashboard,
.pg-section,
.pg-panel,
.pg-stats,
.pg-grid,
.pg-row {
  min-width: 0;
}

.team-page .pg-tabs {
  position: static;
}

.team-page .pg-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1080px) {
  .team-page .pg-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 360px) {
  .team-page .pg-stats {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Standard drawing review has two equal choices: Summary and Drawing Details. */
.findings-tabbar:not(.supplied-source-tabs) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Stamp actions stay one-line like every other action button. The controls
   panel already stacks these at narrow widths, so wrapping only distorted
   their height without saving horizontal space. */
#stampScreen .stamp-controls .primary-button,
#stampScreen .stamp-controls .ghost-button {
  white-space: nowrap;
}

/* Phone controls keep their visual style while their hit areas reach the
   platform touch floor. Compact modifiers must be repeated here because their
   two-class desktop selector otherwise wins on specificity. */
@media (max-width: 640px) {
  .step,
  .primary-button,
  .ghost-button,
  .icon-button,
  .file-button,
  .file-clear-button,
  .primary-button.compact,
  .ghost-button.compact,
  .side-panel-tab,
  .help-suggestions button,
  .pg-open-app-button {
    min-height: 44px;
  }

  #stampScreen .side-panel-tab,
  #stampScreen .advanced-controls > summary,
  #stampScreen .stamp-controls .primary-button,
  #stampScreen .stamp-controls .ghost-button,
  #stampScreen #commentsDoneButton {
    height: 44px;
    min-height: 44px;
  }

  .review-decision-actions > .primary-button,
  .review-decision-actions > .ghost-button {
    min-height: 44px;
  }

  .sheet-page-button,
  .rotate-sheet-button,
  .review-zoom-button,
  .expand-sheet-button,
  .close-button-danger,
  .combo-chevron {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }

  .pane-header-controls .sheet-page-button,
  .pane-header-controls .rotate-sheet-button,
  .canvas-toolbar .sheet-page-button,
  .canvas-toolbar .rotate-sheet-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }

  .pg-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  .pg-tab {
    min-width: 0;
  }

  .drop-zone .file-button,
  .drop-zone .file-clear-button {
    width: 100%;
  }
}

@media (max-width: 360px) {
  .pg-stats {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Tier badge (contracts/tier-billing-v1.md) — the account header pill and the
   Settings > Plan badge share this component. Free stays neutral/quiet; Pro
   picks up the brand accent blue; Lifetime gets the one gold treatment in the
   app plus a lock glyph, so it reads as permanent and distinct at a glance. */
.tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.32em;
  padding: 0.16rem 0.58rem;
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: var(--track-base);
  text-transform: uppercase;
  white-space: nowrap;
  background: rgb(var(--overlay-rgb) / 0.06);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.tier-badge.is-pro:not(.is-mvp-pro) {
  position: relative;
  overflow: hidden;
  color: var(--on-accent);
  background:
    linear-gradient(120deg, rgb(var(--accent-border-rgb) / 0.2), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent-wash) 30%, var(--surface)), var(--surface-raised) 62%, color-mix(in srgb, var(--accent) 45%, var(--shade)));
  border-color: rgb(var(--accent-border-rgb) / 0.72);
  box-shadow:
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.18),
    inset 0 -1px 0 rgb(var(--shade-rgb) / 0.38),
    0 3px 10px rgb(var(--shadow-rgb) / 0.28);
}

.tier-badge-pro-mark {
  display: grid;
  width: 1.35em;
  height: 1.35em;
  place-items: center;
  color: var(--on-colour-button);
  font: 900 0.72em/1 var(--font-mono);
  background: linear-gradient(180deg, var(--accent-button-highlight), var(--accent-button-highlight));
  border: 1px solid rgb(var(--text-rgb) / 0.62);
  border-radius: 0.28em;
  box-shadow: inset 0 1px 0 rgb(var(--gloss-rgb) / 0.32);
}

.tier-badge.is-lifetime {
  color: var(--on-warning);
  background: linear-gradient(180deg, var(--action-warning-hover), var(--warning) 55%, var(--warning-press));
  border-color: rgb(var(--warning-rgb) / 0.7);
}

.tier-badge.is-pro.is-mvp-pro {
  color: var(--text-strong);
  background: linear-gradient(180deg, color-mix(in srgb, var(--warning) 36%, var(--bg)), color-mix(in srgb, var(--text) 7%, var(--bg)));
  border-color: rgb(var(--tier-gold-rgb) / 0.78);
  box-shadow: inset 0 1px 0 rgb(var(--gloss-rgb) / 0.18), 0 4px 14px rgb(var(--warning-rgb) / 0.26);
}

.pg-row .tier-badge.is-mvp-pro > span {
  color: inherit;
}

.tier-badge-lock {
  width: 0.78em;
  height: 0.78em;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tier-badge-compact {
  font-size: 0.6rem;
  padding: 0.08rem 0.44rem;
}

.plan-badge-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

#settingsPanelPlan .plan-badge-row {
  min-height: 4.5rem;
  padding: var(--space-4);
  background:
    linear-gradient(90deg, rgb(var(--accent-wash-rgb) / 0.18), transparent 72%),
    rgb(var(--overlay-rgb) / 0.025);
  border: 1px solid rgb(var(--accent-rgb) / 0.32);
  border-radius: var(--radius-md);
}

#settingsPanelPlan .plan-badge-row .tier-badge {
  gap: 0.6rem;
  padding: 0.48rem 0.9rem 0.48rem 0.52rem;
  font-size: 0.88rem;
  letter-spacing: 0.12em;
}

#settingsPanelPlan .plan-badge-row .tier-badge-pro-mark {
  width: 2rem;
  height: 2rem;
  font-size: 0.78rem;
}

#settingsPanelPlan .quota-list .account-fact {
  grid-template-columns: minmax(10rem, 0.7fr) minmax(0, 1.3fr) auto;
  min-height: 3.4rem;
  padding-inline: var(--space-2);
}

#settingsPanelPlan .quota-list .account-fact > span {
  color: var(--text);
  font-size: 0.78rem;
}

#settingsPanelPlan .quota-list .account-fact > strong {
  color: var(--accent-strong);
  font-size: 0.95rem;
}

.plan-quota-line {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
}

.billing-section {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.billing-lifetime-label {
  margin: 0;
  color: var(--warning-text);
  font-size: 0.85rem;
  font-weight: 700;
}

.billing-settings-state {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  min-height: 2.75rem;
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.45;
}

.billing-settings-state p {
  margin: 0;
}

.billing-settings-error {
  color: var(--danger-strong);
}

.billing-settings-error .ghost-button,
.billing-settings-action {
  min-height: 2.75rem;
}

.billing-settings-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.billing-settings-notice {
  margin-top: 0;
}

.billing-settings-team {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.billing-settings-team-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.billing-settings-team-heading h4 {
  margin: 0;
  font-size: 0.86rem;
}

.billing-settings-team-heading span {
  color: var(--text-muted);
  font-size: 0.8rem;
  overflow-wrap: anywhere;
  text-align: right;
}

#settingsPanelBilling .billing-settings-facts .account-fact,
#settingsPanelBilling .billing-settings-entitlements .account-fact,
#settingsPanelBilling .billing-settings-team .account-fact {
  min-height: 3.2rem;
  padding-inline: var(--space-2);
}

#settingsPanelBilling .billing-settings-facts .account-fact > strong,
#settingsPanelBilling .billing-settings-entitlements .account-fact > strong,
#settingsPanelBilling .billing-settings-team .account-fact > strong {
  color: var(--accent-strong);
}

#settingsPanelBilling .billing-settings-team .account-fact > small {
  max-width: 28rem;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .billing-settings-actions,
  .billing-settings-team-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .billing-settings-actions > *,
  .billing-settings-state .ghost-button {
    width: 100%;
  }

  .billing-settings-team-heading span {
    text-align: left;
  }
}

/* ==========================================================================
   Team workspace (/team) — shared job board.
   Rides on the shell page's shell, panels, filters and dialog. Only the row
   layout, the status pills and the event log are new here.
   ========================================================================== */

.team-locked-copy {
  margin: var(--space-3) 0 var(--space-5);
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.65;
  max-width: 46ch;
}

/* Intake form: a wide grid so a whole PO is logged without scrolling. */
.job-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-3);
  align-items: end;
}

.job-form input {
  box-sizing: border-box;
  height: 2.65rem;
  min-height: 2.65rem;
  line-height: 1;
}

.job-form input[type="date"]::-webkit-datetime-edit {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0;
}

.job-form-wide {
  grid-column: 1 / -1;
}

/* Five columns: what it is, who has it, where it's up to, when it's due. */
.job-row,
.seat-row {
  grid-template-columns: 7.5rem minmax(10rem, 1.6fr) minmax(8rem, 0.9fr) 8.5rem 6rem;
  text-align: left;
  color: inherit;
  font: inherit;
  width: 100%;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.seat-row {
  /* Sixth track holds the leader control. It is auto so a row with no button
     (an owner, or anyone when a member is looking) takes no extra width. */
  grid-template-columns: auto minmax(10rem, 1.4fr) minmax(9rem, 1fr) 7rem 6rem auto;
  cursor: default;
}

/* Scoped to .seat-row on purpose: .pg-row span already sets display:block
   and outranks a bare .seat-actions, so this has to out-specify it or the cell
   is not a flex row and nothing below it applies. */
.seat-row .seat-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-2);
}

.seat-row .seat-actions:empty {
  display: none;
}

/* Seat actions are one control group. Keep every action the same height, then
   give the group its own row before six desktop tracks can squeeze the labels
   out of their buttons. */
@media (min-width: 901px) {
  .seat-row .seat-actions > .ghost-button {
    display: inline-flex;
    justify-content: center;
    height: 2.5rem;
    min-height: 2.5rem;
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  .seat-row {
    grid-template-columns: auto minmax(10rem, 1fr) minmax(8rem, 1fr) 7rem 6rem;
  }

  .seat-row .seat-actions {
    grid-column: 2 / -1;
    flex-wrap: wrap;
  }
}

.job-row:hover {
  border-color: rgb(var(--accent-rgb) / 0.5);
  background: rgb(var(--accent-wash-rgb) / 0.07);
}

.job-row:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Your own jobs carry a violet edge — the whole personalisation layer.
   A real border, not an inset shadow: tests/test_zoom_controls.py guards the
   review screen against inset edge stripes, and one stylesheet serves both. The
   left padding gives back the 2px the thicker border takes, so a row marked as
   yours stays aligned with the rows around it. */
.job-row.is-mine {
  border-left-width: 3px;
  border-left-color: var(--complete);
  padding-left: calc(0.72rem - 2px);
}

.job-ref {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--accent-strong);
  min-width: 0;
}

.job-ref small,
.job-what small {
  display: block;
  margin-top: 2px;
  font-weight: 400;
  color: var(--text-muted);
  font-size: 0.66rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-what {
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.3;
  min-width: 0;
}

.job-what em {
  font-style: normal;
  color: var(--text-muted);
  font-weight: 400;
}

.job-what small {
  font-family: var(--font-mono);
}

.job-assignee {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  min-width: 0;
}

.job-assignee b {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-avatar {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--text-strong);
  border: 1px solid rgb(var(--overlay-rgb) / 0.2);
}

.job-unassigned,
.seat-seen,
.job-due {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
}

.job-due {
  text-align: right;
}

.job-due.is-late,
.job-dialog-meta .is-late {
  color: var(--action-danger-hover);
}

.job-empty {
  margin: 0;
  padding: var(--space-8) var(--space-4);
  text-align: center;
  border: 1px dashed rgb(var(--overlay-rgb) / 0.14);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
}

/* Status pills. Same shape as .tier-badge, coloured per state. */
.job-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  border-radius: 999px;
  padding: 0.16rem 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  border: 1px solid transparent;
  white-space: nowrap;
}

.job-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}

.job-badge.is-role-owner::before,
.job-badge.is-role-leader::before,
.job-badge.is-role-member::before {
  display: none;
}

.job-badge.is-new {
  color: var(--text-muted);
  background: rgb(var(--overlay-rgb) / 0.06);
  border-color: rgb(var(--overlay-rgb) / 0.14);
}

.job-badge.is-assigned {
  color: var(--accent-strong);
  background: rgb(var(--accent-wash-rgb) / 0.16);
  border-color: rgb(var(--accent-rgb) / 0.42);
}

.job-badge.is-in_review {
  color: var(--comment-accent);
  background: rgb(var(--comment-accent-rgb) / 0.14);
  border-color: rgb(var(--comment-accent-rgb) / 0.4);
}

.job-badge.is-approved {
  color: var(--action-success);
  background: rgb(var(--action-success-rgb) / 0.14);
  border-color: rgb(var(--action-success-rgb) / 0.4);
}

.job-badge.is-rejected {
  color: var(--action-danger-hover);
  background: rgb(var(--action-danger-rgb) / 0.16);
  border-color: rgb(var(--action-danger-rgb) / 0.42);
}

.job-badge.is-released,
.job-badge.is-role-owner {
  color: var(--complete-strong);
  background: rgb(var(--complete-wash-rgb) / 0.16);
  border-color: rgb(var(--complete-rgb) / 0.45);
}

.job-badge.is-role-leader {
  color: var(--leader-strong);
  background: rgb(var(--leader-rgb) / 0.16);
  border-color: rgb(var(--leader-rgb) / 0.45);
}

/* An invite is a seat nobody is sitting in yet. Dashed, so a row of them reads
   as absence rather than as another kind of member. */
.job-badge.is-role-pending {
  color: var(--text-muted);
  background: transparent;
  border-style: dashed;
  border-color: rgb(var(--overlay-rgb) / 0.24);
}

.job-badge.is-role-pending::before {
  display: none;
}

.job-avatar.is-pending {
  background: transparent;
  border: 1px dashed rgb(var(--overlay-rgb) / 0.28);
  color: var(--text-muted);
}

/* A suspended member is on the roster but holds no seat. Dimmed so the row
   count and the seat count visibly disagree on purpose rather than by mistake. */
.seat-row.is-inactive {
  opacity: 0.62;
}

/* Headroom on the Seats tab. Same treatment as a status line, and it turns into
   an error when the disk is nearly full rather than only at the 413. */
.seat-storage {
  margin: var(--space-2) 0 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
}

.seat-storage.is-error {
  color: var(--action-danger-hover);
}

/* Waiting on the client. Warm, because it is a job somebody has to chase, and
   it sits beside the status rather than replacing it: the review is still open. */
.job-badge.is-waiting {
  color: var(--leader-strong);
  background: rgb(var(--leader-rgb) / 0.14);
  border-color: rgb(var(--leader-rgb) / 0.42);
}

.job-badge.is-waiting::before {
  background: var(--leader);
  color: var(--leader-ink);
}

/* Team invite banner. Sits above the app shell rather than inside a panel: it
   is a one-time decision about the account, not part of a review. */
.team-invite-banner {
  position: fixed;
  inset: auto var(--space-4) var(--space-4) auto;
  z-index: 60;
  max-width: 26rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid rgb(var(--accent-rgb) / 0.45);
  background:
    linear-gradient(180deg, rgb(var(--accent-wash-rgb) / 0.16), transparent),
    var(--surface-raised);
  box-shadow: 0 18px 40px rgb(var(--shadow-rgb) / 0.45);
}

.team-invite-banner[hidden] { display: none; }

.team-invite-banner-title {
  margin: 0 0 var(--space-1);
  font-weight: 600;
}

.team-invite-banner-body {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.team-invite-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

@media (max-width: 520px) {
  .team-invite-banner {
    inset: auto var(--space-3) var(--space-3) var(--space-3);
    max-width: none;
  }

  .team-invite-banner-actions > button {
    flex: 1 1 auto;
    min-width: min(100%, 7.5rem);
    white-space: normal;
  }
}

.job-badge.is-role-member {
  color: var(--text-muted);
  background: rgb(var(--overlay-rgb) / 0.06);
  border-color: rgb(var(--overlay-rgb) / 0.14);
}

/* Job dialog */
.job-dialog-card {
  max-width: 34rem;
  width: min(34rem, calc(100vw - 2rem));
  max-height: min(90dvh, 52rem);
  overflow-y: auto;
  text-align: left;
}

.job-dialog-meta {
  margin: var(--space-2) 0 var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--accent-strong);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
}

.job-dialog-what {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text);
}

.job-dialog-block {
  border-top: 1px solid var(--border);
  padding-top: var(--space-3);
  margin-top: var(--space-4);
}

.job-dialog-block > .screen-label {
  margin-bottom: var(--space-2);
}

.job-dialog-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.job-dialog-select {
  width: 100%;
  height: var(--control-h);
  border-radius: var(--radius-md);
  border: 1px solid rgb(var(--overlay-rgb) / 0.14);
  background: rgb(var(--bg-rgb) / 0.6);
  color: var(--text);
  padding: 0 0.6rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
}

.job-dialog-select:disabled {
  opacity: 0.5;
}

.job-timeline {
  display: grid;
  gap: 0.55rem;
  max-height: 16rem;
  overflow-y: auto;
}

.job-tl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  align-items: start;
  font-size: 0.78rem;
}

.job-tl small {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
}

.job-tl-dot {
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  flex: none;
}

.job-tl-dot.is-status,
.job-tl-dot.is-note {
  background: var(--comment-accent);
  color: var(--leader-ink);
}

.job-tl-dot.is-approved {
  background: var(--action-success);
  color: var(--on-colour-button);
}

.job-tl-dot.is-rejected {
  background: var(--action-danger);
  color: var(--on-colour-button);
}

.job-tl-dot.is-released {
  background: var(--complete);
  color: var(--complete-ink);
}

/* One breakpoint. Below it every row stacks instead of squeezing five columns
   into a phone: the board is read standing at a machine as often as at a desk. */
@media (max-width: 900px) {
  .job-row,
  .seat-row {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .job-due {
    text-align: left;
  }

  /* Stacked rows read left to right, so the leader control lines up with the
     name above it instead of hanging off the right edge on its own. */
  .seat-row .seat-actions {
    justify-content: flex-start;
  }

  .job-form {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Account page (/profile) — profile, plan, security, receipts.
   Rides on the page shell and the team page primitives. The profile editor,
   plan badge and receipt row styles are already defined for the Settings
   dialog and are reused verbatim; only the fact rows are new.
   ========================================================================== */

.profile-fact-row {
  grid-template-columns: minmax(10rem, 1fr) auto;
  cursor: default;
}

.profile-fact-row .job-what small {
  font-family: var(--font-mono);
  text-transform: none;
  letter-spacing: 0;
}

/* The avatar editor and change-password fieldset are scoped to
   .settings-section in the dialog. Re-apply the same layout inside a panel. */
.profile-page .profile-avatar-editor {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.profile-page .profile-avatar-editor img {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid var(--border);
  background: rgb(var(--bg-rgb) / 0.6);
}

.profile-page .profile-avatar-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: flex-start;
}

.profile-page .profile-avatar-actions > :is(label, button) {
  min-height: 44px;
}

.profile-page .change-password-fields {
  display: grid;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  padding: 0;
  border: 0;
}

.profile-page .plan-badge-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.profile-page .billing-section {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.profile-page .billing-section .settings-status {
  flex-basis: 100%;
}

/* Job files: PO and drawings attached to a board job. Rides on the existing
   .pg-row and .job-badge primitives; only the row shape is new. */
.job-file-row {
  grid-template-columns: auto minmax(8rem, 1fr) auto;
  gap: var(--space-2);
  cursor: default;
}

.job-file-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.job-file-add {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  flex-wrap: wrap;
}

.job-file-kind {
  width: auto;
  min-width: 9rem;
}

.job-badge.is-file-po {
  color: var(--comment-accent);
  background: rgb(var(--comment-accent-rgb) / 0.14);
  border-color: rgb(var(--comment-accent-rgb) / 0.4);
}

.job-badge.is-file-drawing {
  color: var(--accent-strong);
  background: rgb(var(--accent-wash-rgb) / 0.16);
  border-color: rgb(var(--accent-rgb) / 0.42);
}

.job-badge.is-file-other {
  color: var(--text-muted);
  background: rgb(var(--overlay-rgb) / 0.06);
  border-color: rgb(var(--overlay-rgb) / 0.14);
}

@media (max-width: 900px) {
  .job-file-row {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Mobile pass, 2026-07-25. From screenshots at 390x844 rather than from the
   responsive eval, which passes 289/289 on these same screens - it measures
   overflow, clipping and touch targets and cannot see "this reads badly".
   ========================================================================== */

@media (max-width: 900px) {
  /* Badges sat in grid cells and grid items stretch to fill their cell, so
     every status and file-kind chip rendered as a full-width bar. They read as
     rails rather than labels. The same badge inside the dialog looked right
     because that row is flex, which is what made this easy to miss. */
  .job-row .job-badge,
  .job-file-row .job-badge,
  .seat-row .job-badge {
    justify-self: start;
  }

  /* Download and Remove were being squeezed onto one line and the second
     collapsed to an ellipsis, so a file could be downloaded but not removed.
     Let them wrap and stop them shrinking.

     The Seats tab grew the same shape on 2026-07-25 and the same way: the
     leader toggle and Remove sat side by side in a stacked grid cell, each
     stretched to the full cell width, so the second one ran off the row and
     could not be tapped. Same cell, same fix. */
  .job-file-actions,
  .seat-row .seat-actions {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .job-file-actions > *,
  .seat-row .seat-actions > * {
    flex: 0 0 auto;
  }

  /* Reading the board is the common case; logging a job is occasional. The
     intake form is a six-field panel, so leaving it first meant scrolling past
     an entire form to reach the jobs. Order only - the markup keeps intake
     first, which is the right tab order on a desktop where both are visible. */
  #team-panel-board .pg-grid {
    display: grid;
  }

  #team-panel-board .pg-grid > article:first-child {
    order: 2;
  }
}

@media (max-width: 640px) {
  /* The stamp panel is two columns by design. At 390px that is two ~170px
     columns: headings wrap mid-phrase ("STAMPS &" / "ICONS"), the stamp
     carousel and the date preview both shrink, and the active-stamp dropdown
     truncates to "APPROVA...". Stack them. */
  #settingsDialog.is-settings-stamp [data-settings-panel="stamp"] {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Stacking gave the carousel the full panel width, and the fanned-out covers
     grew with it until the off-centre one reached past a 320px viewport. The
     coverflow clips its own overhang, but a clipped box still reports its full
     rect, so it reads as an off-screen control. Pull the covers in so the fan
     fits the phone rather than the panel. */
  #settingsDialog.is-settings-stamp .stamp-cover {
    width: min(10rem, calc(100% - 8rem));
    height: min(11.5rem, calc(100% - 2.5rem));
  }

  /* The mobile section selector above replaces the desktop tab rail. */
  #settingsDialog .settings-tabs {
    display: none;
  }

  .profile-page .pg-tab {
    gap: var(--space-1);
    padding-inline: var(--space-2);
  }

  .profile-page .profile-avatar-editor {
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr);
    gap: var(--space-3);
  }

  .profile-page .profile-avatar-editor img {
    width: 4rem;
    height: 4rem;
  }

  .profile-page .profile-avatar-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: min(12rem, 100%);
    gap: var(--space-2);
  }

  .profile-page .profile-avatar-actions > :is(label, button) {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding-inline: var(--space-2);
    font-size: 0.72rem;
    white-space: nowrap;
  }
}

/* .pg-row span forces display:block with overflow:hidden and an ellipsis, so
   long emails and names truncate cleanly in the shell lists. Three of the team
   board's spans are containers rather than text and were being mangled by it:

     .job-file-actions   became a block, so Download and Remove could not sit
                         side by side; Remove wrapped to a clipped second line
                         and rendered as a bare ellipsis, leaving a file that
                         could be downloaded but never removed
     .job-assignee       stacked the avatar above the name instead of inline
     .job-avatar         lost its grid centring, so the initials vanished

   Opting these three out rather than weakening the rule, which is doing a
   useful job everywhere else. */
.job-file-row .job-file-actions,
.job-row .job-assignee,
.seat-row .job-assignee {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  flex-wrap: wrap;
}

.job-file-row .job-file-actions > * {
  /* width:auto as well as flex:none - a mobile rule stretches ghost buttons to
     fill their container, which is right for a form action and wrong for two
     buttons that belong side by side on one row. */
  flex: 0 0 auto;
  width: auto;
  min-height: 2.75rem;
}

/* Download is an <a> so it can carry the href, but it is a button in every
   other respect. The underline is the only thing that gave it away, and it
   made a solid blue pill look like broken link text. */
.job-file-row .job-file-actions a,
.job-file-row .job-file-actions a:hover,
.job-file-row .job-file-actions a:focus-visible {
  text-decoration: none;
}

.job-row .job-avatar,
.seat-row .job-avatar,
.job-file-row .job-avatar {
  display: grid;
  place-items: center;
  overflow: visible;
  white-space: nowrap;
  flex: 0 0 auto;
  /* The initials were rendering all along, in --text-muted grey on a saturated
     avatar colour, which reads as an empty circle. .pg-row span sets that
     colour for the muted metadata it was written for. White plus a soft shadow
     stays legible across all five avatar hues, the amber and green included. */
  color: var(--text-strong);
  text-shadow: 0 1px 1px rgb(var(--shade-rgb) / 0.45);
}

/* Keep the supplied-source switch in normal flow on phones. This final
   responsive override sits with the other mobile corrections so the desktop
   panel can retain its compact, right-aligned tabs. */
@media (max-width: 640px) {
  .drop-zone > .supplied-source-tabs {
    position: relative;
    inset: auto;
    grid-column: 1;
    width: 100%;
    margin-bottom: var(--space-2);
  }

  .supplied-source-panel {
    grid-template-rows: auto auto minmax(3.9em, auto) auto auto auto minmax(0, 1fr);
  }

  .supplied-files-panel > h3,
  .supplied-document-panel > h3 {
    grid-row: 2;
    width: auto;
    max-width: 100%;
  }
}

/* ==========================================================================
   Site-wide motion pass, 2026-07-27.

   Kinetics supplies the spring timing and Componentry supplies the layered
   entrance/active-state rhythm. This stays in the existing CSS motion system:
   no animation dependency, no scroll polling, and no motion is required to
   reveal content or complete an action.
   ========================================================================== */

:root {
  --motion-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pg-page {
  position: relative;
  isolation: isolate;
}

.pg-page::after {
  content: "";
  position: fixed;
  inset: -24vmax;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 24% 32%, rgb(var(--accent-wash-rgb) / 0.11), transparent 20rem),
    radial-gradient(circle at 74% 62%, rgb(var(--complete-wash-rgb) / 0.08), transparent 24rem);
  opacity: 0.72;
}

.pg-page .pg-shell {
  position: relative;
  z-index: 1;
}

/* Authored UI is uppercase. Values supplied by a person or a document keep
   their original case so names, email addresses, IDs and filenames remain
   exact even inside the uppercase application shell. */
.preserve-case,
#inviteUrl,
#seatInviteUrl,
#profileHeading,
#factEmail,
#teamName,
#jobDialogCustomer,
#jobDialogTitle,
#jobDialogMeta,
#jobDialogWhat,
#jobDialogAssignee {
  text-transform: none;
}

@media (prefers-reduced-motion: no-preference) {
  /* Animate the workspace, not .app-shell. A transformed app-shell becomes a
     stacking context and the containing block for every fixed child, which
     drops the workflow header behind the header band and stops it sticking;
     a transformed workspace traps its full-screen Sheet manager. The
     keyframes are opacity-only for the same reason: a held transform would
     make .workspace the containing block for its own fixed children. */
  body:not(.auth-locked) .workspace {
    animation: appvlr-workspace-enter 520ms var(--motion-spring) both;
  }

  .auth-gate:not([hidden]) .auth-card {
    animation: appvlr-card-enter 460ms var(--motion-pop) both;
  }

  .permission-dialog.is-open .permission-dialog-card,
  .permission-dialog[aria-hidden="false"].is-open .permission-dialog-card {
    animation: appvlr-dialog-enter 380ms var(--motion-spring) both;
  }

  .settings-tab-panel.is-active,
  .findings-tab-panel.is-active,
  .side-panel-wrap[data-active-panel="stamp"] > .stamp-controls:not(.comment-controls),
  .side-panel-wrap[data-active-panel="comments"] > .comment-controls {
    animation: appvlr-content-enter 300ms var(--motion-spring) both;
  }

  .pg-page::after {
    animation: appvlr-ambient-drift 18s ease-in-out infinite alternate;
  }

  .pg-page .pg-hero {
    animation: appvlr-shell-enter 520ms var(--motion-spring) both;
  }

  .pg-page .pg-login-card:not([hidden]),
  .pg-dashboard:not([hidden]) > :is(.pg-tabs, .pg-stats, .pg-section),
  .team-invite-banner:not([hidden]) {
    animation: appvlr-content-enter 420ms var(--motion-spring) both;
  }

  .pg-dashboard:not([hidden]) > .pg-stats {
    animation-delay: 70ms;
  }

  .pg-dashboard:not([hidden]) > .pg-section {
    animation-delay: 120ms;
  }

  .pg-section:not([hidden]) .pg-grid > .pg-panel,
  .pg-section:not([hidden]) > .pg-panel,
  .pg-list > .pg-row {
    animation: appvlr-list-enter 360ms var(--motion-spring) both;
  }

  .pg-section:not([hidden]) .pg-grid > .pg-panel:nth-child(2),
  .pg-list > .pg-row:nth-child(2) {
    animation-delay: 45ms;
  }

  .pg-section:not([hidden]) .pg-grid > .pg-panel:nth-child(3),
  .pg-list > .pg-row:nth-child(3) {
    animation-delay: 90ms;
  }

  .pg-section:not([hidden]) .pg-grid > .pg-panel:nth-child(4),
  .pg-list > .pg-row:nth-child(4) {
    animation-delay: 135ms;
  }

  .pg-stat {
    animation: appvlr-stat-enter 480ms var(--motion-pop) both;
  }

  .pg-stat:nth-child(2) { animation-delay: 40ms; }
  .pg-stat:nth-child(3) { animation-delay: 80ms; }
  .pg-stat:nth-child(4) { animation-delay: 120ms; }
  .pg-stat:nth-child(5) { animation-delay: 160ms; }
  .pg-stat:nth-child(6) { animation-delay: 200ms; }

  :is(
    .pg-tab,
    .settings-tab,
    .findings-tab,
    .side-panel-tab,
    .page-match-direction-button
  ) {
    transition:
      color 180ms ease,
      background-color 180ms ease,
      border-color 180ms ease,
      box-shadow 220ms ease,
      transform 180ms var(--motion-spring);
  }

  :is(
    .pg-tab.is-active,
    .settings-tab.is-active,
    .findings-tab.is-active,
    .side-panel-tab.is-active,
    .page-match-direction-button.is-active
  ) {
    animation: appvlr-tab-settle 360ms var(--motion-pop);
  }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .pg-stat:hover {
    transform: translateY(-4px);
    border-color: rgb(var(--accent-rgb) / 0.4);
    box-shadow:
      0 18px 38px rgb(var(--shadow-rgb) / 0.3),
      0 8px 24px rgb(var(--accent-rgb) / 0.12),
      inset 0 1px 0 rgb(var(--gloss-rgb) / 0.09);
  }

  .pg-panel:hover {
    border-color: rgb(var(--accent-rgb) / 0.3);
    box-shadow:
      inset 0 1px 0 rgb(var(--gloss-rgb) / 0.1),
      0 22px 48px rgb(var(--shadow-rgb) / 0.32),
      0 8px 26px rgb(var(--accent-rgb) / 0.08);
  }

  .pg-list > .pg-row:hover,
  .job-row:hover {
    transform: translateX(3px);
  }

  :is(
    .pg-tab,
    .settings-tab,
    .findings-tab,
    .side-panel-tab,
    .page-match-direction-button
  ):hover:not(:disabled) {
    transform: translateY(-2px);
  }
}

@keyframes appvlr-shell-enter {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes appvlr-workspace-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes appvlr-card-enter {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }
  68% {
    opacity: 1;
    transform: translateY(-2px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes appvlr-dialog-enter {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes appvlr-content-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes appvlr-list-enter {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes appvlr-stat-enter {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes appvlr-tab-settle {
  0% { transform: scale(0.94); }
  62% { transform: scale(1.035); }
  100% { transform: scale(1); }
}

@keyframes appvlr-ambient-drift {
  from { transform: translate3d(-2.5%, -1.5%, 0) rotate(-2deg); }
  to { transform: translate3d(2.5%, 1.5%, 0) rotate(2deg); }
}

@media (max-width: 860px) {
  .review-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .review-tolerance-control {
    width: 100%;
  }

  .review-post-controls .review-again-button {
    min-height: 44px;
  }

  .review-post-controls .pairing-manager-button {
    min-height: 44px;
  }
}

@media (max-width: 640px) {
  .review-post-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2mm;
    align-items: center;
  }

  /* The two post-review actions share one phone row. The Sheet manager label
     remains visible; its secondary matched count is available inside the
     manager and must not widen this grid past the viewport. */
  .review-post-controls .pairing-manager-count {
    display: none;
  }

  .review-actions .review-tolerance-control {
    --detail-control-height: 44px;
    display: flex;
    align-items: flex-end;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: auto;
  }

  .review-tolerance-control .review-tolerance-slider {
    --detail-control-height: 44px;
    width: 0;
    min-width: 0;
    max-width: none;
    flex: 1 1 0;
    height: auto;
  }

  #reviewToleranceInput {
    width: 4.5ch;
    min-width: 44px;
    min-height: 44px;
    height: 44px;
    font-size: 1rem;
  }

  .review-tolerance-number {
    justify-content: center;
    width: 0;
    min-width: 44px;
    flex: 1 1 0;
    min-height: 44px;
    height: 44px;
  }

  /* Label sits on its own row above the track. The 44px floor stays on the
     slider, not on this text, so it cannot squeeze into the next slider. */
  #reviewToleranceLabel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pg-page::after {
    animation: none;
    transform: none;
  }
}

/* Team checking and notifications. Dense, quiet, and built from the existing
   APPVLR surfaces so the new workflow reads as part of the same tool. */
.team-hero-actions,
.notification-panel-heading,
.job-check-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.team-hero-actions {
  justify-content: flex-end;
}

.notification-center,
.app-notification-center {
  position: relative;
}

.notification-center > summary,
.app-notification-center > summary {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.65rem;
  padding: 0.65rem 0.9rem;
  color: var(--text);
  font: 700 0.72rem/1 var(--font-ui);
  letter-spacing: var(--track-base);
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.notification-center > summary::-webkit-details-marker,
.app-notification-center > summary::-webkit-details-marker {
  display: none;
}

.notification-count {
  position: absolute;
  top: -0.45rem;
  right: -0.45rem;
  display: grid;
  min-width: 1.45rem;
  height: 1.45rem;
  padding: 0 0.28rem;
  place-items: center;
  color: var(--danger-ink);
  font: 800 0.7rem/1 var(--font-mono);
  background: var(--action-danger);
  border: 2px solid var(--surface);
  border-radius: 999px;
}

.notification-panel {
  position: absolute;
  z-index: 50;
  top: calc(100% + var(--space-2));
  right: 0;
  width: min(24rem, calc(100vw - 2rem));
  padding: var(--space-3);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--panel-radius);
  box-shadow: 0 1rem 2.5rem rgb(var(--shadow-rgb) / 0.42);
}

.notification-panel-heading {
  justify-content: space-between;
  padding-bottom: var(--space-2);
}

.notification-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-1);
  padding: 0.2rem;
  margin-bottom: var(--space-2);
  background: rgb(var(--overlay-rgb) / 0.035);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.notification-tabs button {
  min-height: 2.1rem;
  color: var(--text-muted);
  font: 700 0.7rem/1 var(--font-ui);
  text-transform: uppercase;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: calc(var(--radius-md) - 0.15rem);
}

.notification-tabs button.is-active {
  color: var(--text-strong);
  background: rgb(var(--accent-rgb) / 0.35);
  box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / 0.5);
}

.text-button {
  padding: 0;
  color: var(--accent-strong);
  font: 700 0.68rem/1.2 var(--font-ui);
  text-transform: uppercase;
  background: none;
  border: 0;
  cursor: pointer;
}

.notification-list {
  display: grid;
  max-height: min(28rem, 60vh);
  gap: var(--space-2);
  overflow: auto;
}

.notification-item {
  display: grid;
  gap: 0.25rem;
  width: 100%;
  padding: 0.75rem;
  color: var(--text);
  text-align: left;
  text-decoration: none;
  background: rgb(var(--overlay-rgb) / 0.035);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.notification-item > a {
  display: grid;
  gap: 0.25rem;
  color: inherit;
  text-decoration: none;
}

.notification-reminder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: center;
  padding-top: var(--space-2);
  margin-top: var(--space-1);
  border-top: 1px solid rgb(var(--overlay-rgb) / 0.08);
}

.notification-reminder select {
  min-width: 0;
  min-height: 2rem;
  padding: 0.35rem 1.8rem 0.35rem 0.55rem;
  color: var(--text);
  font: 600 0.7rem/1.2 var(--font-ui);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.notification-reminder .text-button {
  min-height: 2rem;
  padding-inline: 0.25rem;
  white-space: nowrap;
}

.notification-item.is-unread {
  background: rgb(var(--accent-wash-rgb) / 0.14);
  border-color: rgb(var(--accent-rgb) / 0.48);
}

.notification-item span,
.notification-item small,
.notification-empty {
  color: var(--text-muted);
  line-height: 1.45;
}

.notification-email-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  color: var(--text-muted);
  font-size: 0.78rem;
}

.notification-email-toggle input {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--accent);
  border-radius: 0.28rem;
}

.app-notification-center .notification-panel {
  top: calc(100% + 0.55rem);
}

.sidebar-action-menu-list .app-notification-center {
  width: 100%;
  color: var(--text-strong);
  border-radius: var(--radius-md);
}

.sidebar-action-menu-list .app-notification-center > summary {
  justify-content: flex-start;
  width: 100%;
  min-height: 44px;
  height: 44px;
  gap: var(--space-2);
  padding: 0 0.8rem;
  box-sizing: border-box;
  color: var(--text-strong);
  background: transparent;
  border-color: transparent;
}

.sidebar-action-menu-list .notification-menu-icon {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 2.25rem;
  place-items: center;
  color: var(--text-muted);
  background: linear-gradient(180deg, var(--surface-card), var(--surface-raised) 56%, var(--surface-raised));
  border: 1px solid rgb(var(--overlay-rgb) / 0.14);
  border-radius: 50%;
}

.sidebar-action-menu-list .notification-menu-icon svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-notification-button {
  position: relative;
  display: grid;
  width: clamp(2rem, 2.8vw, 2.5rem);
  height: clamp(2rem, 2.8vw, 2.5rem);
  flex: 0 0 clamp(2rem, 2.8vw, 2.5rem);
  padding: 0;
  place-items: center;
  color: var(--text-muted);
  cursor: pointer;
  background: linear-gradient(180deg, var(--surface-card), var(--surface-raised) 56%, var(--surface-raised));
  border: 1px solid rgb(var(--overlay-rgb) / 0.14);
  border-radius: 50%;
  box-shadow: var(--shadow-control);
}

.app-notification-button svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-notification-button:hover,
.app-notification-button[aria-expanded="true"] {
  color: var(--text-strong);
  background: linear-gradient(180deg, color-mix(in srgb, var(--text-muted) 36%, var(--surface-card)), var(--surface-card) 56%, var(--surface-raised));
}

body.has-unread-notifications .app-notification-button,
body.has-unread-notifications .sidebar-action-menu-list .notification-menu-icon {
  color: var(--on-colour-button);
  background: linear-gradient(180deg, var(--action-danger), var(--action-danger) 55%, var(--action-danger-press));
  border-color: rgb(var(--overlay-rgb) / 0.22);
}

body.has-unread-notifications .app-notification-button:hover,
body.has-unread-notifications .app-notification-button[aria-expanded="true"] {
  background: linear-gradient(180deg, color-mix(in srgb, var(--action-danger) 80%, var(--gloss)), var(--action-danger-hover) 55%, var(--action-danger));
  color: var(--on-colour-button);
}

.sidebar-action-menu-list #appNotificationCount {
  position: static;
  margin-left: auto;
  border-color: transparent;
}

.sidebar-action-menu-list .app-notification-center .notification-panel {
  position: static;
  width: 100%;
  margin-top: var(--space-2);
  box-shadow: none;
}

@media (min-width: 861px) {
  /* The visible bell can be narrower than 44px. Extend only its hit area,
     including the 861-1080px header; retain the existing visual and layout. */
  .app-notification-button::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100%, 44px);
    height: 44px;
    transform: translate(-50%, -50%);
  }

  .sidebar-action-menu-list > .app-notification-center {
    display: none;
  }

  .sidebar-action-menu-list.is-notification-view > .app-notification-center {
    display: block;
  }

  .sidebar-action-menu-list.is-notification-view > :not(.app-notification-center) {
    display: none !important;
  }

  .sidebar-action-menu-list.is-notification-view .app-notification-center > summary {
    display: none;
  }

  .sidebar-action-menu-list.is-notification-view .notification-panel {
    min-width: 20rem;
    margin-top: 0;
  }

  #appNotificationMenuCount {
    display: none;
  }
}

/* The header bell (hidden on phones, shown from 641px) is set in the "Header:
   phone and tablet layout" block of features/review-responsive.css. */
@media (max-width: 860px) {
  .sidebar-action-menu-list > .app-notification-center {
    display: block;
    width: 100%;
  }

  .sidebar-action-menu-list .app-notification-center > summary {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    height: 44px;
    box-sizing: border-box;
    pointer-events: auto;
    cursor: pointer;
  }

  .sidebar-action-menu-list.is-notification-view > :not(.app-notification-center) {
    display: none !important;
  }

  .sidebar-action-menu-list.is-notification-view .app-notification-center > summary {
    display: flex;
  }

  .sidebar-action-menu-list.is-notification-view .notification-panel {
    display: block;
    position: static;
    width: 100%;
    min-width: 0;
    margin-top: var(--space-2);
  }
}

.sidebar-action-menu > summary,
.mobile-actions-button {
  position: relative;
}

html[data-notification-rumble="true"] body.has-unread-notifications .app-notification-button,
html[data-notification-rumble="true"] body.has-unread-notifications .mobile-actions-button {
  animation: notification-menu-rumble 12s ease-in-out infinite;
  transform-origin: center;
}

@keyframes notification-menu-rumble {
  0%,
  5%,
  100% {
    transform: translateX(0);
  }

  1%,
  3% {
    transform: translateX(-1.5px);
  }

  2%,
  4% {
    transform: translateX(1.5px);
  }
}

.job-intake-files {
  min-height: 7rem;
  padding: var(--space-3);
  border: 1px dashed rgb(var(--accent-rgb) / 0.5);
  border-radius: var(--radius-md);
  background: rgb(var(--accent-wash-rgb) / 0.06);
}

.team-workload-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-3);
}

.team-workload-card {
  padding: var(--space-3);
  background: rgb(var(--accent-wash-rgb) / 0.08);
  border: 1px solid rgb(var(--accent-rgb) / 0.24);
  border-radius: var(--panel-radius);
}

.team-workload-card > strong {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--text);
}

.team-workload-card dl {
  display: grid;
  /* Each stat keeps room for its whole label ("IN PROGRESS"), so a narrow card
     drops to two columns instead of squeezing the labels into one another. */
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  gap: var(--space-2);
  margin: 0;
}

.team-workload-card dl div {
  min-width: 0;
}

.team-workload-card dt {
  color: var(--text-muted);
  font-size: 0.65rem;
  white-space: nowrap;
}

.team-workload-card dd {
  margin: 0.2rem 0 0;
  color: var(--text-strong);
  font-size: 1.2rem;
  font-weight: 800;
}

.team-ai-intake {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
  background: linear-gradient(135deg, rgb(var(--complete-wash-rgb) / 0.12), rgb(var(--accent-wash-rgb) / 0.08));
  border: 1px solid rgb(var(--complete-rgb) / 0.3);
  border-radius: var(--radius-md);
}

.team-ai-intake > div,
.team-ai-intake textarea,
.team-ai-intake .settings-status {
  grid-column: 1 / -1;
}

.team-ai-intake > div {
  display: grid;
  gap: 0.25rem;
}

.team-ai-intake > div span {
  color: var(--text-muted);
}

.team-ai-intake textarea {
  width: 100%;
  min-height: 5rem;
  resize: vertical;
}

.team-ai-intake #teamAiOrganizeButton {
  grid-column: 2;
  justify-self: end;
}

@media (max-width: 640px) {
  .team-ai-intake {
    grid-template-columns: minmax(0, 1fr);
  }

  .team-ai-intake #teamAiOrganizeButton {
    grid-column: 1;
    width: 100%;
  }
}

.job-intake-files.is-dragging {
  background: rgb(var(--accent-wash-rgb) / 0.16);
  border-color: var(--accent-strong);
}

.job-intake-files > span,
.job-intake-files > small {
  display: block;
  color: var(--text-muted);
  font-weight: 500;
  line-height: 1.45;
  text-transform: none;
}

.job-intake-files input {
  height: auto;
  margin-block: var(--space-2);
}

.job-intake-files input::file-selector-button {
  min-height: 2.5rem;
  margin-right: var(--space-3);
  padding-inline: var(--space-3);
  color: var(--on-colour-button);
  font: 700 0.72rem/1 var(--font-ui);
  letter-spacing: var(--track-base);
  text-transform: uppercase;
  background: var(--accent-button);
  border: 1px solid var(--accent-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.job-dialog-assignment-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.job-dialog-assignment-grid label {
  display: grid;
  gap: var(--space-2);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: var(--track-base);
  text-transform: uppercase;
}

.job-check-actions {
  grid-column: 1 / -1;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.job-check-status {
  color: var(--text-muted);
  font-size: 0.76rem;
}

.job-badge.is-queue {
  color: var(--text);
  border-color: rgb(var(--complete-rgb) / 0.58);
  background: rgb(var(--complete-wash-rgb) / 0.14);
}

.team-receipt-row {
  grid-template-columns: minmax(8rem, 0.8fr) minmax(9rem, 0.75fr) minmax(14rem, 1.7fr);
  align-items: start;
}

.team-receipt-row code,
.team-receipt-row small {
  overflow-wrap: anywhere;
  color: var(--text-muted);
}

.team-receipt-row small {
  grid-column: 1 / -1;
}

/* Job rows wrap full content. Nothing is shortened with an ellipsis. */
.job-ref small,
.job-what small {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  line-height: 1.35;
}

.job-file-row .job-what {
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

#settingsDialog.is-settings-stamp .stamp-library-foot {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}

#settingsDialog.is-settings-stamp #stampUploadTab {
  width: min(24rem, 100%);
}

#settingsDialog.is-settings-stamp .stamp-upload-toggle {
  justify-content: center;
  text-align: center;
}

#settingsDialog.is-settings-stamp .stamp-upload-toggle-label {
  flex: 0 1 auto;
  justify-content: center;
}

#settingsDialog.is-settings-stamp #stampLibraryStatus {
  grid-column: 1;
  text-align: center;
}

@media (max-width: 720px) {
  .team-hero-actions {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
  }

  .notification-center > summary,
  .pg-open-app-button {
    justify-content: center;
    width: 100%;
  }

  .job-dialog-assignment-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .job-check-actions {
    grid-column: auto;
  }

  .profile-avatar-remove {
    min-height: 44px;
  }
}

/* Phone shell: keep the workflow readable without letting navigation and
   fixed actions consume most of the first screen. */
@media (max-width: 640px) {
  :root {
    --workflow-offset: calc(7.4rem + env(safe-area-inset-top, 0px));
    --bottom-action-space: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
  }

  .app-shell {
    padding-top: var(--workflow-offset);
    padding-bottom: var(--bottom-action-space);
  }

  .app-shell::before {
    height: calc(var(--workflow-offset) + 1.25rem);
    z-index: 69;
    background: linear-gradient(
      to bottom,
      var(--bg) 0,
      var(--bg) calc(100% - 1.25rem),
      transparent 100%
    );
  }

  .step {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1.45rem auto;
    justify-items: center;
    row-gap: 0.25rem;
    min-height: 3rem;
    max-width: 100%;
    padding: 0.25rem 0.08rem 0.1rem;
    overflow: visible;
  }

  .step strong {
    overflow: visible;
    font-size: clamp(0.52rem, 2.35vw, 0.62rem);
    line-height: 1.08;
    text-align: center;
    text-overflow: clip;
    text-wrap: balance;
    white-space: normal;
  }

  .workspace {
    padding: 0.85rem var(--workspace-gutter) var(--space-5);
  }

  .topbar {
    margin-bottom: 0.9rem;
  }

  #screenLabel {
    margin-bottom: 0.45rem;
  }

  #screenTitle {
    max-width: 100%;
    font-size: clamp(1.3rem, 6.25vw, 1.55rem);
    line-height: 1.08;
    letter-spacing: 0.025em;
    text-wrap: balance;
  }

  #loadScreen .load-grid {
    gap: 0.75rem;
  }

  #loadScreen .load-review-actions {
    grid-column: 1;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    margin-top: calc(10mm - 0.75rem);
  }

  #loadScreen .load-review-actions > :not([hidden]) {
    width: 100%;
    min-width: 0;
  }

  #loadScreen .drop-zone {
    grid-template-rows: none;
    row-gap: 0.75rem;
    min-height: 17.5rem;
    padding: 1rem;
    border-radius: var(--panel-radius);
  }

  #loadScreen .drop-zone h3 {
    font-size: 1rem;
  }

  #loadScreen .drop-zone p {
    font-size: 0.86rem;
    line-height: 1.45;
  }

  #loadScreen .fake-file,
  #loadScreen .file-button,
  #loadScreen .file-clear-button {
    min-height: 44px;
  }

  #loadScreen .fake-file {
    padding: 0.7rem;
    line-height: 1.25;
  }

  #loadScreen .file-button,
  #loadScreen .file-clear-button {
    width: 100%;
    min-width: 0;
    white-space: nowrap;
  }

  #loadScreen .supplied-source-tabs {
    position: relative;
    inset: auto;
    width: 100%;
    margin-bottom: 0;
  }

  #loadScreen .supplied-files-panel > h3,
  #loadScreen .supplied-document-panel > h3 {
    max-width: 100%;
    white-space: normal;
  }

  .load-actions {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    width: 100%;
    margin-top: 0.75rem;
    padding: 0;
    gap: 0.5rem;
    background: transparent;
  }

  .load-actions .primary-button,
  .load-actions .ghost-button {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding-inline: 0.85rem;
    white-space: nowrap;
    box-shadow: var(--shadow-control);
  }

  .load-review-return:not([hidden]) {
    width: 100%;
    margin-bottom: 0;
  }

  #stampScreen .stamp-controls #skipStampButton {
    min-height: 44px;
  }
}


/* Compact workflow header: the icon carries the APPVLR identity once the full
   wordmark no longer fits. Give every visible control the pill's free space
   instead of keeping the trailing controls in a tight nested cluster. */
@media (min-width: 861px) and (max-width: 1080px) {
  .brand-name,
  .brand-block > div {
    display: none;
  }

  .sidebar :is(button, summary):focus-visible {
    box-shadow: inset 0 -2px 0 var(--focus);
  }
}

@media (min-width: 861px) and (max-width: 1080px) {
  .sidebar {
    justify-content: flex-start;
    gap: 0.75rem;
  }

  .brand-block,
  .step,
  .sidebar-actions > #undoButton,
  .sidebar-actions > #redoButton,
  .sidebar-actions > #clearAllButton,
  .app-notification-button,
  .sidebar-action-menu > summary {
    height: 2.5rem;
    min-height: 2.5rem;
    box-sizing: border-box;
  }

  .brand-block,
  .step {
    padding-block: 0;
  }

  .brand-block {
    padding-inline: 0;
  }

  .brand-block .brand-logo {
    width: 2.5rem;
    height: 2.5rem;
  }

  .step strong,
  .sidebar-action-menu > summary {
    font-size: 0.7rem;
    line-height: 1;
  }

  .app-notification-button {
    width: 2.5rem;
    flex-basis: 2.5rem;
  }

  .sidebar > .sidebar-actions {
    display: flex;
    gap: 0.4rem;
    margin-left: auto;
  }

}

/* --- review queue: persistent trigger + settings-sized dialog (B1+F8) --- */
.workflow-queue-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  gap: 0.45rem;
  padding: 0.42rem 0.7rem;
  color: var(--on-colour-button);
  font: 800 0.68rem/1 var(--font-ui);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  background: var(--complete-action-gradient);
  border: 1px solid rgb(var(--complete-border-rgb) / 0.76);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-control);
}

.workflow-queue-status svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2;
}

.workflow-queue-status strong {
  min-width: 2.4rem;
  padding: 0.28rem 0.4rem;
  text-align: center;
  background: rgb(var(--well-rgb) / 0.22);
  border-radius: 999px;
}

.workflow-queue-status.is-complete {
  background: var(--success-action-gradient, var(--complete-action-gradient));
  color: var(--on-colour-button);
  border-color: rgb(var(--success-rgb) / 0.75);
}

.review-queue-dialog {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100dvh;
  padding: clamp(1rem, 4vh, 3rem) clamp(1rem, 4vw, 3rem);
  color: var(--text);
  background: rgb(var(--bg-strong-rgb) / 0.82);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, visibility 180ms ease, backdrop-filter 220ms ease;
}

.review-queue-dialog[aria-hidden="true"] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none !important;
}

.review-queue-dialog.is-open,
.review-queue-dialog[aria-hidden="false"].is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.review-queue-card {
  display: flex;
  flex-direction: column;
  width: min(980px, 100%);
  min-width: 0;
  max-width: 980px;
  height: min(42rem, calc(var(--app-visible-height, 100vh) - clamp(2rem, 8vh, 6rem)));
  max-height: calc(var(--app-visible-height, 100vh) - clamp(2rem, 8vh, 6rem));
  min-height: 0;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgb(var(--accent-wash-rgb) / 0.12), transparent 42%),
    var(--surface);
  border: 1px solid rgb(var(--accent-rgb) / 0.42);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow-panel), inset 0 1px 0 rgb(var(--gloss-rgb) / 0.07);
}

.review-queue-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: clamp(1rem, 2.2vw, 1.45rem);
  background: linear-gradient(180deg, rgb(var(--overlay-rgb) / 0.055), transparent);
  border-bottom: 1px solid var(--border);
}

.review-queue-header > div:first-child {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}

.review-queue-header h3,
.review-queue-header p {
  margin: 0;
}

.review-queue-header h3 {
  font-size: clamp(1.05rem, 2vw, 1.35rem);
}

.review-queue-header #reviewQueueProgress {
  color: var(--text-muted);
  font: 700 0.72rem/1.2 var(--font-mono);
  letter-spacing: 0.08em;
}

.review-queue-guide {
  display: grid;
  gap: 0.25rem;
  margin: 0 0 var(--space-3);
  padding: 0.72rem 0.85rem;
  color: var(--text-muted);
  font: 600 0.78rem/1.45 var(--font-ui);
  background: rgb(var(--accent-wash-rgb) / 0.07);
  border: 1px solid rgb(var(--accent-rgb) / 0.28);
  border-radius: var(--radius-sm);
}

.review-queue-guide strong {
  color: var(--text);
  font-weight: 800;
}

.review-queue-progress-ui {
  display: grid;
  grid-template-columns: minmax(8rem, 14rem) auto;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.review-queue-progress-ui progress,
.review-queue-item-progress progress {
  width: 100%;
  height: 0.45rem;
  overflow: hidden;
  appearance: none;
  color: var(--accent-text);
  background: rgb(var(--overlay-rgb) / 0.08);
  border: 0;
  border-radius: 999px;
}

.review-queue-progress-ui progress::-webkit-progress-bar,
.review-queue-item-progress progress::-webkit-progress-bar {
  background: rgb(var(--overlay-rgb) / 0.08);
  border-radius: inherit;
}

.review-queue-progress-ui progress::-webkit-progress-value,
.review-queue-item-progress progress::-webkit-progress-value {
  background: var(--complete-action-gradient);
  border-radius: inherit;
}

.review-queue-progress-ui progress::-moz-progress-bar,
.review-queue-item-progress progress::-moz-progress-bar {
  background: var(--complete-action-gradient);
  border-radius: inherit;
}

.review-queue-progress-ui span {
  color: var(--text-muted);
  font: 700 0.68rem/1.2 var(--font-mono);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.review-queue-body {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: clamp(0.85rem, 2vw, 1.25rem);
}

.review-queue-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

.review-queue-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
  align-items: start;
  gap: var(--space-4);
  margin-top: var(--space-3);
}

.review-queue-tile {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-3);
  background:
    linear-gradient(145deg, rgb(var(--accent-wash-rgb) / 0.08), transparent 45%),
    rgb(var(--overlay-rgb) / 0.026);
  border: 1px solid var(--border);
  border-radius: var(--panel-radius);
}

.review-queue-tile.is-next {
  border-color: rgb(var(--accent-rgb) / 0.72);
}

.review-queue-tile.is-dragging {
  z-index: 2;
  opacity: 0.78;
  border-color: var(--focus);
  box-shadow: var(--shadow-control);
}

.review-queue-tile-top {
  display: grid;
  grid-template-columns: 4.6rem minmax(0, 1fr) 44px;
  align-items: end;
  gap: var(--space-2);
}

.review-queue-tile-top.is-single {
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

.review-queue-position-label {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  color: var(--text-muted);
  font: 700 0.64rem/1 var(--font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.review-queue-position-label select {
  width: 100%;
  min-height: 44px;
  padding: 0.35rem 1.65rem 0.35rem 0.55rem;
  color: var(--text);
  font: 800 0.82rem/1 var(--font-mono);
  background-color: rgb(var(--bg-rgb) / 0.82);
  border: 1px solid rgb(var(--accent-rgb) / 0.48);
  border-radius: var(--radius-sm);
}

.review-queue-drag-handle {
  display: grid;
  place-items: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  color: var(--text-muted);
  touch-action: none;
  cursor: grab;
  background: rgb(var(--overlay-rgb) / 0.045);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.review-queue-drag-handle:active {
  cursor: grabbing;
}

.review-queue-drag-handle:disabled {
  cursor: not-allowed;
  opacity: 0.38;
}

.review-queue-grip {
  width: 1.1rem;
  height: 1.35rem;
  background-image: radial-gradient(circle, currentColor 1.5px, transparent 1.7px);
  background-position: 0 0;
  background-size: 0.55rem 0.45rem;
}

.review-queue-file-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.review-queue-file-panel {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  min-width: 0;
  min-height: 6.5rem;
  padding: var(--space-3);
  background: rgb(var(--bg-rgb) / 0.62);
  border: 1px solid rgb(var(--accent-rgb) / 0.3);
  border-radius: var(--panel-radius);
}

.review-queue-file-preview {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 7.5rem;
  overflow: hidden;
  color: var(--text-muted);
  text-align: center;
  background: rgb(var(--paper-rgb) / 0.96);
  border: 1px solid rgb(var(--complete-border-rgb) / 0.36);
  border-radius: calc(var(--radius-sm) - 1px);
}

.review-queue-file-preview img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 7.5rem;
  object-fit: contain;
}

.review-queue-file-preview > span {
  padding: var(--space-2);
  color: color-mix(in srgb, var(--ink-dark) 67%, var(--paper));
  font: 700 0.64rem/1.3 var(--font-ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.review-queue-file-preview.is-loading > span {
  color: var(--accent-on-paper);
}

.review-queue-file-preview.is-unavailable {
  background: rgb(var(--surface-raised-rgb) / 0.72);
  border-color: color-mix(in srgb, var(--danger-on-paper) 32%, transparent);
}

.review-queue-file-preview.is-unavailable > span {
  color: color-mix(in srgb, var(--ink-dark) 20%, var(--paper));
}

.review-queue-file-panel.is-missing {
  border-color: rgb(var(--danger-rgb) / 0.45);
}

.review-queue-file-panel > span {
  color: var(--accent-strong);
  font: 700 0.64rem/1 var(--font-ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.review-queue-file-panel strong {
  min-width: 0;
  font: 700 0.78rem/1.35 var(--font-mono);
  overflow-wrap: anywhere;
}

.review-queue-status {
  align-self: center;
  justify-self: center;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--border);
}

.review-queue-item-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
}

.review-queue-item-progress span,
.review-queue-error {
  color: var(--text-muted);
  font: 700 0.66rem/1.3 var(--font-ui);
}

.review-queue-error {
  margin: calc(var(--space-2) * -1) 0 0;
  color: var(--danger-strong);
}

.review-queue-tile-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: var(--space-2);
}

.review-queue-tile-actions > button {
  width: 100%;
  min-width: 0;
  min-height: 44px;
}

.review-queue-status[data-queue-status="PENDING"],
.review-queue-status[data-queue-status="QUEUED"] { color: var(--text-muted); border-color: var(--border); }
.review-queue-status[data-queue-status="MISMATCH"],
.review-queue-status[data-queue-status="REJECTED"],
.review-queue-status[data-queue-status="FAILED"] { color: var(--danger-text); border-color: rgb(var(--danger-rgb) / 0.5); }
.review-queue-status[data-queue-status="TO_CONFIRM"],
.review-queue-status[data-queue-status="BLOCKED"] { color: var(--warning-text); border-color: rgb(var(--warning-rgb) / 0.5); }
.review-queue-status[data-queue-status="READY"],
.review-queue-status[data-queue-status="MATCHED"],
.review-queue-status[data-queue-status="DONE"] { color: var(--success-text); border-color: rgb(var(--success-rgb) / 0.5); }
.review-queue-status[data-queue-status="REVIEWING"] { color: var(--accent-strong); border-color: rgb(var(--accent-rgb) / 0.6); }
.review-queue-status[data-queue-status="TIER_LIMITED"] { color: var(--complete-strong); border-color: rgb(var(--complete-rgb) / 0.6); }

/* Elapsed counter beside the indeterminate REVIEWING bar. There is no real
   backend progress signal, so this is the only honest number to show. */
.review-queue-item-progress .review-queue-elapsed {
  margin-left: auto;
  color: var(--text-muted);
  font: 700 0.66rem/1.3 var(--font-ui);
  /* After the font shorthand: it resets font-variant-numeric on its own. */
  font-variant-numeric: tabular-nums;
}

/* One queue-level message, currently the tier-limit pause. */
.review-queue-notice {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid rgb(var(--complete-rgb) / 0.5);
  border-radius: var(--radius-md);
  background: rgb(var(--complete-wash-rgb) / 0.08);
  color: var(--text);
  font: 600 0.72rem/1.45 var(--font-ui);
}

.review-queue-notice[hidden] { display: none; }

@media (width <= 860px) {
  .review-queue-tile-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (width <= 640px) {
  .load-decision-panel {
    align-items: stretch;
    flex-direction: column;
  }

  .load-decision-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .load-decision-actions > button {
    width: 100%;
    min-width: 0;
  }

  .review-queue-dialog,
  .review-queue-panel {
    place-items: stretch;
    padding: 0;
    width: 100vw;
    min-height: 100dvh;
    height: 100dvh;
    overflow: hidden;
    isolation: isolate;
    background: var(--bg-strong);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .review-queue-dialog:not(.is-open),
  .review-queue-dialog[aria-hidden="true"],
  .review-queue-panel:not(.is-open),
  .review-queue-panel[aria-hidden="true"] {
    pointer-events: none !important;
  }

  .review-queue-card {
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: 100dvh;
    isolation: isolate;
    overflow: hidden;
    background: var(--surface);
    border: 0;
    border-radius: var(--panel-radius);
    transform: none;
    box-shadow: none;
  }

  .review-queue-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: center;
    gap: var(--space-3);
    flex: 0 0 auto;
    box-sizing: border-box;
    min-height: calc(56px + env(safe-area-inset-top, 0px));
    max-height: calc(64px + env(safe-area-inset-top, 0px));
    padding: 6px var(--workspace-gutter);
    padding-top: calc(6px + env(safe-area-inset-top, 0px));
    background: var(--surface);
    overflow: hidden;
  }

  .review-queue-header #reviewQueueCloseButton {
    position: relative;
    inset: auto;
    z-index: 1;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    flex: 0 0 44px;
    margin: 0;
  }

  .review-queue-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding-inline: var(--workspace-gutter);
    padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  }

  .review-queue-toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .review-queue-toolbar > button {
    width: 100%;
    min-height: 44px;
  }

  .review-queue-file-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .review-queue-tile {
    background: var(--surface-raised);
  }

  .review-queue-file-panel {
    background: var(--bg);
  }
}

@media (width <= 420px) {
  .review-queue-progress-ui,
  .review-queue-item-progress {
    grid-template-columns: minmax(0, 1fr);
  }

  .review-queue-progress-ui span {
    white-space: normal;
  }

  .review-queue-file-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .review-queue-dialog {
    transition: none;
  }
}

/* Requirement confirmation is a drawing workbench, not a card stack. */
.requirements-confirmation .requirements-confirmation-card {
  position: relative;
}

.requirements-confirmation-close {
  z-index: 4;
  top: var(--space-3);
  right: var(--space-3);
  display: grid;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  place-items: center;
}

.requirements-confirmation-close svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.requirement-drawing-view > header {
  align-items: center;
}

.requirement-drawing-controls,
.requirement-drawing-control-group {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-1);
}

.requirement-drawing-controls {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.requirement-drawing-view > header .requirement-drawing-controls select {
  width: min(18rem, 100%);
  max-width: none;
}

.requirement-drawing-control-group .sheet-page-button,
.requirement-drawing-control-group .rotate-sheet-button {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  box-sizing: border-box;
}

.requirement-drawing-control-group .rotate-all-check {
  height: 44px;
  min-height: 44px;
  box-sizing: border-box;
}

.requirement-drawing-page-count {
  display: inline-flex;
  min-width: 6.5rem;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font: 700 0.7rem/1 var(--font-mono);
  text-align: center;
  white-space: nowrap;
}

@media (min-width: 1000px) {
  .requirement-drawing-view > header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .requirement-drawing-heading {
    overflow: hidden;
  }

  .requirement-drawing-controls {
    flex-wrap: nowrap;
  }

  .requirement-drawing-view > header .requirement-drawing-controls select {
    width: clamp(9rem, 18vw, 18rem);
  }
}

.requirement-drawing-preview {
  overflow: hidden;
  container-type: size;
}

.requirement-drawing-preview .requirement-drawing-image {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  transform-origin: center;
  transition: transform 160ms ease;
}

.requirement-drawing-preview .requirement-drawing-image.rotation-90,
.requirement-drawing-preview .requirement-drawing-image.rotation-270 {
  width: 100cqh;
  height: 100cqw;
  max-width: none;
  max-height: none;
}

.requirements-confirmation-panel {
  padding-top: var(--space-4);
}

.requirements-confirmation .requirement-item-picker {
  padding: var(--space-2);
}

.requirements-confirmation .requirement-item-option {
  grid-template-columns: 1.25rem minmax(0, 1fr) minmax(0, 9rem);
  min-height: 44px;
  align-items: center;
  padding: 0.55rem 0.65rem;
  border-radius: 5px;
}

/* Cap the status column so a long "automatic match" pill wraps inside its own
   column instead of starving the item-name column. */
.requirements-confirmation .requirement-item-signals {
  overflow-wrap: anywhere;
}

.requirements-confirmation .requirement-item-option input {
  margin: 0;
}

.requirements-confirmation .requirement-item-copy {
  gap: 0.3rem;
}

.requirements-confirmation .requirement-item-source {
  -webkit-line-clamp: 1;
  line-clamp: 1;
}

.requirements-confirmation .requirement-item-signals {
  display: block;
}

.requirement-po-requirements,
.requirement-drawing-evidence {
  gap: var(--space-2);
}

.requirement-drawing-evidence {
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
}

.requirement-drawing-evidence dl {
  display: grid;
  gap: var(--space-1);
  margin: 0;
}

.requirement-drawing-evidence dl > div {
  display: grid;
  grid-template-columns: minmax(7rem, 0.7fr) minmax(0, 1.3fr);
  gap: var(--space-2);
  padding-block: var(--space-1);
  border-bottom: 1px solid var(--border);
}

.requirement-drawing-evidence dt,
.requirement-drawing-evidence dd,
.requirement-drawing-evidence p {
  min-width: 0;
  margin: 0;
  font-size: 0.72rem;
  overflow-wrap: anywhere;
}

.requirement-drawing-evidence dt,
.requirement-drawing-evidence p,
.requirement-drawing-evidence q {
  color: var(--text-muted);
}

.requirement-drawing-evidence dd {
  display: grid;
  gap: 0.2rem;
}

.sidebar :is(button, summary):focus-visible,
.requirement-drawing-control-group :is(button, input):focus-visible,
.requirements-confirmation-close:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.requirement-drawing-control-group .rotate-all-check:has(input:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

@media (max-width: 860px) {
  .step {
    --step-dot-size: 1.45rem;
    min-height: 3rem;
    padding-inline: 0.12rem;
    background: transparent;
    border-color: transparent;
  }

}

@media (max-width: 640px) {
  .requirement-drawing-view > header {
    padding-right: 3.75rem;
  }

  .requirement-drawing-controls {
    justify-content: flex-start;
  }

  .requirement-drawing-control-group {
    flex: 1 1 auto;
  }

  .requirement-drawing-page-count {
    flex: 1 1 auto;
  }

  .requirements-confirmation .requirement-item-option {
    grid-template-columns: 1.25rem minmax(0, 1fr);
  }

  .requirements-confirmation .requirement-item-signals {
    grid-column: 2;
  }

  .requirement-drawing-evidence dl > div {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .requirement-drawing-preview .requirement-drawing-image {
    transition: none;
  }
}

/* Load and preflight panels share one radius at every viewport. SVG ant rects
   sit 1px inside their wrappers and use the matching inset radius. */
#analysisScreen .loading-panel,
#loadScreen .load-grid > .drop-zone[data-drop-role="raeco"],
#loadScreen .supplied-source-card,
#loadScreen .supplied-source-card > .supplied-source-panel {
  --load-outer-radius: var(--panel-radius);
  border-radius: var(--panel-radius);
}

#loadScreen .drop-zone-ants {
  border-radius: var(--panel-radius);
}

#loadScreen .drop-zone[data-drop-role="raeco"] > .drop-zone-ants {
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  max-width: none;
}

#loadScreen .drop-zone-ants rect {
  rx: calc(var(--panel-radius) - 1px);
  ry: calc(var(--panel-radius) - 1px);
}

#loadDecisionPanel {
  border-radius: var(--panel-radius);
}

#loadScreen .load-grid > .drop-zone[data-drop-role="raeco"],
#loadScreen .supplied-source-card > .supplied-files-panel {
  padding-inline: 7mm;
  padding-bottom: 5mm;
}

#loadScreen .load-grid > .drop-zone[data-drop-role="raeco"] {
  grid-template-rows: 1.8rem minmax(3.9em, auto) auto minmax(0, 1fr) auto;
}

#loadScreen .supplied-source-card > .supplied-files-panel {
  grid-template-rows: 1.8rem minmax(3.9em, auto) auto auto minmax(0, 1fr) auto;
}

#loadScreen .file-action-stack {
  display: grid;
  align-self: end;
  justify-self: start;
  gap: 2mm;
  width: min(13.5rem, 100%);
  margin-left: 0;
  margin-bottom: 4mm;
}

#loadScreen .drop-zone[data-drop-role="raeco"] > .file-action-stack {
  grid-row: 5;
}

#loadScreen .supplied-files-panel > .file-action-stack {
  grid-row: 6;
}

#loadScreen .supplied-files-panel > .supplied-file-kind {
  grid-row: 4;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  margin-top: 5mm;
}

#loadScreen .supplied-files-panel > .supplied-file-kind > .supplied-file-kind-list {
  min-height: 0;
}

#loadScreen .file-action-stack > .file-button,
#loadScreen .file-action-stack > .file-clear-button {
  width: 100%;
}

#loadScreen .drop-zone > p,
#loadScreen .drop-zone > .fake-file {
  transform: translateY(5mm);
}

#loadScreen .file-action-stack > .file-button[data-file-button="raeco"] {
  color: var(--on-colour-button);
  background: var(--accent-action-gradient);
  border-color: rgb(var(--accent-border-rgb) / 0.62);
}

#loadScreen .file-action-stack > .file-button[data-file-button="manufacture"],
#loadScreen .file-action-stack > .file-button[data-intake-choose] {
  color: var(--on-colour-button);
  background: var(--complete-action-gradient);
  border-color: rgb(var(--complete-rgb) / 0.7);
}

#loadScreen .file-action-stack > .file-clear-button,
#loadScreen .file-action-stack > .file-clear-button:disabled {
  color: var(--on-colour-button);
  background: var(--action-danger);
  border-color: var(--action-danger);
}

#loadScreen .file-action-stack > .file-clear-button:disabled {
  opacity: 0.78;
}

#loadScreen .file-action-stack > .file-button[data-file-button="raeco"]:not(:disabled):hover {
  background: var(--accent-action-gradient-hover);
  color: var(--on-colour-button);
}

#loadScreen .file-action-stack > .file-button[data-file-button="manufacture"]:not(:disabled):hover,
#loadScreen .file-action-stack > .file-button[data-intake-choose]:not(:disabled):hover {
  background: var(--complete-action-gradient-hover);
  color: var(--on-colour-button);
}

/* The populated supplied panel used a compact top padding and row gap to fit
   its classification list. Keep those rows on the same vertical rhythm as
   Your file when the panels are side by side. */
@media (min-width: 1181px) {
  #loadScreen .load-grid > .drop-zone[data-drop-role="raeco"],
  #loadScreen .supplied-source-card > .supplied-files-panel {
    padding-top: clamp(1.25rem, 2vw, 2.25rem);
    row-gap: var(--space-4);
  }

  #loadScreen .load-grid:has(#suppliedFileKind:not([hidden])) {
    --load-aligned-card-height: calc(clamp(26rem, 38vh, 30rem) + 2.5rem);
  }

  #loadScreen .load-grid:has(#suppliedFileKindList > .supplied-file-kind-row:nth-child(2)) {
    --load-aligned-card-height: calc(clamp(26rem, 38vh, 30rem) + 4.5rem);
  }

  #loadScreen .load-grid:has(#suppliedFileKind:not([hidden])) > .drop-zone[data-drop-role="raeco"],
  #loadScreen .load-grid:has(#suppliedFileKind:not([hidden])) > .supplied-source-card {
    height: var(--load-aligned-card-height);
  }

}

/* Phone LOAD actions: the unscoped stack is capped at 13.5rem so it stays a
   compact column on desktop. Repeat the cap-break here so it wins on phones,
   stretch paired kind buttons across the same content column, and lock
   Choose / Clear / Upload / tabs to one 44px height. Desktop stays as it is. */
@media (max-width: 640px) {
  #loadScreen .file-action-stack {
    width: 100%;
    justify-self: stretch;
    align-self: stretch;
    height: auto;
    gap: 16px;
    margin-bottom: 16px;
  }

  #loadScreen .supplied-source-tabs {
    width: 100%;
    justify-self: stretch;
  }

  #loadScreen .supplied-file-kind,
  #loadScreen .supplied-file-kind-list,
  #loadScreen .supplied-file-kind-row,
  #loadScreen .supplied-file-kind-row > div {
    width: 100%;
    max-width: 100%;
    justify-self: stretch;
  }

  /* At phone widths the confirm-type pair must not collide with the file name
     or the action stack. Stack full-width controls with a real gutter. */
  #loadScreen .supplied-file-kind-row > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
  }

  #loadScreen .supplied-files-panel > .supplied-file-kind {
    margin-bottom: 0.5rem;
  }

  #loadScreen .supplied-files-panel > .supplied-file-kind > .supplied-file-kind-list {
    max-height: min(22rem, 48vh);
  }

  #loadScreen .file-action-stack > .file-button,
  #loadScreen .file-action-stack > .file-clear-button,
  #loadScreen .supplied-source-tabs .findings-tab,
  #loadScreen .supplied-file-kind button {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    height: 44px;
    padding-block: 0;
    padding-inline: 0.85rem;
  }

  #loadScreen .file-action-stack > .file-button,
  #loadScreen .file-action-stack > .file-clear-button {
    /* Live 390 shots: --shadow-control is 0 10px 24px. That shadow ate the
       2mm gap and painted through the dashed card edge. Keep a short raise
       so the buttons still look like controls, not a 10px smear. */
    box-shadow:
      0 2px 8px rgb(var(--shadow-rgb) / 0.28),
      inset 0 1px 0 rgb(var(--gloss-rgb) / 0.14),
      inset 0 -2px 0 rgb(var(--shade-rgb) / 0.18);
  }

  /* Desktop cards share height with a 1fr spacer. Stacked phone cards do not
     need that empty row, which left a large gap above Choose / Clear. */
  #loadScreen .load-grid > .drop-zone[data-drop-role="raeco"],
  #loadScreen .supplied-source-card > .supplied-files-panel {
    min-height: 0;
    padding-inline: 1.25rem;
    padding-bottom: 24px;
  }

  #loadScreen .load-grid > .drop-zone[data-drop-role="raeco"] {
    grid-template-rows: 1.8rem auto auto auto auto;
  }

  #loadScreen .supplied-source-card > .supplied-files-panel {
    grid-template-rows: 44px auto auto auto auto auto;
  }

  #loadScreen .drop-zone > p,
  #loadScreen .drop-zone > .fake-file {
    transform: none;
  }
}

/* Desktop: the phone switcher is not shown. The sticky wrap is display:contents
   so Review again / Sheet manager stay in the drawing-board grid as before. */
.review-mobile-chrome,
.review-mobile-decision-host,
.landing-mobile-chrome {
  display: none;
}

.review-sticky-actions {
  display: contents;
}

/* ============ Phone layout v2 (max-width 640px) ============
   One column. Safe-area padding. 44px tap targets. No sideways scroll.
   The drawing gets most of the viewport. Desktop rules above stay as they are. */
@media (max-width: 640px) {
  html,
  body,
  .app-shell {
    max-width: 100%;
    overflow-x: clip;
  }

  :root {
    /* v30 inset card. Safe-area lives in top, not in padding. */
    --workflow-offset: calc(7rem + env(safe-area-inset-top, 0px));
    --bottom-action-space: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    --mobile-browser-chrome: 3.25rem;
  }

  html,
  body {
    overflow-x: clip;
    max-width: 100%;
  }

  .app-shell {
    padding-top: var(--workflow-offset);
    padding-right: env(safe-area-inset-right, 0px);
    padding-bottom: var(--bottom-action-space);
    padding-left: env(safe-area-inset-left, 0px);
    max-width: 100%;
  }

  /* Shared clearance for Load / Review / Stamp / Export. The sticky bar is
     ~109px at 390px. 7rem (112px) plus workspace padding leaves an 8–12px
     gap so #screenLabel and #screenTitle sit fully below the pills. The
     fade stays inside that offset so it does not slice the heading. */
  .app-shell::before {
    height: var(--workflow-offset);
    background: linear-gradient(
      to bottom,
      var(--bg) 0,
      var(--bg) calc(100% - 0.7rem),
      transparent 100%
    );
  }

  /* Phone header: v30 inset rounded card. Desktop (≥641px) keeps the pill. */
  .sidebar {
    top: calc(0.28rem + env(safe-area-inset-top, 0px));
    left: calc(var(--page-gutter) + env(safe-area-inset-left, 0px));
    right: calc(var(--page-gutter) + env(safe-area-inset-right, 0px));
    grid-template-columns: minmax(0, 1fr) repeat(4, 44px);
    grid-template-areas:
      "brand undo redo clear more"
      "steps steps steps steps steps";
    row-gap: 0.2rem;
    column-gap: 0.28rem;
    min-height: 0;
    padding: 0.28rem 0.32rem 0.3rem;
    border-radius: 16px;
  }

  .mobile-actions-button,
  #undoButton.top-history-button,
  #redoButton.top-history-button,
  #clearAllButton.top-clear-button {
    position: relative;
    isolation: isolate;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
  }

  .mobile-actions-button::before,
  #undoButton.top-history-button::before,
  #redoButton.top-history-button::before,
  #clearAllButton.top-clear-button::before {
    content: "";
    position: absolute;
    inset: 2px;
    z-index: -1;
    border: 1px solid rgb(var(--text-muted-rgb) / 0.42);
    border-radius: 999px;
    background:
      linear-gradient(180deg, rgb(var(--overlay-rgb) / 0.08), rgb(var(--overlay-rgb) / 0.018)),
      var(--surface-muted);
    box-shadow: inset 0 1px 0 rgb(var(--gloss-rgb) / 0.08);
  }

  .mobile-actions-button::before {
    background: var(--accent-action-gradient);
    color: var(--on-colour-button);
    border-color: rgb(var(--accent-border-rgb) / 0.62);
  }

  #clearAllButton.top-clear-button::before {
    background: var(--action-danger);
    color: var(--on-colour-button);
    border-color: rgb(var(--danger-rgb) / 0.72);
  }

  #clearAllButton.top-clear-button:disabled::before {
    background: var(--action-danger-disabled-bg);
    color: var(--on-colour-button);
    border-color: var(--action-danger-disabled-border);
  }

  .step {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    max-width: none;
    padding: 0.1rem 0.08rem;
    overflow: hidden;
    appearance: none;
    -webkit-appearance: none;
    background: none;
    background-color: transparent;
    background-image: none;
    border-radius: 0;
    box-shadow: none;
    text-shadow: none;
    -webkit-text-stroke: 0;
    filter: none;
  }

  .step::before,
  .step::after,
  .step:hover::before,
  .step:hover::after,
  .step.is-active::before,
  .step.is-active::after,
  .step.is-complete::before,
  .step.is-complete::after,
  .step-index::before,
  .step-index::after,
  .step .circle-glyph::before,
  .step .circle-glyph::after,
  .step strong::before,
  .step strong::after,
  .step-copy::before,
  .step-copy::after {
    content: none;
    display: none;
    animation: none;
    text-shadow: none;
    filter: none;
  }

  .workspace {
    padding:
      0.45rem
      calc(var(--workspace-gutter) + env(safe-area-inset-right, 0px))
      calc(0.55rem + env(safe-area-inset-bottom, 0px))
      calc(var(--workspace-gutter) + env(safe-area-inset-left, 0px));
    max-width: 100%;
  }

  .topbar {
    min-width: 0;
    max-width: 100%;
    margin-bottom: 0.4rem;
  }

  .workspace[data-has~="review-screen"]:not(#has-pad) .topbar,
  .workspace[data-has~="stamp-screen"]:not(#has-pad) .topbar,
  .workspace[data-has~="save-screen"]:not(#has-pad) .topbar {
    max-width: 100%;
  }

  .topbar-main {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 0;
    max-width: 100%;
  }

  .topbar-main > div {
    flex: 1 1 0;
    min-width: 0;
  }

  .topbar-main .app-queue-button {
    flex: 0 0 auto;
    min-width: 44px;
    max-width: none;
  }

  .workspace[data-has~="review-screen"]:not(#has-pad) .topbar-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: start;
    row-gap: 0.35rem;
    width: 100%;
    max-width: 100%;
    padding-inline: 0;
  }

  .workspace[data-has~="review-screen"]:not(#has-pad) .topbar-main > div {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    max-width: 100%;
  }

  /* QUEUE sits on its own row so it cannot cover SIDE-BY-SIDE CHANGE REVIEW.
     The 5.75rem topbar cap clips QUEUE 0/1 (clientWidth 90 / scrollWidth 99). */
  .workspace[data-has~="review-screen"]:not(#has-pad) .topbar-main .app-queue-button,
  .workspace[data-has~="review-screen"]:not(#has-pad) #appQueueButton {
    box-sizing: border-box;
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    align-self: start;
    width: max-content;
    min-width: max-content;
    min-height: 44px;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0.85rem;
    overflow: visible;
    flex-shrink: 0;
  }

  .workspace[data-has~="stamp-screen"]:not(#has-pad) .topbar-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: start;
    row-gap: 0.35rem;
    width: 100%;
    max-width: 100%;
    padding-inline: 0;
  }

  .workspace[data-has~="stamp-screen"]:not(#has-pad) .topbar-main > div {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    max-width: 100%;
  }

  .workspace[data-has~="stamp-screen"]:not(#has-pad) .topbar-main .app-queue-button,
  .workspace[data-has~="stamp-screen"]:not(#has-pad) #appQueueButton {
    box-sizing: border-box;
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    align-self: start;
    width: max-content;
    min-width: max-content;
    min-height: 44px;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0.85rem;
    overflow: visible;
    flex-shrink: 0;
  }

  .workspace[data-has~="save-screen"]:not(#has-pad) .topbar-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: start;
    row-gap: 0.35rem;
    width: 100%;
    max-width: 100%;
    padding-inline: 0;
  }

  .workspace[data-has~="save-screen"]:not(#has-pad) .topbar-main > div {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    max-width: 100%;
  }

  .workspace[data-has~="save-screen"]:not(#has-pad) .topbar-main .app-queue-button,
  .workspace[data-has~="save-screen"]:not(#has-pad) #appQueueButton {
    box-sizing: border-box;
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    align-self: start;
    width: max-content;
    min-width: max-content;
    min-height: 44px;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0.85rem;
    overflow: visible;
    flex-shrink: 0;
  }

  #screenLabel {
    margin-bottom: 0.08rem;
    font-size: 0.62rem;
  }

  #screenTitle {
    max-width: 100%;
    overflow: hidden;
    font-size: clamp(0.92rem, 4.4vw, 1.15rem);
    line-height: 1.15;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
  }

  /* Shared 7rem offset spends ~21px that used to go to the Review sheet.
     Keep the heading fully visible, but use a one-line title on Review /
     Stamp / Export so the sheet stays ≥100px. */
  .workspace[data-has~="review-screen"]:not(#has-pad) #screenTitle,
  .workspace[data-has~="stamp-screen"]:not(#has-pad) #screenTitle,
  .workspace[data-has~="save-screen"]:not(#has-pad) #screenTitle {
    font-size: clamp(0.78rem, 3.5vw, 0.95rem);
    line-height: 1.05;
    letter-spacing: 0.02em;
    -webkit-line-clamp: 3;
  }

  .workspace[data-has~="review-screen"]:not(#has-pad) #screenTitle {
    overflow-wrap: anywhere;
    padding-right: 0;
  }

  /* PS-058: the Load, Stamp and Export titles are fixed short phrases. With
     larger text they wrap instead of being cut to "COMPARE ENGINEERING...".
     Only Review keeps the clamp, for long drawing names. */
  .workspace[data-has~="load-screen"]:not(#has-pad) #screenTitle,
  .workspace[data-has~="stamp-screen"]:not(#has-pad) #screenTitle,
  .workspace[data-has~="save-screen"]:not(#has-pad) #screenTitle {
    display: block;
    overflow: visible;
    -webkit-line-clamp: none;
  }

  /* Export, Stamp, and Review page-scroll so the stacked sheet and
     panel stay reachable. Do not lock Export to 100dvh. */
  .app-shell[data-has~="review-screen"]:not(#has-pad),
  .app-shell[data-has~="stamp-screen"]:not(#has-pad) {
    height: auto;
    min-height: 100dvh;
    overflow-x: clip;
    overflow-y: auto;
    padding-bottom: 0;
  }

  .app-shell[data-has~="save-screen"]:not(#has-pad) {
    height: auto;
    min-height: 100dvh;
    overflow-x: clip;
    overflow-y: auto;
    padding-bottom: 0;
  }

  /* Export stacks the live preview, then the save panel. The page
     owns vertical scroll. Do not lock this workspace to 100dvh. */
  .workspace[data-has~="save-screen"]:not(#has-pad) {
    --save-stack-gap: 0.75rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    row-gap: var(--save-stack-gap);
    width: 100%;
    max-width: 100%;
    height: auto;
    min-width: 0;
    min-height: 0;
    overflow: visible;
    padding-top: 0.35rem;
    padding-right: max(8px, calc(var(--workspace-gutter) + env(safe-area-inset-right, 0px)));
    padding-bottom: 0.35rem;
    padding-left: max(8px, calc(var(--workspace-gutter) + env(safe-area-inset-left, 0px)));
  }

  /* Stamp stacks the live sheet, then the Stamp/Comments panel. The page
     owns vertical scroll. Do not lock this workspace to 100dvh. */
  .workspace[data-has~="stamp-screen"]:not(#has-pad) {
    --stamp-stack-gap: 0.75rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    row-gap: var(--stamp-stack-gap);
    width: 100%;
    max-width: 100%;
    height: auto;
    min-width: 0;
    min-height: 0;
    overflow: visible;
    padding-top: 0.35rem;
    padding-right: max(8px, calc(var(--workspace-gutter) + env(safe-area-inset-right, 0px)));
    padding-bottom: 0.35rem;
    padding-left: max(8px, calc(var(--workspace-gutter) + env(safe-area-inset-left, 0px)));
  }

  /* Review needs air between the heading/QUEUE row and the stacked sheets.
     The page owns vertical scroll. Do not lock this workspace to 100dvh. */
  .workspace[data-has~="review-screen"]:not(#has-pad) {
    --review-stack-gap: 0.75rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    row-gap: var(--review-stack-gap);
    width: 100%;
    max-width: 100%;
    height: auto;
    min-width: 0;
    min-height: 0;
    overflow: visible;
    padding-top: 0.35rem;
    padding-right: max(8px, calc(var(--workspace-gutter) + env(safe-area-inset-right, 0px)));
    padding-bottom: 0.35rem;
    padding-left: max(8px, calc(var(--workspace-gutter) + env(safe-area-inset-left, 0px)));
  }

  .workspace[data-has~="review-screen"]:not(#has-pad) .topbar {
    margin-bottom: 0;
  }

  .workspace[data-has~="stamp-screen"]:not(#has-pad) .topbar,
  .workspace[data-has~="save-screen"]:not(#has-pad) .topbar {
    margin-bottom: 0.1rem;
  }

  .primary-button,
  .ghost-button,
  .file-button,
  .file-clear-button,
  .review-mobile-pane-button {
    min-height: 44px;
  }

  /* ---- leftover Load tap copy + Review/Export fill (v30) ---- */
  #loadScreen .drop-copy-desktop {
    display: none;
  }

  #loadScreen .drop-copy-phone {
    display: block;
  }

  /* Phone Review/Export: the sheet fills the pane width. Aspect-fit.
     Do not rebuild a tall letterbox or a postage-stamp raster. */
  #reviewScreen .drawing-pane:not(:has(.empty-sheet-state)) > .review-sheet-frame,
  #reviewScreen .drawing-pane:not(:has(.empty-sheet-state)) > .review-sheet-frame.sheet-frame,
  #saveScreen .save-preview-frame,
  #saveScreen .save-preview-frame:has(.save-preview-scroll) {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    max-height: none;
  }

  /* ---- LOAD ---- */
  #loadScreen .load-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    width: 100%;
    max-width: 100%;
  }

  #loadScreen .load-grid > .drop-zone[data-drop-role="raeco"],
  #loadScreen .supplied-source-card > .supplied-files-panel {
    width: 100%;
    max-width: 100%;
    min-height: 17.5rem;
  }

  /* v38: live 390 shots still showed a ~6px gap and Clear on the dashed
     edge. 16px gap stays visible beside a short 2px raise. 16px stack
     margin plus 24px card padding keeps the shadow inside the card.
     The page owns vertical scroll. Do not lock Load to 100dvh. */
  #loadScreen .file-action-stack {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    height: auto;
    align-self: stretch;
    gap: 16px;
    margin-bottom: 16px;
  }

  .workspace[data-has~="load-screen"]:not(#has-pad) {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  /* v34: Choose / Clear / Upload / source tabs share one 44px computed height. */
  #loadScreen .file-action-stack > .file-button,
  #loadScreen .file-action-stack > .file-clear-button,
  #loadScreen .supplied-source-tabs .findings-tab,
  #loadScreen .supplied-file-kind button {
    box-sizing: border-box;
    min-height: 44px;
    height: 44px;
    padding-block: 0;
  }

  #loadScreen .fake-file {
    min-height: 44px;
  }

  .load-decision-panel {
    position: fixed;
    inset: 0;
    z-index: 1900;
    place-items: center;
    align-items: center;
    width: auto;
    margin: 0;
    padding:
      calc(0.75rem + env(safe-area-inset-top, 0px))
      calc(0.75rem + env(safe-area-inset-right, 0px))
      calc(0.75rem + env(safe-area-inset-bottom, 0px))
      calc(0.75rem + env(safe-area-inset-left, 0px));
  }

  .load-decision-card {
    max-height: calc(100dvh - 1.5rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
  }

  .load-decision-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    width: 100%;
  }

  .load-decision-actions > #cancelLoadDecisionButton {
    grid-column: 1 / -1;
  }

  .load-decision-actions > button {
    width: 100%;
    min-width: 0;
    min-height: 44px;
  }

  #loadScreen .load-review-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  #loadScreen .load-review-actions > :not([hidden]) {
    width: 100%;
    min-height: 44px;
  }

  /* ---- REVIEW ---- */
  #reviewScreen.is-active {
    display: flex;
    flex-direction: column;
    row-gap: 0.45rem;
    height: auto;
    min-height: 0;
    grid-template-rows: none;
    overflow-x: clip;
    overflow-y: visible;
    /* Stacked YOUR then SUPPLIED. Each loaded sheet keeps a 240px floor.
       JS sizes the frame to the painted page aspect so contain fills it —
       landscape pages stay landscape-ish. Zoom and full-screen sit under
       the sheet, not on the paper. The page owns vertical scroll. */
    --review-sheet-floor: 240px;
    --review-sheet-height: 240px;
    --review-empty-sheet-floor: 200px;
    --review-findings-floor: 18rem;
    /* Filename row plus a separate page/rotate control row. */
    --review-pane-bar: 78px;
    /* 12px air between Review chrome bands. */
    --review-stack-gap: 0.75rem;
    /* Approve + Reject stay on the first 390x844 screen with the PDFs. */
    --review-decision-bar: calc(44px + 0.7rem);
  }

  #reviewScreen.is-active,
  #reviewScreen.is-active:not(:has(.empty-sheet-state)) {
    overflow-x: clip;
    overflow-y: visible;
  }

  #reviewScreen .review-heading {
    display: none;
  }

  /* Phone heading lives in the topbar. Keep the desktop toolbar out of the
     header so it cannot paint over the sheet. JS moves .review-actions into
     #reviewStickyActions; this hide is the CSS fallback if that move fails. */
  #reviewScreen .review-header,
  #reviewScreen .review-header .review-actions {
    display: none;
  }

  #reviewScreen .review-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "panes"
      "tray"
      "findings";
    flex: 0 0 auto;
    gap: var(--review-stack-gap);
    width: 100%;
    height: auto;
    min-width: 0;
    min-height: 0;
    overflow: visible;
    padding-top: 0;
  }

  #reviewScreen .review-mobile-decision-host {
    display: block;
    width: 100%;
    padding: 0 0.5rem;
    box-sizing: border-box;
  }

  #reviewScreen .review-mobile-decision-host .review-decision-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    width: 100%;
  }

  #reviewScreen .review-mobile-decision-host .review-decision-actions > button {
    width: 100%;
    min-width: 0;
    min-height: 44px;
  }

  #reviewScreen:not(:has(.empty-sheet-state)) .review-layout {
    overflow: visible;
    min-height: calc((var(--review-pane-bar) + var(--review-stack-gap) + var(--review-sheet-floor) + var(--review-stack-gap) + 44px) * 2);
  }

  /* Flatten so the findings panel can sit between the stacked sheets and the
     compare tray. Approve and Reject stay on the first phone screen. Do not
     open a side column on 390px. */
  #reviewScreen .drawing-board {
    display: contents;
  }

  #reviewScreen:not(:has(.empty-sheet-state)) .drawing-board {
    display: contents;
  }

  #reviewScreen .review-mobile-chrome,
  #reviewScreen .drawing-board:has(.drawing-panes[data-review-mode="requirements"]) .review-mobile-chrome,
  #reviewScreen .review-mobile-chrome[hidden] {
    display: none;
  }

  .review-mobile-pane-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.25rem;
    width: 100%;
    padding: 0.18rem;
    background: rgb(var(--overlay-rgb) / 0.04);
    border: 1px solid rgb(var(--overlay-rgb) / 0.08);
    border-radius: 12px;
  }

  .review-mobile-pane-button {
    width: 100%;
    min-height: 44px;
    padding: 0 0.5rem;
    color: var(--text-muted);
    font: 800 0.72rem/1 var(--font-ui);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: transparent;
    border: 0;
    border-radius: 9px;
  }

  .review-mobile-pane-button.is-active {
    color: var(--on-colour-button);
    background: var(--accent-action-gradient);
  }

  #reviewScreen .drawing-panes {
    display: flex;
    flex-direction: column;
    position: relative;
    grid-area: panes;
    flex: 0 0 auto;
    flex-shrink: 0;
    order: 1;
    gap: var(--review-stack-gap);
    width: 100%;
    min-width: 0;
    min-height: 0;
    overflow: visible;
  }

  #reviewScreen .drawing-panes:has(.drawing-pane:not(:has(.empty-sheet-state))) {
    overflow: visible;
    min-height: calc((var(--review-pane-bar) + var(--review-stack-gap) + var(--review-sheet-floor) + var(--review-stack-gap) + 44px) * 2);
  }

  #reviewScreen .drawing-pane {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "bar bar"
      "sheet sheet"
      "zoom expand";
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    min-width: 0;
    min-height: 0;
    overflow: visible;
  }

  #reviewScreen .drawing-pane:not(:has(.empty-sheet-state)) {
    overflow: visible;
    flex-shrink: 0;
    row-gap: 0;
    height: auto;
    min-height: calc(var(--review-pane-bar) + var(--review-stack-gap) + var(--review-sheet-floor) + var(--review-stack-gap) + 44px);
    grid-template-rows: auto auto auto;
    padding-bottom: 0.2rem;
  }

  /* Beat the leftover 3-row / 7.1rem phone header. Hidden YOUR/SUPPLIED
     labels must not reserve a row. Filename and page/rotate share one row. */
  #reviewScreen .drawing-pane > header {
    display: grid;
    grid-area: bar;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(1.4rem, auto) 44px;
    align-items: center;
    column-gap: 0;
    row-gap: 0.3rem;
    height: auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: var(--review-pane-bar);
    max-height: none;
    padding: 0.4rem 0.35rem 0.45rem;
    overflow: visible;
    isolation: isolate;
    z-index: 120;
    pointer-events: auto;
    box-sizing: border-box;
  }

  #reviewScreen .drawing-pane > header > span:first-child {
    display: none;
    grid-row: auto;
    height: 0;
    min-height: 0;
    overflow: hidden;
  }

  #reviewScreen .drawing-pane > header > strong {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    max-width: 100%;
    max-height: 1.8rem;
    overflow: hidden;
    font-size: 0.72rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #reviewScreen .drawing-pane > header > .pane-header-controls {
    display: inline-flex;
    grid-column: 1;
    grid-row: 2;
    align-self: center;
    justify-self: end;
    width: max-content;
    max-width: 100%;
    min-width: 0;
    min-height: 44px;
    flex-shrink: 0;
    justify-content: flex-end;
    align-items: center;
    gap: 0.12rem;
    padding-block: 0;
    overflow: visible;
  }

  #reviewScreen .drawing-pane > header .sheet-page-button,
  #reviewScreen .drawing-pane > header .rotate-sheet-button {
    box-shadow: inset 0 1px 0 rgb(var(--gloss-rgb) / 0.24);
  }

  #reviewScreen .drawing-pane > .review-sheet-frame,
  #reviewScreen .drawing-pane > .review-sheet-frame.sheet-frame {
    grid-area: sheet;
    position: relative;
    align-self: start;
    justify-self: stretch;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-width: 0;
    min-height: 0;
    aspect-ratio: auto !important;
  }

  #reviewScreen .drawing-pane:has(.empty-sheet-state) {
    overflow-x: hidden;
    overflow-y: hidden;
    flex-shrink: 0;
    row-gap: var(--review-stack-gap);
    height: auto;
    min-height: calc(44px + var(--review-stack-gap) + var(--review-empty-sheet-floor));
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 44px auto;
    grid-template-areas:
      "bar"
      "sheet";
  }

  #reviewScreen .drawing-pane:not(:has(.empty-sheet-state)) > .review-sheet-frame,
  #reviewScreen .drawing-pane:not(:has(.empty-sheet-state)) > .review-sheet-frame.sheet-frame {
    position: relative;
    align-self: start;
    height: var(--review-sheet-height);
    min-height: var(--review-sheet-floor);
    max-height: var(--review-sheet-height);
    overflow: hidden;
    isolation: isolate;
  }

  #reviewScreen .drawing-pane:has(.empty-sheet-state) > .review-sheet-frame,
  #reviewScreen .drawing-pane:has(.empty-sheet-state) > .review-sheet-frame.sheet-frame {
    position: relative;
    height: var(--review-empty-sheet-floor);
    min-height: var(--review-empty-sheet-floor);
  }

  #reviewScreen .drawing-pane:not(:has(.empty-sheet-state)) > .review-sheet-frame .review-sheet-scroll {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
  }

  #reviewScreen .drawing-pane:not(:has(.empty-sheet-state)) > .review-sheet-frame .sheet-viewport {
    position: absolute;
    inset: 0;
    flex: none;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
  }

  #reviewScreen .drawing-pane:not(:has(.empty-sheet-state)) > .review-sheet-frame .rendered-sheet,
  #reviewScreen .drawing-pane:not(:has(.empty-sheet-state)) > .review-sheet-frame canvas,
  #reviewScreen .drawing-pane:not(:has(.empty-sheet-state)) > .review-sheet-frame .sheet-viewport > svg {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    background: transparent;
  }

  /* Zoom pill and expand sit under the sheet, not on the title block. */
  #reviewScreen .drawing-pane:not(:has(.empty-sheet-state)) > .review-zoom-control {
    display: inline-flex;
    grid-area: zoom;
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    inset: auto;
    z-index: 120;
    isolation: isolate;
    pointer-events: auto;
    justify-self: start;
    align-self: center;
    margin-top: var(--review-stack-gap);
    opacity: 1;
    min-height: 44px;
  }

  #reviewScreen .drawing-pane:not(:has(.empty-sheet-state)) > .expand-sheet-button {
    display: grid;
    grid-area: expand;
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    inset: auto;
    z-index: 120;
    isolation: isolate;
    pointer-events: auto;
    justify-self: end;
    align-self: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    margin-top: var(--review-stack-gap);
    margin-right: var(--space-2);
    opacity: 1;
  }

  #reviewScreen .review-zoom-button,
  #reviewScreen .sheet-page-button,
  #reviewScreen .rotate-sheet-button {
    position: relative;
    z-index: 121;
    pointer-events: auto;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }

  /* Same desktop findings panel, full width under SUPPLIED. Empty jobs still
     show the summary ("Load both drawings…") instead of staying hidden.
     Floor is one full finding card + YOUR/SUPPLIED DIMENSION. The page owns
     scroll. Do not nest a 116px tab pane inside a 224px rail. */
  #reviewScreen .findings-panel,
  #reviewScreen .findings-panel.is-collapsed,
  #reviewScreen .findings-panel.app-scroll-rail {
    display: flex;
    flex-direction: column;
    grid-area: findings;
    flex: 0 0 auto;
    order: 3;
    position: static;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: var(--review-findings-floor);
    max-height: none;
    overflow: visible;
    gap: var(--review-stack-gap);
  }

  #reviewScreen .findings-tabbar {
    position: sticky;
    top: 0;
    z-index: 6;
    flex: 0 0 auto;
    width: 100%;
  }

  #reviewScreen .findings-tab {
    height: 44px;
    min-height: 44px;
    box-sizing: border-box;
  }

  #reviewScreen .findings-tab-details {
    font-size: 0.62rem;
  }

  #reviewScreen .findings-tab-panel,
  #reviewScreen .findings-tab-panel.is-active:not([hidden]),
  #reviewScreen .findings-summary-panel.is-active:not([hidden]),
  #reviewScreen .findings-details-panel.is-active:not([hidden]),
  #reviewScreen .findings-list-panel.is-active:not([hidden]) {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    gap: var(--review-stack-gap);
    height: auto;
    min-height: 16rem;
    overflow: visible;
  }

  #reviewScreen .findings-summary-panel.is-active:not([hidden]) {
    min-height: 10rem;
  }

  #reviewScreen .findings-list-panel {
    -webkit-mask-image: none;
    mask-image: none;
  }

  #reviewScreen #summaryText {
    display: block;
    position: static;
    z-index: 1;
    min-height: 1.2rem;
    margin-bottom: 0.75rem;
  }

  #reviewScreen .finding-list,
  #reviewScreen .findings-list-panel .finding-list {
    min-height: 16rem;
    max-height: none;
    overflow: visible;
  }

  #reviewScreen .finding-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 0.5rem;
  }

  #reviewScreen .review-sticky-actions .detail-slider-center-label-text {
    font-size: 0.68rem;
    line-height: 1.15;
    letter-spacing: 0.06em;
  }

  #reviewScreen .finding-card-action,
  #reviewScreen .manual-dimension-actions button,
  #reviewScreen .manual-dimension-pick,
  #reviewScreen .manual-dimension-head .manual-dimension-pick {
    min-height: 44px;
  }

  .workspace[data-has~="review-screen"]:not(#has-pad) .text-button,
  body[data-has~="review-screen"]:not(#has-pad) .text-button {
    min-width: 44px;
    min-height: 44px;
    padding: 0.65rem 0.75rem;
  }

  #reviewScreen .manual-dimension-row,
  #reviewScreen .manual-dimension-card {
    overflow: visible;
  }

  #reviewScreen .oa-dim-row {
    grid-template-columns: 4.2rem minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: center;
  }

  #reviewScreen .oa-dim-val {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    overflow-wrap: normal;
  }

  #reviewScreen .oa-dim-status {
    grid-column: auto;
    justify-self: end;
  }

  #reviewScreen .review-layout > .panel-visibility-toggle {
    display: none;
  }

  #reviewScreen .review-sticky-actions {
    --review-control-gap: var(--review-stack-gap);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-area: tray;
    gap: var(--review-control-gap);
    position: relative;
    bottom: auto;
    z-index: 120;
    isolation: isolate;
    pointer-events: auto;
    flex: 0 0 auto;
    order: 2;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-top: 0;
    padding: 0;
    background: linear-gradient(to top, var(--bg) 78%, rgb(var(--bg-rgb) / 0.92) 92%, transparent);
    box-sizing: border-box;
  }

  #reviewScreen .review-sticky-actions .review-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0.5rem;
    row-gap: var(--review-control-gap);
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  #reviewScreen .review-sticky-actions .review-actions > .toggle {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    justify-content: start;
    column-gap: 0.55rem;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 44px;
    margin: 0;
    padding: 0.45rem 0.65rem;
    justify-self: stretch;
    border: 1px solid color-mix(in srgb, var(--border) 82%, var(--accent-border));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface-raised) 88%, color-mix(in srgb, var(--accent-wash) 28%, var(--bg)));
    box-sizing: border-box;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgb(var(--accent-rgb) / 0.18);
  }

  #reviewScreen .review-sticky-actions .diff-toggle-label,
  #reviewScreen .review-sticky-actions .link-views-label,
  #reviewScreen .review-sticky-actions .lock-marks-label,
  #reviewScreen .review-sticky-actions .rotate-all-label {
    position: static;
    display: flex;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    color: var(--text);
    font: 700 0.72rem/1.18 var(--font-ui);
    letter-spacing: 0.035em;
    text-transform: uppercase;
  }

  #reviewScreen .review-sticky-actions .review-actions > .toggle:has(input:checked) {
    border-color: rgb(var(--accent-border-rgb) / 0.62);
    background: color-mix(in srgb, var(--surface-raised) 70%, rgb(var(--accent-wash-rgb) / 0.3));
    box-shadow: inset 0 1px 0 rgb(var(--gloss-rgb) / 0.08);
  }

  #reviewScreen .review-sticky-actions .review-actions > .toggle input[type="checkbox"] {
    --checkbox-tick: 0.78rem;
    grid-column: 1;
    width: 24px;
    min-width: 24px;
    height: 24px;
    min-height: 24px;
    border-radius: 5px;
  }

  #reviewScreen .review-sticky-actions .review-actions > .toggle input[type="checkbox"]::before {
    width: var(--checkbox-tick);
    height: var(--checkbox-tick);
    background: var(--gloss);
    -webkit-mask: none;
    mask: none;
    clip-path: polygon(14% 53%, 34% 72%, 82% 22%, 94% 34%, 35% 94%, 4% 64%);
    opacity: 0;
  }

  #reviewScreen .review-sticky-actions .review-actions > .toggle input[type="checkbox"]:checked::before {
    opacity: 1;
  }

  #reviewScreen .review-sticky-actions .review-actions > .review-tolerance-control {
    border: 1px solid color-mix(in srgb, var(--border) 86%, color-mix(in srgb, var(--accent) 78%, var(--gloss)));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface) 78%, var(--surface-card));
    box-shadow: inset 0 1px 0 rgb(var(--gloss-rgb) / 0.045);
  }

  #reviewScreen .review-sticky-actions .review-decision-actions {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
    width: 100%;
    min-width: 0;
  }

  #reviewScreen .review-sticky-actions .review-post-controls {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  #reviewScreen .review-sticky-actions .review-decision-actions > button {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    margin-inline-start: 0;
  }

  /* Phone Review: decisions follow the Review title in normal flow. */
  #reviewScreen.is-active .review-sticky-actions .review-decision-actions {
    position: static;
    z-index: auto;
    width: 100%;
    max-width: 100%;
    padding: 0;
    box-sizing: border-box;
    background: transparent;
  }

  #reviewScreen .review-sticky-actions .review-again-button,
  #reviewScreen .review-sticky-actions .pairing-manager-button {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    margin-inline-start: 0;
  }

  /* ---- STAMP ----
     Desktop Stamp is sheet left + panel right. Phone stacks the same
     parts: full-width sheet, zoom off the paper, then the panel.
     The page owns vertical scroll. Do not lock this screen to 100dvh. */
  #stampScreen.is-active {
    --stamp-sheet-floor: 240px;
    --stamp-sheet-height: 240px;
    --stamp-empty-sheet-floor: 200px;
    --stamp-stack-gap: 0.75rem;
    display: flex;
    flex-direction: column;
    row-gap: var(--stamp-stack-gap);
    height: auto;
    min-height: 0;
    overflow-x: clip;
    overflow-y: visible;
  }

  #stampScreen .stamp-layout {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: var(--stamp-stack-gap);
    width: 100%;
    height: auto;
    min-width: 0;
    min-height: 0;
    overflow: visible;
    --side-control-width: 100%;
    grid-template-columns: minmax(0, 1fr);
  }

  #stampScreen .stamp-canvas {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "toolbar toolbar"
      "sheet sheet"
      "zoom expand";
    flex: 0 0 auto;
    gap: 0.35rem 0.5rem;
    width: 100%;
    height: auto;
    min-width: 0;
    min-height: 0;
    padding: 0.35rem 0.2rem;
    overflow: visible;
  }

  #stampScreen .canvas-toolbar {
    grid-area: toolbar;
    flex: 0 0 auto;
    margin-bottom: 0;
  }

  #stampScreen .stamp-frame,
  #stampScreen .stamp-frame:has(.stamp-sheet-scroll) {
    grid-area: sheet;
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    height: var(--stamp-sheet-height);
    min-width: 0;
    min-height: var(--stamp-sheet-floor);
    max-height: none;
    aspect-ratio: auto !important;
    margin-inline: 0;
  }

  #stampScreen .stamp-frame:has(.empty-sheet-state),
  #stampScreen .stamp-frame:has(.stamp-sheet-scroll):has(.empty-sheet-state) {
    height: var(--stamp-empty-sheet-floor);
    min-height: var(--stamp-empty-sheet-floor);
  }

  #stampScreen .stamp-frame:has(.stamp-sheet-scroll) .rendered-sheet,
  #stampScreen .stamp-sheet-viewport > .rendered-sheet {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }

  /* Zoom pill and expand sit under the sheet, not on the title block. */
  #stampScreen .stamp-zoom-floating {
    grid-area: zoom;
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    inset: auto;
    z-index: auto;
    justify-self: start;
    align-self: center;
    opacity: 1;
    min-height: 44px;
  }

  #stampScreen .expand-sheet-button {
    grid-area: expand;
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    inset: auto;
    z-index: auto;
    justify-self: end;
    align-self: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    opacity: 1;
  }

  #stampScreen .review-zoom-button {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  #stampScreen .side-panel-wrap {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    min-height: 0;
    overflow: visible;
    padding: 0.65rem;
  }

  #stampScreen .side-panel-wrap > .stamp-controls {
    flex: 0 0 auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
    overflow-y: visible;
  }

  #stampScreen .stamp-controls > .toggle,
  #stampScreen .stamp-controls .stamp-top-toggles .toggle,
  #stampScreen .stamp-controls .primary-button,
  #stampScreen .stamp-controls .ghost-button,
  #stampScreen #skipStampButton,
  #stampScreen #commentsDoneButton {
    width: 100%;
    min-height: 44px;
  }

  #stampScreen .stamp-controls .stamp-size-grid label,
  #stampScreen .comment-controls .comment-position-grid label {
    font-size: 1rem;
    line-height: 1.25;
  }

  #stampScreen .stamp-controls .size-input-row input,
  #stampScreen .comment-controls .size-input-row input,
  #stampScreen .stamp-controls .stamp-size-grid input,
  #stampScreen .comment-controls .comment-position-grid input {
    min-height: 44px;
    font-size: 1rem;
  }

  #stampScreen .manual-mark-hint-static {
    display: none;
  }

  #stampScreen .manual-mark-hint-phone {
    display: block;
  }

  #stampScreen .manual-mark-multiselect-toggle,
  #stampScreen .manual-mark-delete-selected {
    display: flex;
    width: 100%;
    min-height: 44px;
  }

  #stampScreen .panel-resize-handle,
  #stampScreen > .stamp-layout > .panel-visibility-toggle {
    display: none;
  }

  /* ---- EXPORT ---- */
  /* Desktop Export is preview left + save panel right. Phone stacks the
     same parts: full-width preview, zoom off the paper, then the panel.
     The page owns vertical scroll. Do not lock this screen to 100dvh. */
  #saveScreen.is-active {
    --save-sheet-floor: 240px;
    --save-sheet-height: 240px;
    --save-empty-sheet-floor: 200px;
    --save-stack-gap: 0.75rem;
    display: flex;
    flex-direction: column;
    row-gap: var(--save-stack-gap);
    height: auto;
    min-height: 0;
    overflow-x: clip;
    overflow-y: visible;
  }

  #saveScreen .save-layout {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: var(--save-stack-gap);
    width: 100%;
    height: auto;
    min-width: 0;
    min-height: 0;
    overflow: visible;
    --side-control-width: 100%;
    grid-template-columns: minmax(0, 1fr);
  }

  #saveScreen .save-preview {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "toolbar toolbar"
      "sheet sheet"
      "zoom expand";
    flex: 0 0 auto;
    gap: 0.35rem 0.5rem;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-width: 0;
    min-height: 0;
    padding: 0.35rem 0.2rem;
    overflow: visible;
  }

  #saveScreen .save-preview .canvas-toolbar {
    grid-area: toolbar;
    flex: 0 0 auto;
    margin-bottom: 0;
  }

  #saveScreen .save-preview-nav .sheet-page-button {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  #saveScreen .save-preview-frame,
  #saveScreen .save-preview-frame:has(.save-preview-scroll) {
    grid-area: sheet;
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    height: var(--save-sheet-height);
    min-width: 0;
    min-height: var(--save-sheet-floor);
    max-height: none;
    aspect-ratio: auto !important;
    margin-inline: 0;
  }

  #saveScreen .save-preview-frame:has(.empty-sheet-state),
  #saveScreen .save-preview-frame:has(.save-preview-scroll):has(.empty-sheet-state) {
    height: var(--save-empty-sheet-floor);
    min-height: var(--save-empty-sheet-floor);
  }

  #saveScreen .save-preview-frame:has(.save-preview-scroll) .rendered-sheet,
  #saveScreen .save-preview-viewport > .rendered-sheet {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }

  /* Zoom pill and expand sit under the sheet, not on the title block. */
  #saveScreen .save-preview-zoom-floating {
    grid-area: zoom;
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    inset: auto;
    justify-self: start;
    align-self: center;
    opacity: 1;
    min-height: 44px;
  }

  #saveScreen .save-preview-expand-button {
    grid-area: expand;
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    inset: auto;
    justify-self: end;
    align-self: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    opacity: 1;
  }

  #saveScreen .review-zoom-button {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  #saveScreen .save-panel {
    display: grid;
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    min-height: 0;
    overflow: visible;
    padding: 0.65rem;
  }

  #saveScreen .save-layout .save-panel > .screen-label,
  #saveScreen .save-layout .save-panel > h2,
  #saveScreen .save-layout .save-panel > .save-destination-note,
  #saveScreen .save-layout .save-panel > .save-dialog,
  #saveScreen .save-layout .save-panel > .success-message {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
  }

  #saveScreen .save-dialog.real-export,
  #saveScreen .save-layout .save-dialog {
    display: grid;
    gap: 0.65rem;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    min-height: 0;
    margin-right: 0;
    padding-right: 0;
    overflow: visible;
  }

  #saveScreen .save-dialog.real-export > label,
  #saveScreen .save-export-actions,
  #saveScreen .success-message {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
  }

  #saveScreen .save-dialog.real-export > label {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
  }

  #saveScreen .save-dialog.real-export input:not([type="checkbox"]),
  #saveScreen .save-panel .input-row input:not([type="checkbox"]) {
    width: 100%;
    min-width: 0;
    min-height: 44px;
  }

  #saveScreen .save-layout .save-panel .save-export-actions,
  #saveScreen .save-export-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
    width: 100%;
    max-width: 100%;
  }

  #saveScreen .save-layout .save-panel .save-export-actions .primary-button,
  #saveScreen .save-layout .save-panel .save-export-actions .share-pdf-button,
  #saveScreen .save-layout .save-panel .save-export-actions .ghost-button,
  #saveScreen .save-layout .save-panel .save-export-actions .desktop-download-link,
  #saveScreen .save-export-actions .primary-button,
  #saveScreen .save-export-actions .share-pdf-button,
  #saveScreen .save-export-actions .ghost-button,
  #saveScreen .save-export-actions .desktop-download-link {
    width: 100%;
    min-width: 0;
    min-height: 44px;
  }

  #saveScreen .panel-resize-handle,
  #saveScreen .save-layout > .panel-visibility-toggle {
    display: none;
  }

  #downloadPermissionDialog .permission-dialog-card,
  #saveSuccessDialog .permission-dialog-card {
    width: 100%;
    max-width: 100%;
  }

  #downloadPermissionDialog .permission-dialog-actions,
  #saveSuccessDialog .permission-dialog-actions {
    gap: 0.5rem;
    width: 100%;
  }

  #downloadPermissionDialog .permission-dialog-actions > button,
  #saveSuccessDialog .permission-dialog-actions > button {
    min-height: 44px;
  }

  /* ---- LANDING DEMO ---- */
  .landing-page,
  .landing-hero,
  .landing-demo,
  .landing-demo-monitor,
  .landing-demo-body,
  .landing-demo-sheets {
    max-width: 100%;
    min-width: 0;
  }

  .landing-demo-monitor {
    overflow-x: clip;
  }

  .landing-mobile-chrome {
    display: block;
    flex: 0 0 auto;
    min-width: 0;
  }

  .landing-mobile-pane-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.25rem;
    width: 100%;
    padding: 0.18rem;
    background: rgb(var(--overlay-rgb) / 0.04);
    border: 1px solid rgb(var(--overlay-rgb) / 0.08);
    border-radius: 12px;
  }

  .landing-mobile-pane-button {
    width: 100%;
    min-height: 44px;
    padding: 0 0.5rem;
    color: var(--text-muted);
    font: 800 0.72rem/1 var(--font-ui);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: transparent;
    border: 0;
    border-radius: 9px;
  }

  .landing-mobile-pane-button.is-active {
    color: var(--on-colour-button);
    background: var(--accent-action-gradient);
  }

    .landing-demo-sheets {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    min-width: 0;
  }

  .landing-demo-sheets[data-mobile-pane="reference"] > .landing-demo-sheet-mfr,
  .landing-demo-sheets[data-mobile-pane="manufacturer"] > .landing-demo-sheet:not(.landing-demo-sheet-mfr) {
    position: absolute;
    inset: 0;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
  }

  /* ---- PAIRING / SHEET MANAGER ---- */
  /* The card, panels, page strips and decision bar have their own phone rules next to
     their desktop rules ("Sheet Manager: side by side"). Only touch sizes are set here. */
  #pairingOverview .sm-area .pairing-detail-zoom-control .review-zoom-button,
  #pairingOverview .sm-area .pairing-detail-expand {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
  }
  .pairing-auto-dimension-row,
  .pairing-dimension-chips,
  .pairing-dimension-empty {
    height: auto;
    min-height: 44px;
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .pairing-dimension-chips,
  .pairing-dimension-empty {
    display: flex;
    align-items: center;
    width: 100%;
  }

  /* ---- QUEUE ----
     Phone sheet, not desktop glass. Cover Review / Load / Stamp chrome.
     Close X stays in the panel header. One panel scroll.
     Header is one compact row: title + close. Desktop keeps the
     stacked progress chrome. */
  .review-queue-dialog,
  .review-queue-panel {
    z-index: 260;
    place-items: stretch;
    padding: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    min-height: 100dvh;
    height: 100dvh;
    overflow: hidden;
    isolation: isolate;
    background: var(--bg-strong);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .review-queue-dialog:not(.is-open),
  .review-queue-dialog[aria-hidden="true"],
  .review-queue-panel:not(.is-open),
  .review-queue-panel[aria-hidden="true"] {
    pointer-events: none !important;
  }

  .review-queue-card {
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: 100dvh;
    isolation: isolate;
    overflow: hidden;
    background: var(--surface);
    border: 0;
    border-radius: var(--panel-radius);
    transform: none;
    box-shadow: none;
  }

  .review-queue-header {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: center;
    column-gap: var(--space-3);
    row-gap: 0;
    flex: 0 0 auto;
    box-sizing: border-box;
    min-height: calc(56px + env(safe-area-inset-top, 0px));
    max-height: calc(64px + env(safe-area-inset-top, 0px));
    padding: 6px var(--workspace-gutter);
    padding-top: calc(6px + env(safe-area-inset-top, 0px));
    background: var(--surface);
    overflow: hidden;
  }

  .review-queue-header > div:first-child {
    display: flex;
    align-items: center;
    gap: 0;
    min-width: 0;
  }

  .review-queue-header .screen-label,
  .review-queue-header #reviewQueueProgress,
  .review-queue-header .review-queue-progress-ui {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* PS-059: the title wraps to a second line (inside the 56-64px header)
     instead of ending in an ellipsis. */
  .review-queue-header h3 {
    font-size: 1rem;
    line-height: 1.2;
    white-space: normal;
    overflow: hidden;
    overflow-wrap: break-word;
  }

  .review-queue-header #reviewQueueCloseButton {
    position: relative;
    inset: auto;
    z-index: 1;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    flex: 0 0 44px;
    margin: 0;
  }

  .review-queue-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-inline: var(--workspace-gutter);
    padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  }

  .review-queue-file-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .review-queue-tile {
    background: var(--surface-raised);
  }

  .review-queue-file-panel {
    background: var(--bg);
  }

  .review-queue-tile-actions > button {
    width: 100%;
    min-height: 44px;
  }

  /* ---- 390px live-audit fixes ---- */
  .step {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 7px;
    isolation: isolate;
    z-index: 0;
    width: 100%;
    overflow: hidden;
    padding: 0.2rem 0.12rem;
    appearance: none;
    -webkit-appearance: none;
    background: none;
    background-color: transparent;
    background-image: none;
    border-radius: 0;
    box-shadow: none;
    text-shadow: none;
    filter: none;
  }

  .step.is-active {
    z-index: 1;
    background: none;
    background-color: transparent;
    background-image: none;
    border-radius: 0;
    box-shadow: none;
    text-shadow: none;
    -webkit-text-stroke: 0;
    filter: none;
  }

  .step small {
    display: none !important;
    height: 0;
    overflow: hidden;
  }

  .landing-sheet-viewport {
    overflow: clip;
    contain: paint;
  }

  .landing-demo-monitor .landing-demo-scan:not(.is-running) {
    clip-path: inset(0);
  }

  .support-drawer.is-collapsed {
    display: none;
    visibility: hidden;
    pointer-events: none;
    transform: none;
  }

  body.mobile-actions-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 75;
    background: var(--surface);
    pointer-events: auto;
  }

  body.mobile-actions-open .workspace {
    visibility: hidden;
    pointer-events: none;
  }

  /* Phone hamburger is a full-width sheet from the top chrome, not a
     centred dropdown card. Desktop Menu at ≥861px stays a pill dropdown. */
  body.mobile-actions-open .sidebar-action-menu {
    position: fixed;
    top: var(--workflow-offset);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 80;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    height: auto;
    min-height: calc(100dvh - var(--workflow-offset));
    transform: none;
    background: var(--surface);
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  body.mobile-actions-open .sidebar-action-menu-list {
    position: static;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: auto;
    min-height: 0;
    overflow: auto;
    background: var(--surface);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0.5rem 0;
  }

  body.mobile-actions-open .sidebar-action-menu-list > :is(
    .app-notification-center,
    .ghost-button,
    .menu-support-button
  ),
  body.mobile-actions-open .sidebar-action-menu-list .app-notification-center > summary {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    box-sizing: border-box;
    pointer-events: auto;
  }

  body.mobile-actions-open .sidebar-action-menu-list .app-notification-center > summary {
    display: flex;
    align-items: center;
    height: 44px;
    cursor: pointer;
  }

  #reviewScreen .review-sticky-actions .review-actions > .review-tolerance-control,
  #reviewScreen .review-sticky-actions .review-actions > .review-decision-actions {
    grid-column: 1 / -1;
  }

  #reviewScreen .review-sticky-actions .review-actions .review-tolerance-slider {
    --detail-thumb-size: 22px;
    --detail-control-height: 44px;
    --detail-track-height: 11px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 44px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: auto;
    padding-inline: 16px;
    box-sizing: border-box;
  }

  #reviewScreen .review-sticky-actions .review-tolerance-slider .detail-slider-scale {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    z-index: 2;
    margin-bottom: 0.2rem;
    width: 100%;
  }

  #reviewScreen .review-sticky-actions .review-tolerance-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 3.25rem;
    grid-template-rows: auto 44px;
    align-items: end;
    column-gap: 0.4rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
    padding-inline: 4px 8px;
    box-sizing: border-box;
  }

  #reviewScreen .review-sticky-actions .review-tolerance-slider {
    grid-column: 1;
    grid-row: 1 / span 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 44px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    flex: none;
    height: auto;
    padding-inline: 16px;
    box-sizing: border-box;
  }

  #reviewScreen .review-sticky-actions .review-tolerance-number {
    grid-column: 2;
    grid-row: 2;
    flex: 0 0 auto;
    width: auto;
    min-width: 44px;
    min-height: 44px;
    height: 44px;
    padding-inline: 0.25rem;
  }

  #reviewScreen .review-sticky-actions .review-tolerance-number > span[aria-hidden="true"] {
    display: none;
  }

  #reviewScreen .review-sticky-actions #reviewToleranceInput {
    width: 4.5ch;
    min-width: 44px;
    min-height: 44px;
    height: 44px;
  }

  #reviewScreen .drawing-pane:has(.empty-sheet-state) .pane-header-controls,
  #reviewScreen .drawing-pane:has(.empty-sheet-state) .review-zoom-control,
  #reviewScreen .drawing-pane:has(.empty-sheet-state) .expand-sheet-button {
    display: none;
  }

  #reviewScreen:has(.empty-sheet-state) .review-actions > :not(.review-decision-actions) {
    display: none;
  }

  #reviewScreen .review-sticky-actions .review-post-controls:has(.pairing-manager-button[hidden]) {
    grid-template-columns: minmax(0, 1fr);
  }

  #reviewScreen .review-sticky-actions .review-post-controls:has(.pairing-manager-button[hidden]) .review-again-button {
    grid-column: 1 / -1;
    width: 100%;
  }

  #reviewScreen .diff-badge::before {
    /* Keep the 44 px phone hit area without changing the visible marker box. */
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(44px, 100%);
    height: max(44px, 100%);
    translate: -50% -50%;
  }

  .landing-zoom-button,
  .landing-expand {
    min-width: 44px;
    min-height: 44px;
  }

  .landing-demo-monitor .landing-demo-pin.landing-demo-issue-pill,
  .landing-demo.is-armed .landing-demo-monitor .landing-demo-pin.landing-demo-issue-pill:not(.is-in),
  .landing-demo.is-armed .landing-demo-monitor .landing-demo-pin.landing-demo-issue-pill.is-in {
    transform: none;
  }

  /* ---- leftover phone-parity clips (v24) ---- */
  /* Sticky CONTINUE / stacked detail footer. Inset keeps the last card
     and Overall Size above the bar. */
  :root {
    --support-drawer-width: 100%;
    --pairing-phone-submit-space: calc(8.5rem + env(safe-area-inset-bottom, 0px));
  }

    .pairing-overview {
    scroll-padding-bottom: var(--pairing-phone-submit-space);
  }

  .support-drawer {
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
  }

  .settings-panel {
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
  }

    #pairingOverview .oa-dim-row.pairing-auto-dimension-row {
    display: grid;
    grid-template-columns: minmax(5.75rem, 1fr) minmax(5.75rem, 1fr);
    grid-template-areas:
      "axis axis"
      "yours supplied";
    align-items: start;
    column-gap: 0.55rem;
    row-gap: 0.2rem;
    min-width: 0;
    min-height: 44px;
    height: auto;
    padding: 0.45rem 0.5rem;
    overflow: visible;
  }

  #pairingOverview .pairing-auto-dimension-row .oa-dim-axis {
    grid-area: axis;
    font-size: 0.85rem;
  }

  #pairingOverview .pairing-auto-dimension-row .oa-dim-val:nth-child(2) {
    grid-area: yours;
  }

  #pairingOverview .pairing-auto-dimension-row .oa-dim-val:nth-child(3) {
    grid-area: supplied;
  }

  #pairingOverview .oa-dim-val {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.35rem;
    min-height: 44px;
    height: auto;
    box-sizing: border-box;
    min-width: 5.75rem;
    white-space: nowrap;
    overflow: visible;
    overflow-wrap: normal;
    word-break: normal;
  }

  #pairingOverview .oa-dim-side {
    position: static;
    display: inline;
    font-size: 0.75rem;
    line-height: 1.2;
  }

  #pairingOverview .pairing-dimension-actions {
    width: 100%;
    min-height: 44px;
  }

  #stampScreen .stamp-widget {
    --stamp-handle-size: clamp(8px, 14cqmin, 12px);
  }

  #stampScreen .stamp-resize-handle {
    width: var(--stamp-handle-size);
    height: var(--stamp-handle-size);
  }

  #stampScreen .stamp-resize-handle-nw {
    top: calc(var(--stamp-handle-size) * -0.5);
    left: calc(var(--stamp-handle-size) * -0.5);
  }

  #stampScreen .stamp-resize-handle-ne {
    top: calc(var(--stamp-handle-size) * -0.5);
    right: calc(var(--stamp-handle-size) * -0.5);
  }

  #stampScreen .stamp-resize-handle-se {
    right: calc(var(--stamp-handle-size) * -0.5);
    bottom: calc(var(--stamp-handle-size) * -0.5);
  }

  #stampScreen .stamp-resize-handle-sw {
    bottom: calc(var(--stamp-handle-size) * -0.5);
    left: calc(var(--stamp-handle-size) * -0.5);
  }

  #stampScreen .stamp-resize-handle-n,
  #stampScreen .stamp-resize-handle-s,
  #stampScreen .stamp-resize-handle-e,
  #stampScreen .stamp-resize-handle-w,
  #stampScreen .stamp-resize-handle-move {
    display: none;
  }

  #stampScreen .advanced-controls,
  #stampScreen .stamp-size-panel,
  #stampScreen .stamp-size-header,
  #stampScreen .stamp-size-grid,
  #stampScreen .comment-controls .comment-position-grid {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  #stampScreen .advanced-controls {
    overflow-x: clip;
  }

  #stampScreen .advanced-controls[open] > :not(summary) {
    width: auto;
    max-width: 100%;
    margin: 0.5rem 0 0;
    padding-inline: 0.5rem;
    box-sizing: border-box;
  }

  #stampScreen .stamp-controls .stamp-size-panel {
    width: auto;
    max-width: 100%;
    padding: 0.5rem;
  }

  #stampScreen .stamp-controls .stamp-size-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.5rem;
    row-gap: 0.2rem;
  }

  #stampScreen .stamp-controls .stamp-size-lock {
    flex: 0 1 auto;
    white-space: nowrap;
  }

  #stampScreen .stamp-controls .stamp-size-grid,
  #stampScreen .comment-controls .comment-position-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  #stampScreen .stamp-controls .size-input-row,
  #stampScreen .comment-controls .size-input-row {
    overflow: hidden;
    min-width: 0;
  }

  #stampScreen .stamp-controls .size-input-row span,
  #stampScreen .comment-controls .size-input-row span {
    flex: 0 0 auto;
    padding-right: 0.55rem;
  }

  #reviewScreen .manual-dimension-card,
  #reviewScreen .oa-material-card {
    --panel-text-scale: 0.8rem;
  }

  #reviewScreen .manual-dimension-row label span,
  #reviewScreen .finding-heading span,
  #reviewScreen .findings-tab,
  #reviewScreen .findings-tab-details {
    font-size: max(12px, 0.75rem);
  }

  #loadScreen .supplied-source-tabs .findings-tab {
    font-size: max(12px, 0.75rem);
  }

  #reviewScreen .severity-tab {
    height: 44px;
    min-height: 44px;
  }

  /* ---- leftover overlay chrome (v28) ---- */
  #settingsDialog form > header .screen-label,
  #helpDrawer .screen-label,
  #helpDrawer .help-suggestions button,
  .settings-mobile-nav > span,
  #settingsDialog .appearance-group-help,
  #settingsDialog .appearance-option-hint,
  #settingsDialog .field-help,
  #settingsDialog .saving-file-name .field-help,
  .notification-tabs button,
  #appMarkNotificationsRead {
    font-size: max(12px, 0.75rem);
  }

  #settingsDialog .settings-panel-action {
    width: 100%;
    max-width: none;
    justify-self: stretch;
  }

  #helpDrawer .help-button-guide summary {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  #helpDrawer.support-drawer {
    z-index: 220;
    background: var(--surface);
    border-left: 0;
    box-shadow: none;
  }

  .notification-tabs button,
  #appMarkNotificationsRead {
    min-height: 44px;
  }

  /* ---- leftover stamp picker + signup (v29) ---- */
  #settingsDialog.is-settings-stamp .stamp-carousel {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    grid-template-areas:
      "preview preview preview"
      "prev . next";
    gap: 0.5rem;
    align-items: center;
  }

  #settingsDialog.is-settings-stamp .stamp-carousel-prev {
    grid-area: prev;
    justify-self: start;
  }

  #settingsDialog.is-settings-stamp .stamp-coverflow {
    grid-area: preview;
    width: 100%;
    height: clamp(12rem, 32vh, 16rem);
    padding: 0.75rem;
    overflow: hidden;
  }

  #settingsDialog.is-settings-stamp .stamp-carousel-next {
    grid-area: next;
    justify-self: end;
  }

  #settingsDialog.is-settings-stamp .stamp-carousel-nav {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }

  #settingsDialog.is-settings-stamp .stamp-cover:not([aria-selected="true"]):not([tabindex="0"]) {
    display: none;
  }

  #settingsDialog.is-settings-stamp .stamp-cover[aria-selected="true"],
  #settingsDialog.is-settings-stamp .stamp-cover[tabindex="0"] {
    top: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    left: 0.75rem;
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    transform: none !important;
  }

  #settingsDialog.is-settings-stamp .stamp-cover[aria-selected="true"] .stamp-cover-box,
  #settingsDialog.is-settings-stamp .stamp-cover[tabindex="0"] .stamp-cover-box {
    opacity: 1 !important;
  }

  .auth-invite-note {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: max(12px, 0.75rem);
    line-height: 1.35;
  }
}

@media (max-width: 430px) {
  .step-copy,
  .step strong {
    overflow: hidden;
    overflow-wrap: normal;
    word-break: keep-all;
    text-overflow: clip;
    white-space: nowrap;
  }

}

/* Authenticated application frame. Keep one physical 5 mm inset around the
   complete app at every viewport size. Safe-area insets are additive only on
   the affected edge. The workspace retains its internal content gutters. */
:root {
  --app-frame-inset: 5mm;
}

#appShell {
  width: calc(100% - 10mm);
  min-height: calc(100dvh - 10mm);
  margin: var(--app-frame-inset);
}

#appShell .sidebar {
  top: calc(var(--app-frame-inset) + env(safe-area-inset-top, 0px));
  right: calc(var(--app-frame-inset) + env(safe-area-inset-right, 0px));
  left: calc(var(--app-frame-inset) + env(safe-area-inset-left, 0px));
}

#workflowPanel :is(button, summary) {
  min-height: 44px;
}

#workflowPanel :is(#undoButton, #redoButton, #clearAllButton) {
  min-width: 44px;
  height: 44px;
  min-height: 44px;
}

@media (min-width: 641px) and (max-width: 1180px) {
  .workspace[data-has~="review-screen"]:not(#has-pad) .topbar-main {
    align-items: stretch;
    flex-direction: column;
    flex-wrap: wrap;
  }

  /* Keep Queue and its Review actions as one unit below the title when needed.
     Shrinking the nested host or retaining its old grid widths overlaps them. */
  .workspace[data-has~="review-screen"]:not(#has-pad) .review-topbar-actions {
    width: 100%;
    flex: 0 0 auto;
  }

  .workspace[data-has~="review-screen"]:not(#has-pad) .review-topbar-actions .review-post-controls {
    flex: 0 0 auto;
  }

  .workspace[data-has~="review-screen"]:not(#has-pad) .review-topbar-actions .review-post-controls > button {
    width: auto;
  }
}

@media (min-width: 641px) {
  #reviewScreen .drawing-pane > .review-sheet-frame:not(.is-focused-crop),
  #reviewScreen .drawing-pane > .review-sheet-frame:not(.is-focused-crop) .sheet-viewport {
    border: 0;
    box-shadow: none;
    outline: 0;
  }

  #reviewScreen .drawing-pane > .review-sheet-frame:not(.is-focused-crop) .rendered-sheet {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
}

@media (min-width: 1181px) {
  .workspace[data-has~="review-screen"]:not(#has-pad),
  .workspace[data-has~="stamp-screen"]:not(#has-pad),
  .workspace[data-has~="save-screen"]:not(#has-pad) {
    height: calc(100dvh - 10mm - var(--workflow-offset) - var(--bottom-action-space));
  }
}

.review-topbar-viewport,
.review-scale-stage {
  display: contents;
}

.review-final-actions:empty {
  display: none;
}

.review-final-stack:empty {
  display: none;
}

.review-topbar-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2mm;
  min-width: 0;
  margin-inline-start: auto;
}

.review-topbar-actions:empty {
  display: none;
}

.review-topbar-actions .review-post-controls {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2mm;
  min-width: 0;
}

.review-topbar-actions :is(.app-queue-button, .review-again-button, .pairing-manager-button) {
  --review-control-optical-y: 0.025em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  min-height: 44px;
  margin: 0;
  line-height: 1;
  white-space: nowrap;
}

.review-topbar-actions :is(.app-queue-button, .review-again-button, .pairing-manager-button) > :is(svg, span, strong) {
  align-self: center;
  translate: 0 var(--review-control-optical-y);
}

@media (min-width: 1181px) {
  .review-topbar-actions {
    --review-label-optical-y: calc(1.2px - 0.05em);
  }

  .review-topbar-actions .app-queue-button {
    --review-label-optical-y: calc(1.2px - 0.07em);
  }

  .review-topbar-actions :is(.app-queue-button, .review-again-button, .pairing-manager-button) {
    gap: var(--space-2);
    padding-inline: var(--space-4);
    font: 600 0.85rem/1 var(--font-body);
    letter-spacing: var(--track-caps);
  }

  .review-topbar-actions :is(.app-queue-button, .review-again-button, .pairing-manager-button) > svg {
    display: block;
    flex: 0 0 1rem;
    width: 1rem;
    height: 1rem;
  }

  .review-topbar-actions :is(.app-queue-button, .review-again-button, .pairing-manager-button) > span:not(.pairing-manager-count) {
    display: inline-flex;
    align-items: center;
    height: 1rem;
    font: inherit;
    letter-spacing: inherit;
    translate: 0 calc(var(--review-control-optical-y) + var(--review-label-optical-y));
  }

  .review-topbar-actions :is(.app-queue-count, .pairing-manager-count) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    font: 700 0.68rem/1 var(--font-ui);
    letter-spacing: 0.04em;
  }

  .workspace[data-has~="review-screen"]:not(#has-pad) {
    --review-scale: 1;
    width: 100%;
    max-width: none;
    height: auto;
    min-height: calc(100dvh - 10mm - var(--workflow-offset) - var(--bottom-action-space));
    margin-inline: 0;
    overflow: visible;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    row-gap: var(--space-4);
    justify-items: stretch;
    align-content: start;
  }

  .workspace[data-has~="review-screen"]:not(#has-pad) > .review-topbar-viewport {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
  }

  .workspace[data-has~="review-screen"]:not(#has-pad) > .review-topbar-viewport > .topbar {
    width: 100%;
    height: auto;
    transform: none;
  }

  .workspace[data-has~="review-screen"]:not(#has-pad) .topbar-main {
    flex-direction: row;
    align-items: center;
  }

  #reviewScreen.is-active {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    overflow: visible;
  }

  #reviewScreen > .review-scale-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    row-gap: var(--space-4);
    width: 100%;
    height: auto;
    min-height: 0;
    padding-bottom: 16px;
    box-sizing: border-box;
    transform: none;
  }

  #reviewScreen .review-header {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }

  #reviewScreen .review-heading {
    flex-direction: row;
    align-items: center;
  }

  #reviewScreen .review-actions,
  #reviewScreen .review-tolerance-control {
    width: auto;
  }

  #reviewScreen .review-layout {
    grid-template-columns: minmax(0, 1fr) var(--side-control-width);
    grid-template-rows: auto;
    height: auto;
    gap: var(--page-gutter);
    min-height: 0;
    overflow: visible;
  }

  #reviewScreen .drawing-board {
    display: grid;
    grid-column: 1;
    grid-row: 1;
    grid-template-rows: auto;
    gap: 0;
  }

  #reviewScreen .drawing-panes,
  #reviewScreen .drawing-panes:not([data-review-mode="requirements"]) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    align-self: start;
    align-items: start;
    height: auto;
    gap: var(--space-4);
  }

  #reviewScreen .drawing-pane,
  #reviewScreen .drawing-panes:not([data-review-mode="requirements"]) .drawing-pane {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-self: start;
    width: auto;
    height: auto;
    min-height: 0;
    overflow: hidden;
  }

  #reviewScreen .drawing-pane > .review-sheet-frame,
  #reviewScreen .drawing-pane > .review-sheet-frame.sheet-frame,
  #reviewScreen .drawing-panes:not([data-review-mode="requirements"]) .review-sheet-frame,
  #reviewScreen .drawing-panes:not([data-review-mode="requirements"]) .review-sheet-frame.sheet-frame {
    position: relative;
    /* The panel keeps the complete column width. The loaded page ratio supplies
       its proportional height, so the raster reaches every panel edge without
       being stretched or cropped. Zoom and pan stay on the child scroll area. */
    align-self: start;
    justify-self: stretch;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: var(--sheet-aspect, 1.3889);
  }

  #reviewScreen .findings-panel,
  #reviewScreen .findings-panel.app-scroll-rail {
    display: flex;
    flex-direction: column;
    position: relative;
    grid-column: 2;
    grid-row: 1;
    width: var(--side-control-width);
    max-width: var(--side-control-width);
    align-self: start;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: var(--space-4);
  }

  #reviewScreen .findings-tab-panel,
  #reviewScreen .findings-list-panel {
    overflow: visible;
  }

  #reviewScreen .findings-details-panel.is-active:not([hidden]) {
    flex: 0 0 auto;
    height: auto;
  }
}

@media (max-width: 640px) {
  .review-topbar-actions {
    display: contents;
  }
}

/* Phone Review tolerance card. */
@media (max-width: 640px) {
  #reviewScreen .review-sticky-actions {
    --review-slider-track-inactive: var(--surface-muted);
  }

  #reviewScreen .review-sticky-actions .review-tolerance-control {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto 44px;
    column-gap: 0.5rem;
    row-gap: 0.25rem;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 0.65rem 1rem 0.55rem;
  }

  #reviewScreen .review-sticky-actions .mobile-slider-label {
    display: block;
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    justify-self: start;
    color: var(--text-muted);
    font: 700 0.72rem/1 var(--font-ui);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  #reviewScreen .review-sticky-actions .review-tolerance-slider > .detail-slider-scale {
    display: none;
  }

  #reviewScreen .review-sticky-actions .review-actions .review-tolerance-slider {
    --detail-stop-inset: calc(var(--detail-thumb-size) / 2);
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-rows: 0 44px;
    justify-self: center;
    width: 92%;
    min-width: 0;
    max-width: 92%;
    height: 44px;
    padding: 0;
  }

  #reviewScreen .review-sticky-actions .review-tolerance-number {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: end;
    display: flex;
    width: auto;
    min-width: 0;
    min-height: 44px;
    height: 44px;
    padding: 0;
    color: var(--text);
    font: 700 0.72rem/1 var(--font-ui);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  #reviewScreen .review-sticky-actions .review-tolerance-number > span[aria-hidden="true"] {
    display: inline-flex;
  }

  #reviewScreen .review-sticky-actions .review-tolerance-up-to {
    display: none;
  }

  #reviewScreen .review-sticky-actions #reviewToleranceInput {
    width: 3.5ch;
    min-width: 44px;
    min-height: 44px;
    height: 44px;
  }

  #reviewScreen .review-sticky-actions .detail-slider-stops::before {
    background: var(--review-slider-track-inactive);
  }

  #reviewScreen .review-sticky-actions .review-tolerance-slider .detail-slider-stops::before,
  #reviewScreen .review-sticky-actions .review-tolerance-slider .detail-slider-stops::after {
    left: calc(var(--detail-thumb-size) / 2);
    width: calc(100% - var(--detail-thumb-size));
  }

  #reviewScreen .review-sticky-actions .review-tolerance-slider .detail-slider-stops::after {
    clip-path: inset(0 calc(100% - var(--detail-fill, 100%)) 0 0);
  }

  #reviewScreen .findings-tabbar {
    gap: 0.25rem;
    padding: 0.4rem;
  }

  #reviewScreen .findings-tab {
    padding-inline: 0.25rem;
  }

  #reviewScreen .findings-tab-count {
    min-width: 1.15rem;
    height: 1.15rem;
    padding-inline: 0.2rem;
  }

  #reviewScreen .summary-point-list li {
    padding-block: 0.72rem;
    padding-left: 1.08rem;
    font-size: 0.86rem;
    line-height: 1.48;
  }

  #reviewScreen .summary-point-list li::before {
    top: calc(0.72rem + 0.52em);
    width: 0.4rem;
    height: 0.4rem;
  }
}

/* NON-PHONE REVIEW PROPORTION CONTRACT

   The approved Review composition at 1289 x 828 is the reference for every
   viewport above the protected phone breakpoint. Keep this as native responsive
   geometry. Do not transform or zoom the application canvas. The drawing board
   and Review rail remain in one row, the two PDF panes remain side by side, and
   the rail keeps the same 18.75% share of the Review width. The 10rem floor keeps
   controls usable on small tablets. The 28.5rem ceiling prevents an oversized
   rail on very wide displays. Rules at 640px and below remain unchanged. */
@media (min-width: 641px) {
  body[data-has~="review-screen"]:not(#has-pad) {
    --workflow-offset: 6rem;
    --bottom-action-space: 4rem;
  }

  body[data-has~="review-screen"]:not(#has-pad) #workflowPanel.sidebar {
    /* Equal flexible edge tracks keep the workflow steps on the physical
       viewport centre even when the brand and action groups have different
       widths. Each edge group remains anchored to its own outside inset. */
    grid-template-columns: minmax(0, 1fr) max-content minmax(0, 1fr);
    grid-template-areas: "brand steps actions";
    gap: clamp(0.45rem, 1.25vw, 2.4rem);
    min-height: clamp(3.35rem, 5.2vw, 4.25rem);
    border-radius: var(--panel-radius);
  }

  body[data-has~="review-screen"]:not(#has-pad) #workflowPanel .brand-block {
    grid-area: brand;
  }

  body[data-has~="review-screen"]:not(#has-pad) #workflowPanel .step-list {
    grid-area: steps;
    display: flex;
    grid-template-columns: none;
    justify-self: center;
    width: max-content;
  }

  body[data-has~="review-screen"]:not(#has-pad) #workflowPanel .step {
    width: auto;
    min-height: 44px;
  }

  body[data-has~="review-screen"]:not(#has-pad) #workflowPanel .sidebar-actions {
    grid-area: actions;
    display: flex;
    justify-self: end;
    justify-content: flex-end;
    width: auto;
  }

  /* The workflow stays physically centred. Compact only the labels that
     would otherwise cross from the trailing group over EXPORT at common laptop
     widths; the controls keep their full 44px target and accessible name. */
  #workflowPanel .sidebar-actions {
    gap: 0.625rem;
  }

  body[data-has~="review-screen"]:not(#has-pad) #workflowPanel .mobile-actions-button {
    display: none;
  }

  .workspace[data-has~="review-screen"]:not(#has-pad) {
    --review-scale: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    row-gap: var(--space-4);
    width: 100%;
    max-width: none;
    height: auto;
    min-height: calc(100dvh - 10mm - var(--workflow-offset) - var(--bottom-action-space));
    margin-inline: 0;
    overflow: visible;
    justify-items: stretch;
    align-content: start;
  }

  .workspace[data-has~="review-screen"]:not(#has-pad) > .review-topbar-viewport {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
  }

  .workspace[data-has~="review-screen"]:not(#has-pad) > .review-topbar-viewport > .topbar,
  .workspace[data-has~="review-screen"]:not(#has-pad) .topbar-main {
    width: 100%;
    height: auto;
    align-items: center;
    flex-direction: row;
    transform: none;
  }

  .workspace[data-has~="review-screen"]:not(#has-pad) .review-topbar-actions {
    width: auto;
  }

  #reviewScreen.is-active {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    overflow: visible;
  }

  #reviewScreen > .review-scale-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    row-gap: var(--space-4);
    width: 100%;
    height: auto;
    min-height: 0;
    padding-bottom: 16px;
    box-sizing: border-box;
    transform: none;
  }

  #reviewScreen .review-header,
  #reviewScreen .review-heading {
    align-items: center;
    flex-direction: row;
  }

  #reviewScreen .review-header {
    flex-wrap: wrap;
  }

  #reviewScreen .review-actions,
  #reviewScreen .review-tolerance-control {
    width: auto;
  }

  #reviewScreen .review-layout:not(:has(.findings-panel[data-review-mode="requirements"])) {
    --side-control-width: clamp(10rem, 18.75%, 28.5rem);
  }

  #reviewScreen .review-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--side-control-width);
    grid-template-rows: auto;
    gap: var(--page-gutter);
    width: 100%;
    height: auto;
    min-width: 0;
    min-height: 0;
    overflow: visible;
    align-items: stretch;
  }

  #reviewScreen .drawing-board {
    display: grid;
    grid-column: 1;
    grid-row: 1;
    grid-template-rows: auto;
    gap: 0;
    min-width: 0;
  }

  #reviewScreen .drawing-panes,
  #reviewScreen .drawing-panes:not([data-review-mode="requirements"]) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    align-self: start;
    align-items: start;
    width: 100%;
    height: auto;
    gap: var(--space-4);
  }

  #reviewScreen .drawing-pane,
  #reviewScreen .drawing-panes:not([data-review-mode="requirements"]) .drawing-pane {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-self: start;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
  }

  #reviewScreen .drawing-pane > .review-sheet-frame,
  #reviewScreen .drawing-pane > .review-sheet-frame.sheet-frame,
  #reviewScreen .drawing-panes:not([data-review-mode="requirements"]) .review-sheet-frame,
  #reviewScreen .drawing-panes:not([data-review-mode="requirements"]) .review-sheet-frame.sheet-frame {
    position: relative;
    align-self: start;
    justify-self: stretch;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: var(--sheet-aspect, 1.3889);
  }

  /* The PDF page owns the complete proportional frame. Never paint a white
     card edge or browser-style border around that page on non-phone Review. */
  #reviewScreen .drawing-pane > .review-sheet-frame:not(.is-focused-crop) {
    background: var(--bg-strong);
    border: 0;
    box-shadow: none;
    outline: 0;
  }

  #reviewScreen .drawing-pane > .review-sheet-frame:not(.is-focused-crop) .rendered-sheet {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: transparent;
  }

  #reviewScreen .findings-panel,
  #reviewScreen .findings-panel.app-scroll-rail {
    display: flex;
    flex-direction: column;
    position: relative;
    grid-column: 2;
    grid-row: 1;
    width: var(--side-control-width);
    max-width: var(--side-control-width);
    align-self: start;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: var(--space-4);
  }

  #reviewScreen .findings-tabbar {
    position: sticky;
    top: 0;
    z-index: 6;
    background:
      linear-gradient(180deg, rgb(var(--overlay-rgb) / 0.055), rgb(var(--overlay-rgb) / 0.02)),
      var(--bg);
  }

  #reviewScreen .findings-tab-panel,
  #reviewScreen .findings-list-panel {
    overflow: visible;
  }

  #reviewScreen .findings-details-panel.is-active:not([hidden]) {
    flex: 0 0 auto;
    height: auto;
  }

  #reviewScreen .review-layout > .panel-visibility-toggle {
    display: grid;
    position: absolute;
    top: 50%;
    right: calc(var(--side-control-width) - 1px);
    grid-column: auto;
    grid-row: auto;
    align-self: auto;
    justify-self: auto;
    margin: 0;
    transform: none;
    translate: 0 -50%;
  }
}

@media (min-width: 861px) and (max-width: 1080px) {
  /* The compact action group already uses icon-only controls here. Do not add
     a second trailing inset: the Menu and logo must meet equal pill edges. */
  #workflowPanel .sidebar-actions {
    margin-inline-end: 0;
  }

  #workflowPanel .sidebar-actions {
    gap: var(--space-2);
  }

  /* The fixed 44px action targets exceed the symmetric edge track at 861px.
     Use the existing compact spacing floors, not hidden labels or clipped
     controls. Reset the old flex auto margin so grid end alignment can work. */
  body[data-has~="review-screen"]:not(#has-pad) #workflowPanel .sidebar-actions {
    margin-inline-start: 0;
  }

  body[data-has~="review-screen"]:not(#has-pad) #workflowPanel .step-list {
    gap: 0.3rem;
  }

  body[data-has~="review-screen"]:not(#has-pad) #workflowPanel .step {
    column-gap: var(--space-1);
    padding-inline: var(--space-1);
  }
}

@media (min-width: 1081px) and (max-width: 1400px) {
  #workflowPanel .sidebar-actions > .top-history-button span:not(.tier-badge),
  #workflowPanel .sidebar-actions > .top-clear-button .clear-label,
  #workflowPanel .sidebar-actions > .top-settings-button span {
    display: none;
  }

  #workflowPanel .sidebar-actions > .top-history-button,
  #workflowPanel .sidebar-actions > .top-clear-button,
  #workflowPanel .sidebar-actions > .top-settings-button {
    width: 44px;
    min-width: 44px;
    padding-inline: 0;
  }
}

@media (min-width: 1401px) and (max-width: 1480px) {
  #workflowPanel .step .step-label-full {
    display: none;
  }

  #workflowPanel .step .step-label-short {
    display: inline;
  }
}

@media (min-width: 641px) and (max-width: 860px) {
  body[data-has~="review-screen"]:not(#has-pad) #workflowPanel .sidebar-actions {
    gap: 0.4rem;
  }
}

/* NON-PHONE CURRENT UI CONTRACT

   The 861-1080px compact header predates the approved Review UI. It removed
   the APPVLR wordmark and subtitle and made the current desktop layout look
   like the retired interface. Every viewport above the protected phone
   breakpoint keeps the current identity. Review controls wrap in native CSS
   pixels when the available row becomes narrow. The PDF and overlay layers
   are not transformed by this responsive layout. This preserves marching-ant
   stroke width, dash spacing, tick size, and evidence geometry at every PDF
   zoom and browser viewport. */
@media (min-width: 641px) and (max-width: 1180px) {
  body[data-has~="review-screen"]:not(#has-pad) #workflowPanel .brand-name {
    display: block;
    font-size: clamp(0.78rem, 1.5vw, 0.96rem);
    letter-spacing: clamp(0.04em, 0.12vw, 0.1em);
  }

  body[data-has~="review-screen"]:not(#has-pad) #workflowPanel .brand-block > div {
    display: flex;
    min-width: 0;
  }

  body[data-has~="review-screen"]:not(#has-pad) #workflowPanel .brand-block > div :is(h1, h2) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: clamp(0.52rem, 0.9vw, 0.72rem);
  }

  #reviewScreen .review-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: var(--space-2);
  }

  #reviewScreen .review-header .review-actions .review-tolerance-control {
    /* Keep the slider and numeric value inside this flex item. If the action
       row is too narrow, the complete tolerance group moves to its own line
       before the decision buttons, instead of letting the input paint over
       them. */
    flex: 0 0 max-content;
    width: max-content;
    min-width: 0;
    max-width: 100%;
  }

  #reviewScreen .review-header .review-actions .review-decision-actions {
    flex: 0 0 auto;
  }

  /* The narrowest non-phone Review rail gives each tab a small equal track.
     Keep the same segmented control, but allow its visible labels to wrap
     inside the 44px target so Drawing Details remains readable. */
  #reviewPanel #aiSummaryTab,
  #reviewPanel #drawingDetailsTab {
    min-height: 44px;
    padding-inline: 4px;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* Owner correction: fixed Review chrome, issue-safe scroll, and compact actions.
   The tab bar and panel fade remain stationary. Only the content below them
   scrolls, so text and the native scrollbar cannot pass behind the tabs. */
#reviewScreen #reviewPanel.findings-panel,
#reviewScreen #reviewPanel.findings-panel.app-scroll-rail {
  gap: 0;
  width: 100%;
  max-width: 100%;
  padding: 0;
  overflow: clip;
  overflow-x: clip;
  overflow-y: clip;
  background: var(--side-panel-fade-bg);
}

#reviewPanel > .findings-tabbar {
  position: relative;
  top: auto;
  z-index: 6;
  width: 100%;
  margin: 0;
  gap: var(--space-1);
  padding: 2mm;
  box-sizing: border-box;
  border-bottom: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#reviewPanel > .findings-tabbar::after {
  content: none;
}

#reviewPanelScroll {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  min-height: 0;
  gap: var(--space-4);
  padding-block: var(--space-4);
  padding-bottom: calc(var(--space-4) + 1.5rem);
  padding-inline: 2mm;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: rgb(var(--accent-rgb) / 0.8) transparent;
  scrollbar-width: thin;
  scrollbar-gutter: auto;
}

#reviewPanel #aiSummaryPanel.findings-summary-panel {
  flex: 0 0 auto;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#reviewPanel::after {
  content: "";
  position: absolute;
  z-index: 5;
  right: 0.55rem;
  bottom: 0;
  left: 0;
  height: 1.5rem;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgb(var(--surface-raised-rgb) / 0.82) 62%, var(--surface-raised) 100%);
}

@media (min-width: 641px) {
  #reviewPanelScroll:has(#aiSummaryPanel.is-active) {
    padding-bottom: calc(5mm - var(--space-2));
  }

  #reviewPanel:has(#aiSummaryPanel.is-active)::after {
    height: calc(5mm - var(--space-2));
  }
}

.approval-confirmation-card {
  gap: 0;
  width: min(35.625rem, 100%);
  padding: 0;
  overflow: hidden auto;
  background: var(--surface-raised);
}

.approval-confirmation-card::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--complete));
  color: var(--on-colour-button);
}

.approval-confirmation-body {
  display: grid;
  gap: var(--space-3);
  padding: clamp(1.25rem, 3vw, 1.75rem);
}

.approval-decision-scene {
  position: relative;
  width: 100%;
  height: 6.25rem;
  overflow: hidden;
}

.approval-decision-scene canvas,
.approval-decision-logo-fallback {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.approval-decision-scene[data-scene-state="running"] .approval-decision-logo-fallback {
  opacity: 0;
}

.approval-confirmation-card .permission-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 0;
  padding: var(--space-4) clamp(1.25rem, 3vw, 1.75rem);
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.approval-decision-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
}

.approval-decision-button svg {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.approve-button svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.approve-button {
  gap: 0.4em;
}

/* REVIEW CONTROL COHESION CONTRACT */
#workflowPanel :is(.brand-block, .step-list, .sidebar-actions),
.review-topbar-actions .review-post-controls,
#reviewScreen .review-header > .review-actions,
#reviewScreen .review-decision-actions {
  align-items: center;
}

#workflowPanel :is(button, summary),
.review-topbar-actions :is(button, summary),
#reviewScreen .review-header > .review-actions :is(button, label, summary) {
  white-space: nowrap;
}

#workflowPanel :is(button, summary) > :is(svg, span, strong, small),
.review-topbar-actions :is(button, summary) > :is(svg, span, strong, small),
#reviewScreen .review-header > .review-actions :is(button, label, summary) > :is(svg, span, strong, small) {
  flex: 0 0 auto;
}

#workflowPanel :is(.step-list, .sidebar-actions) > *,
.review-topbar-actions .review-post-controls > *,
#reviewScreen .review-decision-actions > * {
  flex-shrink: 0;
}

/* Centre the header controls, not nested menu rows. Button rows must keep
   the same left-aligned icons as their neighbouring anchor rows. */
#workflowPanel .sidebar-actions > button,
#workflowPanel .sidebar-actions > .sidebar-action-menu > summary,
.review-topbar-actions .review-post-controls > button,
#reviewScreen .review-decision-actions > button {
  align-items: center;
  justify-content: center;
}

#reviewScreen .review-header > .review-actions > .toggle,
#reviewScreen .review-header > .review-actions > .review-decision-actions {
  flex: 0 0 auto;
}

@media (min-width: 641px) and (max-width: 1080px) {
  body[data-has~="review-screen"]:not(#has-pad) #workflowPanel #sidebarActionMenu > summary > span {
    display: none;
  }

  body[data-has~="review-screen"]:not(#has-pad) #workflowPanel #sidebarActionMenu > summary {
    width: 44px;
    min-width: 44px;
    padding-inline: 0;
    gap: 0;
  }
}

@media (min-width: 641px) and (max-width: 1180px) {
  #reviewScreen .review-header > .review-actions {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: var(--detail-control-height, 2.5rem);
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

@media (min-width: 1181px) {
  body[data-has~="review-screen"]:not(#has-pad) #workflowPanel .brand-block,
  #reviewScreen .review-header > .review-actions {
    width: max-content;
    max-width: 100%;
  }

  body[data-has~="review-screen"]:not(#has-pad) #workflowPanel .brand-block {
    justify-self: start;
  }

  #reviewScreen .review-header > .review-actions {
    flex: 0 1 auto;
    margin-inline-start: auto;
    width: 100%;
    max-width: none;
    justify-content: flex-start;
  }

  #reviewScreen .review-header > .review-actions > .review-decision-actions {
    width: var(--review-action-width);
    margin-inline-start: auto;
    padding-inline: 0;
    gap: var(--space-2);
  }
}

#reviewScreen .drawing-pane {
  border-radius: var(--panel-radius);
}

@media (min-width: 1000px) and (max-width: 1180px) {
  #reviewScreen .review-header .review-actions .review-tolerance-control {
    flex: 0 0 max-content;
  }
}

@media (min-width: 1401px) and (max-width: 1599px) {
  #workflowPanel :is(#undoButton, #redoButton, #clearAllButton),
  #workflowPanel #sidebarActionMenu > summary {
    padding-inline: 10px;
  }
}

#commentsDoneButton,
#stampScreen .side-panel-wrap[data-active-panel="comments"] #commentsDoneButton {
  color: var(--on-colour-button);
  background: var(--accent-action-gradient);
  border-color: rgb(var(--accent-border-rgb) / 0.58);
}

#commentsDoneButton:not(:disabled):hover,
#stampScreen .side-panel-wrap[data-active-panel="comments"] #commentsDoneButton:not(:disabled):hover {
  color: var(--on-colour-button);
  background: var(--accent-action-gradient-hover);
  border-color: rgb(var(--accent-border-rgb) / 0.72);
}


/* Desktop action labels keep their natural widths. The logo-height cap made
   these controls look flattened; use the existing 36px compact-control size. */
@media (min-width: 1081px) {
  #workflowPanel :is(#undoButton, #redoButton, #clearAllButton, #appNotificationButton),
  #workflowPanel #sidebarActionMenu > summary {
    position: relative;
    height: 2.25rem;
    min-height: 2.25rem;
  }
}

@media (min-width: 641px) and (max-width: 860px), (min-width: 1081px) {
  #workflowPanel :is(#undoButton, #redoButton, #clearAllButton)::after,
  #workflowPanel #sidebarActionMenu > summary::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100%, 44px);
    height: 44px;
    transform: translate(-50%, -50%);
  }
}

/* NON-PHONE REVIEW VISIBLE-HEIGHT CONTRACT

   Review uses the smallest live viewport reported by runtime.js as its minimum.
   The full-width drawing row can extend the document vertically. The findings
   rail matches that row and owns its internal scroll. Phone flow stays unchanged. */
@media (min-width: 641px) and (min-height: 480px) {
  html[data-has~="review-screen"]:not(#has-pad),
  html[data-has~="review-screen"]:not(#has-pad) body {
    height: auto;
    min-height: var(--app-visible-height, 100dvh);
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
  }

  html[data-has~="review-screen"]:not(#has-pad) body {
    display: flow-root;
  }

  #appShell[data-has~="review-screen"]:not(#has-pad) {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: auto;
    min-height: calc(var(--app-visible-height, 100dvh) - (2 * var(--app-frame-inset)));
    max-height: none;
    overflow: visible;
    --bottom-action-space: 0px;
  }

  #appShell[data-has~="review-screen"]:not(#has-pad) > .workspace {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
  }

  #appShell[data-has~="review-screen"]:not(#has-pad) > .app-legal-footer {
    flex: 0 0 auto;
  }

  .workspace[data-has~="review-screen"]:not(#has-pad) {
    grid-template-rows: auto auto;
    height: auto;
    min-height: 0;
    overflow: visible;
    align-content: stretch;
  }

  #reviewScreen.is-active,
  #reviewScreen .drawing-board,
  #reviewScreen .drawing-panes,
  #reviewScreen .drawing-panes:not([data-review-mode="requirements"]) {
    height: auto;
    min-height: 0;
  }

  #reviewScreen.is-active,
  #reviewScreen > .review-scale-stage,
  #reviewScreen .review-layout {
    overflow: visible;
  }

  #reviewScreen > .review-scale-stage {
    flex: 0 0 auto;
    grid-template-rows: auto auto;
    height: auto;
    padding-bottom: 0;
  }

  #reviewScreen.is-active {
    display: flex;
    flex-direction: column;
  }

  #reviewScreen .review-layout {
    grid-template-rows: auto;
    height: auto;
    align-items: stretch;
    align-self: stretch;
  }

  #reviewScreen .drawing-board,
  #reviewScreen .drawing-panes,
  #reviewScreen .drawing-panes:not([data-review-mode="requirements"]) {
    grid-auto-rows: auto;
    align-self: start;
    align-items: start;
  }

  #reviewScreen .drawing-pane,
  #reviewScreen .drawing-panes:not([data-review-mode="requirements"]) .drawing-pane {
    grid-template-rows: auto auto;
    align-self: start;
    height: auto;
    max-height: none;
  }

  #reviewScreen .drawing-pane > .review-sheet-frame,
  #reviewScreen .drawing-pane > .review-sheet-frame.sheet-frame,
  #reviewScreen .drawing-panes:not([data-review-mode="requirements"]) .review-sheet-frame,
  #reviewScreen .drawing-panes:not([data-review-mode="requirements"]) .review-sheet-frame.sheet-frame {
    align-self: start;
    justify-self: stretch;
    width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: var(--sheet-aspect, 1.3889);
  }

  #reviewScreen #reviewPanel.findings-panel,
  #reviewScreen #reviewPanel.findings-panel.app-scroll-rail {
    align-self: start;
    height: var(--review-rail-height, auto);
    min-height: 0;
    max-height: var(--review-rail-height, none);
    overflow: clip;
  }

  #reviewPanelScroll {
    min-height: 0;
    overflow-y: auto;
  }

  #reviewScreen.is-findings-drawer .review-layout {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
  }

  #reviewScreen.is-findings-drawer .drawing-board {
    grid-column: 1;
    grid-row: 1;
  }

  #reviewScreen.is-findings-drawer #reviewPanel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    width: min(20rem, 100%);
    max-width: min(20rem, 100%);
    box-shadow: -12px 0 32px rgb(var(--shadow-rgb) / 0.35);
  }
}

@media (max-width: 640px) {
  #reviewScreen #reviewPanel.findings-panel,
  #reviewScreen #reviewPanel.findings-panel.app-scroll-rail {
    gap: var(--review-stack-gap);
    padding: var(--space-4) 2mm;
    overflow: visible;
    overflow-x: visible;
    overflow-y: visible;
  }

  #reviewPanel > .findings-tabbar {
    position: sticky;
    top: 0;
    border-radius: var(--panel-radius);
  }

  #reviewPanelScroll {
    flex: 0 0 auto;
    gap: var(--review-stack-gap);
    padding: 0;
    overflow: visible;
  }

  #reviewPanel::after,
  #reviewPanel > .findings-tabbar::after {
    display: none;
  }

  #approvalConfirmationDialog .approval-confirmation-card .permission-dialog-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  #approvalConfirmationDialog .approval-confirmation-card .permission-dialog-actions > button {
    width: 100%;
  }

  .approval-decision-scene {
    height: 5rem;
  }
}

/* Keep the Review heading on the left and the persistent actions on the right.
   Queue and Review again share the first row; Sheet manager spans the same
   combined width directly below them. The mobile sticky host keeps its
   existing phone layout below this breakpoint. */
@media (min-width: 641px) {
  .workspace[data-has~="review-screen"]:not(#has-pad) {
    /* Keep the topbar action grid, Sheet manager, and decision pair on one
       responsive width owner. */
    --review-action-width: clamp(10rem, 18.75%, 28.5rem);
  }

  .workspace[data-has~="review-screen"]:not(#has-pad) .topbar-main {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
  }

  .workspace[data-has~="review-screen"]:not(#has-pad) .review-topbar-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 44px;
    align-items: stretch;
    justify-items: stretch;
    gap: var(--space-2);
    width: var(--review-action-width);
    max-width: 100%;
    min-width: 0;
    margin-inline-start: auto;
    margin-inline-end: 0;
    /* Half of #screenTitle's clamped font size times its 1.05 line-height,
       plus the label offset minus half of the 44px action row. */
    margin-top: calc(0.5rem + clamp(0.86625rem, 1.155vw, 1.575rem) + 44px + var(--space-2));
    align-self: flex-start;
  }

  .workspace[data-has~="review-screen"]:not(#has-pad) .review-topbar-actions > .app-queue-button {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    min-height: 44px;
  }

  .workspace[data-has~="review-screen"]:not(#has-pad) .review-topbar-actions > .review-post-controls {
    display: contents;
  }

  .workspace[data-has~="review-screen"]:not(#has-pad) .review-topbar-actions > .review-post-controls > .review-again-button {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    min-height: 44px;
  }

  .review-topbar-actions :is(.app-queue-button, .pairing-manager-button) {
    gap: var(--space-3);
  }

  #reviewScreen .review-header > .review-actions > .review-final-stack {
    --review-final-control-gap: 5mm;
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: 1fr;
    grid-template-rows: 44px 44px;
    align-items: center;
    gap: 5mm;
    width: calc(2 * var(--review-action-width) + var(--review-final-control-gap));
    max-width: 100%;
    min-width: 0;
    margin-inline-start: auto;
  }

  #reviewScreen .review-header > .review-actions > .review-final-stack > .review-topbar-actions {
    grid-row: 1;
    gap: var(--review-final-control-gap);
    width: calc((100% - var(--review-final-control-gap)) / 2);
    min-width: 0;
    margin: 0 0 0 auto;
    align-self: center;
  }

  #reviewScreen .review-final-stack > .review-final-actions {
    display: flex;
    grid-row: 2;
    align-items: center;
    gap: var(--review-final-control-gap);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
  }

  #reviewScreen .review-header > .review-actions {
    align-items: flex-end;
  }

  #reviewScreen .review-final-actions > .pairing-manager-button {
    flex: 0 0 calc((100% - var(--review-final-control-gap)) / 2);
    width: calc((100% - var(--review-final-control-gap)) / 2);
    max-width: 100%;
    min-width: 0;
    min-height: 44px;
    margin-inline-start: 0;
  }

  #reviewScreen .review-final-actions > .review-decision-actions {
    flex: 0 0 calc((100% - var(--review-final-control-gap)) / 2);
    width: calc((100% - var(--review-final-control-gap)) / 2);
    max-width: 100%;
    margin-inline-start: 0;
  }

  #reviewScreen .review-final-actions > .review-decision-actions > button {
    height: 44px;
    min-height: 44px;
  }

  #reviewPanel #drawingDetailsTab {
    letter-spacing: 0;
    padding-inline: 4px;
  }
}

@media (min-width: 1181px) {
  #reviewScreen .review-header > .review-actions > .review-final-stack {
    gap: var(--review-final-control-gap);
  }

  .workspace[data-has~="review-screen"]:not(#has-pad) {
    /* Both rows share an owner: side-panel resizing must not change their edges. */
    --review-action-width: clamp(10rem, 18.75%, 28.5rem);
    row-gap: var(--space-2);
  }

  .workspace[data-has~="review-screen"]:not(#has-pad) .review-topbar-actions {
    width: var(--review-action-width);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workspace[data-has~="review-screen"]:not(#has-pad) > .review-topbar-viewport > .topbar {
    margin-bottom: 0;
  }
}

@media (min-width: 641px) and (max-width: 1180px) {
  .workspace[data-has~="review-screen"]:not(#has-pad) .review-topbar-actions {
    width: 100%;
  }
}

@media (min-width: 1181px) {
  #reviewScreen .review-final-stack :is(#appQueueButton, #reviewAgainButton, #pairingManagerButton) {
    gap: 0.2rem;
    padding-inline: 0.4rem;
    letter-spacing: 0;
  }
}

@media (min-width: 641px) and (max-width: 860px) {
  #reviewScreen:has(.findings-panel.is-collapsed) .review-header > .review-actions > .review-final-stack {
    /* Use the drawing split at narrow tablet widths so Sheet Manager begins
       inside the supplied-file half when the panel gives that half more room. */
    width: calc((100% - var(--space-2)) / 2);
  }
}

@media (min-width: 641px) and (max-width: 1180px) {
  #reviewScreen .review-final-stack :is(#appQueueButton, #reviewAgainButton, #pairingManagerButton) svg,
  #reviewScreen .review-final-actions > .review-decision-actions > button svg {
    display: none;
  }

  #reviewScreen .review-final-stack :is(#appQueueButton, #reviewAgainButton, #pairingManagerButton) {
    gap: 2px;
    padding-inline: 2px;
    letter-spacing: 0;
  }

  #reviewScreen .review-final-actions > .review-decision-actions > button {
    gap: 0;
    padding-inline: 2px;
    letter-spacing: 0;
  }
}

@media (min-width: 641px) and (max-width: 700px) {
  #reviewScreen .review-final-stack :is(#appQueueButton, #reviewAgainButton, #pairingManagerButton) {
    gap: 1px;
    padding-inline: 1px;
  }

  #reviewScreen .review-final-stack :is(#appQueueButton, #reviewAgainButton, #pairingManagerButton) svg {
    width: 0.55rem;
    height: 0.55rem;
  }

  #reviewScreen .review-final-stack :is(.app-queue-count, .pairing-manager-count) {
    padding-left: 2px;
    font-size: inherit;
  }

  #reviewScreen .review-final-stack #appQueueButton .app-queue-count {
    position: absolute;
    inset-block-start: 2px;
    inset-inline-end: 2px;
    padding: 1px 2px;
    line-height: 1;
    background: rgb(var(--well-rgb) / 0.22);
    border: 0;
    border-radius: 999px;
  }

  #reviewScreen .review-final-actions > .review-decision-actions > button {
    padding-inline: 2px;
    letter-spacing: 0;
  }
}

/* The stamp shell shares a control rule above; only its panel gets panel corners. */
#stampScreen .side-panel-wrap { border-radius: var(--panel-radius); }

/* Review action labels use one readable type size. Approve and Reject define
   the existing reference size; the queue, rerun, manager, and detail tabs match
   it without changing their button geometry or semantic colours. */
:is(#appQueueButton, #reviewAgainButton, #pairingManagerButton, #approveDrawingButton, #rejectDrawingButton, #aiSummaryTab, #drawingDetailsTab) {
  font-size: 0.85rem;
  text-transform: uppercase;
}

:is(.app-queue-count, .pairing-manager-count) {
  font-size: inherit;
}

/* Load screen: each panel's description stays on one line. The 34rem cap is
   lifted and the text scales down with the panel width (container units) so it
   never wraps or overflows on narrower desktops. Phones keep their own copy. */
@media (min-width: 641px) {
  #loadScreen .drop-zone {
    container-type: inline-size;
  }

  #loadScreen .drop-zone > p {
    max-width: none;
    white-space: nowrap;
    font-size: min(1.05rem, calc(100cqi / 33.5));
  }
}

@media (min-width: 1321px) {
  #loadScreen .drop-zone > p {
    font-size: min(clamp(1.05rem, 1.05vw, 1.18rem), calc(100cqi / 33.5));
  }
}

/* Load screen: the Supplied files / Text input switcher is removed (Jon
   2026-10-02). The panel only takes uploaded files; the typed-specs panel and
   its code stay in place but cannot be reached from here. */
#loadScreen .supplied-source-tabs {
  display: none !important;
}

/* Queue does not appear on the Load screen (Jon 2026-10-02), nor while a review
   is preparing: setScreen moved it into the topbar a moment before the layout
   script tucked it away, so it flashed up on its own ("a random queue button
   pops up when the review is preparing", Jon 2026-10-02). */
html[data-has~="load-screen"]:not(#has-pad) #appQueueButton,
html[data-has~="analysis-screen"]:not(#has-pad) #appQueueButton {
  display: none !important;
}
/* The same flash on Stamp and Export (Jon 2026-10-03: "a ghost queue button
   that keeps popping up, everytime I go to screenshot it, it disappears").
   On desktop the opener lives in the Review panel, so it is hidden on those two
   screens before and after the layout script moves it. Phones keep their own
   placement. */
@media (min-width: 641px) {
  html[data-has~="stamp-screen"]:not(#has-pad) #appQueueButton,
  html[data-has~="save-screen"]:not(#has-pad) #appQueueButton {
    display: none !important;
  }
}

/* Run review / Queue dialog cleanup (Jon 2026-10-02). One-line title, copy in
   a left column, and the animated logo scene confined to the top right so it
   never sits behind the text or the buttons. Spacing on an 8/16px rhythm. */
#loadDecisionPanel .load-decision-card {
  padding: 32px;
}

#loadDecisionPanel .load-decision-copy {
  gap: 12px;
  max-width: 34rem;
}

#loadDecisionPanel .load-decision-copy h3 {
  max-width: none;
  white-space: nowrap;
  font-size: 1.35rem;
  line-height: 1.1;
}

#loadDecisionPanel .load-decision-copy p:last-child {
  max-width: none;
  font-size: 0.86rem;
  line-height: 1.6;
}

#loadDecisionPanel .load-decision-actions {
  gap: 12px;
  margin-top: 24px;
}

#loadDecisionPanel .load-decision-actions > button {
  min-height: 44px;
}

/* Card uses the same translucent black glass as the review panel and menus;
   the faint APPVLR mark bounces around behind the content
   (features/load-decision-scene.js). */
#loadDecisionPanel .load-decision-card {
  background: linear-gradient(rgb(var(--surface-rgb) / 0.74), rgb(var(--bg-rgb) / 0.8));
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgb(var(--overlay-rgb) / 0.1);
  box-shadow: 0 24px 60px rgb(var(--shadow-rgb) / 0.5), inset 0 1px 0 rgb(var(--gloss-rgb) / 0.06);
}

#loadDecisionPanel .load-decision-scene {
  opacity: 1;
  -webkit-mask-image: none;
  mask-image: none;
}

#loadDecisionPanel .load-decision-scene::before,
#loadDecisionPanel .load-decision-scene::after {
  content: none;
}

#loadDecisionPanel .load-decision-logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
  aspect-ratio: 359 / 329;
  background: rgb(var(--overlay-rgb) / 0.08);
  -webkit-mask: url("assets/brand/appvlr-mark-mask.png") center / contain no-repeat;
  mask: url("assets/brand/appvlr-mark-mask.png") center / contain no-repeat;
  will-change: transform;
}

@media (max-width: 640px) {
  #loadDecisionPanel .load-decision-card {
    padding: 20px;
  }

  #loadDecisionPanel .load-decision-copy {
    max-width: none;
  }

  #loadDecisionPanel .load-decision-copy h3 {
    white-space: normal;
  }

}

/* Load file bars stay on one line; a long name ends in an ellipsis and the full
   name is in the tooltip. A single supplied file's type row shows only the
   Drawing / Purchase order choice, because the bar already names the file. */
#loadScreen .drop-zone > .fake-file {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#loadScreen .drop-zone > .fake-file::after {
  display: inline-block;
  margin-left: var(--space-2);
  vertical-align: middle;
}

#loadScreen .supplied-file-kind-row.is-single {
  grid-template-columns: minmax(0, 22rem);
}

/* ===== Log in card, option 5 (Jon 2026-10-02) =====
   Picked from five prototypes: the logo, a larger APPVLR, the title and Back
   sit in a top row; the form fills the middle; the privacy promise sits in a
   bottom row. Thin lines divide them; the darker bars were removed (Jon
   2026-10-02: "remove the black bar at the top and bottom"). Show password and Remember me share a row
   with slightly larger labels, and Forgot password / Sign up are two buttons
   under "or". The signup, forgot and reset forms use the same bands. */
#authGate .auth-card {
  padding: 0;
}
#authGate .auth-card-head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgb(var(--overlay-rgb) / 0.08);
  border-radius: calc(var(--panel-radius) - 1px) calc(var(--panel-radius) - 1px) 0 0;
  background: none;
}
#authGate .auth-card-head img {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
}
/* Logo left, APPVLR and the title centred in the band, blue Back right
   (Jon 2026-10-02: "put login in the middle, make the text blue, then make
   appvlr text white, and bigger. Make back button blue"). */
/* Icon and APPVLR together on the left, the title in the middle, Back on the
   right, all on one centre line (Jon 2026-10-02). */
#authGate .auth-card-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  /* No divider lines on the card (Jon 2026-10-02: "Remove the horizontal lines"). */
  border-bottom: 0;
}
/* Log in is centred on the card itself, and sits a touch below the row's
   centre line (Jon 2026-10-02: "center this to the rectangle box, then lower
   it a touch"). */
#authGate .auth-card-head > :is(h1, h2) {
  justify-self: center;
  position: relative;
  top: 6px;
}
#authGate .auth-brand {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}
#authGate .auth-card-head > :is(h1, h2) {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  text-align: center;
}
#authGate .auth-card-head .mvp-pro-login-badge {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
}
#authGate .auth-card-head .screen-label {
  margin: 0;
  color: var(--text-strong);
  /* The same wordmark as the app's top bar (.brand-name): heading font, not
     the monospace screen-label font. */
  font-family: var(--font-head);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 40px;
}
/* Every item in the top row is 44px tall: the icon, the APPVLR and Log in
   lines (one 22px size, so neither word outweighs the other) and Back
   (Jon 2026-10-02: "all these elements need to be the same height"). */
#authGate .auth-card :is(h1, h2) {
  color: var(--accent-strong);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 40px;
}
/* The icon and Back are as tall as the Log in text (28px), Log in sits lower,
   and Back keeps a 40px tap area through a transparent border (Jon 2026-10-02:
   "drop this lower, make the icon, the same height as the text, same for the
   back button. The chevron, should be bolder"). */
#authGate .auth-card-head img {
  width: 28px;
  height: 28px;
  border-radius: 0.5rem;
}
#authGate .auth-card-head .auth-back-button {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  width: auto;
  box-sizing: content-box;
  height: 28px;
  min-height: 28px;
  margin: 0;
  padding: 0 0.7rem;
  justify-content: center;
  border: 6px solid transparent;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--accent-button-highlight), var(--accent-button-press) 48%, var(--accent-button-press)) padding-box;
  box-shadow: inset 0 0 0 1px rgb(var(--accent-border-rgb) / 0.45);
  gap: 0.4rem;
  color: var(--on-colour-button);
  font-size: 0.7rem;
}
#authGate .auth-card-head .auth-back-button:hover {
  color: var(--on-colour-button);
  filter: none;
  background-image: linear-gradient(var(--accent-button-hover), var(--accent-button-hover));
  border-color: rgb(var(--accent-border-rgb) / 0.72);
}
#authGate .auth-form {
  gap: 1.1rem;
  padding: 1.5rem;
}
#authGate .auth-checks {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}
#authGate .auth-form label.toggle {
  gap: 0.65rem;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}
#authGate .auth-or {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
#authGate .auth-or::before,
#authGate .auth-or::after {
  content: "";
  height: 1px;
  background: none;
}
#authGate .auth-alt-actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0.6rem;
}
#authGate .auth-alt-button {
  min-height: 44px;
  width: 100%;
  justify-content: center;
  font-size: 0.75rem;
}
#authGate .auth-alt-button[hidden] {
  display: none;
}
/* Try again after a failed session check sits under the status line. */
#authGate .auth-retry-button {
  width: calc(100% - 3rem);
  margin: 0 1.5rem 1.25rem;
}
#authGate #authStatus {
  margin: 0;
  padding: 0 1.5rem 1.25rem;
}
#authGate #authStatus:empty {
  display: none;
}
#authGate .auth-privacy {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin: 0;
  padding: 1rem 1.5rem;
  border-top: 0;
  border-radius: 0 0 calc(var(--panel-radius) - 1px) calc(var(--panel-radius) - 1px);
  background: none;
  font-size: 0.75rem;
  line-height: 1.55;
}
#authGate .auth-privacy::before {
  content: "";
  flex: 0 0 1rem;
  height: 1rem;
  margin-top: 0.1rem;
  background: currentColor;
  -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='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='11' width='16' height='10' rx='2'/><path d='M8 11V7a4 4 0 0 1 8 0v4'/></svg>") center / contain 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='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='11' width='16' height='10' rx='2'/><path d='M8 11V7a4 4 0 0 1 8 0v4'/></svg>") center / contain no-repeat;
}
#authGate .auth-form > .auth-copy {
  margin: 0;
}
@media (max-width: 640px) {
  #authGate .auth-card-head,
  #authGate .auth-form,
  #authGate .auth-privacy {
    padding-inline: 1rem;
  }
  #authGate #authStatus {
    padding-inline: 1rem;
  }
  /* A phone is too narrow for 22px APPVLR beside a centred title: both drop
     to one smaller size and keep the 44px row. */
  #authGate .auth-card-head .screen-label {
    font-size: 1rem;
    letter-spacing: 0.1em;
  }
  #authGate .auth-card :is(h1, h2) {
    font-size: 1.35rem;
  }
  /* Too narrow to centre Log in on the card without touching APPVLR, so it
     sits midway between APPVLR and Back instead. */
  #authGate .auth-card-head {
    grid-template-columns: auto 1fr auto;
  }
}
#authGate .auth-card-head .auth-back-button::before {
  width: 0.45rem;
  height: 0.45rem;
  border-left-width: 2.5px;
  border-bottom-width: 2.5px;
}
#authGate .auth-card-head .auth-back-button:hover {
  border-color: transparent;
  box-shadow: inset 0 0 0 1px rgb(var(--accent-border-rgb) / 0.72);
}
/* Log in on its own line, centred under the icon / APPVLR / Back row, 4px
   below it (Jon 2026-10-02: "make this sit 4px below the row"). The row is
   the 28px icon and Back; Back's 40px tap area overlaps instead of adding
   height. */
#authGate .auth-card-head {
  row-gap: 8px;
}
#authGate .auth-card-head .screen-label {
  line-height: 28px;
}
#authGate .auth-card-head .auth-back-button {
  margin-block: -6px;
}
#authGate .auth-card-head > :is(h1, h2) {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: center;
  top: 0;
  line-height: 1;
  /* A calmer title (Jon 2026-10-02: "another 4px, also make it look more
     professional"): bold rather than extra-bold, a little smaller and more
     open, like the app's other headings. */
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
#authGate .auth-card-head .mvp-pro-login-badge {
  grid-row: 3;
}
/* No visible Log in heading, and less space under the header row (Jon
   2026-10-02: "remove login heading, reduce this space"). The heading stays
   for screen readers: it names the dialog, and the code renames it for the
   sign-up and password screens. */
#authGate .auth-card-head > :is(h1, h2) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
#authGate .auth-card-head {
  padding-bottom: 0;
}
#authGate .auth-form {
  padding-top: 1.25rem;
}
/* Icon and APPVLR centred on the card, Back stays on the right (Jon
   2026-10-02: "center this to the box"). Applies at every width. */
#authGate .auth-card-head {
  grid-template-columns: 1fr auto 1fr;
}
#authGate .auth-brand {
  grid-column: 2;
  justify-self: center;
}
/* Continue with Google, Microsoft and GitHub (Jon 2026-10-02: "do google,
   microsoft and github"). Full-width buttons with the same surface and
   height as Forgot password / Sign up, each with the provider's mark on a
   small white tile so the brand colours stay readable on blue. A button is
   hidden until /api/auth/config says its provider is set up, and the group
   takes no space when all three are hidden. */
#authGate .auth-provider-actions {
  display: grid;
  gap: 0.6rem;
}
#authGate .auth-provider-actions:not(:has(> :not([hidden]))) {
  display: none;
}
#authGate .auth-provider-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 44px;
  font-size: 0.75rem;
}
#authGate .auth-provider-button[hidden] {
  display: none;
}
#authGate .auth-provider-mark {
  display: inline-grid;
  place-items: center;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--gloss);
}
#authGate .auth-provider-mark svg {
  width: 14px;
  height: 14px;
}
/* ===== end Log in card, option 5 ===== */
/* ===== Hover help (Jon 2026-10-03) =====
   Prototype 4 (what it is, then a blue how-to line) on black translucent glass,
   with prototype 2's round icon. One card for the whole app; hover-help.js
   fills and places it. It never takes the pointer, so it cannot block a click. */
.hover-help {
  position: fixed;
  z-index: 2147483000;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: max-content;
  max-width: min(300px, calc(100vw - 16px));
  padding: 11px 13px 12px;
  border: 1px solid rgb(var(--overlay-rgb) / .12);
  border-radius: 14px;
  background: rgb(var(--well-rgb) / .72);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: 0 18px 40px rgb(var(--shadow-rgb) / .5);
  color: var(--text);
  font: 400 12.8px/1.4 var(--font-ui, "IBM Plex Sans", system-ui, sans-serif);
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  pointer-events: none;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity .12s ease, transform .12s ease;
}
.hover-help[hidden] { display: none; }
/* The app's capitals setting styles every element; the sentences stay as written. */
html .hover-help :is(.hover-help-text, .hover-help-how) {
  text-transform: none !important;
}
.hover-help.is-visible { opacity: 1; transform: none; }
.hover-help-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.hover-help-head b {
  color: var(--text-strong);
  font: 800 12.5px/1.2 var(--font-head, Archivo, sans-serif);
  letter-spacing: .04em;
  text-transform: uppercase;
}
/* A small drawn badge, not a flat glyph (Jon 2026-10-03): gradient tile,
   gloss and a shadowed white glyph, coloured by meaning in hover-help.js. */
.hover-help-icon {
  display: block;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
}
.hover-help-badge {
  display: block;
  width: 24px;
  height: 24px;
  overflow: visible;
}
.hover-help-text { display: block; }
.hover-help-how {
  display: block;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgb(var(--overlay-rgb) / .1);
  color: var(--accent-strong);
  font-size: 12px;
}
@media (prefers-reduced-motion: reduce) {
  .hover-help { transition: none; transform: none; }
}
/* ===== end Hover help ===== */


/* Preparing review, option 2 (Jon 2026-10-04). The card is translucent glass,
   and the running chip fills along its bottom edge from the server's real
   completed/total counts (load.js setLoadingStepFill), turning green with a
   tick once its step is done. */
#analysisScreen .loading-panel {
  background:
    linear-gradient(180deg, rgb(var(--overlay-rgb) / 0.07), transparent 38%),
    radial-gradient(100% 70% at 58% 0%, rgb(var(--preflight-purple-rgb) / 0.18), transparent 68%),
    rgb(var(--surface-rgb) / 0.52);
  border-color: rgb(var(--preflight-purple-soft-rgb) / 0.3);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}

#analysisScreen .loading-steps span {
  background: rgb(var(--preflight-purple-rgb) / 0.1);
}

#analysisScreen .loading-steps span.is-active {
  background: rgb(var(--preflight-purple-rgb) / 0.2);
}

#analysisScreen .loading-steps span.is-done {
  color: var(--text-muted);
  background: rgb(var(--preflight-purple-rgb) / 0.12);
  border-color: rgb(var(--preflight-purple-soft-rgb) / 0.2);
}

#analysisScreen .loading-steps span.is-active::before {
  opacity: 0;
  animation: none;
}

#analysisScreen .loading-steps span::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, rgb(var(--accent-rgb)), rgb(var(--preflight-purple-rgb)));
  color: var(--accent-ink);
  transition: width 400ms ease, background-color 200ms ease;
}

#analysisScreen .loading-steps span.is-active[data-fill="measured"]::after {
  width: calc(var(--step-fill, 0) * 100%);
}

#analysisScreen .loading-steps span.is-active[data-fill="indeterminate"]::after {
  width: 32%;
  animation: loading-step-sweep 1.4s ease-in-out infinite;
}

#analysisScreen .loading-steps span.is-done::after {
  width: 100%;
  background: rgb(var(--success-rgb));
  color: var(--success-ink);
}

#analysisScreen .loading-steps span.is-done::before {
  inset: 50% auto auto 0.9rem;
  width: 1rem;
  height: 1rem;
  opacity: 1;
  transform: translateY(-50%);
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.3 2.2 4.7-5' fill='none' stroke='%2307120b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat,
    rgb(var(--success-rgb));
  color: var(--success-ink);
  animation: none;
}

#analysisScreen .loading-steps span.is-done {
  padding-left: 2.4rem;
}

@keyframes loading-step-sweep {
  from { transform: translateX(-100%); }
  to { transform: translateX(320%); }
}

@media (prefers-reduced-motion: reduce) {
  #analysisScreen .loading-steps span.is-active[data-fill="indeterminate"]::after {
    animation: none;
  }
}

/* Slow review (owner, 2026-10-08): past 45 s the status line reads "Taking a
   little longer..." and a thin bar drifts slowly under it. It reuses the
   loading-step-sweep keyframes at a calm 3.2 s and only existing colour tokens.
   It replaces the working ellipsis, which would add dots to the text. */
.loading-panel #analysisStatus.is-slow {
  overflow: hidden;
  padding-bottom: var(--space-2);
}

.loading-panel #analysisStatus.is-slow::after {
  content: "";
  position: absolute;
  inset: auto auto 0 0;
  display: block;
  width: 32%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgb(var(--accent-rgb) / 0.7), transparent);
  animation: loading-step-sweep 3.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .loading-panel #analysisStatus.is-slow::after {
    animation: none !important;
    width: 100%;
    background: rgb(var(--accent-rgb) / 0.35);
  }
}

/* ==========================================================================
   UI consistency layer (2026-10-04)
   One rule per element role. Every value is measured from the approved main
   screens (Load, Review, Stamp, Export, Settings) with getComputedStyle; the
   inventory, screenshots and before/after pairs are in
   docs/design/UI-CONSISTENCY.md. Control sizes stay anchored to
   docs/UI_DIMENSIONS.md (--control-h, --checkbox-size).
   The approved Review, Stamp and Export panels are the reference and are not
   restyled here. Team (.team-page) and the gated pages share the shell
   classes; they are excluded until their owner adopts this layer (see the
   "For the Teams work" section of the doc).
   ========================================================================== */

:root {
  /* Control heights */
  --ui-control-h: 2.75rem;          /* 44px: button, input, select, tab */
  --ui-control-h-compact: var(--ui-control-h);  /* one button height (owner, 2026-10-15) */
  /* Button widths go up in steps of half the control height (22px), so every
     button width and height divide evenly into each other. Set by
     features/control-grid.js; the CSS keeps the four-step minimum. */
  --ui-button-step: calc(var(--ui-control-h) / 2);
  --ui-button-min-w: calc(var(--ui-button-step) * 4);
  /* Corner radius */
  --ui-radius-control: var(--radius-md);  /* 8px desktop: buttons, inputs, tabs, rows, tiles */
  --ui-radius-card: var(--panel-radius);  /* 16px: panels, dialogs, large cards */
  --ui-radius-pill: 999px;                /* badges and counts */
  /* Type scale. Archivo for titles, IBM Plex Sans for UI, Plex Mono for labels.
     Titles are whole multiples of half the 16px section size (owner,
     2026-10-15): 1x, 1.5x, 2x, 2.5x, 3x. */
  --ui-type-display: 3rem;          /* 48px: public hero title */
  --ui-type-display-2: 2.5rem;      /* 40px: public section title */
  --ui-type-page-title: 2rem;       /* 32px: app page title (#screenTitle) */
  --ui-type-dialog-title: 1.5rem;   /* 24px: dialog title */
  --ui-type-section: 1rem;          /* 16px: panel heading (h2) */
  --ui-type-control: 0.85rem;                         /* button label */
  --ui-type-input: 0.88rem;                           /* typed value */
  --ui-type-label: 0.78rem;                           /* tab, field label */
  --ui-type-caption: 0.68rem;                         /* count badge */
  /* Surfaces */
  --ui-input-bg: var(--surface-raised);
  --ui-input-border: var(--border);
  --ui-link: var(--accent-strong);
}

/* Phones: the same multiples, one step down. */
@media (max-width: 767px) {
  :root {
    --ui-type-display: 2rem;        /* 32px */
    --ui-type-display-2: 1.5rem;    /* 24px */
    --ui-type-page-title: 1.5rem;   /* 24px */
  }
}

/* Pages that never run settings.js used the raw :root ramps, which are not
   the colours the app derives for the default appearance: the blue button
   was darker, the danger red brighter, and the success green took a white
   label at 1.8:1. These are the values settings.js computes for the default
   appearance, so a button looks the same on every page. */
body.pg-page:not(.team-page),
body.legal-page-shell {
  --accent-border-rgb: 125 176 247;
  --complete-border-rgb: 183 154 249;
  /* Redeclared so they resolve against the ramps above, not the :root ones. */
  --accent-action-gradient:
    linear-gradient(180deg, var(--accent-button-highlight), var(--accent-button) 48%, var(--accent-button-press));
  --accent-action-gradient-hover:
    linear-gradient(180deg, var(--accent-button-hover), var(--accent-button-highlight) 48%, var(--accent-button));
  --complete-action-gradient:
    linear-gradient(180deg, var(--complete-button-highlight), var(--complete-button) 48%, var(--complete-button-press));
  --complete-action-gradient-hover:
    linear-gradient(180deg, var(--complete-button-hover), var(--complete-button-highlight) 48%, var(--complete-button));
  --action-danger-disabled-bg: var(--action-danger);
  --action-danger-disabled-border: var(--action-danger);
  --action-success-disabled-bg: rgb(var(--action-success-rgb) / 0.34);
  --action-success-disabled-border: rgb(var(--action-success-rgb) / 0.26);
}

/* Page title: one size for every signed-in page title (#screenTitle). */
:is(h1, h2).ui-page-title {
  margin: 0;
  color: var(--text);
  font-family: var(--font-head);
  font-size: var(--ui-type-page-title);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  white-space: normal;
}

/* Buttons: one height, 44px, for every primary, secondary and danger text
   button, compact row actions included (owner, 2026-10-15). Widths start at
   four steps (88px) and control-grid.js rounds each one up to whole steps. */
:is(body.pg-page:not(.team-page), .support-drawer, .permission-dialog-card)
  :is(.primary-button, .ghost-button):not(.icon-button):not(.approval-receipts-retry) {
  min-height: var(--ui-control-h);
  min-width: var(--ui-button-min-w);
}

/* Select chevron: a 16px gap to the right edge (was 12px to 14px), with the
   label kept clear of it. */
.settings-panel select {
  padding-right: calc(var(--space-4) * 2 + 1.05rem);
  background-position: right var(--space-4) center;
}

.custom-select-trigger {
  padding-right: var(--space-4);
}

/* Inputs: the Settings field is the reference. Phones keep their 16px
   typed-value size, so only the weight changes there. */
body.pg-page:not(.team-page)
  :is(.pg-form input, .pg-controls input),
.auth-form input:not([type="checkbox"]):not([type="radio"]),
:is(.support-drawer, .permission-dialog-card) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), textarea){
  background-color: var(--ui-input-bg);
  border-color: var(--ui-input-border);
  font-weight: 500;
}

body.pg-page:not(.team-page)
  :is(.pg-form input, .pg-controls input),
.auth-form input:not([type="checkbox"]):not([type="radio"]),
.permission-dialog-card input:not([type="checkbox"]):not([type="radio"]):not([type="file"]){
  min-height: var(--ui-control-h);
}

@media (min-width: 641px) {
  body.pg-page:not(.team-page)
    :is(.pg-form input, .pg-controls input),
  .auth-form input:not([type="checkbox"]):not([type="radio"]),
  :is(.support-drawer, .permission-dialog-card) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), textarea){
    font-size: var(--ui-type-input);
  }
}

/* Phones: every typed value is 16px, the sign-in rule, so iOS does not zoom
   the page when a field takes focus. */
@media (max-width: 640px) {
  body.pg-page:not(.team-page)
    :is(.pg-form input, .pg-controls input),
  :is(.support-drawer, .permission-dialog-card) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), textarea){
    font-size: 16px;
  }
}

/* Typed sign-in values are never uppercased (see .auth-form input). */
body.pg-page:not(.team-page) input:is([type="email"], [type="password"]) {
  text-transform: none;
}

/* Tabs: the Stamp panel tab is the reference. Selected = the primary action
   gradient with a white label (4.6:1); Feedback keeps its purple. */
body.pg-page:not(.team-page) .pg-tab {
  min-height: var(--ui-control-h);
  font: 700 var(--ui-type-label) var(--font-body);
  letter-spacing: 0.04em;
}

body.pg-page:not(.team-page) .pg-tab.is-active {
  background: var(--accent-action-gradient);
  color: var(--on-colour-button);
  border-color: rgb(var(--accent-border-rgb) / 0.55);
  box-shadow:
    0 3px 9px rgb(var(--accent-rgb) / 0.26),
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.2),
    inset 0 -2px 0 rgb(var(--shade-rgb) / 0.16);
}

/* Segmented filters use the tab label size and the same selected fill. */
body.pg-page:not(.team-page) .pg-filter-button {
  /* Full text colour: the muted grey was 4.1:1 on the lighter shell panel. */
  color: var(--text);
  font: 700 var(--ui-type-label) var(--font-body);
  letter-spacing: 0.04em;
}

body.pg-page:not(.team-page) .pg-filter-button.is-active {
  color: var(--on-colour-button);
  background: var(--accent-action-gradient);
}

/* In a narrow panel the segmented filter fills its row, like the tab bar,
   instead of leaving an empty bordered gap after the last segment. */
@container pg-panel (max-width: 30rem) {
  body.pg-page:not(.team-page) .pg-filter {
    display: flex;
    width: auto;
    max-width: none;
  }
}

/* The tab count keeps its badge weight inside the 700-weight tab label. */
body.pg-page:not(.team-page) .pg-tab-badge {
  font-weight: 800;
}

/* Badges: a tier badge is an inline pill and its label keeps the badge ink.
   The generic .pg-row span rule made it a block and greyed the label
   (1.4:1 on the Lifetime gold). */
body.pg-page:not(.team-page) .pg-row .tier-badge {
  display: inline-flex;
  justify-self: start;
  width: fit-content;
}

/* Free is the neutral badge; on a banned (red) row the muted grey was 4.1:1. */
body.pg-page:not(.team-page) .pg-row .tier-badge.is-free {
  color: var(--text);
}

body.pg-page:not(.team-page) .pg-row .tier-badge > span {
  display: inline;
  overflow: visible;
  color: inherit;
  font-size: inherit;
}

/* Cards keep their content inside. In the narrow Accounts column the
   three-track row pushed its action buttons past the card edge; there the
   row stacks and the actions sit on their own line. */
@container pg-panel (max-width: 44rem) {
  body.pg-page:not(.team-page) .pg-row:not(.approval-receipt-row) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Status words in a row (open, claimed, pending, approved) are one label style. */
body.pg-page:not(.team-page) .pg-row em {
  font: 700 0.72rem/1.4 var(--font-mono);
  text-transform: uppercase;
}

/* Pro badge: white on the button blue, like every filled control. The old
   fill mixed toward the surface, so on Light the white label was near 1:1. */
.tier-badge.is-pro:not(.is-mvp-pro) {
  color: var(--on-colour-button);
}

/* Count badge, neutral variant: readable count (was 3.9:1). */
.settings-tab-badge {
  color: var(--text);
  font-weight: 800;
}

/* Active workflow step number: the contrast-safe button blue (4.6:1, was
   3.9:1). The pill is styled in features/review-panel-v3.css with a fixed
   #2e7ff2 !important; body raises the specificity by one element so this
   file wins without editing the panel stylesheet. It also follows a custom
   brand colour. */
body #workflowPanel .step-list .step.is-active .step-index {
  background: var(--accent-button) !important;
  background-image: none !important;
  color: var(--on-colour-button) !important;
}

/* Plan badge mark: the button blue stops, so the white P passes (was 2.3:1). */
.tier-badge-pro-mark {
  background: linear-gradient(180deg, var(--accent-button-highlight), var(--accent-button-press));
  color: var(--on-colour-button);
}

/* Receipt facts on the blue receipt card: full white (4.9:1, was 3.9:1). */
.approval-receipt-facts dd small {
  color: var(--text-strong);
}

/* Text links on dark surfaces use the light accent (was 3.6:1). */
.auth-switch-link {
  color: var(--ui-link);
}

.auth-switch-link:hover {
  color: var(--text-strong);
}

/* Public landing: same control radius and label size as the app. The blue
   Log in and purple Sign up colours are the owner's navigation brief. */
.landing-button {
  border-radius: var(--ui-radius-control);
  font-size: var(--ui-type-control);
}

/* Landing demo tabs, PO check and export chip: the app's action gradients,
   so white labels pass 4.5:1 (they were 2.7:1 to 3.1:1). */
.landing-demo-monitor .landing-tab.is-active {
  background: var(--accent-action-gradient);
  color: var(--on-colour-button);
  border-color: rgb(var(--accent-border-rgb) / 0.55);
}

.landing-demo-monitor .landing-tab[data-landing-tab="summary"].is-active {
  background: var(--complete-action-gradient);
  color: var(--on-colour-button);
  border-color: rgb(var(--complete-border-rgb) / 0.55);
}

.landing-po-check > summary {
  background: var(--accent-action-gradient);
  color: var(--on-colour-button);
  border-color: rgb(var(--accent-border-rgb) / 0.55);
}

.landing-export-btn.is-secondary {
  background: var(--complete-action-gradient);
  color: var(--on-colour-button);
}

.landing-zoom-value {
  color: var(--text);
}
/* Dialogs: no accent strip across the top, one width step wider (704px,
   16 control heights), and one spacing: 24px inside, 12px between blocks,
   16px around the actions (owner, 2026-10-15). */
.approval-confirmation-card {
  width: min(44rem, 100%);
}

.approval-confirmation-card::before {
  content: none;
  display: none;
}

.approval-confirmation-body {
  gap: var(--space-3);
  padding: var(--space-6);
}

.approval-confirmation-card .permission-dialog-actions {
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
}

/* Phones keep one step less around the stacked full-width actions. */
@media (max-width: 767px) {
  .approval-confirmation-body {
    padding: var(--space-5);
  }

  .approval-confirmation-card .permission-dialog-actions {
    padding: var(--space-4) var(--space-5);
  }
}

/* Review markers: the W, H, D and diameter circles take the issue pill's
   subtle lift, so every marker on the sheet reads as one family (owner,
   2026-10-15). The circle clip is dropped so the shadow can show; the
   border radius keeps it round. An unconfirmed suggestion stays a hollow
   dashed ring, so it never looks like a resolved marker. */
.diff-badge:not(.is-issue-pill):not(.is-dragging):not(.is-unconfirmed) > b {
  clip-path: none;
  text-shadow: 0 1px 1px rgb(var(--shade-rgb) / 0.24);
  box-shadow:
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.28),
    0 2px 7px rgb(var(--shadow-rgb) / 0.28);
}

/* Tier badges are flat pills: one fill, no gloss, no glow (owner,
   2026-10-15). Free neutral, Pro the button blue, Lifetime the gold. */
.tier-badge {
  gap: var(--space-1);
  box-shadow: none;
}

.tier-badge.is-pro:not(.is-mvp-pro) {
  background: var(--accent-button);
  border-color: transparent;
  box-shadow: none;
}

.tier-badge.is-lifetime {
  color: var(--ink-dark);
  background: var(--tier-gold);
  border-color: transparent;
  box-shadow: none;
}

/* Help send is icon-only, not a text button: it keeps one control height of
   width and the question box's height (the text-button minimum would make it
   88px wide). The id outranks the layer's button rule without raising that
   rule's specificity for every other button. */
#helpSendButton.primary-button {
  width: var(--ui-control-h);
  min-width: var(--ui-control-h);
}

/* END UI consistency layer */

/* Shared motion for contextual shells. The owner changes ARIA, inert, and
   logical open state at once. The shell remains painted for the short exit. */
.panel-flyout {
  transition:
    opacity 220ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 220ms linear;
}

.panel-flyout.is-flyout-opening,
.panel-flyout.is-flyout-closing {
  visibility: visible !important;
  pointer-events: none !important;
}

.panel-flyout.is-flyout-opening,
.panel-flyout.is-flyout-closing {
  opacity: 0 !important;
  transform: translateX(7vw);
}

/* PDF frames and their containing viewer keep their geometry. The viewer
   chrome fades with the shell while the drawing remains in its own frame. */
.panel-flyout.panel-flyout-static.is-flyout-opening,
.panel-flyout.panel-flyout-static.is-flyout-closing {
  transform: none !important;
}

/* Keep the side track while a persistent panel opens, closes, or stays
   collapsed. This holds the drawing rectangle steady for the full motion. */
.review-layout:has(.findings-panel.panel-flyout.is-collapsed),
.stamp-layout:has(.side-panel-wrap.panel-flyout.is-collapsed),
.save-layout:has(.save-panel.panel-flyout.is-collapsed) {
  grid-template-columns: minmax(0, 1fr) var(--side-control-width);
}

.findings-panel.panel-flyout.is-collapsed,
.side-panel-wrap.panel-flyout.is-collapsed {
  display: flex !important;
}

.save-layout .save-panel.panel-flyout.is-collapsed {
  display: grid !important;
}

.panel-flyout.is-collapsed {
  opacity: 0;
  transform: translateX(104%);
  visibility: hidden;
  pointer-events: none;
}

.panel-visibility-toggle {
  transition:
    filter 160ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    right 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* aria-hidden and hidden are logical state. Keep only the exit frame painted
   while its timer is active. */
.fullscreen-viewer.panel-flyout.is-flyout-closing[aria-hidden="true"],
#requirementPoViewer.panel-flyout.is-flyout-closing,
.pairing-overview.panel-flyout.is-flyout-closing,
.permission-dialog.panel-flyout.is-flyout-closing[aria-hidden="true"],
.settings-panel.panel-flyout.is-flyout-closing[aria-hidden="true"],
.review-queue-dialog.panel-flyout.is-flyout-closing[aria-hidden="true"],
dialog.panel-flyout.is-flyout-closing,
.drawing-controls-body.panel-flyout.is-flyout-closing,
.custom-select-panel.panel-flyout.is-flyout-closing,
.stamp-upload-panel.panel-flyout.is-flyout-closing {
  visibility: visible !important;
  pointer-events: none !important;
}

.fullscreen-viewer.panel-flyout.is-flyout-closing[aria-hidden="true"] {
  display: block !important;
}

#requirementPoViewer.panel-flyout.is-flyout-closing,
.pairing-overview.panel-flyout.is-flyout-closing {
  display: grid !important;
}

.drawing-controls-body.panel-flyout.is-flyout-closing,
.custom-select-panel.panel-flyout.is-flyout-closing,
.stamp-upload-panel.panel-flyout.is-flyout-closing {
  display: block !important;
}

.review-queue-panel.panel-flyout.is-flyout-opening .review-queue-card,
.review-queue-panel.panel-flyout.is-flyout-closing .review-queue-card {
  transition: opacity 180ms ease, transform 180ms ease;
}

.review-queue-panel.panel-flyout.is-flyout-opening .review-queue-card {
  opacity: 0;
  transform: translateY(0.7rem);
}

.review-queue-panel.panel-flyout.is-flyout-closing .review-queue-card {
  opacity: 0;
  transform: translateY(0.7rem);
}

.support-drawer.panel-flyout.is-collapsed,
.support-drawer.panel-flyout.is-flyout-closing {
  display: grid !important;
}

@media (max-width: 1180px) {
  .review-layout:has(.findings-panel.panel-flyout.is-collapsed),
  .stamp-layout:has(.side-panel-wrap.panel-flyout.is-collapsed),
  .save-layout:has(.save-panel.panel-flyout.is-collapsed) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .panel-flyout,
  .panel-flyout.is-flyout-opening,
  .panel-flyout.is-flyout-closing,
  .panel-visibility-toggle,
  .review-queue-panel.panel-flyout .review-queue-card {
    transition: none !important;
    transform: none !important;
  }
}

html[data-reduce-motion="true"] .panel-flyout,
html[data-reduce-motion="true"] .panel-flyout.is-flyout-opening,
html[data-reduce-motion="true"] .panel-flyout.is-flyout-closing,
html[data-reduce-motion="true"] .panel-visibility-toggle {
  transition: none !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .review-queue-panel.panel-flyout .review-queue-card {
    transition: none !important;
  }
}

@media (min-width: 1181px) {
  .review-layout:has(.findings-panel.panel-flyout.is-collapsed) > .panel-visibility-toggle,
  .stamp-layout:has(.side-panel-wrap.panel-flyout.is-collapsed) > .panel-visibility-toggle,
  .save-layout:has(.save-panel.panel-flyout.is-collapsed) > .panel-visibility-toggle {
    right: calc(var(--side-control-width) - 1px);
  }
}

/* Small contextual shells that are hidden by native details/hidden rules must
   remain painted for the shared exit window. Their logical state is already
   closed, so they cannot receive input during this frame. */
.sidebar-action-menu-list.panel-flyout.is-flyout-closing,
.sidebar-action-menu:not([open]) > .sidebar-action-menu-list.panel-flyout.is-flyout-closing,
.app-notification-center:not([open]) > .notification-panel.panel-flyout.is-flyout-closing,
#markIssueCard.panel-flyout.is-flyout-closing {
  display: block !important;
  visibility: visible !important;
  pointer-events: none !important;
}

.sidebar-action-menu-list.panel-flyout.is-flyout-opening,
.app-notification-center > .notification-panel.panel-flyout.is-flyout-opening,
#markIssueCard.panel-flyout.is-flyout-opening {
  visibility: visible !important;
}

.sidebar-action-menu-list.panel-flyout.is-flyout-closing {
  display: grid !important;
}

.app-notification-center > .notification-panel.panel-flyout.is-flyout-closing {
  display: grid !important;
}

.approval-receipt-notice {
  margin: 0;
  padding: var(--space-3);
  color: var(--text-strong);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.approval-receipt-notice[hidden],
.approval-receipt-confirmation[hidden] {
  display: none;
}

.approval-receipt-confirmation {
  margin: var(--space-4) 0 0;
  color: var(--success-text);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.approval-receipt-confirmation code,
.approval-receipt-number code {
  font-family: var(--font-mono);
  overflow-wrap: anywhere;
  word-break: break-all;
  text-transform: none;
  letter-spacing: 0;
  user-select: all;
}

.approval-receipt-number {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  max-width: 100%;
}

.approval-receipt-number-label {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Receipt numbers are case-sensitive: the global uppercase setting must not alter them. */
html[data-uppercase="true"] body .approval-receipt-number code,
html[data-uppercase="true"] body .approval-receipt-confirmation code {
  text-transform: none !important;
}

/* ==========================================================================
   Settings redesign (Jon, 2026-10-07). Every tab is ONE card: a light-blue
   column on the left and the content on the right, with no horizontal rules
   inside the card. The panel is translucent. Every colour here comes from a
   theme token (the accent for the blues, the panel and control tokens for the
   fills), so Charcoal, Light and a custom background all follow.
   ========================================================================== */
#settingsDialog {
  --sx-card-bg: rgb(var(--surface-raised-rgb) / 0.72);
  --sx-card-line: rgb(var(--border-rgb) / 0.7);
  --sx-side-bg: rgb(var(--accent-wash-rgb) / 0.16);
  --sx-side-line: rgb(var(--accent-rgb) / 0.3);
  --sx-tile-bg: rgb(var(--accent-wash-rgb) / 0.22);
  --sx-well: rgb(var(--bg-rgb) / 0.45);
  --sx-input-bg: rgb(var(--bg-rgb) / 0.6);
  --sx-select-bg: rgb(var(--accent-wash-rgb) / 0.16);
  --sx-select-line: rgb(var(--accent-rgb) / 0.6);
  --sx-soft-ink: var(--accent-text);
  --sx-side-width: 21.25rem;
}

/* A translucent panel: the app shows faintly through it. */
#settingsDialog form {
  background: rgb(var(--surface-rgb) / 0.78);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  border-color: rgb(var(--border-rgb) / 0.7);
}

#settingsDialog form > header,
#settingsDialog .settings-save-bar {
  background: transparent;
}

#settingsDialog .settings-body {
  display: flex;
  flex-direction: column;
  align-content: stretch;
  gap: var(--space-3);
}

#settingsDialog .settings-tab-panel.is-active,
#settingsDialog .settings-tab-panel:not([hidden]) {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

#settingsDialog .settings-tab-panel[hidden] {
  display: none;
}

#settingsDialog .settings-panel-fields {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

.sx-card {
  flex: 1 0 auto;
  display: grid;
  grid-template-columns: var(--sx-side-width, 21.25rem) minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
  background: var(--sx-card-bg);
  border: 1px solid var(--sx-card-line);
  border-radius: 16px;
}

.sx-card [hidden] {
  display: none !important;
}

/* ---- Passkeys (Security tab) ---- */
.sx-card-passkeys {
  grid-template-columns: minmax(0, 1fr);
  margin-top: var(--space-4);
}

.passkey-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.passkey-list:empty {
  display: none;
}

.passkey-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--sx-card-line);
  border-radius: 10px;
}

.passkey-meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.passkey-name {
  color: var(--text-strong);
  font: 600 0.9rem/1.3 var(--font-ui);
  overflow-wrap: anywhere;
}

.passkey-when {
  color: var(--text-muted);
  font: 400 0.75rem/1.4 var(--font-ui);
}

.sx-side,
.sx-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sx-side {
  gap: var(--space-4);
  padding: 1.75rem;
  background: var(--sx-side-bg);
  border-right: 1px solid var(--sx-side-line);
}

.sx-main {
  gap: var(--space-4);
  padding: 1.75rem 2rem;
}

.sx-side-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.sx-spacer {
  flex: 1 1 auto;
}

.sx-label {
  margin: 0;
  color: var(--sx-soft-ink);
  font: 500 0.7rem/1.2 var(--font-mono);
  letter-spacing: 0.14em;
}

.sx-title {
  margin: 0;
  color: var(--text-strong);
  font: 800 1.15rem/1.15 var(--font-head);
  letter-spacing: 0.03em;
}

.sx-title-small {
  font-size: 1rem;
}

.sx-help {
  margin: 0;
  color: var(--text-muted);
  font: 400 0.78rem/1.45 var(--font-ui);
  letter-spacing: 0.04em;
}

.sx-help-small {
  font-size: 0.7rem;
}

.sx-main-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.sx-side-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.sx-ico {
  display: grid;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  color: var(--sx-soft-ink);
  background: var(--sx-tile-bg);
  border-radius: 10px;
}

.sx-ico svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sx-ico-large {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 14px;
}

.sx-ico-large svg {
  width: 1.6rem;
  height: 1.6rem;
}

.sx-key {
  margin: 0;
  color: var(--text-muted);
  font: 600 0.66rem/1.2 var(--font-ui);
  letter-spacing: 0.12em;
}

.sx-value {
  margin: 0;
  color: var(--text);
  font: 700 0.85rem/1.3 var(--font-ui);
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
}

.sx-fact {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.sx-fact > div {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.sx-fact > div > a {
  color: var(--accent-text);
  font: 600 0.72rem/1.2 var(--font-ui);
}

.sx-fact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.sx-fact-card {
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--sx-well);
  border-radius: 12px;
}

/* ---- Forms ---- */
.sx-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
  max-width: 40rem;
  margin: 0;
  padding: 1rem 0 0;
  border: 0;
}

.sx-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
}

.sx-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.sx-field-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: var(--text-muted);
  font: 600 0.72rem/1.2 var(--font-ui);
  letter-spacing: 0.08em;
}

.sx-count {
  color: var(--text-muted);
  font: 500 0.68rem/1 var(--font-mono);
  letter-spacing: 0.06em;
}

#settingsDialog .settings-body .sx-field input:not([type="checkbox"]):not([type="color"]) {
  width: 100%;
  max-width: none;
  height: 3rem;
  min-height: 3rem;
  padding: 0 1rem;
  color: var(--text);
  font: 500 0.92rem/1 var(--font-ui);
  background: var(--sx-input-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: none;
}

#settingsDialog .settings-body .sx-field input:not([type="checkbox"]):not([type="color"]):focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.25);
}

.sx-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding-top: var(--space-2);
}

.sx-actions .settings-status {
  flex: 1 1 12rem;
  margin: 0;
}

.sx-button {
  min-height: 2.9rem;
  padding-inline: 1.5rem;
  border-radius: 10px;
}

/* ---- Account ---- */
.sx-identity {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.sx-avatar {
  position: relative;
  flex: none;
  width: 4.5rem;
  height: 4.5rem;
}

.sx-avatar-frame {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  cursor: var(--cursor-pointer);
  background: var(--accent-button);
  color: var(--on-colour-button);
  border-radius: 50%;
}

.sx-avatar-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.sx-avatar-initial {
  color: var(--on-colour-button);
  font: 800 1.9rem/1 var(--font-head);
}

.sx-avatar-camera {
  position: absolute;
  right: -0.4rem;
  bottom: -0.4rem;
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  color: var(--surface);
  background: var(--text);
  border: 2px solid rgb(var(--accent-rgb) / 0.55);
  border-radius: 50%;
}

.sx-avatar-camera svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sx-avatar:has(input:focus-visible) .sx-avatar-frame {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.sx-identity-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  min-width: 0;
}

.sx-person {
  margin: 0;
  color: var(--text-strong);
  font: 800 1.25rem/1.1 var(--font-head);
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}

.sx-pill {
  display: inline-flex;
  align-items: center;
  height: 1.5rem;
  padding: 0 0.65rem;
  color: var(--sx-soft-ink);
  font: 700 0.66rem/1 var(--font-ui);
  letter-spacing: 0.1em;
  background: rgb(var(--accent-wash-rgb) / 0.14);
  border-radius: 999px;
}

.sx-pill:empty {
  display: none;
}

.sx-link-button {
  min-height: 1.5rem;
  padding: 0;
  color: var(--text-muted);
  font: 600 0.66rem/1 var(--font-ui);
  letter-spacing: 0.08em;
  background: transparent;
  border: 0;
  cursor: var(--cursor-pointer);
}

.sx-link-button:hover:not(:disabled) {
  color: var(--text);
}

.sx-link-button:disabled {
  cursor: default;
  opacity: 0.6;
}

/* ---- Plan & billing ---- */
.sx-plan-hero {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.sx-plan-hero > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  min-width: 0;
}

/* The big plan name: the plan badge, shown as plain large text. */
#settingsDialog .tier-badge.sx-plan-name {
  align-self: flex-start;
  min-height: 0;
  padding: 0;
  color: var(--text-strong);
  font: 800 1.75rem/1 var(--font-head);
  letter-spacing: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

/* TASK-94: the plan name is plain text here; no P mark or lock badge beside it. */
#settingsDialog .tier-badge.sx-plan-name .tier-badge-pro-mark,
#settingsDialog .tier-badge.sx-plan-name svg {
  display: none;
}

#settingsDialog .tier-badge.sx-plan-name[hidden] {
  display: none;
}

.sx-plan-content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.sx-plan-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.sx-plan-footer .settings-status {
  flex: 1 1 14rem;
  margin: 0;
  font-size: 0.72rem;
}

.sx-plan-footer .billing-settings-actions {
  margin: 0;
}

.sx-team-sections {
  display: grid;
  gap: var(--space-2);
}

.sx-team-sections .account-fact {
  display: grid;
  gap: 0.25rem;
  padding: var(--space-3) var(--space-4);
  background: var(--sx-well);
  border: 0;
  border-radius: 12px;
}

/* ---- Saving ---- */
.sx-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.sx-chips > span {
  display: inline-flex;
  align-items: center;
  height: 1.65rem;
  padding: 0 0.65rem;
  color: var(--text);
  font: 600 0.68rem/1 var(--font-mono);
  letter-spacing: 0.04em;
  background: var(--sx-well);
  border-radius: 8px;
}

.sx-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.sx-group > legend {
  float: left;
  width: 100%;
  margin: 0 0 var(--space-3);
  padding: 0;
}

.sx-group > legend + * {
  clear: both;
}

.sx-tog,
.sx-tcard {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 1.1rem;
  color: var(--text);
  text-align: left;
  background: var(--sx-well);
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: var(--cursor-pointer);
}

.sx-tog > span,
.sx-tcard > span {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.sx-tog strong,
.sx-tcard b {
  color: var(--text);
  font: 700 0.8rem/1.2 var(--font-ui);
  letter-spacing: 0.06em;
}

.sx-tog small,
.sx-tcard small {
  color: var(--text-muted);
  font: 400 0.7rem/1.45 var(--font-ui);
  letter-spacing: 0.04em;
}

/* The checkbox, drawn as a switch (the approved Settings design, 2026-10-07). It is still
   the checkbox: the label, the id and the code that reads .checked are unchanged.
   features/review-panel-v3.css ("One checkbox", 2026-10-02) draws every other checkbox
   as a square tick box with !important and six ids; the repeated #settingsDialog ids
   raise this rule above it, the same way that rule raises itself. To go back to the
   tick box in Settings, delete the .sx-switch rules. */
html body #settingsDialog#settingsDialog#settingsDialog#settingsDialog#settingsDialog#settingsDialog#settingsDialog input.sx-switch[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  position: relative !important;
  flex: 0 0 auto !important;
  width: 2.75rem !important;
  min-width: 2.75rem !important;
  height: 1.65rem !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--surface-muted) !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: var(--cursor-pointer) !important;
}

html body #settingsDialog#settingsDialog#settingsDialog#settingsDialog#settingsDialog#settingsDialog#settingsDialog input.sx-switch[type="checkbox"]::after {
  content: "" !important;
  position: absolute !important;
  top: 0.19rem;
  left: 0.19rem;
  width: 1.27rem;
  height: 1.27rem;
  background: var(--text);
  border-radius: 50%;
  transition: left 140ms ease;
}

html body #settingsDialog#settingsDialog#settingsDialog#settingsDialog#settingsDialog#settingsDialog#settingsDialog input.sx-switch[type="checkbox"]:checked {
  background: var(--accent-button) !important;
  color: var(--on-colour-button) !important;
  border: 0 !important;
}

html body #settingsDialog#settingsDialog#settingsDialog#settingsDialog#settingsDialog#settingsDialog#settingsDialog input.sx-switch[type="checkbox"]:checked::after {
  left: calc(100% - 1.46rem);
  background: var(--on-accent);
}

html body #settingsDialog#settingsDialog#settingsDialog#settingsDialog#settingsDialog#settingsDialog#settingsDialog input.sx-switch[type="checkbox"]:focus-visible {
  outline: 2px solid var(--focus) !important;
  outline-offset: 2px !important;
}

.sx-tog:has(.sx-switch:focus-visible),
.sx-tcard:has(.sx-switch:focus-visible) {
  border-color: var(--accent);
}

/* ---- Approval receipts ---- */
.sx-receipt-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

#settingsDialog .sx-receipt-list .approval-receipt-row {
  display: block;
  padding: 0;
  color: var(--text);
  background: var(--sx-well);
  border: 0;
  border-radius: 12px;
  cursor: default;
  filter: none;
  transform: none;
}

#settingsDialog .sx-receipt-list .approval-receipt-row.is-open {
  box-shadow: inset 0 0 0 1px var(--sx-side-line);
}

.approval-receipt-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-4) 1.1rem;
  color: var(--text);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 12px;
  cursor: var(--cursor-pointer);
}

.approval-receipt-toggle:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* The tick tile and the arrow are drawn here, so the row holds no image. */
.approval-receipt-mark {
  position: relative;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  background: var(--sx-tile-bg);
  border-radius: 10px;
}

.approval-receipt-mark::after {
  content: "";
  position: absolute;
  top: 0.62rem;
  left: 0.86rem;
  width: 0.4rem;
  height: 0.8rem;
  border: solid var(--sx-soft-ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

#settingsDialog .sx-receipt-list .approval-receipt-head {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.4rem;
  min-width: 0;
}

#settingsDialog .sx-receipt-list .approval-receipt-head strong {
  color: var(--text);
  font: 700 0.85rem/1.3 var(--font-ui);
  letter-spacing: 0.04em;
}

#settingsDialog .sx-receipt-list .approval-receipt-number {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

#settingsDialog .sx-receipt-list .approval-receipt-row code {
  padding: 0;
  color: var(--text);
  font: 500 0.75rem/1.3 var(--font-mono);
  background: none;
  border-radius: 0;
}

.approval-receipt-chevron {
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  margin-right: 0.3rem;
  border: solid var(--sx-soft-ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  transition: transform 140ms ease;
}

.approval-receipt-row.is-open .approval-receipt-chevron {
  transform: rotate(225deg);
}

#settingsDialog .sx-receipt-list .approval-receipt-facts {
  display: grid;
  grid-template-columns: 10.5rem minmax(0, 1fr);
  gap: var(--space-3) var(--space-4);
  padding: 0.25rem 1.1rem 1.25rem 4.6rem;
  margin: 0;
}

#settingsDialog .sx-receipt-list .approval-receipt-facts[hidden] {
  display: none;
}

#settingsDialog .sx-receipt-list .approval-receipt-facts dt {
  color: var(--text-muted);
  font: 600 0.66rem/1.3 var(--font-ui);
  letter-spacing: 0.12em;
}

#settingsDialog .sx-receipt-list .approval-receipt-facts dd {
  color: var(--text);
  font: 600 0.78rem/1.45 var(--font-ui);
  letter-spacing: 0.03em;
}

#settingsDialog .sx-receipt-list .approval-receipt-facts dd small {
  color: var(--text-muted);
  font: 400 0.7rem/1.45 var(--font-ui);
  letter-spacing: 0.04em;
}

#settingsDialog .sx-receipt-list .settings-empty {
  padding: var(--space-4);
  background: var(--sx-well);
  border-radius: 12px;
}

/* ---- Appearance ---- */
.sx-side-nav {
  gap: 0.25rem;
}

.sx-side-nav > .sx-label {
  padding: 0 0.5rem 0.5rem;
}

/* Appearance's column also holds Colour vision, so its buttons sit a little tighter
   and the column scrolls rather than clipping on short screens. */
.sx-side-nav {
  overflow-y: auto;
}

.sx-side-nav .sx-fn {
  padding: 0.5rem 0.85rem;
}

.sx-side-nav .sx-fn .sx-ico {
  width: 2.15rem;
  height: 2.15rem;
}

.sx-fn {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: 0.85rem;
  color: var(--text);
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 14px;
  cursor: var(--cursor-pointer);
}

.sx-fn b {
  display: block;
  font: 800 0.95rem/1.2 var(--font-head);
  letter-spacing: 0.04em;
}

.sx-fn small {
  display: block;
  margin-top: 0.25rem;
  color: var(--text-muted);
  font: 400 0.65rem/1.3 var(--font-ui);
  letter-spacing: 0.05em;
}

.sx-fn .sx-ico {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 12px;
}

.sx-fn:hover {
  background: rgb(var(--overlay-rgb) / 0.05);
}

.sx-fn[aria-pressed="true"] {
  color: var(--text-strong);
  background: var(--sx-well);
  border-color: var(--sx-select-line);
}

.sx-fn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.sx-side-nav .settings-status {
  min-height: 0;
  margin: 0;
  font-size: 0.72rem;
}

.sx-card-appearance {
  --sx-side-width: 17.5rem;
}

.sx-appearance-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sx-pane-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 25rem;
  gap: 1.75rem;
  align-items: start;
  padding: 1.75rem 2rem;
}

.sx-pane-list {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sx-pane {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.sx-pane-wide {
  padding: 1.75rem 2rem;
}

.sx-item-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sx-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 2.6rem;
  padding: 0 0.75rem;
  color: var(--text);
  font: 700 0.75rem/1.2 var(--font-ui);
  letter-spacing: 0.06em;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: var(--cursor-pointer);
}

.sx-item > i {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  background: var(--item-colour, var(--surface-muted));
  border: 2px solid rgb(var(--overlay-rgb) / 0.2);
  border-radius: 7px;
}

.sx-item:hover {
  background: rgb(var(--overlay-rgb) / 0.05);
}

.sx-item[aria-pressed="true"] {
  color: var(--text-strong);
  background: var(--sx-select-bg);
  border-color: var(--sx-select-line);
}

.sx-item:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.sx-marker-list {
  gap: var(--space-2);
}

/* A heading inside a list (Main colours, Status colours). It is not a button. */
.sx-item-group {
  margin: var(--space-3) 0 var(--space-1);
  padding: 0 0.75rem;
  color: var(--text-muted);
  font: 700 0.68rem/1.2 var(--font-ui);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sx-item-group:first-child {
  margin-top: 0;
}

.sx-fine-tune {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

/* On a wide screen the nine Fine-tune rows sit in two columns, under a full-width
   Whole background row, so the Background pane fits without scrolling. */
@media (min-width: 901px) {
  #appearanceShellList {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px var(--space-2);
  }

  #appearanceShellList > .sx-item:first-child {
    grid-column: 1 / -1;
  }

  #appearanceShellList > .sx-item {
    min-height: 2.5rem;
    gap: 0.6rem;
    padding: 0.3rem 0.5rem;
    line-height: 1.15;
  }

  #appearanceShellList > .sx-item > i {
    width: 1.35rem;
    height: 1.35rem;
  }

  #appearanceShellList > .sx-item > span {
    min-width: 0;
    white-space: normal;
  }
}

.sx-marker-item {
  gap: 1.1rem;
  min-height: 4.75rem;
  font-size: 0.85rem;
}

/* A marker's example: the box and the badge, in the marker colour, on paper. */
.sx-marker-example {
  position: relative;
  flex: none;
  width: 6rem;
  height: 3.25rem;
  background: var(--paper);
  border-radius: 6px;
}

.sx-marker-box {
  position: absolute;
  inset: 0.55rem 1.6rem 0.55rem 0.55rem;
  border: 3px solid var(--item-colour, var(--accent));
  border-radius: 3px;
}

.sx-marker-badge {
  position: absolute;
  top: 0.9rem;
  right: 0.25rem;
  display: grid;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 0.35rem;
  place-items: center;
  box-sizing: border-box;
  color: var(--item-ink, var(--on-accent));
  font: 800 0.62rem/1 var(--font-ui);
  background: var(--item-fill, var(--accent));
  border-radius: 999px;
}

/* Background swatches */
#settingsDialog .appearance-bases {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}

.sx-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: 0;
  color: var(--text-muted);
  font: 600 0.68rem/1.2 var(--font-ui);
  letter-spacing: 0.1em;
  background: transparent;
  border: 0;
  cursor: var(--cursor-pointer);
}

.sx-swatch-chip {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 14px;
}

/* A mini shell: the page, a header strip, a panel with a border, two lines of text
   and a pill in Yours. Its colours are inline custom properties set from the script
   (--tile-*), so this sheet names none. The Background tiles and the editor's
   sample both use it. */
.sx-tile {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--tile-page);
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgb(var(--overlay-rgb) / 0.18);
}

.sx-tile-head {
  position: absolute;
  inset: 0 0 auto;
  height: 15%;
  background: var(--tile-head);
}

.sx-tile-panel {
  position: absolute;
  inset: 27% 9% 11%;
  display: flex;
  flex-direction: column;
  gap: 7%;
  padding: 8% 9%;
  box-sizing: border-box;
  background: var(--tile-panel);
  border: 1px solid var(--tile-line);
  border-radius: 7px;
}

.sx-tile-text,
.sx-tile-text-muted {
  display: block;
  height: 6%;
  min-height: 3px;
  border-radius: 999px;
}

.sx-tile-text {
  width: 72%;
  background: var(--tile-text);
}

.sx-tile-text-muted {
  width: 46%;
  background: var(--tile-muted);
}

.sx-tile-pill {
  display: block;
  width: 34%;
  height: 11%;
  min-height: 5px;
  margin-top: auto;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: 999px;
}

.sx-tile-controls,
.sx-tile-input,
.sx-tile-muted-fill {
  display: none;
}

/* The editor's sample adds an input and a muted control, and rings the part being edited. */
.sx-tile-detail .sx-tile-controls {
  display: flex;
  gap: 6%;
  height: 20%;
}

.sx-tile-detail .sx-tile-input,
.sx-tile-detail .sx-tile-muted-fill {
  display: block;
  border-radius: 5px;
}

.sx-tile-detail .sx-tile-input {
  flex: 1 1 0;
  background: var(--tile-raised);
  border: 1px solid var(--tile-line);
}

.sx-tile-detail .sx-tile-muted-fill {
  flex: 0 0 28%;
  background: var(--tile-muted-fill);
}

.sx-tile[data-edited="background"],
.sx-tile[data-edited="border"] .sx-tile-panel,
.sx-tile[data-edited="surface"] .sx-tile-panel,
.sx-tile[data-edited="backgroundStrong"] .sx-tile-head,
.sx-tile[data-edited="surfaceRaised"] .sx-tile-input,
.sx-tile[data-edited="surfaceMuted"] .sx-tile-muted-fill,
.sx-tile[data-edited="text"] .sx-tile-text,
.sx-tile[data-edited="textMuted"] .sx-tile-text-muted {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.sx-tile[data-edited="background"] {
  outline-offset: -2px;
}

.sx-tile[data-edited="backgroundStrong"] .sx-tile-head {
  outline-offset: -2px;
}

.sx-tile[data-edited="text"] .sx-tile-text,
.sx-tile[data-edited="textMuted"] .sx-tile-text-muted {
  outline-offset: 3px;
}

.sx-swatch[aria-pressed="true"] {
  color: var(--text-strong);
}

.sx-swatch[aria-pressed="true"] .sx-swatch-chip {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.sx-swatch:focus-visible .sx-swatch-chip {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

/* The shared colour editor */
#settingsDialog .appearance-editor {
  gap: var(--space-3);
  padding: 1.1rem 1.25rem;
  background: var(--sx-well);
  border-radius: 16px;
}

#settingsDialog .appearance-editor-name {
  font: 800 1.1rem/1.2 var(--font-head);
  letter-spacing: 0.04em;
}

/* How the colour looks: a sample on the panel colour (set as --sample-surface). */
#settingsDialog .appearance-swatch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  height: auto;
  min-height: 3.75rem;
  padding: 0.6rem;
  box-sizing: border-box;
  background: var(--sample-surface, var(--surface));
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: none;
}

#settingsDialog .appearance-swatch[data-sample="shell"] {
  display: block;
  padding: 0;
  overflow: hidden;
  height: 8.75rem;
  min-height: 0;
}

.appearance-sample-button,
.appearance-sample-chip {
  max-width: 100%;
  padding: 0.5rem 0.85rem;
  overflow: hidden;
  box-sizing: border-box;
  color: var(--sample-ink);
  font: 700 0.74rem/1.2 var(--font-ui);
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 999px;
}

.appearance-sample-button {
  background: var(--sample-fill);
}

.appearance-sample-chip {
  border: 2px solid var(--sample-line);
}

.appearance-sample-logo {
  color: var(--sample-ink);
  font: 800 1.9rem/1 var(--font-head);
  letter-spacing: 0.08em;
}

.appearance-sample-marker {
  width: 7.5rem;
  height: 3.6rem;
}

.appearance-contrast {
  margin: calc(var(--space-1) * -1) 0 0;
  color: var(--text-muted);
  font: 600 0.72rem/1.4 var(--font-ui);
  text-align: center;
}

/* For a colour the harmony check covers, the readout rides in the check's box. */
.appearance-harmony-readout {
  display: block;
  margin-top: 0.15rem;
  color: var(--text-muted);
  font: 600 0.64rem/1.2 var(--font-ui);
}

/* Colours that match: one round swatch each, for ONE colour (not a colour set),
   worked out from the user's other colours by the theme engine. */
.appearance-matching-label {
  margin: 0;
  color: var(--text-muted);
  font: 700 0.66rem/1.2 var(--font-ui);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.appearance-quick {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 0.2rem;
  justify-items: center;
}

/* The harmony check: what does not work about the colour, with a one-tap fix, or a
   quiet line saying it goes well with the others. */
.appearance-harmony {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 2.25rem;
  padding: 0.4rem 0.4rem 0.4rem 0.75rem;
  border: 1px solid transparent;
  border-radius: 10px;
}

.appearance-harmony[data-state="issue"] {
  background: rgb(var(--warning-rgb) / 0.1);
  border-color: rgb(var(--warning-rgb) / 0.45);
}

.appearance-harmony[data-state="ok"] {
  background: rgb(var(--success-rgb) / 0.08);
  border-color: rgb(var(--success-rgb) / 0.3);
}

.appearance-harmony-ok {
  margin: 0;
  color: var(--text);
  font: 600 0.74rem/1.3 var(--font-ui);
}

.appearance-harmony-ok::before {
  content: "\2713";
  margin-right: 0.45rem;
  color: var(--success-text);
  font-weight: 800;
}

.appearance-harmony-issue {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  color: var(--text);
  font: 600 0.74rem/1.35 var(--font-ui);
}

.appearance-harmony-issue::before {
  content: "!";
  display: inline-grid;
  width: 1rem;
  height: 1rem;
  margin-right: 0.4rem;
  place-items: center;
  vertical-align: -0.12rem;
  color: var(--on-colour-button);
  font: 800 0.62rem/1 var(--font-ui);
  background: var(--action-warning);
  border-radius: 50%;
}

#settingsDialog .appearance-harmony-fix {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex: none;
}

.appearance-harmony-fix > i {
  width: 0.95rem;
  height: 0.95rem;
  background: var(--quick-colour);
  border: 1px solid rgb(var(--overlay-rgb) / 0.3);
  border-radius: 50%;
}

/* Accessibility: colour blindness support. The pane scrolls when the list of
   colours to look at is long. */
[data-appearance-pane="access"] {
  min-height: 0;
  overflow-y: auto;
}

[data-appearance-pane="access"] .sx-tcard {
  padding: 1rem 1.5rem;
}

.sx-vision-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.sx-vision-body[hidden] {
  display: none;
}

.sx-vision-choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.sx-vision-choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 0.9rem 1rem;
  color: var(--text);
  text-align: left;
  background: var(--sx-well);
  border: 1px solid var(--border);
  border-radius: 14px;
  cursor: var(--cursor-pointer);
}

.sx-vision-choice b {
  font: 800 0.9rem/1.2 var(--font-head);
  letter-spacing: 0.05em;
}

.sx-vision-choice small {
  min-height: 2.9em;
  white-space: normal;
  color: var(--text-muted);
  font: 400 0.7rem/1.45 var(--font-ui);
  letter-spacing: 0.03em;
}

.sx-vision-choice:hover {
  border-color: rgb(var(--overlay-rgb) / 0.3);
}

.sx-vision-choice[aria-pressed="true"] {
  background: var(--sx-well);
  border-color: var(--accent-border);
  box-shadow: inset 0 0 0 1px var(--accent-border);
}

.sx-vision-choice[aria-pressed="true"] b::after {
  content: "\2713";
  margin-left: 0.45rem;
  color: var(--accent-text);
}

.sx-vision-choice:focus-visible,
.sx-vision-row:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* The user's own colours, as these eyes see them. */
.sx-vision-sample {
  display: flex;
  gap: 0.3rem;
  margin-top: 0.25rem;
}

.sx-vision-sample i,
.sx-vision-row i {
  width: 1.2rem;
  height: 1.2rem;
  background: var(--sample-colour);
  border: 1px solid rgb(var(--overlay-rgb) / 0.3);
  border-radius: 50%;
}

.sx-vision-result[data-state="off"] {
  display: none;
}

.sx-vision-result {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 1rem 1.2rem;
  background: var(--sx-well);
  border: 1px solid var(--border);
  border-radius: 16px;
}

.sx-vision-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.sx-vision-result-head p,
.sx-vision-ok {
  margin: 0;
  color: var(--text);
  font: 700 0.78rem/1.4 var(--font-ui);
  letter-spacing: 0.04em;
}

.sx-vision-ok::before {
  content: "\2713";
  margin-right: 0.5rem;
  color: var(--success-text);
  font-weight: 800;
}

.sx-vision-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sx-vision-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.1rem 0.6rem;
  width: 100%;
  padding: 0.45rem 0.6rem;
  color: var(--text);
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: var(--cursor-pointer);
}

.sx-vision-row:hover {
  background: rgb(var(--overlay-rgb) / 0.05);
  border-color: var(--border);
}

.sx-vision-row i {
  grid-row: span 2;
}

.sx-vision-row b {
  font: 700 0.74rem/1.25 var(--font-ui);
  letter-spacing: 0.05em;
}

.sx-vision-row small {
  color: var(--text-muted);
  font: 400 0.68rem/1.35 var(--font-ui);
  letter-spacing: 0.03em;
}

/* Preview: the whole page as the chosen colour vision sees it, while Settings is open. */
html[data-colour-vision-preview="protan"] body { filter: url("#appvlrVisionProtan"); }
html[data-colour-vision-preview="deutan"] body { filter: url("#appvlrVisionDeutan"); }
html[data-colour-vision-preview="tritan"] body { filter: url("#appvlrVisionTritan"); }

/* A section in the left column with a clashing colour wears the same dot. */
.sx-fn[data-harmony="issue"] {
  position: relative;
}

.sx-fn[data-harmony="issue"]::after {
  content: "";
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--warning);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgb(var(--warning-rgb) / 0.2);
}

/* A part whose colour clashes wears a small warning dot in the lists. */
.sx-item[data-harmony="issue"] {
  position: relative;
}

.sx-item[data-harmony="issue"]::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  margin-left: auto;
  background: var(--warning);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgb(var(--warning-rgb) / 0.2);
}

.appearance-quick-swatch {
  width: 1.65rem;
  height: 1.65rem;
  padding: 0;
  background: var(--quick-colour);
  border: 2px solid rgb(var(--overlay-rgb) / 0.2);
  border-radius: 50%;
  cursor: var(--cursor-pointer);
}

.appearance-quick-swatch:hover {
  transform: scale(1.08);
}

.appearance-quick-swatch[aria-pressed="true"] {
  outline: 2px solid var(--text-strong);
  outline-offset: 2px;
}

.appearance-quick-swatch:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* The editor's last row: Red, green, blue on the left, Reset this colour on the
   right. Opening Red, green, blue puts its sliders under both. */
.appearance-editor-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
}

.appearance-editor-foot > .appearance-rgb {
  flex: 1 1 10rem;
  padding-top: 0;
  border-top: 0;
}

.appearance-editor-foot > .appearance-rgb[open] {
  flex-basis: 100%;
  order: 2;
}

/* Red, green, blue: tucked away under the main sliders. */
.appearance-rgb {
  border-top: 1px solid var(--border);
  padding-top: var(--space-2);
}

.appearance-rgb > summary {
  color: var(--text-muted);
  font: 700 0.72rem/1.2 var(--font-ui);
  cursor: var(--cursor-pointer);
}

.appearance-rgb[open] > summary {
  margin-bottom: var(--space-2);
}

.appearance-rgb > summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* With a mouse the sliders are slimmer so the whole editor fits a laptop screen. */
@media (pointer: fine) {
  #settingsDialog .appearance-editor .appearance-slider input[type="range"] {
    height: 2rem;
    min-height: 2rem;
  }
}

/* On a wide window the editor stays in view while a long list scrolls. */
@media (min-width: 901px) {
  #settingsDialog .appearance-editor {
    position: sticky;
    top: 0;
  }
}

#settingsDialog .appearance-colour-row input[type="text"],
#settingsDialog .appearance-colour-row input[type="color"] {
  height: 3.25rem;
  min-height: 3.25rem;
  background: var(--sx-input-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
}

#settingsDialog .appearance-colour-row input[type="text"] {
  padding: 0 0.9rem;
  font: 600 1rem/1 var(--font-mono);
}

#settingsDialog .appearance-colour-row {
  grid-template-columns: 3.5rem minmax(0, 1fr);
}

#settingsDialog .appearance-colour-row input[type="color"] {
  width: 3.5rem;
}

/* The knob is a round ring that wears the colour being edited. */
#settingsDialog .appearance-slider input[type="range"]::-webkit-slider-thumb {
  background: var(--swatch-colour, transparent);
}

#settingsDialog .appearance-slider input[type="range"]::-moz-range-thumb {
  background: var(--swatch-colour, transparent);
}

/* Display */
.sx-choice-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.sx-choice-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.sx-choice {
  flex: 1 1 8rem;
  min-height: 3.75rem;
  padding: 0 0.75rem;
  color: var(--text);
  font: 700 0.8rem/1.2 var(--font-ui);
  letter-spacing: 0.08em;
  background: var(--sx-well);
  border: 1px solid var(--border);
  border-radius: 14px;
  cursor: var(--cursor-pointer);
}

.sx-choice[aria-pressed="true"] {
  color: var(--on-colour-button);
  background: var(--accent-button);
  border-color: var(--accent-border);
}

.sx-choice:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

[data-appearance-choice="uiFontSizeSelect"] .sx-choice[data-value="small"] { font-size: 0.75rem; }
[data-appearance-choice="uiFontSizeSelect"] .sx-choice[data-value="default"] { font-size: 0.875rem; }
[data-appearance-choice="uiFontSizeSelect"] .sx-choice[data-value="large"] { font-size: 1rem; }
[data-appearance-choice="uiFontSizeSelect"] .sx-choice[data-value="extra-large"] { font-size: 1.125rem; }

.sx-toggle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.sx-toggle-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.sx-tcard {
  align-items: center;
  padding: 1.3rem 1.5rem;
  border-radius: 16px;
}

.sx-tcard b {
  font: 800 1rem/1.2 var(--font-head);
}

.sx-tcard small {
  font-size: 0.74rem;
}

html body #settingsDialog#settingsDialog#settingsDialog#settingsDialog#settingsDialog#settingsDialog#settingsDialog input.sx-switch[type="checkbox"]:is(.sx-tcard *) {
  width: 4.5rem !important;
  min-width: 4.5rem !important;
  height: 2.5rem !important;
}

html body #settingsDialog#settingsDialog#settingsDialog#settingsDialog#settingsDialog#settingsDialog#settingsDialog input.sx-switch[type="checkbox"]:is(.sx-tcard *)::after {
  top: 0.3rem;
  left: 0.3rem;
  width: 1.9rem;
  height: 1.9rem;
}

html body #settingsDialog#settingsDialog#settingsDialog#settingsDialog#settingsDialog#settingsDialog#settingsDialog input.sx-switch[type="checkbox"]:is(.sx-tcard *):checked::after {
  left: calc(100% - 2.2rem);
}

/* ---- Phone: one column, no sideways scroll ---- */
@media (max-width: 900px) {
  .sx-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .sx-side {
    border-right: 0;
    border-bottom: 1px solid var(--sx-side-line);
  }

  .sx-pane-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .sx-side,
  .sx-main,
  .sx-pane-grid,
  .sx-pane-wide {
    padding: var(--space-4);
  }

  .sx-form-grid,
  .sx-fact-grid,
  .sx-toggle-grid,
  #settingsDialog .appearance-bases {
    grid-template-columns: minmax(0, 1fr);
  }

  #settingsDialog .appearance-bases {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .sx-actions {
    justify-content: stretch;
  }

  .sx-actions .sx-button {
    flex: 1 1 8rem;
  }

  .sx-choice {
    flex-basis: 100%;
  }

  #settingsDialog .sx-receipt-list .approval-receipt-facts {
    grid-template-columns: minmax(0, 1fr);
    padding-left: 1.1rem;
  }

  #settingsDialog .settings-body .sx-field input:not([type="checkbox"]):not([type="color"]) {
    font-size: 1rem;
  }

  .sx-fn small {
    display: none;
  }
}

/* Wide windows: the card fills the dialog and its two columns scroll on their own, so
   the left column and its buttons never scroll away with a long list. */
@media (min-width: 901px) {
  #settingsDialog .settings-tab-panel:not([hidden]),
  #settingsDialog .settings-panel-fields {
    flex: 1 1 0;
    min-height: 0;
  }

  #settingsDialog .sx-card {
    flex: 1 1 0;
    min-height: 0;
  }

  #settingsDialog .sx-side,
  #settingsDialog .sx-main,
  #settingsDialog .sx-appearance-main {
    overflow-y: auto;
    scrollbar-color: var(--accent) transparent;
    scrollbar-width: thin;
  }
}

@media (max-width: 640px) {
  .sx-side-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
  }

  .sx-side-nav > .sx-label,
  .sx-side-nav > :not(.sx-fn) {
    grid-column: 1 / -1;
  }

  .sx-fn {
    padding: var(--space-2);
  }

  .sx-fn .sx-ico {
    display: none;
  }
}

/* ==========================================================================
   Sheet Manager: side by side.
   Your drawing on the left, the supplied drawing on the right, each with its
   own strip of page tiles underneath. A slim overall size row and one decision
   bar close the dialog. The ID selector beats the older layered rules above.
   All text in the dialog is upper case.
   ========================================================================== */
#pairingOverview {
  --sm-gap: 10px;
  --sm-head-h: 34px;
  --sm-panel-head-h: 52px;
  --sm-strip-h: 56px;
  --sm-btn-h: 34px;
  --sm-c0: #f0a30a;
  --sm-c1: #4cc3f0;
  --sm-c2: #3fd1a0;
  --sm-c3: #f4e25a;
  --sm-c4: #ff7a59;
  --sm-c5: #d98bd0;
}

#pairingOverview.pairing-overview:has(.sm-card) {
  display: grid;
  place-items: stretch;
  padding: 8px;
  overflow: hidden;
  background: rgb(var(--bg-strong-rgb) / 0.78);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

#pairingOverview .sm-card {
  box-sizing: border-box;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 6px;
  /* As wide as the two pages need (Jon 15 Oct: reduce the overall width), centred. Never under
     920px, so the size table and the decision bar keep their words on screen. */
  justify-self: center;
  width: min(100%, max(var(--sm-card-w, 100%), 920px));
  max-width: none;
  height: 100%;
  min-height: 0;
  padding: 8px 12px;
  overflow: hidden;
  text-transform: uppercase;
  background: rgb(var(--surface-rgb));
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: var(--panel-radius);
}

#pairingOverview .sm-card:has(.pairing-overview-banner) { grid-template-rows: auto auto minmax(0, 1fr) auto auto; }
#pairingOverview .sm-card:has(.pairing-overview-banner + .pairing-overview-banner) { grid-template-rows: auto auto auto minmax(0, 1fr) auto auto; }

/* Header: title, counts, ACCEPT ALL STRONG, close. */
#pairingOverview .sm-head {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  min-height: var(--sm-head-h);
  padding: 0;
}

#pairingOverview .sm-head .pairing-overview-title {
  flex: none;
  margin: 0;
  font-family: var(--font-head);
  font-size: 1.15rem;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

#pairingOverview .sm-head .pairing-overview-stats {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  flex-wrap: nowrap;
  gap: 0.35rem;
}

#pairingOverview .sm-head .pairing-stat {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0.05rem 0.55rem;
  font-size: 0.7rem;
  letter-spacing: var(--track-caps);
}

#pairingOverview .sm-head .pairing-overview-close {
  position: static;
  flex: none;
  translate: none;
  width: var(--sm-btn-h);
  min-width: var(--sm-btn-h);
  height: var(--sm-btn-h);
  min-height: var(--sm-btn-h);
  margin-left: auto;
}

#pairingOverview .sm-head .sm-accept-strong {
  flex: none;
  min-height: 30px;
  height: 30px;
  padding: 0 11px;
  margin-left: auto;
  font-size: 0.74rem;
  white-space: nowrap;
}

#pairingOverview .sm-head .sm-accept-strong + .pairing-overview-close { margin-left: 0; }

#pairingOverview .sm-card > .pairing-overview-banner {
  margin: 0;
  padding: 4px 10px;
  font-size: 0.7rem;
  letter-spacing: var(--track-caps);
}

/* Stage: two panels, each with its tile strip. The drawing area takes the page
   proportions, so the page fills the panel with no bands above or below it. */
#pairingOverview .sm-stage {
  container-type: size;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sm-gap);
  min-width: 0;
  min-height: 0;
  height: 100%;
}

#pairingOverview .sm-col {
  display: grid;
  grid-template-rows: minmax(0, max-content) auto;
  align-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 0;
  --sm-side: var(--accent-strong);
  --sm-side-rgb: var(--accent-rgb);
  --sm-side-wash-rgb: var(--accent-wash-rgb);
}

#pairingOverview .sm-col.is-supplied {
  --sm-side: var(--complete-strong);
  --sm-side-rgb: var(--complete-rgb);
  --sm-side-wash-rgb: var(--complete-wash-rgb);
}

#pairingOverview .sm-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  justify-self: center;
  width: min(100%, var(--sm-panel-w, 100%));
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--surface-muted);
  border: 1px solid rgb(var(--sm-side-rgb) / 0.68);
  border-radius: var(--panel-radius);
}

/* Header: the review page's drawing pane header (Jon 16 Oct). YOUR / SUPPLIED in the side
   colour with a soft "drawing", the file name under it, the buttons on the right. */
#pairingOverview .sm-panel-head {
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  min-height: var(--sm-panel-head-h);
  min-width: 0;
  padding: 10px 16px;
  background: rgb(var(--sm-side-wash-rgb) / 0.14);
  border-bottom: 1px solid rgb(var(--sm-side-wash-rgb) / 0.32);
}

#pairingOverview .sm-panel-titles {
  display: grid;
  flex: 1 1 0;
  row-gap: 2px;
  min-width: 0;
}

#pairingOverview .sm-panel-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: var(--track-caps);
  color: var(--sm-side);
}

#pairingOverview .sm-panel-label .pane-ref-soft {
  font-weight: 600;
  color: var(--text-muted);
}

#pairingOverview .sm-panel-page {
  margin-left: 6px;
  font-weight: 700;
  color: var(--text-strong);
}

#pairingOverview .sm-panel-file {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: var(--track-caps);
  color: var(--text-muted);
}

#pairingOverview .sm-panel-tools {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

#pairingOverview .sm-panel-tools .pairing-page-arrow-controls,
#pairingOverview .sm-panel-tools .pairing-page-inline-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

#pairingOverview .sm-panel-tools .sheet-page-button,
#pairingOverview .sm-panel-tools .rotate-sheet-button,
#pairingOverview .sm-panel-tools .pairing-page-rotate-spacer {
  position: relative;
  box-sizing: border-box;
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border-radius: 8px;
}

#pairingOverview .sm-panel-tools .pairing-page-rotate-spacer { visibility: hidden; }

#pairingOverview .sm-panel-tools .sheet-page-button::after,
#pairingOverview .sm-panel-tools .rotate-sheet-button::after {
  content: "";
  position: absolute;
  inset: -9px -2px;
}

#pairingOverview .sm-col.is-your .sheet-page-button,
#pairingOverview .sm-col.is-your .sm-panel-tools .rotate-sheet-button {
  color: var(--on-colour-button);
  background: var(--accent-action-gradient);
  border-color: rgb(var(--accent-border-rgb) / 0.55);
}

#pairingOverview .sm-col.is-supplied .sheet-page-button,
#pairingOverview .sm-col.is-supplied .sm-panel-tools .rotate-sheet-button {
  color: var(--on-colour-button);
  background: var(--complete-action-gradient);
  border-color: rgb(var(--complete-rgb) / 0.62);
}

#pairingOverview .sm-panel-tools .sheet-page-button:disabled { opacity: 0.45; }

/* The drawing area. The whole page shows at full height and the panel hugs its width
   (Jon 15 Oct), so there is no empty band beside the page. */
#pairingOverview .sm-area {
  --sm-aspect: var(--sheet-aspect, 1.4142);
  grid-area: auto;
  position: relative;
  container-type: size;
  display: block;
  width: 100%;
  height: calc((50cqw - var(--sm-gap) / 2 - 2px) / var(--sm-aspect));
  max-height: 100%;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: var(--paper);
  border: 0;
  border-radius: 0;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

#pairingOverview .sm-area.is-panning { cursor: grabbing; }

#pairingOverview .sm-canvas {
  --sm-iw: min(100cqw, calc(100cqh * var(--sm-aspect)));
  position: absolute;
  inset: auto;
  top: calc((100cqh - var(--sm-iw) / var(--sm-aspect)) / 2);
  left: calc((100cqw - var(--sm-iw)) / 2);
  box-sizing: border-box;
  width: var(--sm-iw);
  height: calc(var(--sm-iw) / var(--sm-aspect));
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  will-change: transform;
}

#pairingOverview .sm-canvas > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: fill;
  pointer-events: none;
  -webkit-user-drag: none;
}

#pairingOverview .sm-canvas .pairing-detail-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 12px;
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: var(--track-caps);
  color: var(--text-muted);
}

/* Zoom pill (bottom left) and full screen (top right) sit on the page. */
#pairingOverview .sm-area .pairing-detail-zoom-control {
  position: absolute;
  left: 6px;
  bottom: 6px;
  z-index: 3;
  margin: 0;
  opacity: 0;
  transition: opacity 150ms ease;
}

#pairingOverview .sm-area:hover .pairing-detail-zoom-control,
#pairingOverview .sm-area .pairing-detail-zoom-control:focus-within,
#pairingOverview .sm-area.is-zoomed .pairing-detail-zoom-control { opacity: 1; }

#pairingOverview .sm-area .review-zoom-value { font-family: var(--font-mono); }

#pairingOverview .sm-col.is-your .review-zoom-button:not(.review-zoom-reset) {
  color: var(--on-colour-button);
  background: var(--accent-action-gradient);
  border-color: rgb(var(--accent-border-rgb) / 0.82);
}

#pairingOverview .sm-col.is-supplied .review-zoom-button:not(.review-zoom-reset) {
  color: var(--on-colour-button);
  background: var(--complete-action-gradient);
  border-color: rgb(var(--complete-border-rgb) / 0.82);
}

#pairingOverview .sm-col.is-your .review-zoom-reset { color: var(--accent-strong); }
#pairingOverview .sm-col.is-supplied .review-zoom-reset { color: var(--complete-strong); }
#pairingOverview .sm-area .review-zoom-button:disabled { opacity: 0.4; }

#pairingOverview .sm-area .pairing-detail-zoom-control {
  gap: 2px;
  padding: 2px;
  min-height: 0;
}

#pairingOverview .sm-area .review-zoom-button {
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  font-size: 0.95rem;
}

#pairingOverview .sm-area .review-zoom-value { min-width: 38px; font-size: 0.68rem; }

#pairingOverview .sm-area .pairing-detail-expand {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;
  margin: 0;
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
}

/* Page tile strips. */
#pairingOverview .sm-strip {
  box-sizing: border-box;
  display: flex;
  gap: 7px;
  height: var(--sm-strip-h);
  min-width: 0;
  padding: 6px 6px 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--sm-side-rgb) / 0.7) transparent;
  background: rgb(var(--surface-rgb) / 0.72);
  border: 1px solid var(--border);
  border-radius: var(--panel-radius);
}

#pairingOverview .sm-strip::-webkit-scrollbar { height: 7px; }
#pairingOverview .sm-strip::-webkit-scrollbar-thumb { background: rgb(var(--sm-side-rgb) / 0.7); border-radius: 999px; }

#pairingOverview .sm-tile-wrap {
  --sm-pair: var(--sm-c0);
  flex: none;
  position: relative;
  height: 100%;
  transition: opacity 120ms ease;
}

#pairingOverview .sm-c0 { --sm-pair: var(--sm-c0); }
#pairingOverview .sm-c1 { --sm-pair: var(--sm-c1); }
#pairingOverview .sm-c2 { --sm-pair: var(--sm-c2); }
#pairingOverview .sm-c3 { --sm-pair: var(--sm-c3); }
#pairingOverview .sm-c4 { --sm-pair: var(--sm-c4); }
#pairingOverview .sm-c5 { --sm-pair: var(--sm-c5); }

/* Jon 14 Oct: state colours. Matched green, suggested (not sure) yellow, no match red. */
#pairingOverview .sm-tile-wrap.is-matched,
#pairingOverview .sm-badge:not(.is-suggested):not(.is-more) { --sm-pair: var(--success); }
#pairingOverview .sm-tile-wrap.is-suggested,
#pairingOverview .sm-badge.is-suggested { --sm-pair: var(--warning); }
#pairingOverview .sm-tile-wrap.is-nomatch { --sm-pair: var(--danger); }

#pairingOverview .sm-tile {
  position: relative;
  box-sizing: border-box;
  display: block;
  height: 100%;
  aspect-ratio: 1.4142;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  color: var(--on-colour-button);
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 8px;
}

#pairingOverview .sm-tile img,
#pairingOverview .sm-tile .sm-tile-blank {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

#pairingOverview .sm-tile img.pairing-preview-rotate-180 { transform: rotate(180deg); }

#pairingOverview .sm-tile .sm-tile-blank {
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--surface-muted);
}

#pairingOverview .sm-tile:hover { border-color: rgb(var(--text-muted-rgb) / 0.8); }
#pairingOverview .sm-tile-wrap.is-matched .sm-tile { border: 2px solid var(--sm-pair); }
#pairingOverview .sm-tile-wrap.is-suggested .sm-tile { border: 2px dashed var(--sm-pair); }
#pairingOverview .sm-tile-wrap.is-nomatch .sm-tile { border: 2px solid var(--sm-pair); }
#pairingOverview .sm-tile-wrap.is-open img,
#pairingOverview .sm-tile-wrap.is-nomatch img,
#pairingOverview .sm-tile-wrap.is-ignored img,
#pairingOverview .sm-tile-wrap.is-unused img { opacity: 0.45; }
#pairingOverview .sm-tile-wrap.is-unused .sm-tile { border-style: dashed; }
#pairingOverview .sm-tile-wrap.is-selected .sm-tile { box-shadow: 0 0 0 1px var(--bg-strong), 0 0 0 3px var(--sm-side); }
#pairingOverview .sm-tile:focus-visible { outline: 2px solid var(--text-strong); outline-offset: 2px; }

#pairingOverview.is-hovering .sm-tile-wrap:not(.is-partner) { opacity: 0.3; }
#pairingOverview .sm-tile-wrap.is-partner .sm-tile { box-shadow: 0 0 0 1px var(--bg-strong), 0 0 0 3px var(--sm-pair); }

#pairingOverview .sm-cap {
  position: absolute;
  inset: auto 0 0;
  padding: 9px 5px 2px;
  font-size: 0.62rem;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--on-colour-button);
  background: linear-gradient(transparent, rgb(var(--bg-strong-rgb) / 0.9));
}

#pairingOverview .sm-cap b { font-weight: 800; letter-spacing: 0.06em; }

#pairingOverview .sm-badge {
  position: absolute;
  top: 3px;
  left: 3px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
  min-width: 19px;
  height: 19px;
  padding: 0 6px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--on-colour-button);
  background: var(--sm-pair);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: default;
}

#pairingOverview .sm-badge.is-suggested {
  color: var(--sm-pair);
  background: rgb(var(--bg-strong-rgb) / 0.88);
  border: 1px dashed var(--sm-pair);
}

/* Near-tie (S1 OR S2): tighter so it fits the smallest tile. */
#pairingOverview .sm-tile .sm-badge.is-tie {
  max-width: calc(100% - 6px);
  padding: 0 4px;
  font-size: 0.6rem;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

#pairingOverview .sm-badge.is-suggested em { font-style: normal; font-weight: 700; color: var(--text-strong); }

#pairingOverview .sm-oa-sides .oa-dim-val-main,
#pairingOverview .sm-oa-sides .oa-dim-side {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A size that was not found asks to be picked: dashed outline, target, PICK. */
#pairingOverview .oa-dim-val-main.is-missing {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 8px;
  font-weight: 700;
  color: var(--on-colour-button);
  background: var(--accent);
  border: 1px solid transparent;
  border-radius: 6px;
}

#pairingOverview .oa-dim-val-supplied .oa-dim-val-main.is-missing { background: var(--complete); }

#pairingOverview .oa-dim-pick:hover:not(:disabled) .oa-dim-val-main.is-missing,
#pairingOverview .oa-dim-pick.is-picking .oa-dim-val-main.is-missing { filter: brightness(1.12); box-shadow: 0 0 0 2px rgb(var(--accent-rgb) / 0.35); }

#pairingOverview .oa-dim-pick-target { flex: none; width: 13px; height: 13px; }

#pairingOverview .oa-dim-side.is-missing { color: var(--warning); }

/* Review page: a size that was not found asks to be picked. */
.oa-card-glance-missing { font-weight: 700; color: var(--warning); }

/* Same two columns as the YOURS / SUPPLIED line above it, so each PICK sits under its NOT FOUND. */
.oa-pick-prompt {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--panel-gap, 8px);
  /* Skip the card head's 14px chevron column so the columns match the line above. */
  margin: 4px 0 0 calc(14px + var(--panel-gap, 8px));
}

.oa-pick-cell { display: flex; min-width: 0; }

.oa-pick-prompt-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--on-colour-button);
  background: var(--accent);
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
}

.oa-pick-prompt-button.is-manufacturer { background: var(--complete); }

.oa-pick-prompt-button:hover,
.oa-pick-prompt-button.is-picking,
.oa-pick-prompt-button[aria-pressed="true"] { filter: brightness(1.12); box-shadow: 0 0 0 2px rgb(var(--accent-rgb) / 0.35); }

.oa-pick-prompt .oa-pick-target { flex: none; width: 12px; height: 12px; }

#pairingOverview .sm-badge.is-more {
  left: auto;
  right: 3px;
  color: var(--text-strong);
  background: rgb(var(--bg-strong-rgb) / 0.88);
  border: 1px solid var(--border);
}

#pairingOverview .sm-panel-head .sm-badge { position: static; flex: none; }

#pairingOverview .sm-chip {
  position: absolute;
  top: 3px;
  left: 3px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 17px;
  padding: 0 6px;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--text-muted);
  background: rgb(var(--bg-strong-rgb) / 0.86);
  border: 1px solid var(--border);
  border-radius: 999px;
}

#pairingOverview .sm-chip.is-nomatch {
  max-width: calc(100% - 6px);
  padding: 0 4px;
  letter-spacing: 0;
  color: var(--on-colour-button);
  background: var(--danger);
  border-color: transparent;
}

#pairingOverview .sm-chip.is-unused {
  color: var(--complete-strong);
  border: 1px dashed rgb(var(--complete-border-rgb) / 0.8);
}

/* Overall size: the existing controls, kept to a single slim row. */
#pairingOverview .sm-oa { min-width: 0; }

#pairingOverview .sm-oa .pairing-detail-dimension-controls {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(9rem, 22%) minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  width: 100%;
  min-height: 38px;
  padding: 2px 10px;
  background: rgb(var(--surface-rgb) / 0.72);
  border: 1px solid var(--border);
  border-radius: var(--panel-radius);
}

#pairingOverview .sm-oa .oa-dim-panel {
  display: contents;
}

#pairingOverview .sm-oa .pairing-oa-dim-head {
  grid-column: 1;
  grid-row: 1;
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0;
  font-size: 0.72rem;
  line-height: 1.15;
  letter-spacing: 0.08em;
}

#pairingOverview .sm-oa .pairing-oa-dim-head > span { display: grid; gap: 1px; }
#pairingOverview .sm-oa .pairing-oa-dim-head > span > span { font-size: 0.62rem; font-weight: 600; letter-spacing: var(--track-caps); color: var(--text-muted); }

#pairingOverview .sm-oa .pairing-auto-dimension-rows {
  grid-column: 2;
  grid-row: 1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 12px;
  min-width: 0;
}

#pairingOverview .sm-oa .pairing-auto-dimension-row {
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: none;
  align-items: center;
  column-gap: 4px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
}

#pairingOverview .sm-oa .pairing-auto-dimension-row .oa-dim-axis,
#pairingOverview .sm-oa .pairing-auto-dimension-row .oa-dim-val:nth-child(2),
#pairingOverview .sm-oa .pairing-auto-dimension-row .oa-dim-val:nth-child(3) { grid-area: auto; }

#pairingOverview .sm-oa .pairing-auto-dimension-row .oa-dim-axis {
  width: auto;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

#pairingOverview .sm-oa .pairing-auto-dimension-row .oa-dim-pick {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  min-width: 0;
  min-height: 34px;
  padding: 1px 4px;
  overflow: hidden;
  font-size: 0.74rem;
  line-height: 1.15;
}

#pairingOverview .sm-oa .pairing-auto-dimension-row .oa-dim-side {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.58rem;
  letter-spacing: var(--track-caps);
}

#pairingOverview .sm-oa .oa-dim-edit-mark { width: 0.95rem; height: 0.95rem; margin-left: 0.2rem; }

#pairingOverview .sm-oa .pairing-dimension-chips,
#pairingOverview .sm-oa .pairing-dimension-actions {
  grid-column: 1 / -1;
  padding: 2px 0;
}

#pairingOverview .sm-oa .pairing-dimension-actions button { width: auto; height: 28px; padding: 0 10px; font-size: 0.7rem; }

#pairingOverview .sm-oa .pairing-pick-hint {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: var(--track-caps);
  white-space: normal;
  color: var(--accent-strong);
}

#pairingOverview .sm-oa .pairing-pick-hint:empty { display: none; }
#pairingOverview .sm-oa .pairing-detail-dimension-controls:has(.pairing-pick-hint:not(:empty)) .pairing-oa-dim-head { display: none; }

/* Jon 15 Oct: one two-row table. YOUR SIZE and SUPPLIED SIZE are rows, each axis is a column;
   every cell holds its note (FROM P1, NOT FOUND) on the left and the value or pick button on the right. */
#pairingOverview .sm-oa .pairing-detail-dimension-controls.sm-oa-table {
  grid-template-columns: 8.5rem repeat(var(--sm-oa-axes, 3), minmax(0, 1fr));
  align-items: stretch;
  column-gap: 0;
  row-gap: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: rgb(var(--surface-rgb) / 0.72);
  border: 1px solid var(--border);
  border-radius: var(--panel-radius);
}
#pairingOverview .sm-oa .sm-oa-table .sm-oa-thead,
#pairingOverview .sm-oa .sm-oa-table .sm-oa-side,
#pairingOverview .sm-oa .sm-oa-table .pairing-auto-dimension-rows { display: contents; }
#pairingOverview .sm-oa .sm-oa-table .sm-oa-th {
  display: flex;
  align-items: center;
  min-width: 0;
  height: 22px;
  padding: 0 12px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  background: var(--surface-raised);
}
#pairingOverview .sm-oa .sm-oa-table .sm-oa-th + .sm-oa-th { border-left: 1px solid var(--border); }
#pairingOverview .sm-oa .sm-oa-table .sm-oa-th.axis-height { color: var(--oa-height-marker); }
#pairingOverview .sm-oa .sm-oa-table .sm-oa-th.axis-width { color: var(--oa-width-marker); }
#pairingOverview .sm-oa .sm-oa-table .sm-oa-th.axis-depth { color: var(--oa-depth-marker); }
#pairingOverview .sm-oa .sm-oa-table .sm-oa-th.axis-diameter { color: var(--oa-diameter-marker); }
#pairingOverview .sm-oa .sm-oa-table .pairing-oa-dim-head {
  grid-column: 1;
  grid-row: auto;
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  white-space: nowrap;
  border-top: 1px solid var(--border);
}
#pairingOverview .sm-oa .sm-oa-table .sm-oa-side.is-yours .pairing-oa-dim-head > span { color: var(--accent-strong); }
#pairingOverview .sm-oa .sm-oa-table .sm-oa-side.is-supplied .pairing-oa-dim-head > span { color: var(--complete-strong); }
#pairingOverview .sm-oa .sm-oa-table .oa-dim-row.pairing-auto-dimension-row {
  display: flex;
  align-items: center;
  min-width: 0;
  height: 32px;
  padding: 0 12px;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}
/* While picking, the whole cell lights up rather than a box inside it. */
#pairingOverview .sm-oa .sm-oa-table .pairing-auto-dimension-row .oa-dim-pick.is-picking { background: none; box-shadow: none; }
#pairingOverview .sm-oa .sm-oa-table .oa-dim-row:has(.oa-dim-val-yours.is-picking) { background: rgb(var(--accent-wash-rgb) / 0.22); box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / 0.55); }
#pairingOverview .sm-oa .sm-oa-table .oa-dim-row:has(.oa-dim-val-supplied.is-picking) { background: rgb(var(--complete-wash-rgb) / 0.22); box-shadow: inset 0 0 0 1px rgb(var(--complete-rgb) / 0.55); }
/* The column head names the axis, so the cell does not repeat it. */
#pairingOverview .sm-oa .sm-oa-table .pairing-auto-dimension-row .oa-dim-axis { display: none; }
#pairingOverview .sm-oa .sm-oa-table .pairing-auto-dimension-row .oa-dim-pick {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 0;
  height: 100%;
  padding: 0;
  font-size: 0.82rem;
}
#pairingOverview .sm-oa .sm-oa-table .oa-dim-row .oa-dim-side {
  flex: 0 1 auto;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
#pairingOverview .sm-oa .sm-oa-table .oa-dim-row .oa-dim-side.is-missing { color: var(--warning); }
#pairingOverview .sm-oa .sm-oa-table .oa-dim-val-main {
  flex: none;
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
}
#pairingOverview .sm-oa .sm-oa-table .oa-dim-val-main.is-missing {
  justify-content: center;
  gap: 5px;
  min-width: 0;
  height: 22px;
  padding: 0 8px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--on-colour-button);
}
#pairingOverview .sm-oa .sm-oa-table .pairing-dimension-chips,
#pairingOverview .sm-oa .sm-oa-table .pairing-dimension-actions,
#pairingOverview .sm-oa .sm-oa-table .pairing-pick-hint {
  grid-column: 1 / -1;
  grid-row: auto;
  padding: 4px 12px;
  border-top: 1px solid var(--border);
}
#pairingOverview .sm-oa .sm-oa-table .pairing-pick-hint:empty { display: none; }
#pairingOverview .sm-oa .sm-oa-table:has(.pairing-pick-hint:not(:empty)) .pairing-oa-dim-head { display: flex; }

@media (max-width: 760px) {
  #pairingOverview .sm-oa .pairing-detail-dimension-controls { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  #pairingOverview .sm-oa .pairing-oa-dim-head,
  #pairingOverview .sm-oa .pairing-pick-hint { grid-column: 1; grid-row: auto; }
  #pairingOverview .sm-oa .pairing-auto-dimension-rows { grid-column: 1; grid-row: auto; grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  #pairingOverview .sm-oa .pairing-detail-dimension-controls.sm-oa-table { grid-template-columns: 5.5rem repeat(var(--sm-oa-axes, 3), minmax(0, 1fr)); }
  #pairingOverview .sm-oa .sm-oa-table .oa-dim-val-main.is-missing { min-width: 0; }
  #pairingOverview .sm-oa .sm-oa-table .oa-dim-row.pairing-auto-dimension-row,
  #pairingOverview .sm-oa .sm-oa-table .pairing-oa-dim-head { height: auto; min-height: 40px; padding: 4px 8px; }
  #pairingOverview .sm-oa .sm-oa-table .pairing-auto-dimension-row .oa-dim-pick { flex-direction: column; align-items: flex-end; justify-content: center; gap: 2px; }
}

/* Decision bar. */
#pairingOverview .sm-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}

#pairingOverview .sm-say {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 8px;
  row-gap: 2px;
  align-items: center;
  min-width: 0;
}

#pairingOverview .sm-say > :not(.sm-picks) { grid-column: 1; }

/* Near-tie: one tap picks which supplied page matches. */
#pairingOverview .sm-picks {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  gap: 6px;
}

#pairingOverview .sm-pick {
  min-width: 3rem;
  min-height: 30px;
  padding: 0 10px;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text-strong);
  border: 1px dashed var(--warning);
}

#pairingOverview .sm-pick:hover:not(:disabled) { background: rgb(var(--bg-strong-rgb) / 0.88); border-style: solid; }

/* The card hugs the pages, so the prompt wraps instead of being cut off. */
#pairingOverview .sm-message {
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: var(--track-caps);
  color: var(--text-strong);
}

#pairingOverview .sm-say .pairing-blocked-note {
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: var(--track-caps);
  color: var(--text-muted);
}

#pairingOverview .sm-decisions {
  display: flex;
  align-items: center;
  gap: 8px;
}

#pairingOverview .sm-decisions .sm-decide,
#pairingOverview .sm-foot .sm-continue {
  box-sizing: border-box;
  min-height: var(--sm-btn-h);
  height: var(--sm-btn-h);
  margin: 0;
  padding: 0 14px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: var(--on-colour-button);
}

#pairingOverview .sm-decisions .sm-decide { min-width: 96px; }
#pairingOverview .sm-foot .sm-continue:disabled { color: var(--on-colour-button); }

#pairingOverview .sm-card .primary-button:focus-visible,
#pairingOverview .sm-card .ghost-button:focus-visible,
#pairingOverview .sm-card .icon-button:focus-visible { outline: 2px solid var(--text-strong); outline-offset: 2px; }

/* Check-needed popup: same surface as the Sheet Manager card, no extra backdrop. */
#pairingOverview .pairing-alert {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: 16px;
  background: none;
  pointer-events: auto;
  text-transform: uppercase;
}

#pairingOverview .pairing-alert-card {
  box-sizing: border-box;
  display: grid;
  gap: 16px;
  width: min(35rem, calc(100vw - 32px));
  max-height: calc(100% - 8px);
  padding: 16px;
  overflow: auto;
  background: rgb(var(--surface-rgb) / 0.72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: var(--panel-radius);
  box-shadow: none;
}

#pairingOverview .pairing-alert-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

#pairingOverview .pairing-alert-head h2 {
  min-width: 0;
  margin: 0;
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: 0.08em;
  color: var(--text);
}

#pairingOverview .pairing-alert-score {
  flex: 0 0 auto;
  padding: 0.05rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: var(--track-caps);
  white-space: nowrap;
  border-radius: 999px;
}

#pairingOverview .pairing-alert-score.is-ok { color: var(--success); background: rgb(var(--success-rgb) / 0.14); }
#pairingOverview .pairing-alert-score.is-warn { color: var(--warning); background: rgb(var(--warning-rgb) / 0.16); }
#pairingOverview .pairing-alert-score.is-bad { color: var(--danger); background: rgb(var(--danger-rgb) / 0.16); }

#pairingOverview .pairing-alert-body { display: grid; gap: 16px; }

#pairingOverview .pairing-alert-thumbs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

#pairingOverview .pairing-alert-cell {
  display: grid;
  justify-items: stretch;
  gap: 6px;
  min-width: 0;
}

#pairingOverview .pairing-alert-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--accent-strong);
}

#pairingOverview .pairing-alert-cell.is-supplied .pairing-alert-label { color: var(--complete-strong); }

#pairingOverview .pairing-alert-cell .pairing-thumb {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1.414;
  overflow: hidden;
  background: var(--paper);
  border-radius: 8px;
}

#pairingOverview .pairing-alert-cell.is-your .pairing-thumb { outline: 2px solid var(--accent-strong); outline-offset: 0; }
#pairingOverview .pairing-alert-cell.is-supplied .pairing-thumb { outline: 2px solid var(--complete-strong); outline-offset: 0; }

#pairingOverview .pairing-alert-cell .pairing-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#pairingOverview .pairing-alert-cell .pairing-alert-none {
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--surface-muted);
}

#pairingOverview .pairing-alert-caption {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 700;
}

#pairingOverview .pairing-alert-caption .is-your { color: var(--accent-strong); }
#pairingOverview .pairing-alert-caption .is-supplied { color: var(--complete-strong); }
#pairingOverview .pairing-alert-caption [aria-hidden] { color: var(--text-muted); }

#pairingOverview .pairing-alert-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

#pairingOverview .pairing-alert-actions button {
  min-width: 0;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0 var(--space-4);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

#pairingOverview .pairing-alert-actions .pairing-alert-check { color: var(--on-colour-button); }
#pairingOverview .pairing-alert-actions button:focus { outline: none; }
#pairingOverview .pairing-alert-actions button:focus-visible {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent-strong);
}

/* Narrow screens: the two panels stack and the card scrolls. */
@media (max-width: 760px) {
  #pairingOverview.pairing-overview:has(.sm-card) { padding: 0; }

  #pairingOverview .sm-card {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 0;
    grid-template-rows: none;
    grid-auto-rows: auto;
  }

  #pairingOverview .sm-head { flex-wrap: wrap; row-gap: 6px; }
  #pairingOverview .sm-head .pairing-overview-stats { order: 3; flex-basis: 100%; flex-wrap: wrap; }
  #pairingOverview .sm-head .sm-accept-strong { margin-left: 0; }

  #pairingOverview .sm-stage {
    container-type: normal;
    grid-template-columns: minmax(0, 1fr);
    height: auto;
  }

  #pairingOverview .sm-area {
    height: auto;
    aspect-ratio: var(--sm-aspect);
    max-height: none;
  }

  #pairingOverview .sm-panel-file { display: none; }

  #pairingOverview .sm-foot {
    grid-template-columns: minmax(0, 1fr);
    position: sticky;
    bottom: 0;
    padding-top: 6px;
    background: rgb(var(--surface-rgb) / 0.96);
  }

  #pairingOverview .sm-say .sm-message { white-space: normal; }
  #pairingOverview .sm-decisions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #pairingOverview .sm-decisions .sm-decide { min-width: 0; padding: 0 6px; font-size: 0.7rem; }
  #pairingOverview .pairing-alert-card { width: calc(100vw - 32px); }
  #pairingOverview .pairing-alert-head h2 { font-size: 1rem; }
}

@media (max-width: 900px) {
  #pairingOverview .sm-panel-head > .sm-badge { display: none; }
}

@media (max-width: 1400px) {
  #pairingOverview .sm-decisions .sm-decide,
  #pairingOverview .sm-foot .sm-continue { padding: 0 11px; letter-spacing: 0.04em; }
}

@media (max-height: 640px) {
  #pairingOverview.pairing-overview:has(.sm-card) { padding: 6px; }
  #pairingOverview .sm-card { padding-block: 6px; gap: 5px; }
  #pairingOverview { --sm-btn-h: 32px; }
}

/* Sheet Manager motion. Functional only, 120-200 ms, opacity and transform.
   No colour, size or layout change. Reduced motion turns all of it off below. */
@media (prefers-reduced-motion: no-preference) {
  /* Manager open: fade and 8 px rise. Close: fade. 160 ms. */
  .pairing-overview.panel-flyout.panel-flyout-static {
    transition: opacity 160ms ease-out, transform 160ms ease-out, visibility 160ms linear;
  }
  .pairing-overview.panel-flyout.panel-flyout-static.is-flyout-opening { transform: translateY(8px) !important; }

  /* Check-needed popup: backdrop fade, card fade and scale 0.98 to 1. 140 ms. */
  #pairingOverview .pairing-alert.is-entering { animation: pairingAlertBackdropIn 140ms ease-out; }
  #pairingOverview .pairing-alert.is-entering .pairing-alert-card { animation: pairingAlertIn 140ms ease-out; }
  @keyframes pairingAlertBackdropIn { from { opacity: 0; } }
  @keyframes pairingAlertIn { from { opacity: 0; transform: scale(0.98); } }

  /* Choosing a page: the drawings fade in, the selected tile settles. 150 ms. */
  #pairingOverview .sm-canvas.is-anim-swap > img { animation: pairingStageSwap 150ms ease-out; }
  #pairingOverview .sm-tile-wrap.is-anim-select .sm-tile { animation: pairingTileSelect 150ms ease-out; }
  @keyframes pairingStageSwap { from { opacity: 0; } }
  @keyframes pairingTileSelect { from { transform: scale(0.97); } }

  /* Status change: one subtle opacity pulse. 150 ms. */
  #pairingOverview .sm-tile-wrap.is-anim-status .sm-tile { animation: pairingTileStatus 150ms ease-out; }
  @keyframes pairingTileStatus { from { opacity: 0.6; } }
}

@media (prefers-reduced-motion: reduce) {
  .pairing-overview.panel-flyout.panel-flyout-static { transition: none !important; }
  #pairingOverview .pairing-alert,
  #pairingOverview .pairing-alert-card,
  #pairingOverview .sm-canvas > img,
  #pairingOverview .sm-tile-wrap .sm-tile { animation: none !important; }
  #pairingOverview .sm-tile,
  #pairingOverview .sm-tile-wrap,
  #pairingOverview .sm-area .pairing-detail-zoom-control { transition: none; }
}

html[data-reduce-motion="true"] .pairing-overview.panel-flyout.panel-flyout-static { transition: none !important; }
html[data-reduce-motion="true"] #pairingOverview .pairing-alert,
html[data-reduce-motion="true"] #pairingOverview .pairing-alert-card,
html[data-reduce-motion="true"] #pairingOverview .sm-canvas > img,
html[data-reduce-motion="true"] #pairingOverview .sm-tile-wrap .sm-tile { animation: none !important; }
html[data-reduce-motion="true"] #pairingOverview .sm-tile,
html[data-reduce-motion="true"] #pairingOverview .sm-tile-wrap,
html[data-reduce-motion="true"] #pairingOverview .sm-area .pairing-detail-zoom-control { transition: none; }

/* Review error menu (TASK-81). A dimmed scrim over the frozen analysis
   screen, with one centred card: eyebrow, title, reason, then a menu of
   rows (role=menu). Phone (<=480px): a bottom sheet. Tokens only; the
   row hover and the icon tile reuse the sidebar action menu look. */
.review-error-scrim {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-columns: minmax(0, 26rem);
  place-items: center;
  place-content: center;
  padding: var(--space-4);
  background: rgb(var(--bg-strong-rgb) / 0.78);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 140ms ease-out;
}
.review-error-scrim.is-visible { opacity: 1; }
.review-error-scrim[hidden],
.review-error-row[hidden],
.review-error-row-default[hidden] { display: none !important; }

.review-error-card {
  width: 100%;
  max-width: 26rem;
  box-sizing: border-box;
  padding: var(--space-5);
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-panel);
  transform: translateY(8px) scale(0.98);
  opacity: 0;
  transition: transform 140ms ease-out, opacity 140ms ease-out;
}
.review-error-scrim.is-visible .review-error-card { transform: none; opacity: 1; }

.review-error-eyebrow {
  margin: 0 0 var(--space-1);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.review-error-title {
  margin: 0;
  color: var(--text-strong);
  font-family: var(--font-ui);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
}
.review-error-reason {
  margin: var(--space-2) 0 0;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.review-error-menu {
  display: grid;
  gap: 6px;
  margin-top: var(--space-4);
}

.review-error-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: var(--space-2) var(--space-3);
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: var(--radius-md);
  font: inherit;
  text-align: left;
  white-space: normal;
  cursor: pointer;
  transition: background-color 120ms ease-out;
}
.review-error-row:hover,
.review-error-row[data-active="true"] {
  background: var(--surface-raised);
}
.review-error-row:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}
.review-error-row:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.review-error-row-icon {
  display: inline-grid;
  flex: 0 0 36px;
  place-items: center;
  width: 36px;
  height: 36px;
  color: var(--text);
  background: var(--surface-muted);
  border-radius: 10px;
}
.review-error-row[data-default] .review-error-row-icon {
  color: var(--accent-text);
  background: rgb(var(--accent-rgb) / 16%);
}
.review-error-row-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.review-error-row-text {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
  gap: 2px;
}
.review-error-row-label {
  color: var(--text-strong);
  font-weight: 700;
  font-size: 0.95rem;
}
.review-error-row-hint {
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.review-error-row-default {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 2px 8px;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  border-radius: 999px;
}

@media (max-width: 480px) {
  .review-error-scrim {
    grid-template-columns: minmax(0, 1fr);
    place-items: end stretch;
    place-content: end stretch;
    padding: 0;
  }
  .review-error-card {
    max-width: none;
    border-radius: 16px 16px 0 0;
    border-bottom: 0;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
  }
  .review-error-scrim.is-visible .review-error-card { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .review-error-scrim,
  .review-error-card,
  .review-error-row {
    transition: none;
    transform: none !important;
  }
}

/* Honour the app's own Reduce motion setting (html[data-reduce-motion="true"])
   as well as the OS prefers-reduced-motion query, for the review error menu. */
html[data-reduce-motion="true"] .review-error-scrim,
html[data-reduce-motion="true"] .review-error-card,
html[data-reduce-motion="true"] .review-error-row {
  transition: none !important;
  transform: none !important;
}

/* TASK-91: Help and Feedback drawers use the same panel language as the rest
   of the app. Status messages are filled banners with white ink. */
.feedback-form .settings-status#feedbackStatus {
  display: block;
  min-height: 0;
  padding: 0;
  border-radius: var(--panel-radius);
}

.feedback-form .settings-status#feedbackStatus:not(:empty) {
  padding: var(--space-3) var(--space-4);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  color: var(--text);
}

.feedback-form .settings-status#feedbackStatus.is-saved:not(:empty) {
  background: var(--success-on-paper);
  border-color: var(--success-on-paper);
  color: #ffffff;
}

.feedback-form .settings-status#feedbackStatus.is-error:not(:empty) {
  background: var(--danger-on-paper);
  border-color: var(--danger-on-paper);
  color: #ffffff;
}

.feedback-form .settings-status#feedbackStatus.is-busy:not(:empty) {
  color: var(--text-muted);
}

.feedback-type {
  gap: var(--space-3);
  min-inline-size: 0;
}

.feedback-type legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: var(--space-1);
}

.feedback-type legend + * {
  clear: both;
}

.feedback-type label {
  grid-template-columns: 1.1rem minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  cursor: var(--cursor-pointer);
}

.feedback-type input[type="radio"] {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  accent-color: var(--accent);
}

.help-chat-message .help-chat-retry {
  margin-top: var(--space-2);
}

/* TASK-99: close O/A difference notice on the Drawing Details row (white ink on the amber fill). */
.oa-close-note {
  margin: 8px 0 0;
  padding: 7px 10px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--warning) 62%, #000);
  color: #fff;
  font: 600 12px/1.45 "IBM Plex Sans", sans-serif;
}

/* Feedback tracker (TASK-FB1): "Your feedback" in the Help Center, the Help
   badge, and the Tidy with AI helper. White ink on every coloured fill. */
.feedback-help-badge {
  display: inline-block;
  min-width: 1.15rem;
  margin-left: auto;
  padding: 0 0.35rem;
  border-radius: 0.6rem;
  background: var(--accent-button);
  color: var(--on-colour-button, #fff);
  font: 700 0.68rem/1.15rem var(--font-mono);
  text-align: center;
}

.feedback-help-badge[hidden] {
  display: none;
}

.feedback-help-badge > span[aria-hidden] {
  font: inherit;
}

.feedback-track[hidden] {
  display: none;
}

.feedback-track {
  display: grid;
  gap: var(--space-3);
}

.feedback-track-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-2);
}

.feedback-track-chips {
  display: flex;
  gap: var(--space-1);
}

.feedback-track-chip {
  height: 1.75rem;
  padding: 0 0.7rem;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 0.9rem;
  color: var(--text-muted);
  font: 500 0.75rem/1 var(--font-body);
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.feedback-track-chip[aria-pressed="true"] {
  background: var(--accent-button);
  border-color: var(--accent-button);
  color: var(--on-colour-button, #fff);
}

.feedback-track-count {
  margin-left: 0.25rem;
  font-family: var(--font-mono);
  opacity: 0.8;
}

.feedback-track-list {
  overflow: hidden;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.feedback-track-row + .feedback-track-row {
  border-top: 1px solid var(--border);
}

.feedback-track-main {
  display: grid;
  grid-template-columns: 0.6rem minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: start;
  width: 100%;
  padding: 0.65rem var(--space-3);
  background: none;
  border: 0;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.feedback-track-main:hover {
  background: rgb(var(--overlay-rgb) / 0.03);
}

.feedback-track-dot {
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.4rem;
  border-radius: 50%;
  background: transparent;
}

.feedback-track-row.is-unread .feedback-track-dot {
  background: var(--accent);
}

.feedback-track-row.is-unread .feedback-track-title {
  font-weight: 600;
}

.feedback-track-body {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.feedback-track-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-muted);
  font: 400 0.68rem/1.2 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.feedback-track-new {
  color: var(--accent);
}

.feedback-track-title {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.82rem;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.feedback-track-row.is-open .feedback-track-title {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

.feedback-track-bar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
  margin-top: 0.4rem;
}

.feedback-track-seg {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: var(--surface-card);
  transition: background-color 160ms ease;
}

.feedback-track-seg.is-on { background: var(--accent-button); }
.feedback-track-seg.is-live { background: var(--success); }
.feedback-track-seg.is-warn { background: var(--warning); }
.feedback-track-seg.is-stop { background: rgb(var(--text-muted-rgb) / 0.55); }
.feedback-track-seg.is-ask { background: var(--action-danger); }

.feedback-track-pill {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border-radius: 0.7rem;
  color: var(--on-colour-button, #fff);
  font: 600 0.68rem/1rem var(--font-body);
  white-space: nowrap;
}

.feedback-track-pill.is-sent,
.feedback-track-pill.is-no { background: rgb(var(--text-muted-rgb) / 0.4); }
.feedback-track-pill.is-seen { background: var(--accent-button); }
.feedback-track-pill.is-working { background: var(--complete-button); }
.feedback-track-pill.is-fix { background: var(--action-warning); }
.feedback-track-pill.is-live { background: var(--action-success); }
.feedback-track-pill.is-info { background: var(--action-danger); }

.feedback-track-detail {
  display: none;
  padding: 0.15rem var(--space-3) var(--space-3) 2rem;
}

.feedback-track-row.is-open .feedback-track-detail {
  display: block;
  animation: feedback-track-open 160ms ease-out;
}

@keyframes feedback-track-open {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

.feedback-track-timeline {
  margin: 0;
  padding: 0;
  list-style: none;
}

.feedback-track-timeline li {
  position: relative;
  padding: 0 0 0.75rem 1.4rem;
  font-size: 0.8rem;
}

.feedback-track-timeline li:last-child {
  padding-bottom: 0;
}

.feedback-track-timeline li::before {
  content: "";
  position: absolute;
  top: 0.95rem;
  bottom: -1px;
  left: 4px;
  width: 2px;
  background: var(--border);
}

.feedback-track-timeline li:last-child::before {
  display: none;
}

.feedback-track-timeline li.is-done::before {
  background: var(--accent);
}

.feedback-track-node {
  position: absolute;
  top: 0.25rem;
  left: 0;
  width: 10px;
  height: 10px;
  border: 2px solid var(--surface-card);
  border-radius: 50%;
  background: var(--surface-card);
  transition: background-color 160ms ease;
}

.feedback-track-timeline li.is-done .feedback-track-node {
  background: var(--accent);
  border-color: var(--accent);
}

.feedback-track-timeline li.is-current .feedback-track-node {
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.28);
}

.feedback-track-timeline li.is-live .feedback-track-node {
  background: var(--success);
  border-color: var(--success);
}

.feedback-track-timeline li.is-future {
  color: var(--text-muted);
  opacity: 0.7;
}

.feedback-track-when {
  margin-left: 0.4rem;
  color: var(--text-muted);
  font: 400 0.68rem/1.2 var(--font-mono);
}

.feedback-track-note {
  margin: 0.2rem 0 0;
  padding: 0.35rem 0.55rem;
  background: var(--bg);
  border-left: 2px solid var(--complete);
  border-radius: 0 6px 6px 0;
  color: var(--text);
  font-size: 0.78rem;
}

.feedback-track-note.is-user {
  border-left-color: var(--accent);
}

.feedback-track-note b {
  display: block;
  color: var(--text-muted);
  font: 500 0.6rem/1.3 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.feedback-track-exit {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: 0.8rem;
}

.feedback-track-bubble {
  margin: 0;
  padding: 0.55rem 0.7rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  font-size: 0.82rem;
  line-height: 1.45;
}

.feedback-track-bubble-head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.2rem;
  color: var(--text-muted);
  font: 500 0.62rem/1.3 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.feedback-track-bubble-text {
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.feedback-track-reply {
  display: grid;
  gap: var(--space-2);
}

.feedback-track-reply textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 4.6rem;
  padding: 0.5rem 0.65rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  font: inherit;
  line-height: 1.4;
  resize: vertical;
}

.feedback-track-reply-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.feedback-track-reply-actions .ghost-button,
.feedback-track-reply-actions .primary-button {
  flex: 0 0 auto;
  width: auto;
  white-space: nowrap;
}

.feedback-track-reply-note {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.74rem;
}

.feedback-track-reply-note:empty {
  display: none;
}

.feedback-track-error {
  margin: 0.3rem 0 0;
  color: var(--danger);
  font-size: 0.74rem;
}

.feedback-track-error:empty {
  display: none;
}

.feedback-track-empty {
  padding: 1.1rem;
  color: var(--text-muted);
  font-size: 0.8rem;
  text-align: center;
}

.feedback-tidy {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  background: rgb(var(--surface-raised-rgb) / 0.6);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.feedback-tidy-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.feedback-tidy-note {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.75rem;
}

.feedback-tidy-note.is-error {
  color: var(--danger);
}

@media (max-width: 600px) {
  .feedback-track-head {
    flex-direction: column;
    align-items: stretch;
  }

  .feedback-track-chip {
    flex: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .feedback-track-row.is-open .feedback-track-detail {
    animation: none;
  }

  .feedback-track-chip,
  .feedback-track-seg,
  .feedback-track-node {
    transition: none;
  }
}

/* Load basket (intake-basket.js). Reuses the Load tokens, buttons and tab bar.
   Basket mode hides the two manual slots and keeps the queue button visible. */
/* #appShell #loadScreen#loadScreen: must outrank the Load card rule
   "#appShell #loadScreen#loadScreen :is(.drop-zone[data-drop-role], .supplied-source-card)". */
#appShell #loadScreen#loadScreen[data-load-mode="basket"] .load-grid > .drop-zone,
#appShell #loadScreen#loadScreen[data-load-mode="basket"] .load-grid > .supplied-source-card,
#appShell #loadScreen#loadScreen[data-load-mode="basket"] .load-grid > .load-review-actions { display: none; }
.intake-basket { display: grid; gap: var(--space-4); margin-bottom: var(--space-4); min-width: 0; }
.intake-modes { max-width: 22rem; }
/* Batch import is the purple tab (Jon 2026-10-12): purple text at rest, the purple
   button fill when selected, so it matches its purple card. Manual keeps the blue tab. */
.intake-modes .findings-tab[data-intake-mode="basket"]:not(.is-active) {
  color: color-mix(in srgb, rgb(var(--complete-rgb)) 70%, var(--text-strong));
}
.intake-modes .findings-tab[data-intake-mode="basket"]:not(.is-active):is(:hover, :focus-visible) {
  background: rgb(var(--complete-rgb) / 0.12);
}
.intake-modes .findings-tab[data-intake-mode="basket"].is-active {
  background:
    radial-gradient(circle at 45% 25%, rgb(var(--overlay-rgb) / 0.18), transparent 44%),
    linear-gradient(180deg, var(--complete-button-hover), var(--complete-button) 58%, var(--complete-button-press));
  border-color: rgb(var(--complete-rgb) / 0.72);
  box-shadow:
    0 8px 18px rgb(var(--complete-rgb) / 0.24),
    inset 0 1px 0 rgb(var(--gloss-rgb) / 0.22);
}
/* The drop area is a real Load card (.drop-zone) and stays full size after sorting (Jon 2026-10-12);
   only its drop line changes to "Drop more drawings and POs". */
.intake-job-actions { display: inline-flex; gap: var(--space-2); margin-left: auto; }
/* Unsorted rows drag as a whole onto any job space (Jon 2026-10-12). */
.intake-unsorted-row[draggable="true"] { cursor: grab; }
.intake-unsorted-row[draggable="true"]:active { cursor: grabbing; }
.intake-unsorted-row :is(button, select) { cursor: pointer; }
.intake-result { display: grid; gap: var(--space-6); min-width: 0; }
.intake-result:empty { display: none; }
.intake-board, .intake-working, .intake-error { display: grid; gap: var(--space-6); min-width: 0; }
.intake-board-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding-block: var(--space-4); }
.intake-board-head h3 { margin: 0 auto 0 0; font-size: 1.15rem; }
.intake-jobs { display: grid; gap: var(--space-6); }
.intake-job {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-5);
  min-width: 0;
  background: var(--surface-raised);
  border: 1px solid rgb(var(--overlay-rgb) / 0.12);
  border-radius: var(--radius-lg);
  transition: border-color 160ms ease;
}
.intake-job.is-drop-target, .intake-side.is-drop-target { border-color: var(--accent); }
.intake-job-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid rgb(var(--overlay-rgb) / 0.1); }
.intake-job-head .intake-reason { flex: 1 1 100%; font-size: 0.9rem; }
.intake-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.intake-thumb {
  flex: 0 0 100%;
  display: grid;
  place-items: center;
  aspect-ratio: 1.414 / 1;
  max-height: 24rem;
  overflow: hidden;
  background: var(--surface-muted);
  border-radius: var(--radius-md);
}
.intake-thumb.is-empty { aspect-ratio: auto; height: 3rem; background: transparent; border: 1px dashed rgb(var(--text-muted-rgb) / 0.2); }
.intake-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--gloss); }
.intake-thumb[data-thumb-side="supplied"] { --load-card-rgb: var(--complete-rgb); }
.intake-thumb[data-thumb-side="yours"] { --load-card-rgb: var(--accent-rgb); }
/* POs use the app success green so they stand apart from both drawings. */
.intake-thumb[data-thumb-side="po"] { --load-card-rgb: var(--success-rgb); }
.intake-job-head h4 { margin: 0; color: var(--text-strong); font: 800 28px/1.1 var(--font-head); letter-spacing: 0.02em; overflow-wrap: anywhere; }
@media (max-width: 640px) { .intake-job-head h4 { font-size: 24px; } }
.intake-reason { margin: 0; color: var(--text-muted); font-size: 0.82rem; overflow-wrap: anywhere; }
.intake-flag { margin: 0; font-size: 0.82rem; overflow-wrap: anywhere; }
.intake-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  color: var(--on-colour-button);
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.2;
  border-radius: var(--radius-sm);
}
.intake-badge.is-ready { background: var(--action-success, #2a8656); }
.intake-badge.is-waiting { background: var(--accent-on-paper, #2971d8); }
.intake-badge.is-flag { background: var(--warning-on-paper, #8d6f28); }
.intake-side {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  min-width: 0;
  align-content: flex-start;
  border: 1px dashed rgb(var(--text-muted-rgb) / 0.28);
  border-radius: var(--radius-md);
}
/* Heading copied from the Load cards' .load-card-head > h3 (review-panel-v3.css:7107-7119; 18px at <=640px, 7471-7491). */
.intake-side-label { flex: 0 0 100%; 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; }
.intake-side { --load-card-rgb: var(--accent-rgb); }
.intake-side[data-drop-side="supplied"] { --load-card-rgb: var(--complete-rgb); }
.intake-side[data-drop-side="po"] { --load-card-rgb: var(--success-rgb); }
@media (max-width: 640px) { .intake-side-label { font-size: 18px; } }
.intake-side-empty { color: var(--text-muted); font-size: 0.8rem; }
.intake-file, .intake-chip {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.1rem 0.5rem;
  max-width: 100%;
  min-width: 0;
  padding: 0.3rem 0.55rem;
  background: var(--surface-muted);
  border-radius: var(--radius-md);
  cursor: grab;
}
.intake-chip { cursor: default; list-style: none; }
.intake-file-name { overflow-wrap: anywhere; font-size: 0.85rem; }
.intake-file-meta { color: var(--text-muted); font-size: 0.72rem; }
.intake-thumb.is-small { flex: 0 0 auto; width: 7rem; height: auto; aspect-ratio: 1.414 / 1; max-height: none; }
.intake-chips, .intake-unsorted ul { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.intake-unsorted { display: grid; gap: var(--space-4); }
.intake-unsorted h3 { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: 1.15rem; }
.intake-count { padding: 0.1rem 0.5rem; color: #fff; font-size: 0.75rem; background: var(--warning-on-paper, #8d6f28); border-radius: 999px; }
.intake-unsorted ul { display: grid; gap: var(--space-3); }
/* One row per file: grip, thumbnail, name + reason, actions (Jon 2026-10-12 "format the elements nicer"). */
.intake-unsorted-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-raised);
  border: 1px solid rgb(var(--overlay-rgb) / 0.12);
  border-radius: var(--radius-lg);
  transition: border-color 0.15s;
}
.intake-unsorted-row:hover { border-color: rgb(var(--accent-rgb) / 0.45); }
/* Files in a job space take their side's colour as a fill with white ink: blue yours, purple supplied, green PO. */
.intake-side .intake-file { color: #fff; background: rgb(var(--load-card-rgb)); }
.intake-side .intake-file .intake-file-name { color: #fff; font-weight: 700; }
.intake-side .intake-file .intake-file-meta { color: rgb(255 255 255 / 0.82); }
/* Remove button on every file, top right corner: red fill, white cross. */
.intake-thumb, .intake-file-wrap, .intake-unsorted-row { position: relative; }
.intake-file-wrap { display: inline-flex; max-width: 100%; }
/* The standard red close button (.close-button-danger): this rule only places and sizes it on a file. */
.intake-x {
  position: absolute;
  top: -0.55rem;
  right: -0.55rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  cursor: pointer;
}
.intake-x svg { width: 1rem; height: 1rem; }
.intake-thumb > .intake-x { top: 0.4rem; right: 0.4rem; }
.intake-thumb.is-small > .intake-x { top: 0.25rem; right: 0.25rem; width: 1.35rem; height: 1.35rem; }
.intake-thumb.is-small > .intake-x svg { width: 0.85rem; height: 0.85rem; }
.intake-unsorted-row > .intake-actions { grid-column: 1 / -1; justify-content: flex-end; }
.intake-grip { display: grid; place-items: center; width: 1.25rem; color: var(--text-muted); }
.intake-grip svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }
.intake-thumb.is-small.is-empty { display: grid; place-items: center; background: rgb(var(--overlay-rgb) / 0.06); }
.intake-thumb.is-small.is-empty > svg { width: 1.75rem; height: 1.75rem; fill: none; stroke: var(--text-muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.intake-unsorted-row .intake-file { padding: 0; background: none; cursor: inherit; }
.intake-unsorted-row .intake-file-name { color: var(--text-strong); font-weight: 700; font-size: 0.95rem; }
.intake-unsorted-row .intake-reason { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: 0.85rem; }
.intake-unsorted-row .intake-suggestion { color: color-mix(in srgb, var(--accent) 70%, var(--text-strong)); font-size: 0.85rem; }
@media (max-width: 640px) {
  .intake-unsorted-row { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); }
  .intake-unsorted-row > .intake-grip { display: none; }
  .intake-unsorted-row .intake-thumb.is-small { width: 4.5rem; }
}
.intake-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.intake-suggestion { color: var(--text-muted); font-size: 0.8rem; }
.intake-move select {
  min-height: 2.35rem;
  max-width: 100%;
  padding: 0 var(--space-2);
  color: var(--text);
  background: var(--surface-muted);
  border: 1px solid rgb(var(--overlay-rgb) / 0.18);
  border-radius: var(--radius-md);
}
.intake-spinner {
  width: 0.7rem;
  height: 0.7rem;
  border: 2px solid rgb(var(--text-muted-rgb) / 0.4);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: intake-spin 0.8s linear infinite;
}
@keyframes intake-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .intake-spinner { animation: none; }
  .intake-job { transition: none; }
}
.intake-unsorted-text { display: grid; gap: var(--space-2); min-width: 0; }
@media (min-width: 720px) {
  .intake-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .intake-cols > .intake-side:nth-child(3) { grid-column: 1 / -1; }
  .intake-cols > .intake-side:nth-child(3) .intake-thumb { max-width: 24rem; }
}
@media (min-width: 1100px) {
  .intake-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .intake-unsorted-row { grid-template-columns: auto auto minmax(0, 1fr) auto; }
  .intake-unsorted-row > .intake-actions { grid-column: auto; }
  .intake-cols > .intake-side:nth-child(3) { grid-column: auto; }
  .intake-cols > .intake-side:nth-child(3) .intake-thumb { max-width: none; }
}
@media (max-width: 480px) {
  .intake-modes { max-width: none; }
  .intake-actions > * { flex: 1 1 auto; }
}

/* ==========================================================================
   Settings > Stamp (Jon 2026-10-12): the stamp library and the approval date in one card
   with two tabs. The tiles, the date fields and the colour editor are the Review panel's
   own data and code (features/settings-stamp.js, stamps.js, stamp-panel-o2.js); this block
   only lays them out inside the Settings card. Everything is scoped to .ss-card.
   ========================================================================== */
.ss-card {
  --sx-side-width: 22rem;
}

.ss-card .ss-side,
.ss-card .ss-main {
  min-width: 0;
}

.ss-card .ss-side {
  align-items: center;
}

.ss-card .ss-main {
  justify-content: flex-start;
}

#settingsDialog.is-settings-stamp .ss-card .ss-stage {
  width: min(100%, 16rem);
  max-width: 100%;
  margin: 0 auto;
  aspect-ratio: 35 / 50;
  touch-action: none;
}

#settingsDialog.is-settings-stamp .ss-card .ss-stage .date-pos-stamp {
  opacity: 0.95;
}

.ss-card[data-ss-tab="library"] .ss-stage {
  cursor: default;
}

.ss-card[data-ss-tab="library"] .ss-stage .date-pos-marker {
  pointer-events: none;
  cursor: default;
}

.ss-card .ss-name {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  text-align: center;
  overflow-wrap: anywhere;
}

.ss-card .ss-name p {
  margin: 0;
}

/* The two inner tabs: one pill control, the open tab filled. */
.ss-card .ss-tabs {
  display: flex;
  gap: var(--space-2);
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding: 4px;
  background: rgb(var(--bg-rgb) / 0.6);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.ss-card .ss-tab {
  flex: 1 1 0;
  min-width: 0;
  min-height: 2.5rem;
  padding: 0 var(--space-3);
  color: var(--text-muted);
  font: 700 0.72rem/1.2 var(--font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgb(var(--overlay-rgb) / 0.05);
  border: 0;
  border-radius: 9px;
  cursor: var(--cursor-pointer);
  transition: background-color 150ms ease, color 150ms ease;
}

.ss-card .ss-tab:hover {
  color: var(--text-strong);
}

.ss-card .ss-tab.is-active {
  color: var(--on-colour-button);
  background: var(--accent);
}

.ss-card .ss-tab:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.ss-card .ss-pane {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

/* ---- Stamp library: four tiles to a row (two on a phone), the Add tile last ---- */
.ss-card .ss-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  padding: 0;
  overflow: visible;
}

.ss-card .ss-grid .stamp-library-tile {
  grid-template-rows: auto auto;
  gap: 4px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  outline: none;
}

.ss-card .ss-grid .stamp-library-tile-card {
  display: grid;
  min-width: 0;
  overflow: hidden;
  background: var(--surface-raised);
  border: 2px solid rgb(var(--overlay-rgb) / 0.12);
  border-radius: 8px;
}

.ss-card .ss-grid .stamp-library-tile-card:hover {
  border-color: rgb(var(--overlay-rgb) / 0.5);
}

.ss-card .ss-grid .stamp-library-tile[aria-selected="true"] .stamp-library-tile-card {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgb(var(--accent-rgb) / 0.35);
}

.ss-card .ss-grid .stamp-library-tile-select {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 7 / 9;
  background: var(--paper);
}

.ss-card .ss-grid .stamp-library-tile-select img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  object-fit: contain;
  background: none;
  border-radius: 0;
}

.ss-card .ss-grid .stamp-library-tile-actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  min-height: 30px;
  border-top: 1px solid rgb(var(--overlay-rgb) / 0.1);
}

.ss-card .ss-grid :is(.stamp-library-tile-rename, .stamp-library-tile-delete) {
  position: static;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 30px;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--text);
}

.ss-card .ss-grid .stamp-library-tile-delete {
  border-left: 1px solid rgb(var(--overlay-rgb) / 0.1);
  color: var(--danger-strong);
}

.ss-card .ss-grid :is(.stamp-library-tile-rename, .stamp-library-tile-delete):hover {
  color: var(--text-strong);
  background: rgb(var(--overlay-rgb) / 0.08);
}

.ss-card .ss-grid .stamp-library-tile-delete:hover {
  background: rgb(var(--action-danger-rgb) / 0.35);
}

.ss-card .ss-grid :is(.stamp-library-tile-rename, .stamp-library-tile-delete) svg {
  width: 15px;
  height: 15px;
}

.ss-card .ss-grid :is(.stamp-library-tile-select, .stamp-library-tile-rename, .stamp-library-tile-delete):focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: -2px;
}

/* Names wrap onto as many lines as they need; nothing is clipped or ellipsised. */
.ss-card .ss-grid .stamp-library-tile-name {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 0 4px;
}

.ss-card .ss-grid .stamp-library-tile-name strong {
  display: block;
  min-width: 0;
  max-width: 100%;
  color: var(--muted-action);
  font: 600 0.7rem/1.3 var(--font-ui);
  letter-spacing: 0.02em;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}

.ss-card .ss-grid .stamp-library-tile[aria-selected="true"] .stamp-library-tile-name strong {
  color: var(--text-strong);
}

.ss-card .ss-grid .stamp-library-add {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr auto auto 1fr;
  justify-items: center;
  row-gap: 2px;
  align-self: start;
  min-width: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: var(--muted-action);
  font: 700 0.66rem/1.2 var(--font-ui);
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
  background: rgb(var(--overlay-rgb) / 0.03);
  border: 1.5px dashed rgb(var(--overlay-rgb) / 0.28);
  border-radius: 8px;
  cursor: var(--cursor-pointer);
}

/* Same height as a stamp tile card: the 7:9 image area plus the 30px action bar. */
.ss-card .ss-grid .stamp-library-add::before {
  content: "";
  grid-area: 1 / 1 / -1 / -1;
  width: 100%;
  aspect-ratio: 7 / 9;
  padding-bottom: 30px;
}

.ss-card .ss-grid .stamp-library-add > svg { grid-area: 2 / 1; }
.ss-card .ss-grid .stamp-library-add > span { grid-area: 3 / 1; }

.ss-card .ss-grid .stamp-library-add:hover {
  color: var(--text-strong);
  border-color: rgb(var(--overlay-rgb) / 0.5);
}

.ss-card .ss-grid .stamp-library-add:is(.is-dragging, :has(input:focus-visible)) {
  color: var(--text-strong);
  background: rgb(var(--accent-wash-rgb) / 0.14);
  border-color: var(--accent-strong);
}

.ss-card .ss-grid .stamp-library-add > svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.ss-card .ss-status {
  margin: 0;
  min-width: 0;
  color: var(--text-muted);
  font: 600 0.78rem/1.4 var(--font-ui);
  letter-spacing: 0.04em;
  text-align: left;
  overflow-wrap: anywhere;
}

.ss-card .ss-status.is-error {
  color: var(--danger-text);
}

/* ---- Approval date: Position | Text on the first row, Colour across the second ---- */
.ss-card .ss-toprow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-width: 0;
}

.ss-card .ss-toprow .toggle {
  flex: 1 1 auto;
  min-width: 0;
}

.ss-card .ss-toprow .ghost-button {
  flex: none;
  min-width: 7rem;
}

.ss-card .ss-note {
  margin: 0;
  color: var(--text);
  min-width: 0;
  overflow-wrap: anywhere;
}

.ss-card .ss-date-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--space-4) var(--space-5);
  min-width: 0;
}

.ss-card .ss-date-body > p {
  grid-column: 1 / -1;
  margin: 0;
}

.ss-card .ss-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-3);
  background: rgb(var(--overlay-rgb) / 0.025);
  border: 1px solid rgb(var(--overlay-rgb) / 0.1);
  border-radius: var(--radius-md);
}

.ss-card .ss-group-colour {
  grid-column: 1 / -1;
}

.ss-card .ss-group-label {
  color: var(--text-strong);
  font: 700 0.78rem/1.3 var(--font-ui);
  letter-spacing: 0.06em;
  overflow-wrap: anywhere;
}

.ss-card .ss-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: var(--space-2) var(--space-3);
  min-width: 0;
}

.ss-card .ss-row-text {
  grid-template-columns: minmax(0, 1fr);
}

#settingsPanelStamp .ss-card .ss-row .ghost-button.ss-center {
  width: 100%;
  min-width: 0;
}

.ss-card .ss-toprow #settingsDateReset {
  min-width: 96px;
  padding: 0 20px;
}

.ss-card .ss-select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 3rem;
  padding: 0 2.5rem 0 1rem;
  color: var(--text);
  font: 500 0.92rem/1.2 var(--font-ui);
  background-color: var(--sx-input-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.ss-card .ss-select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.25);
}

/* Colour: the Comments tab control (swatch, dark-to-light strip, R / G / B sliders). Its rules are
   shared from stamp-panel-o2.css, which also matches #settingsPanelStamp .ss-card. */
.ss-card .comment-palette-control {
  display: block;
  min-width: 0;
}

/* Narrow layouts: the card stacks (preview above the tabs), the date boxes go to one column. */
@media (max-width: 900px) {
  .ss-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .ss-card .ss-side {
    border-right: 0;
    border-bottom: 1px solid var(--sx-side-line);
    padding: 1.25rem;
  }

  .ss-card .ss-main {
    padding: 1.25rem;
  }

  #settingsDialog.is-settings-stamp .ss-card .ss-stage {
    width: min(100%, 11rem);
  }
}

@media (max-width: 860px) {
  .ss-card .ss-date-body {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .ss-card .ss-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .ss-card .ss-tab {
    transition: none;
  }
}

/* Phone: leave room under the Stamp card so it scrolls clear of any fixed bottom bar. */
@media (max-width: 640px) {
  #settingsDialog.is-settings-stamp .settings-body {
    padding-bottom: calc(var(--space-6) + 5rem + env(safe-area-inset-bottom, 0px));
  }
}

/* Shortcuts page (features/shortcuts.js): Shift+H, Shift+F, ? and the mouse
   moves, including double-click to zoom back out. */
.shortcuts-page {
  position: fixed;
  inset: 0;
  z-index: 4200;
  display: grid;
  place-items: center;
  padding: var(--space-4);
}

.shortcuts-page[hidden] {
  display: none;
}

.shortcuts-page-backdrop {
  position: absolute;
  inset: 0;
  background: rgb(var(--bg-strong-rgb) / 0.72);
  backdrop-filter: blur(6px);
}

.shortcuts-page-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  width: min(60rem, 100%);
  max-height: calc(100dvh - 2rem);
  padding: var(--space-5);
  background: var(--surface-raised);
  border: 1px solid rgb(var(--accent-rgb) / 0.52);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow);
}

.shortcuts-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.shortcuts-page-head h2 {
  margin: var(--space-1) 0 0;
}

.shortcuts-page-intro {
  margin: 0;
  color: var(--text-muted);
}

.shortcuts-page-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
  gap: var(--space-4) var(--space-6);
  min-height: 0;
  overflow-y: auto;
  padding-right: var(--space-1);
}

.shortcuts-group h3 {
  margin: 0 0 var(--space-2);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: rgb(var(--accent-rgb));
}

.shortcuts-group dl {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}

.shortcuts-row {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-3);
}

.shortcuts-row dt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem;
}

.shortcuts-row dd {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.45;
}

.shortcuts-row kbd {
  display: inline-block;
  min-width: 1.6rem;
  padding: 0.15rem 0.4rem;
  font: 600 0.75rem/1.3 var(--font-mono, ui-monospace, monospace);
  text-align: center;
  color: var(--text);
  background: rgb(var(--overlay-rgb) / 0.08);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 5px;
}

.shortcuts-plus {
  color: var(--text-muted);
  font-size: 0.7rem;
}

.shortcuts-page-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.feedback-reference {
  margin-top: var(--space-2);
}

.help-shortcut-tip {
  margin: var(--space-3) 0 0;
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1.5;
}

.help-shortcut-tip kbd {
  padding: 0.05rem 0.35rem;
  font: 600 0.72rem/1.3 var(--font-mono, ui-monospace, monospace);
  color: var(--text);
  background: rgb(var(--overlay-rgb) / 0.08);
  border: 1px solid var(--border);
  border-radius: 4px;
}

/* Mini help (Shift+H, features/mini-help.js): a small floating card that
   borrows the Help Center chat. No suggested questions here. */
.mini-help {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 4150;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(24rem, calc(100vw - 32px));
  max-height: min(34rem, calc(100dvh - 32px));
  background: var(--surface-raised);
  border: 1px solid rgb(var(--accent-rgb) / 0.55);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow), 0 0 0 1px rgb(var(--bg-strong-rgb) / 0.4);
}

.mini-help[hidden] {
  display: none;
}

.mini-help-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-3) var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--border);
}

.mini-help-mark {
  width: 1.6rem;
  height: 1.6rem;
  object-fit: contain;
}

.mini-help-titles .screen-label {
  margin: 0;
  font-size: 0.62rem;
}

.mini-help-titles h2 {
  margin: 0;
  font-size: 0.95rem;
}

.mini-help-head .icon-button {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  min-height: 2rem;
}

.mini-help-head .icon-button svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mini-help-body {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--space-3);
  min-height: 0;
  padding: var(--space-3) var(--space-4) var(--space-4);
}

.mini-help-body .help-chat {
  max-height: none;
  min-height: 0;
  overflow-y: auto;
}

.mini-help-body .help-chat-message {
  padding: var(--space-2) var(--space-3);
  font-size: 0.82rem;
}

.mini-help-body .help-chat-form textarea {
  min-height: 3.25rem;
}

/* Help Center chat: more room for the conversation (Jon 2026-10-12). */
.help-assistant {
  gap: var(--space-2) var(--space-3);
  padding: var(--space-4);
}

.help-assistant-mark {
  width: 2.5rem;
  height: 2.5rem;
}

.help-assistant-mark img {
  width: 1.5rem;
  height: 1.5rem;
}

.help-assistant > p {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.45;
}

.help-assistant .help-chat {
  max-height: min(30rem, 52vh);
  gap: var(--space-2);
}

.help-assistant .help-chat-message {
  padding: var(--space-2) var(--space-3);
  font-size: 0.85rem;
}

.help-assistant .help-chat-message strong {
  font-size: 0.68rem;
}

.help-assistant .help-chat-form textarea {
  min-height: 3.5rem;
}

.help-assistant .help-suggestions button {
  padding: 0.3rem 0.6rem;
  font-size: 0.68rem;
}

/* Changeable shortcuts (Jon 2026-10-12): a small pencil beside each key. */
.shortcuts-row dt {
  gap: 0.35rem;
}

.shortcuts-keys {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem;
}

.shortcuts-edit {
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 120ms ease, color 120ms ease, border-color 120ms ease, background 120ms ease;
}

.shortcuts-edit svg {
  width: 0.9rem;
  height: 0.9rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shortcuts-row:hover .shortcuts-edit,
.shortcuts-edit:focus-visible,
.shortcuts-edit.is-changed {
  opacity: 1;
}

.shortcuts-edit:hover,
.shortcuts-edit:focus-visible {
  color: rgb(var(--accent-rgb));
  background: rgb(var(--accent-rgb) / 0.1);
  border-color: rgb(var(--accent-rgb) / 0.45);
}

.shortcuts-edit.is-changed {
  color: rgb(var(--accent-rgb));
}

.shortcuts-edit.is-listening {
  opacity: 1;
  color: rgb(var(--accent-rgb));
  border-color: rgb(var(--accent-rgb));
  box-shadow: 0 0 0 2px rgb(var(--accent-rgb) / 0.3);
}

.shortcuts-listening {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgb(var(--accent-rgb));
}

.shortcuts-page-foot {
  align-items: center;
}

.shortcuts-status {
  flex: 1 1 16rem;
  margin: 0;
  color: rgb(var(--accent-rgb));
  font-size: 0.8rem;
  line-height: 1.4;
}

/* The list scrolls inside the card: fade the cut edge instead of a hard clip. */
.shortcuts-page-groups {
  padding-bottom: var(--space-5);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.75rem), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 1.75rem), transparent);
}

/* ==========================================================================
   Sheet Manager polish (outline markers, tall previews, tidy header/footer,
   zoom pill placement, filmstrip arrows, in-app confirm, full-screen controls).
   Scoped to #pairingOverview / .pairing-* and the full-screen view.
   ========================================================================== */

/* 6. Dimension pick markers: outline only, the number underneath stays readable. */
.pairing-dimension-marker,
.pairing-dimension-marker.is-table-value {
  --pm: var(--accent-strong);
  box-sizing: content-box;
  min-width: 0;
  min-height: 0;
  padding: 2px;
  translate: -4px -4px;
  border: 2px solid var(--pm);
  border-radius: 4px;
  background: color-mix(in srgb, var(--pm) 8%, transparent);
  box-shadow: none;
  color: transparent;
  animation: none;
  transition: border-width 100ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

.pairing-dimension-marker[data-pairing-dim-role="manufacture"],
.pairing-dimension-layer.is-supplied .pairing-dimension-marker,
.pairing-dimension-marker.is-table-value[data-pairing-dim-role="manufacture"],
.pairing-dimension-layer.is-supplied .pairing-dimension-marker.is-table-value {
  --pm: var(--complete-strong);
  background: color-mix(in srgb, var(--pm) 8%, transparent);
  box-shadow: none;
  color: transparent;
}

.pairing-dimension-marker:hover,
.pairing-dimension-marker:focus-visible,
.pairing-dimension-marker.is-table-value:hover,
.pairing-dimension-marker.is-table-value:focus-visible,
.pairing-dimension-marker.is-table-value[data-pairing-dim-role="manufacture"]:hover,
.pairing-dimension-marker.is-table-value[data-pairing-dim-role="manufacture"]:focus-visible,
.pairing-dimension-layer.is-supplied .pairing-dimension-marker.is-table-value:hover,
.pairing-dimension-layer.is-supplied .pairing-dimension-marker.is-table-value:focus-visible {
  outline: none;
  border-width: 3px;
  translate: -5px -5px;
  background: color-mix(in srgb, var(--pm) 12%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pm) 28%, transparent), 0 0 12px color-mix(in srgb, var(--pm) 45%, transparent);
}

.pairing-dimension-marker.is-selected,
.pairing-dimension-marker[aria-pressed="true"],
.pairing-dimension-marker.is-table-value.is-selected,
.pairing-dimension-layer.is-yours .pairing-dimension-marker.is-table-value.is-selected,
.pairing-dimension-marker.is-table-value[data-pairing-dim-role="manufacture"].is-selected,
.pairing-dimension-layer.is-supplied .pairing-dimension-marker.is-table-value.is-selected {
  border-color: var(--complete-hover);
  border-width: 3px;
  translate: -5px -5px;
  background: color-mix(in srgb, var(--pm) 20%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--complete-hover) 40%, transparent);
  animation: none;
}

/* 10. Zoom pill and full-screen button: solid, above the page, tucked in the corners. */
#pairingOverview .pairing-detail-preview { position: relative; isolation: isolate; }

#pairingOverview .pairing-detail-preview .pairing-detail-zoom-control,
#pairingOverview .pairing-detail-preview .pairing-detail-expand {
  position: absolute;
  bottom: 10px;
  z-index: 30;
  opacity: 1;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#pairingOverview .pairing-detail-preview .pairing-detail-zoom-control {
  left: 10px;
  right: auto;
  gap: 0.25rem;
  padding: 0.22rem;
  background: var(--surface);
  border: 1px solid var(--border-strong, rgb(var(--overlay-rgb) / 0.22));
  box-shadow: 0 4px 14px rgb(var(--shadow-rgb) / 0.45);
}

#pairingOverview .pairing-detail-preview .pairing-detail-zoom-control .review-zoom-button { width: 1.9rem; height: 1.9rem; }
#pairingOverview .pairing-detail-preview .pairing-detail-zoom-control .review-zoom-button.review-zoom-reset { margin-left: 0.15rem; }
#pairingOverview .pairing-detail-preview .pairing-detail-zoom-control .review-zoom-button:disabled { opacity: 0.55; }
#pairingOverview .pairing-detail-preview .pairing-detail-expand {
  right: 10px;
  left: auto;
  width: 2.35rem;
  height: 2.35rem;
  background: var(--surface);
  border: 1px solid var(--border-strong, rgb(var(--overlay-rgb) / 0.22));
  border-radius: var(--radius-md);
  box-shadow: 0 4px 14px rgb(var(--shadow-rgb) / 0.45);
  opacity: 0.95;
}

#pairingOverview .pairing-detail-preview .pairing-detail-expand:hover,
#pairingOverview .pairing-detail-preview .pairing-detail-expand:focus-visible { opacity: 1; }

/* Full screen button: the same as the review page's, bottom right, 32px, filled with the
   pane colour (blue on your drawing, purple on the supplied drawing). */
#pairingOverview .sm-area .pairing-detail-expand {
  top: auto;
  right: 8px;
  bottom: 8px;
  left: auto;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  color: var(--on-colour-button);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgb(var(--shadow-rgb) / .24), inset 0 1px 0 rgb(var(--gloss-rgb) / .18);
  opacity: 1;
}
#pairingOverview .sm-col.is-your .sm-area .pairing-detail-expand {
  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));
  border: 1px solid rgb(var(--accent-rgb) / .6);
}
#pairingOverview .sm-col.is-supplied .sm-area .pairing-detail-expand {
  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));
  border: 1px solid rgb(var(--complete-border-rgb) / .6);
}
#pairingOverview .sm-area .pairing-detail-expand svg,
#pairingOverview .sm-area .pairing-detail-expand svg path {
  stroke: currentColor;
  stroke-width: 3.3px;
}

/* Quiet look (Jon 16 Oct, look 5), built from the review page's own pieces: a plain app
   background behind the card; the card styled like the review panel; drawing panels like the
   review drawing panes (no outline, 16px corners, tinted header) with a thin line in the side
   colour along the top; tile strips and the size table without outlines. */
#pairingOverview.pairing-overview:has(.sm-card) {
  background: var(--bg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

#pairingOverview .sm-card {
  background: linear-gradient(rgb(var(--surface-rgb) / 0.74), rgb(var(--bg-rgb) / 0.8)), var(--bg);
  border: 1px solid rgb(var(--overlay-rgb) / 0.1);
  border-radius: var(--panel-radius);
  box-shadow: 0 18px 40px rgb(var(--shadow-rgb) / 0.45), inset 0 1px 0 rgb(var(--overlay-rgb) / 0.06);
}

#pairingOverview .sm-panel {
  background: var(--surface);
  border: 0;
  border-radius: var(--panel-radius);
}

/* One even 8px gap everywhere, the gap between the two drawings included (Jon 16 Oct). The card
   hugs the two pages, so the panels, tile strips, size table and decision bar share one edge. */
#pairingOverview .sm-card {
  --sm-gap: 8px;
  container: sm-card / inline-size;
  gap: 8px;
  width: min(100%, max(var(--sm-card-w, 100%), 600px));
  padding: 12px 16px;
}
#pairingOverview .sm-col { gap: 8px; }
/* When the card is at its narrowest, a panel fills its column so it lines up with the page row. */
#pairingOverview .sm-col .sm-panel { justify-self: stretch; width: auto; }

/* A narrow card (measured with the page columns, which take 168px) puts the message on its own line and slims the size table's label column, so
   nothing is squeezed or cut off. */
@container sm-card (max-width: 1028px) {
  #pairingOverview .sm-foot { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 8px; }
  #pairingOverview .sm-foot .sm-say { grid-column: 1 / -1; }
  #pairingOverview .sm-foot .sm-decisions { grid-column: 1; }
  #pairingOverview .sm-foot .sm-continue { grid-column: 3; }
  #pairingOverview .sm-oa .pairing-detail-dimension-controls.sm-oa-table { grid-template-columns: 7rem repeat(var(--sm-oa-axes, 3), minmax(0, 1fr)); }
  #pairingOverview .sm-oa .sm-oa-table .oa-dim-row.pairing-auto-dimension-row { padding: 0 8px; }
  #pairingOverview .sm-oa .sm-oa-table .pairing-auto-dimension-row .oa-dim-pick { gap: 6px; }
  #pairingOverview .sm-oa .sm-oa-table .oa-dim-val-main.is-missing { gap: 4px; padding: 0 6px; }
  #pairingOverview .sm-panel-head { gap: 8px; padding-inline: 12px; }
  #pairingOverview .sm-panel-tools { gap: 6px; }
  /* As on narrow screens: the tile and the message already show the suggested page. */
  #pairingOverview .sm-panel-head > .sm-badge { display: none; }
}

#pairingOverview .sm-strip,
#pairingOverview .sm-oa-table {
  border-color: transparent;
}

/* Page tiles, organised (Jon 17 Oct): each side's pages run down the outer edge of its drawing,
   exactly as tall as the drawing panel. Tiles share that height (up to a comfortable size) so
   they fit without a scrollbar; only a long list scrolls, by wheel, with no bar showing. Every
   gap is the card's 8px. Each tile is the page preview with a caption row under it, page number
   left and its match right, so nothing sits on the preview. */
#pairingOverview .sm-card {
  --sm-rail: 76px;
  align-self: center;
  height: var(--sm-card-h, 100%);
  width: min(100%, max(var(--sm-card-w, 100%), 768px));
}
/* The size table and the decision bar line up with the two drawing panels, not the page columns. */
#pairingOverview .sm-oa,
#pairingOverview .sm-foot { margin-inline: calc(var(--sm-rail) + var(--sm-gap)); }
#pairingOverview .sm-stage {
  grid-template-columns: var(--sm-rail) minmax(0, 1fr) minmax(0, 1fr) var(--sm-rail);
  grid-template-rows: minmax(0, 1fr);
}
#pairingOverview .sm-strips { display: contents; }
#pairingOverview .sm-strip.is-your { grid-column: 1; grid-row: 1; }
#pairingOverview .sm-col { grid-template-rows: minmax(0, 1fr); }
#pairingOverview .sm-col.is-your { grid-column: 2; grid-row: 1; }
#pairingOverview .sm-col.is-supplied { grid-column: 3; grid-row: 1; }
#pairingOverview .sm-strip.is-supplied { grid-column: 4; grid-row: 1; }
#pairingOverview .sm-strip {
  --sm-side: var(--accent-strong);
  --sm-side-rgb: var(--accent-rgb);
  --sm-side-wash-rgb: var(--accent-wash-rgb);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(var(--sm-count, 1), minmax(48px, 76px));
  align-content: start;
  gap: var(--sm-gap);
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  overflow: hidden auto;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
  background: none;
}
#pairingOverview .sm-strip::-webkit-scrollbar { display: none; }
#pairingOverview .sm-strip.is-supplied {
  --sm-side: var(--complete-strong);
  --sm-side-rgb: var(--complete-rgb);
  --sm-side-wash-rgb: var(--complete-wash-rgb);
}
#pairingOverview .sm-strip .sm-tile-wrap { height: 100%; min-width: 0; min-height: 0; }

/* Page pips in the header (Jon 17 Oct): one pill per page of yours, coloured by its state, then the totals. */
#pairingOverview .sm-head .pairing-overview-stats { gap: 4px; }
#pairingOverview .sm-head .pairing-overview-stats .pairing-pip { display: inline-grid; place-items: center; min-width: 30px; height: 22px; padding: 0 6px; box-sizing: border-box; border: 1px solid transparent; border-radius: 999px; font-family: var(--font-head); font-size: 0.66rem; font-weight: 700; letter-spacing: var(--track-caps); color: var(--text-muted); background: rgb(var(--overlay-rgb) / 0.06); }
#pairingOverview .sm-head .pairing-overview-stats .pairing-pip.is-matched { color: var(--success); background: rgb(var(--success-rgb) / 0.14); }
#pairingOverview .sm-head .pairing-overview-stats .pairing-pip.is-suggested, #pairingOverview .sm-head .pairing-overview-stats .pairing-pip.is-open { color: var(--warning); background: rgb(var(--warning-rgb) / 0.12); border-style: dashed; border-color: rgb(var(--warning-rgb) / 0.5); }
#pairingOverview .sm-head .pairing-overview-stats .pairing-pip.is-nomatch { color: var(--danger); background: rgb(var(--danger-rgb) / 0.14); }
#pairingOverview .sm-head .pairing-overview-stats .pairing-pip.is-ignored { text-decoration: line-through; }
#pairingOverview .sm-head .pairing-overview-stats .pairing-pip.is-current { border-style: solid; border-color: var(--text); }
#pairingOverview .sm-head .pairing-overview-stats .pairing-pip-totals { margin-left: 6px; font-family: var(--font-head); font-size: 0.7rem; font-weight: 700; letter-spacing: var(--track-caps); color: var(--text-muted); white-space: nowrap; }
/* Phones stack the drawings, so each side's pages become a row under them again. */
@media (max-width: 760px) {
  #pairingOverview .sm-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  #pairingOverview .sm-oa,
  #pairingOverview .sm-foot { margin-inline: 0; }
  #pairingOverview .sm-card { height: 100%; }
  #pairingOverview .sm-strip,
  #pairingOverview .sm-col.is-your,
  #pairingOverview .sm-col.is-supplied { grid-column: 1; grid-row: auto; }
  #pairingOverview .sm-strip {
    grid-template-rows: 56px;
    grid-auto-flow: column;
    grid-auto-columns: 68px;
    overflow: auto hidden;
  }
}
#pairingOverview .sm-strip .sm-tile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) 18px;
  column-gap: 3px;
  width: 100%;
  height: 100%;
  padding: 3px 3px 0;
  aspect-ratio: auto;
  color: var(--text-strong);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}
#pairingOverview .sm-strip .sm-tile img,
#pairingOverview .sm-strip .sm-tile .sm-tile-blank {
  position: static;
  grid-column: 1 / -1;
  grid-row: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  background: var(--paper);
  border-radius: 4px;
}
#pairingOverview .sm-strip .sm-cap {
  position: static;
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  padding: 0;
  font-size: 0.6rem;
  line-height: 1;
  color: var(--text-strong);
  background: none;
}
#pairingOverview .sm-strip .sm-badge,
#pairingOverview .sm-strip .sm-chip {
  position: static;
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  justify-self: end;
  max-width: 100%;
  height: 14px;
  min-width: 0;
  padding: 0 4px;
  overflow: hidden;
  font-size: 0.56rem;
  letter-spacing: 0;
  white-space: nowrap;
}
#pairingOverview .sm-strip .sm-badge { gap: 2px; }
#pairingOverview .sm-strip .sm-tile .sm-badge.is-tie { max-width: 100%; padding: 0 3px; font-size: 0.54rem; }

/* A very narrow card (a short window with tall pages) keeps every word on screen: the pick
   buttons drop their target icon and the heading tightens its spacing. */
@container sm-card (max-width: 828px) {
  #pairingOverview .sm-oa .sm-oa-table .oa-dim-pick-target { display: none; }
  #pairingOverview .sm-panel-head { gap: 4px; padding-inline: 10px; }
  #pairingOverview .sm-panel-tools { gap: 4px; }
}
#pairingOverview .sm-strip .sm-badge em { font-size: inherit; }
#pairingOverview .sm-strip .sm-tile-wrap.is-matched .sm-tile,
#pairingOverview .sm-strip .sm-tile-wrap.is-suggested .sm-tile,
#pairingOverview .sm-strip .sm-tile-wrap.is-nomatch .sm-tile { border: 1px solid var(--border); }
#pairingOverview .sm-strip .sm-tile:hover { border-color: rgb(var(--sm-side-rgb) / 0.6); }
#pairingOverview .sm-strip .sm-tile-wrap.is-selected .sm-tile {
  background: rgb(var(--sm-side-wash-rgb) / 0.22);
  border-color: rgb(var(--sm-side-rgb));
  box-shadow: none;
}
#pairingOverview .sm-strip .sm-tile-wrap.is-partner .sm-tile { border-color: var(--sm-pair); box-shadow: none; }

/* Decision bar gets its own quiet panel with room to breathe. */
#pairingOverview .sm-foot {
  column-gap: 16px;
  margin-top: 0;
  padding: 12px 16px;
  background: var(--surface);
  border-radius: var(--panel-radius);
}

#pairingOverview .sm-say { column-gap: 12px; row-gap: 4px; }
#pairingOverview .sm-picks { gap: 8px; }
#pairingOverview .sm-message { line-height: 1.4; }


/* In-app confirm: sibling of the check-needed popup. */
#pairingOverview .pairing-confirm {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgb(var(--bg-strong-rgb) / 0.55);
  pointer-events: auto;
}

#pairingOverview .pairing-confirm[hidden] { display: none; }

#pairingOverview .pairing-confirm-card {
  box-sizing: border-box;
  display: grid;
  gap: 16px;
  width: min(30rem, calc(100vw - 32px));
  padding: 16px;
  background: rgb(var(--surface-rgb) / 0.94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: var(--panel-radius);
  box-shadow: 0 18px 48px rgb(var(--shadow-rgb) / 0.45);
}

#pairingOverview .pairing-confirm-title {
  margin: 0;
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: 0.08em;
  color: var(--text);
}

#pairingOverview .pairing-confirm-body {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

#pairingOverview .pairing-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

#pairingOverview .pairing-confirm-actions button {
  min-width: 0;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0 var(--space-4);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

#pairingOverview .pairing-confirm-ok { color: var(--on-colour-button); }
#pairingOverview .pairing-confirm-actions button:focus { outline: none; }
#pairingOverview .pairing-confirm-actions button:focus-visible { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent-strong); }

@media (prefers-reduced-motion: no-preference) {
  #pairingOverview .pairing-confirm { animation: pairingAlertBackdropIn 140ms ease-out; }
  #pairingOverview .pairing-confirm-card { animation: pairingAlertIn 140ms ease-out; }
}

/* 16. Full-screen sheet view: zoom matches the review zoom pill, close matches the Sheet Manager X. */
#manufactureFullscreen .fullscreen-zoom-controls {
  grid-template-columns: 2.2rem 3.4rem 2.2rem;
  gap: 0.2rem;
  padding: 0.22rem;
  background: var(--surface);
  border: 1px solid rgb(var(--overlay-rgb) / 0.18);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgb(var(--gloss-rgb) / 0.12);
}

#manufactureFullscreen .fullscreen-zoom-controls .fullscreen-zoom-button,
#manufactureFullscreen .fullscreen-zoom-controls #fullscreenZoomIn,
#manufactureFullscreen .fullscreen-zoom-controls #fullscreenZoomOut {
  width: 2.2rem;
  min-width: 2.2rem;
  height: 2.2rem;
  min-height: 2.2rem;
  padding: 0;
  border-radius: 50%;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--accent-strong);
  background: rgb(var(--overlay-rgb) / 0.08);
  border: 1px solid rgb(var(--overlay-rgb) / 0.18);
  box-shadow: inset 0 1px 0 rgb(var(--gloss-rgb) / 0.1);
}

#manufactureFullscreen.is-supplied-drawing .fullscreen-zoom-controls .fullscreen-zoom-button { color: var(--complete-strong); }

#manufactureFullscreen .fullscreen-zoom-controls .fullscreen-zoom-button:not(:disabled):hover,
#manufactureFullscreen .fullscreen-zoom-controls .fullscreen-zoom-button:not(:disabled):focus-visible {
  color: var(--on-colour-button);
  background: var(--accent-action-gradient);
  border-color: rgb(var(--accent-border-rgb) / 0.82);
}

#manufactureFullscreen.is-supplied-drawing .fullscreen-zoom-controls .fullscreen-zoom-button:not(:disabled):hover,
#manufactureFullscreen.is-supplied-drawing .fullscreen-zoom-controls .fullscreen-zoom-button:not(:disabled):focus-visible {
  background: var(--complete-action-gradient);
  border-color: rgb(var(--complete-border-rgb) / 0.82);
}

#manufactureFullscreen .fullscreen-zoom-controls .fullscreen-zoom-button:disabled { opacity: 0.4; }
#manufactureFullscreen .fullscreen-zoom-value { height: 2.2rem; font-family: var(--font-mono); }

#manufactureFullscreen .fullscreen-close {
  display: grid;
  place-items: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  font-size: 1.45rem;
  line-height: 1;
  color: var(--on-colour-button);
  background: var(--action-danger);
  border: 1px solid var(--action-danger);
  border-radius: var(--radius-sm);
}

#manufactureFullscreen .fullscreen-close:hover {
  background: var(--action-danger-hover);
  border-color: var(--action-danger-hover);
}

#manufactureFullscreen .fullscreen-close:active {
  background: var(--action-danger-press);
  border-color: var(--action-danger-press);
}

#manufactureFullscreen .fullscreen-close { font-size: 0; }
#manufactureFullscreen .fullscreen-close::before { content: "\00d7"; font-size: 1.45rem; line-height: 1; }

/* Overall size: strip the inherited row and section padding so the band stays tight. */
/* Full-screen zoom buttons: outrank the older white-square ID rules. */
#manufactureFullscreen#manufactureFullscreen .fullscreen-toolbar .fullscreen-zoom-controls #fullscreenZoomIn,
#manufactureFullscreen#manufactureFullscreen .fullscreen-toolbar .fullscreen-zoom-controls #fullscreenZoomOut {
  color: var(--accent-strong);
  background: rgb(var(--overlay-rgb) / 0.08);
  border: 1px solid rgb(var(--overlay-rgb) / 0.18);
  box-shadow: inset 0 1px 0 rgb(var(--gloss-rgb) / 0.1);
}
#manufactureFullscreen#manufactureFullscreen.is-supplied-drawing .fullscreen-toolbar .fullscreen-zoom-controls #fullscreenZoomIn,
#manufactureFullscreen#manufactureFullscreen.is-supplied-drawing .fullscreen-toolbar .fullscreen-zoom-controls #fullscreenZoomOut { color: var(--complete-strong); }
#manufactureFullscreen#manufactureFullscreen .fullscreen-toolbar .fullscreen-zoom-controls #fullscreenZoomIn:not(:disabled):hover,
#manufactureFullscreen#manufactureFullscreen .fullscreen-toolbar .fullscreen-zoom-controls #fullscreenZoomOut:not(:disabled):hover,
#manufactureFullscreen#manufactureFullscreen .fullscreen-toolbar .fullscreen-zoom-controls #fullscreenZoomIn:not(:disabled):focus-visible,
#manufactureFullscreen#manufactureFullscreen .fullscreen-toolbar .fullscreen-zoom-controls #fullscreenZoomOut:not(:disabled):focus-visible {
  color: var(--on-colour-button);
  background: var(--accent-action-gradient);
  border-color: rgb(var(--accent-border-rgb) / 0.82);
}
#manufactureFullscreen#manufactureFullscreen.is-supplied-drawing .fullscreen-toolbar .fullscreen-zoom-controls #fullscreenZoomIn:not(:disabled):hover,
#manufactureFullscreen#manufactureFullscreen.is-supplied-drawing .fullscreen-toolbar .fullscreen-zoom-controls #fullscreenZoomOut:not(:disabled):hover {
  background: var(--complete-action-gradient);
  border-color: rgb(var(--complete-border-rgb) / 0.82);
}

#settingsDialog [data-settings-tab][hidden],
#settingsSectionSelect option[hidden] {
  display: none;
}

.sidebar-action-menu .menu-support-button[hidden] {
  display: none;
}