/* Catalogue mock additions on top of the app's compiled CSS (app.css). Keep small. */
.ph { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden;
  background: radial-gradient(120% 80% at 30% 20%, rgb(255 255 255 / .35), transparent 55%), linear-gradient(160deg, var(--a, #e9dcd3), var(--b, #c9a99a)); }
.ph::after { content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg, rgb(255 255 255 / .06) 0 2px, transparent 2px 7px); }
.ph.sq { aspect-ratio: 1; }
.ph.wide { aspect-ratio: 16 / 7; }
.ph .ph-l { position: absolute; left: 8px; bottom: 8px; z-index: 1; font: 500 11px/16px var(--font-mono, monospace);
  letter-spacing: .03em; color: rgb(255 255 255 / .92); text-shadow: 0 1px 2px rgb(0 0 0 / .25); }
.swatch { display: inline-block; width: 14px; height: 14px; border-radius: 999px; background: var(--a); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12); vertical-align: -2px; }
.mono-id { font: 500 12.5px/18px var(--font-mono, monospace); color: var(--muted-foreground); }
.grid-sheet td, .grid-sheet th { border: 1px solid var(--border); padding: 6px 8px; font-size: 13px; white-space: nowrap; }
.grid-sheet td.sel { outline: 2px solid var(--primary); outline-offset: -2px; background: color-mix(in oklab, var(--primary) 6%, var(--background)); }
.grid-sheet td.changed { background: color-mix(in oklab, var(--warning) 12%, var(--background)); }
.grid-sheet td.bad { background: color-mix(in oklab, var(--destructive) 10%, var(--background)); }
.diff-old { color: var(--muted-foreground); text-decoration: line-through; }
.diff-new { color: var(--foreground); font-weight: 600; }
.wa-bubble { background: #dcf8c6; border-radius: 10px 10px 2px 10px; padding: 8px 10px; font-size: 13.5px; line-height: 19px; color: #111; }
/* Dialog scrim that covers the whole document, so full-page screenshots of dialog screens are dimmed top to bottom. */
body:has(> .scrim-doc) { position: relative; }
.scrim-doc { position: absolute; inset: 0; z-index: 50; background: var(--overlay-scrim); }