/* Stamp and comments panel, Option 2 (approved 2026-10-08, put live 2026-10-12). Scoped to #stampPanel (cards, tabs, colour editors, inspector) and the sheet overlays it controls. Ported from the approved prototype's cascade with the same class names (proto-acc, cv-acc, cv-chip, cv-strip, cv-slider ...). Not part of export-panel-mirror.css, so the Export screen is unchanged. Loaded after review-panel-v3.css. */ /* Stamp sections as cards: every section open, each in its own card. Controls keep their natural size inside the card instead of stretching to its width. */ html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel { container: o2panel / inline-size; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel > .stamp-controls#sidePanelStampPanel { display:grid !important; grid-template-columns:minmax(0,1fr) !important; grid-auto-rows:auto !important; gap:10px !important; align-content:start !important; align-items:stretch !important; padding-top:4px !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel > .stamp-controls#sidePanelStampPanel > details.proto-acc[hidden] { display:none !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel > .stamp-controls#sidePanelStampPanel > details.proto-acc:not([hidden]) { display:grid !important; align-self:stretch !important; align-content:start !important; gap:0 !important; padding:0 12px 10px !important; background:rgb(var(--surface-raised-rgb) / .55) !important; border:1px solid var(--border) !important; border-radius:10px !important; border-bottom:1px solid var(--border) !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel > .stamp-controls#sidePanelStampPanel > details.proto-acc > summary { border-bottom:1px solid rgb(var(--overlay-rgb) / .07) !important; margin-bottom:8px !important; padding:0 !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel > .stamp-controls#sidePanelStampPanel > details.proto-acc:not([open]) > summary { border-bottom:0 !important; margin-bottom:0 !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel > .stamp-controls#sidePanelStampPanel > details.proto-acc:not([open]) { padding-bottom:0 !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel > .stamp-controls#sidePanelStampPanel > details.proto-acc > section, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel > .stamp-controls#sidePanelStampPanel > details.proto-acc > section.stamp-section { padding:0 !important; gap:8px !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel > .stamp-controls#sidePanelStampPanel > details.proto-acc > .stamp-size-panel { margin:0 !important; } /* One column of full-width cards. Controls fill the card width. */ html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel > .stamp-controls#sidePanelStampPanel > details.proto-acc[data-acc="approval"] { order:1; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel > .stamp-controls#sidePanelStampPanel > details.proto-acc[data-acc="size"] { order:2; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel > .stamp-controls#sidePanelStampPanel > details.proto-acc[data-acc="date"] { order:3; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel > .stamp-controls#sidePanelStampPanel > details.proto-acc[data-acc="marks"] { order:4; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel > .stamp-controls#sidePanelStampPanel > details.proto-acc[data-acc="positions"] { order:5; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel .stamp-top-toggles { display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; gap:8px !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampLibraryTileGrid { grid-template-columns:repeat(3, minmax(0, 1fr)) !important; gap:10px !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampLibraryTileGrid .stamp-library-tile-select { height:auto !important; aspect-ratio:5 / 2 !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampLibraryTileGrid > .stamp-library-add { height:auto !important; align-self:stretch !important; margin:0 0 22px !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel > .stamp-controls#sidePanelStampPanel .stamp-size-panel { width:100% !important; max-width:none !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel > .stamp-controls#sidePanelStampPanel .stamp-size-grid { grid-template-columns:repeat(2, minmax(0, 1fr)) !important; gap:10px !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel > .stamp-controls#sidePanelStampPanel .stamp-save-row { max-width:none !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel > .stamp-controls#sidePanelStampPanel .manual-mark-panel > .stamp-action-row { grid-template-columns:repeat(2, minmax(0, 1fr)) !important; max-width:none !important; gap:10px !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel > .stamp-controls#sidePanelStampPanel .manual-mark-panel > .stamp-action-row.stamp-action-row-single { grid-template-columns:minmax(0, 1fr) !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel > .stamp-controls#sidePanelStampPanel .manual-mark-panel > details.advanced-controls { max-width:none !important; } /* Green Place tick button: white text and icon. */ html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #placeManualTick#placeManualTick, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #placeManualTick#placeManualTick * { color:#fff !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel :is(#placeManualTick, #placeManualCross)[aria-pressed="true"] { outline:2px solid #fff !important; outline-offset:2px !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel .saved-position-list { display:flex !important; flex-wrap:wrap !important; gap:6px !important; margin:0 !important; padding:0 !important; list-style:none !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel .saved-position-list button { height:28px !important; padding:0 10px !important; border-radius:6px !important; border:1px solid rgb(var(--accent-rgb) / .5) !important; background:rgb(var(--accent-rgb) / .14) !important; color:var(--text-strong) !important; font:600 11px/1 var(--font-body) !important; letter-spacing:.04em !important; text-transform:uppercase !important; cursor:var(--cursor-pointer) !important; } /* Marks is one card: the tick and cross icon pickers sit in it directly, no nested panel. */ html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel .manual-mark-panel > details.marks-icons-inline { display:block !important; padding:0 !important; margin:0 !important; border:0 !important; background:none !important; box-shadow:none !important; max-width:none !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel .manual-mark-panel > details.marks-icons-inline > summary { display:none !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel .manual-mark-panel > details.marks-icons-inline > .stamp-icon-selects { display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; gap:10px !important; padding:0 !important; margin:0 !important; border:0 !important; background:none !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel .manual-mark-panel > details.marks-icons-inline > .stamp-icon-selects > label { display:grid !important; gap:4px !important; font:700 10px/1.2 var(--font-body) !important; letter-spacing:.06em !important; text-transform:uppercase !important; color:var(--text-muted) !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel .manual-mark-panel > details.marks-icons-inline .custom-select-trigger { display:none !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel .manual-mark-panel > details.marks-icons-inline select.custom-select-native { position:static !important; display:block !important; width:100% !important; height:30px !important; min-height:30px !important; opacity:1 !important; clip:auto !important; clip-path:none !important; pointer-events:auto !important; margin:0 !important; padding:0 28px 0 10px !important; border:1px solid var(--border) !important; border-radius:6px !important; background:rgb(var(--bg-rgb) / .55) !important; color:var(--text-strong) !important; font:600 11px/1 var(--font-body) !important; letter-spacing:.04em !important; appearance:auto !important; } /* date-css */ /* Approval date card: on/off checkbox, then Position, Text and Colour groups with even spacing. */ html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure .date-pos-panel { display:grid !important; gap:12px !important; padding:2px 0 0 !important; margin:0 !important; border:0 !important; background:none !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure .date-enable-toggle { display:flex !important; align-items:center !important; gap:8px !important; margin:0 !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure .date-enable-toggle, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure .date-enable-toggle span { color:var(--text-strong) !important; opacity:1 !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure .date-body { display:grid !important; gap:14px !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure .date-body[hidden] { display:none !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure .manual-mark-hint { margin:0 !important; font-size:10px !important; line-height:1.4 !important; color:var(--text-muted) !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure .date-pos-tool { display:grid !important; grid-template-columns:minmax(0,1fr) !important; gap:14px !important; align-items:start !important; padding:0 !important; margin:0 !important; border:0 !important; background:none !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure .date-pos-stage { position:relative !important; justify-self:center !important; height:clamp(220px,26vh,300px) !important; width:auto !important; aspect-ratio:35/50 !important; max-width:100% !important; min-height:0 !important; border:1px solid var(--border) !important; border-radius:8px !important; background:#fff !important; overflow:hidden !important; touch-action:none !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure .date-pos-stamp { position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; object-fit:contain !important; pointer-events:none !important; opacity:.9 !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure .date-pos-marker { position:absolute !important; transform:translate(-50%,-50%) !important; white-space:nowrap !important; color:var(--stamp-date-color,#0B6FC3) !important; line-height:1 !important; padding:2px 3px !important; border:1px dashed rgb(var(--accent-rgb) / .8) !important; border-radius:3px !important; background:rgb(255 255 255 / .6) !important; cursor:var(--cursor-grab) !important; user-select:none !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure .date-pos-tool::before { content:none !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure .date-pos-tool > .date-pos-stage { box-shadow:0 0 0 6px rgb(var(--bg-rgb) / .5), 0 0 0 7px var(--border) !important; margin:7px 0 !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure .date-grp { display:grid !important; gap:8px !important; padding:0 !important; margin:0 !important; min-width:0 !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure .date-grp + .date-grp { padding-top:12px !important; border-top:1px solid rgb(var(--accent-rgb) / .14) !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure .date-grp-label { font:800 10px/1 var(--font-body) !important; letter-spacing:.1em !important; text-transform:uppercase !important; color:var(--accent-text) !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure .date-grp-row { display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; gap:8px 10px !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure .date-grp label { display:grid !important; gap:5px !important; min-width:0 !important; margin:0 !important; font:700 10px/1.2 var(--font-body) !important; letter-spacing:.06em !important; text-transform:uppercase !important; color:var(--text-muted) !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure .date-grp input[type=number], html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure .date-grp select.custom-select-native { position:static !important; display:block !important; width:100% !important; height:32px !important; min-height:32px !important; opacity:1 !important; clip:auto !important; clip-path:none !important; pointer-events:auto !important; margin:0 !important; padding:0 8px !important; border:1px solid var(--border) !important; border-radius:6px !important; background:rgb(var(--bg-rgb) / .55) !important; color:var(--text-strong) !important; font:600 12px/1 var(--font-body) !important; appearance:auto !important; box-sizing:border-box !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure .date-grp .custom-select-trigger { display:none !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure .date-pos-actions button, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure .date-foot button { width:100% !important; height:32px !important; min-height:32px !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure .date-colour-row { display:grid !important; grid-template-columns:32px 32px auto minmax(0,1fr) !important; align-items:center !important; gap:8px !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure .date-colour-row input[type=color] { width:32px !important; height:32px !important; padding:0 !important; border:1px solid var(--border) !important; border-radius:6px !important; background:none !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure #dateColorValue { font:600 11px/1 var(--font-body) !important; color:var(--text-strong) !important; letter-spacing:.04em !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure #dateColorDropper { width:32px !important; height:32px !important; min-height:32px !important; padding:0 !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure .date-palette-row { grid-column:1 / -1 !important; display:flex !important; justify-content:space-between !important; gap:6px !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure .date-palette-row .comment-colour-swatch { width:24px !important; height:24px !important; min-width:24px !important; padding:0 !important; border-radius:50% !important; border:1px solid var(--border) !important; background:var(--swatch-color) !important; font-size:0 !important; color:transparent !important; overflow:hidden !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure .date-palette-row .comment-colour-swatch[aria-pressed=true] { outline:2px solid var(--accent) !important; outline-offset:2px !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure .date-foot { display:flex !important; justify-content:flex-end !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure .date-foot button { width:auto !important; padding:0 18px !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure .date-grp label.date-pos-colour { font:0/0 a !important; gap:0 !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure .date-pos-fields.date-grp { grid-template-columns:minmax(0,1fr) !important; align-content:start !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure .date-palette-row { justify-content:flex-start !important; gap:8px !important; flex-wrap:wrap !important; } /* colour-css */ html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure #stampDateBody#stampDateBody label.date-slider.date-slider input[type=range]::-webkit-slider-runnable-track { background:transparent !important; border:0 !important; height:12px !important; } /* Date colour: picker, hex and dropper on one row, then the app's R / G / B / Dark to light sliders. */ html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure #stampDateBody#stampDateBody .date-colour-row.date-colour-row { display:grid !important; grid-template-columns:32px 32px minmax(0,1fr) !important; align-items:center !important; gap:8px 8px !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure #stampDateBody#stampDateBody .date-sliders.date-sliders { grid-column:1 / -1 !important; display:grid !important; gap:10px !important; margin-top:4px !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure #stampDateBody#stampDateBody label.date-slider.date-slider { display:grid !important; grid-template-columns:96px minmax(0,1fr) 34px !important; align-items:center !important; gap:10px !important; margin:0 !important; font:700 10px/1 var(--font-body) !important; letter-spacing:.06em !important; text-transform:uppercase !important; color:var(--accent-text) !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure #stampDateBody#stampDateBody label.date-slider.date-slider .appearance-slider-name { color:var(--accent-text) !important; white-space:nowrap !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure #stampDateBody#stampDateBody label.date-slider.date-slider output { font:600 12px/1 var(--font-body) !important; color:#fff !important; text-align:right !important; font-variant-numeric:tabular-nums !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure #stampDateBody#stampDateBody label.date-slider.date-slider input[type=range] { -webkit-appearance:none !important; appearance:none !important; display:block !important; width:100% !important; height:12px !important; min-height:0 !important; margin:0 !important; padding:0 !important; border:1px solid var(--border) !important; border-radius:999px !important; background:var(--track,linear-gradient(90deg,#000,#fff)) !important; cursor:pointer !important; opacity:1 !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure #stampDateBody#stampDateBody label.date-slider.date-slider input[type=range]::-webkit-slider-thumb { -webkit-appearance:none !important; width:18px !important; height:18px !important; border-radius:50% !important; background:#fff !important; border:2px solid rgb(0 0 0 / .45) !important; box-shadow:0 1px 3px rgb(0 0 0 / .4) !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure #stampDateBody#stampDateBody label.date-slider.date-slider input[type=range]::-moz-range-thumb { width:16px !important; height:16px !important; border-radius:50% !important; background:#fff !important; border:2px solid rgb(0 0 0 / .45) !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure #stampDateBody#stampDateBody label.date-slider.date-slider input[type=range]:focus-visible { outline:2px solid var(--accent) !important; outline-offset:2px !important; } /* axis-css */ /* Center X / Center Y in the app's axis marker colours: X (across, width) green, Y (down, height) blue. */ html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure #stampDateBody#stampDateBody #datePosCenterX#datePosCenterX { background:var(--oa-width-marker,#21b56b) !important; border-color:var(--oa-width-marker,#21b56b) !important; color:#fff !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure #stampDateBody#stampDateBody #datePosCenterY#datePosCenterY { background:var(--oa-height-marker,#2e7ff2) !important; border-color:var(--oa-height-marker,#2e7ff2) !important; color:#fff !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure #stampDateBody#stampDateBody :is(#datePosCenterX,#datePosCenterY):hover { filter:brightness(1.1) !important; } /* Date colour spans the card: dropper | full-width colour bar | hex, then each slider as name + value over a full-width track. */ html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure #stampDateBody#stampDateBody .date-colour-row.date-colour-row.date-colour-row { grid-template-columns:32px minmax(0,1fr) 84px !important; width:100% !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure #stampDateBody#stampDateBody .date-colour-row input#dateColor#dateColor { width:100% !important; height:32px !important; padding:2px !important; border-radius:8px !important; cursor:pointer !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure #stampDateBody#stampDateBody .date-colour-row input#dateColor#dateColor::-webkit-color-swatch-wrapper { padding:0 !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure #stampDateBody#stampDateBody .date-colour-row input#dateColor#dateColor::-webkit-color-swatch { border:0 !important; border-radius:6px !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure #stampDateBody#stampDateBody #dateColorValue#dateColorValue { display:flex !important; align-items:center !important; justify-content:center !important; height:32px !important; box-sizing:border-box !important; border:1px solid var(--border) !important; border-radius:6px !important; background:rgb(var(--bg-rgb) / .55) !important; color:#fff !important; font:600 12px/1 var(--font-body) !important; letter-spacing:.04em !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure #stampDateBody#stampDateBody label.date-slider.date-slider.date-slider { grid-template-columns:minmax(0,1fr) auto !important; grid-template-areas:"name out" "range range" !important; row-gap:6px !important; column-gap:10px !important; width:100% !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure #stampDateBody#stampDateBody label.date-slider.date-slider.date-slider > .appearance-slider-name { grid-area:name !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure #stampDateBody#stampDateBody label.date-slider.date-slider.date-slider > output { grid-area:out !important; width:auto !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure #stampDateBody#stampDateBody label.date-slider.date-slider.date-slider > input[type=range] { grid-area:range !important; width:100% !important; } /* span-css */ /* Date colour spans the card: dropper | full-width colour bar | hex, then each slider as name + value over a full-width track. */ html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure #stampDateBody#stampDateBody .date-colour-row.date-colour-row.date-colour-row { grid-template-columns:32px minmax(0,1fr) 84px !important; width:100% !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure #stampDateBody#stampDateBody .date-colour-row input#dateColor#dateColor { width:100% !important; height:32px !important; padding:2px !important; border-radius:8px !important; cursor:pointer !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure #stampDateBody#stampDateBody .date-colour-row input#dateColor#dateColor::-webkit-color-swatch-wrapper { padding:0 !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure #stampDateBody#stampDateBody .date-colour-row input#dateColor#dateColor::-webkit-color-swatch { border:0 !important; border-radius:6px !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure #stampDateBody#stampDateBody #dateColorValue#dateColorValue { width:100% !important; min-width:0 !important; justify-self:stretch !important; display:flex !important; align-items:center !important; justify-content:center !important; height:32px !important; box-sizing:border-box !important; border:1px solid var(--border) !important; border-radius:6px !important; background:rgb(var(--bg-rgb) / .55) !important; color:#fff !important; font:600 12px/1 var(--font-body) !important; letter-spacing:.04em !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure #stampDateBody#stampDateBody label.date-slider.date-slider.date-slider { grid-template-columns:minmax(0,1fr) auto !important; grid-template-areas:"name out" "range range" !important; row-gap:6px !important; column-gap:10px !important; width:100% !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure #stampDateBody#stampDateBody label.date-slider.date-slider.date-slider > .appearance-slider-name { grid-area:name !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure #stampDateBody#stampDateBody label.date-slider.date-slider.date-slider > output { grid-area:out !important; width:auto !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampDateDisclosure#stampDateDisclosure #stampDateBody#stampDateBody label.date-slider.date-slider.date-slider > input[type=range] { grid-area:range !important; width:100% !important; } /* tabs-css */ /* Comments tab: hide the stamp cards (the one-column grid rule above would otherwise keep them showing). */ html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] > .stamp-controls#sidePanelStampPanel#sidePanelStampPanel { display:none !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] > .comment-controls#sidePanelCommentsPanel#sidePanelCommentsPanel { display:none !important; } /* cursors-css: blue versions of the remaining standard cursors (same style as --cursor-arrow). Hotspots in the var, keyword fallback after. */ :root { --cursor-move-4way: 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='M16 3v26M3 16h26M16 3l-5 5M16 3l5 5M16 29l-5-5M16 29l5-5M3 16l5-5M3 16l5 5M29 16l-5-5M29 16l-5 5' fill='none' stroke='%23040912' stroke-width='7.2' stroke-linecap='round' stroke-linejoin='round' opacity='.5' transform='translate%281.2 1.2%29'/%3E%3Cpath d='M16 3v26M3 16h26M16 3l-5 5M16 3l5 5M16 29l-5-5M16 29l5-5M3 16l5-5M3 16l5 5M29 16l-5-5M29 16l-5 5' fill='none' stroke='%23fff' stroke-width='5.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16 3v26M3 16h26M16 3l-5 5M16 3l5 5M16 29l-5-5M16 29l5-5M3 16l5-5M3 16l5 5M29 16l-5-5M29 16l-5 5' fill='none' stroke='%232e7ff2' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 16 16, move; --cursor-not-allowed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='17.2' cy='17.2' r='11' fill='none' stroke='%23040912' stroke-width='6' opacity='.5'/%3E%3Ccircle cx='16' cy='16' r='11' fill='none' stroke='%23fff' stroke-width='6'/%3E%3Ccircle cx='16' cy='16' r='11' fill='none' stroke='%232e7ff2' stroke-width='3.6'/%3E%3Cpath d='M8.5 23.5 23.5 8.5' fill='none' stroke='%23040912' stroke-width='6' stroke-linecap='round' stroke-linejoin='round' opacity='.5' transform='translate%281.2 1.2%29'/%3E%3Cpath d='M8.5 23.5 23.5 8.5' fill='none' stroke='%23fff' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.5 23.5 23.5 8.5' fill='none' stroke='%232e7ff2' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 16 16, not-allowed; } /* Comment panel layouts v2: simpler. html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel = high-specificity prefix (Comments tab only). */ html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel { --cv-bg:#0b0e13; --cv-card:rgb(var(--surface-raised-rgb) / .55); --cv-line:rgb(var(--overlay-rgb) / .07); display:flex !important; flex-direction:column !important; gap:0 !important; padding:0 4px 16px 0 !important; overflow-x:hidden !important; overflow-y:auto !important; } /* ---- shared base ---- */ html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-tab-panel { display:flex !important; flex-direction:column !important; flex:1 0 auto !important; gap:16px !important; padding:0 !important; margin:0 !important; overflow:visible !important; min-height:0 !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-acc { display:contents; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-acc::details-content { display:contents; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-acc > summary { display:none; list-style:none; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-acc > summary::-webkit-details-marker, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-more > summary::-webkit-details-marker { display:none; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-action-status:empty { display:none !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-action-status { margin:0 !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-action-row[hidden] { display:none !important; } /* compact Add / Remove, side by side */ html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-action-row { display:flex !important; gap:8px !important; justify-content:flex-start !important; margin:0 !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-action-row button { flex:0 0 auto !important; width:auto !important; min-width:0 !important; height:36px !important; min-height:36px !important; padding:0 14px !important; font-size:12px !important; letter-spacing:.04em; border-radius:8px !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-action-row button svg { width:14px; height:14px; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel #addCommentButton[aria-pressed="true"] { background:var(--accent-action-gradient) !important; color:var(--on-colour-button, #fff) !important; border-color:rgb(var(--accent-rgb) / .85) !important; box-shadow:0 0 0 2px rgb(var(--accent-rgb) / .3) !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-template-save { height:30px !important; min-height:30px !important; font-size:11.5px !important; width:auto !important; padding:0 14px !important; align-self:flex-start; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-template-section, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-sheet-section { display:flex !important; flex-direction:column !important; gap:8px !important; padding:0 !important; margin:0 !important; border:0 !important; background:none !important; min-width:0; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .stamp-section-label, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .panel-label { margin:0 !important; font:800 11px/1.2 var(--font-head) !important; letter-spacing:.08em !important; text-transform:uppercase !important; color:var(--accent-text) !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-template-section .saved-list-empty { margin:0 !important; font-size:11.5px !important; line-height:1.35 !important; color:var(--text-muted) !important; text-transform:none !important; letter-spacing:0 !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-template-section .saved-list[hidden] { display:none !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .saved-list { display:flex; flex-wrap:wrap; gap:6px; margin:0; } /* Templates: a real, collapsed disclosure in every layout */ html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-w-tpl { display:block; padding:0; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-w-tpl::details-content { display:block; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-w-tpl > summary { display:flex; align-items:center; justify-content:space-between; padding:7px 0; font:800 11px/1.2 var(--font-head); letter-spacing:.08em; text-transform:uppercase; color:var(--accent-text); cursor:pointer; border-top:1px solid var(--cv-line); } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-w-tpl[open] > summary { margin-bottom:6px; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-w-tpl .stamp-section-label { display:none !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-w-tpl > summary::after, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-more > summary::after { content:""; width:6px; height:6px; margin:0 3px 3px 0; border-right:2px solid var(--text-muted); border-bottom:2px solid var(--text-muted); transform:rotate(45deg); } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-w-tpl[open] > summary::after, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-more[open] > summary::after { transform:rotate(-135deg); margin-bottom:-2px; } /* Style: essentials (font, size, text colour) + one collapsed "More style" */ html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel details.advanced-controls { width:100% !important; margin:0 !important; padding:0 !important; border:0 !important; background:none !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel details.advanced-controls > summary { display:none !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-style-grid { border:0 !important; background:none !important; box-shadow:none !important; border-radius:0 !important; display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; gap:16px 12px !important; align-items:end !important; padding:0 !important; margin:0 !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-style-grid > * { min-width:0 !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-style-grid > .comment-palette-control, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-style-grid > .cv-more { grid-column:1 / -1 !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-style-grid label:not(.toggle) { display:grid !important; gap:3px !important; margin:0 !important; font:700 10.5px/1.2 var(--font-head) !important; letter-spacing:.06em !important; text-transform:uppercase !important; color:var(--text-muted) !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-style-grid .comment-size-label { display:block !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-style-grid .comment-size-control { display:grid !important; grid-template-columns:30px minmax(0,1fr) 30px !important; gap:4px !important; margin:0 !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-style-grid .comment-size-step { min-height:30px !important; height:30px !important; font-size:16px !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-style-grid input[type="number"], html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-style-grid select { min-height:30px !important; height:30px !important; padding-top:0 !important; padding-bottom:0 !important; font-size:13px !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-style-grid .custom-select-trigger { min-height:30px !important; height:30px !important; font-size:12px !important; padding-top:0 !important; padding-bottom:0 !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-palette-control { display:flex !important; align-items:center !important; gap:10px !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-palette-control .panel-label { flex:0 0 84px; white-space:nowrap; color:var(--text-muted) !important; font-size:10.5px !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-palette-row { display:flex !important; flex-wrap:wrap !important; align-items:center !important; gap:6px !important; margin:0 !important; min-width:0; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-palette-row .comment-colour-swatch { width:22px !important; height:22px !important; min-width:22px !important; min-height:22px !important; padding:0 !important; border-radius:50% !important; font-size:0 !important; color:transparent !important; cursor:pointer; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-palette-row .comment-colour-swatch::before { border-radius:50% !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-palette-row .comment-colour-swatch.is-active { outline:2px solid var(--accent); outline-offset:2px; box-shadow:none !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-palette-row strong { margin-left:2px; font:700 10.5px/1 var(--font-head); letter-spacing:.04em; color:var(--text-muted); } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-more > summary { display:flex; align-items:center; justify-content:space-between; padding:6px 0 2px; font:800 10.5px/1.2 var(--font-head); letter-spacing:.08em; text-transform:uppercase; color:var(--accent-text); cursor:pointer; list-style:none; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-more-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; padding-top:6px; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-option-toggles { display:flex !important; flex-wrap:wrap !important; gap:4px 16px !important; padding:0 !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-option-toggles .toggle { display:flex !important; flex-direction:row !important; align-items:center !important; gap:8px !important; height:auto !important; min-height:26px !important; margin:0 !important; font:600 12px/1.2 var(--font-body, inherit) !important; letter-spacing:0 !important; text-transform:none !important; color:var(--text) !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-option-toggles .pill-line { display:inline !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-align-control { display:flex !important; align-items:center !important; gap:10px !important; margin:0 !important; padding:0 !important; border:0 !important; min-width:0; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-align-control legend { float:left; width:84px; padding:0; font:700 10.5px/1.2 var(--font-head); letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-align-options { display:flex !important; gap:4px !important; flex:1; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-align-options label { flex:1; font-size:11px !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-align-options label > span { min-height:28px !important; height:28px !important; padding:0 6px !important; display:grid; place-items:center; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-position-grid { display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:8px !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-position-grid label { font-size:10px !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-position-grid .size-input-row { display:flex !important; align-items:center !important; min-height:30px !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-position-grid .size-input-row input { min-height:28px !important; height:28px !important; width:100% !important; min-width:0 !important; padding:0 4px !important; font-size:13px !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-position-grid .size-input-row span { padding-right:4px !important; font-size:10px !important; } /* records */ html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-records { display:flex !important; flex-direction:column !important; gap:8px !important; max-height:none !important; min-height:0 !important; margin:0 !important; padding:0 !important; overflow-x:visible !important; overflow-y:visible !important; flex:0 0 auto !important; scrollbar-gutter:auto !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-record { display:grid !important; grid-template-columns:26px minmax(0,1fr) auto !important; align-items:center !important; gap:12px !important; padding:8px 12px !important; margin:0 !important; border:1px solid var(--border) !important; border-radius:8px !important; background:rgb(var(--overlay-rgb) / .035) !important; min-height:44px !important; cursor:pointer; text-align:left; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-record b { width:22px !important; height:22px !important; font-size:12px !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-record-copy { display:contents !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-record-copy strong { grid-column:2; grid-row:1; font-size:12.5px !important; font-weight:600 !important; line-height:1.3 !important; letter-spacing:0 !important; text-transform:none !important; color:var(--text-strong, #fff) !important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-record-copy small { grid-column:3; grid-row:1; display:block; width:11px; height:11px; border-radius:50%; font-size:0 !important; overflow:hidden; background:var(--cv-dot, var(--accent)); box-shadow:0 0 0 1px rgb(var(--overlay-rgb) / .3); } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-record.is-active { background:rgb(var(--accent-rgb) / .16) !important; border-color:rgb(var(--accent-rgb) / .75) !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-records:empty::before { content:"Drag on the drawing to add a comment"; display:block; padding:16px 12px; font-size:12px; color:var(--text-muted); text-align:center; border:1px dashed var(--border); border-radius:8px; } /* ============ CARDS ============ */ html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-w-add, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-w-com { display:grid; align-content:start; gap:0; padding:0 16px 16px; background:var(--cv-card); border:1px solid var(--border); border-radius:10px; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-w-add::details-content, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-w-com::details-content { display:block; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-w-add > summary, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-w-com > summary { display:flex; align-items:center; margin:0 0 16px; padding:14px 0 12px; border-bottom:1px solid var(--cv-line); font:800 11px/1.2 var(--font-head); letter-spacing:.08em; text-transform:uppercase; color:var(--text-strong, #fff); pointer-events:none; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-w-add { gap:16px; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-w-add .comment-action-row[hidden] { display:none !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-w-add > summary { margin:0; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-w-add .comment-action-row { display:grid !important; grid-template-columns:1fr 1fr !important; gap:8px !important; margin:0 !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-w-add .comment-action-row button { width:100% !important; min-width:0 !important; padding:0 8px !important; justify-content:center; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-w-add details.advanced-controls { padding:16px 0 0 !important; border-top:0 !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-w-add .comment-style-grid { grid-template-columns:minmax(0,1fr) 132px !important; gap:16px !important; align-items:start !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-w-add .comment-style-grid label:not(.toggle) { gap:8px !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-w-add .comment-style-grid input[type="number"], html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-w-add .comment-style-grid select, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-w-add .comment-style-grid .custom-select-trigger, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-w-add .comment-style-grid .comment-size-step { height:36px !important; min-height:36px !important; box-sizing:border-box !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-w-add .comment-style-grid .comment-size-control { grid-template-columns:36px minmax(0,1fr) 36px !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-w-add .comment-palette-control { display:grid !important; gap:8px !important; align-items:start !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-w-add .comment-palette-control .panel-label { flex:none; font:700 10.5px/1.2 var(--font-head) !important; letter-spacing:.06em !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-w-add .comment-palette-row { flex-wrap:nowrap !important; gap:6px !important; min-height:36px; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-w-add .comment-palette-row strong { margin-left:auto; padding-left:8px; white-space:nowrap; align-self:center; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-w-add .comment-style-grid > .cv-more { margin:0 -0px; padding-top:0; border-top:1px solid var(--cv-line); } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-w-add .cv-more > summary { padding:16px 0 0; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-w-add .cv-more-grid { padding-top:16px; gap:16px; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-w-com .stamp-section-label { display:none !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-w-tpl { padding:0 16px; background:var(--cv-card); border:1px solid var(--border); border-radius:10px; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-w-tpl > summary { border-top:0; padding:14px 0; color:var(--text-strong, #fff); } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-w-tpl[open] { padding-bottom:16px; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-w-tpl[open] > summary { margin-bottom:12px; } /* Colour editors: square swatch | vertical Dark to light strip | R / G / B rows. One shared track look: 14px thick, 1px border, 20px white thumb. */ html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-palette-row.cv-colour-row, html #settingsPanelStamp#settingsPanelStamp .ss-card .comment-palette-row.cv-colour-row { display:grid !important; grid-template-columns:96px 36px minmax(0,1fr) !important; column-gap:12px !important; row-gap:0 !important; align-items:start !important; min-height:0 !important; padding:0 !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-colour-row .cv-chip, html #settingsPanelStamp#settingsPanelStamp .ss-card .cv-colour-row .cv-chip { width:96px !important; height:96px !important; aspect-ratio:1 / 1; align-self:start; display:flex; align-items:flex-end; justify-content:space-between; box-sizing:border-box; padding:0 8px 6px; border-radius:8px; border:1px solid var(--border); box-shadow:inset 0 0 0 1px rgb(128 128 128 / .3), inset 0 1px 3px rgb(0 0 0 / .25); transition:background-color 150ms ease, background 150ms ease; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-colour-row .cv-chip > strong, html #settingsPanelStamp#settingsPanelStamp .ss-card .cv-colour-row .cv-chip > strong, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-colour-row .cv-chip > .cv-lval, html #settingsPanelStamp#settingsPanelStamp .ss-card .cv-colour-row .cv-chip > .cv-lval { margin:0 !important; padding:0 !important; align-self:flex-end !important; text-align:center; font:600 10px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; letter-spacing:0 !important; color:#fff !important; transition:color 150ms ease; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-colour-row .cv-chip[data-ink="dark"] > strong, html #settingsPanelStamp#settingsPanelStamp .ss-card .cv-colour-row .cv-chip[data-ink="dark"] > strong, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-colour-row .cv-chip[data-ink="dark"] > .cv-lval, html #settingsPanelStamp#settingsPanelStamp .ss-card .cv-colour-row .cv-chip[data-ink="dark"] > .cv-lval { color:#10151c !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-colour-row .cv-lcol, html #settingsPanelStamp#settingsPanelStamp .ss-card .cv-colour-row .cv-lcol { display:grid; justify-items:center; align-content:start; gap:8px; width:36px; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-colour-row .cv-strip, html #settingsPanelStamp#settingsPanelStamp .ss-card .cv-colour-row .cv-strip { position:relative; display:block; width:14px; height:96px; box-sizing:border-box; border:1px solid var(--border); border-radius:999px; background:linear-gradient(0deg,#000,#fff); cursor:pointer; touch-action:none; outline:none; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-colour-row .cv-strip:focus-visible, html #settingsPanelStamp#settingsPanelStamp .ss-card .cv-colour-row .cv-strip:focus-visible { outline:2px solid var(--accent); outline-offset:3px; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-colour-row .cv-mark, html #settingsPanelStamp#settingsPanelStamp .ss-card .cv-colour-row .cv-mark { position:absolute; left:50%; top:0; box-sizing:border-box; width:20px; height:20px; margin:-10px 0 0 -10px; border-radius:50%; background:#fff; border:2px solid rgb(0 0 0 / .45); box-shadow:0 1px 3px rgb(0 0 0 / .4); pointer-events:none; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-colour-row .cv-sliders, html #settingsPanelStamp#settingsPanelStamp .ss-card .cv-colour-row .cv-sliders { display:grid !important; grid-template-rows:repeat(3,20px) !important; align-content:space-between !important; align-items:center !important; gap:0 !important; height:96px !important; min-width:0; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel label.cv-slider.cv-slider, html #settingsPanelStamp#settingsPanelStamp .ss-card label.cv-slider.cv-slider { display:grid !important; grid-template-columns:14px minmax(0,1fr) 28px !important; grid-template-areas:"name track out" !important; align-items:center !important; gap:10px !important; margin:0 !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel label.cv-slider.cv-slider.cv-lgone, html #settingsPanelStamp#settingsPanelStamp .ss-card label.cv-slider.cv-slider.cv-lgone { display:none !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel label.cv-slider.cv-slider .appearance-slider-name, html #settingsPanelStamp#settingsPanelStamp .ss-card label.cv-slider.cv-slider .appearance-slider-name { grid-area:name !important; color:var(--text-muted) !important; font:600 10.5px/1 var(--font-head) !important; letter-spacing:.04em !important; text-transform:uppercase !important; white-space:nowrap !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel label.cv-slider.cv-slider output, html #settingsPanelStamp#settingsPanelStamp .ss-card label.cv-slider.cv-slider output { grid-area:out !important; color:var(--text-muted) !important; font:500 11px/1 var(--font-body) !important; text-align:right !important; font-variant-numeric:tabular-nums !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel label.cv-slider.cv-slider input[type=range], html #settingsPanelStamp#settingsPanelStamp .ss-card label.cv-slider.cv-slider input[type=range] { grid-area:track !important; -webkit-appearance:none !important; appearance:none !important; display:block !important; width:100% !important; height:14px !important; min-height:0 !important; box-sizing:border-box !important; margin:0 !important; padding:0 !important; border:1px solid var(--border) !important; border-radius:999px !important; background:var(--track,linear-gradient(90deg,#000,#fff)) !important; cursor:pointer !important; opacity:1 !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel label.cv-slider.cv-slider input[type=range]::-webkit-slider-runnable-track, html #settingsPanelStamp#settingsPanelStamp .ss-card label.cv-slider.cv-slider input[type=range]::-webkit-slider-runnable-track { background:transparent !important; border:0 !important; height:14px !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel label.cv-slider.cv-slider input[type=range]::-webkit-slider-thumb, html #settingsPanelStamp#settingsPanelStamp .ss-card label.cv-slider.cv-slider input[type=range]::-webkit-slider-thumb { -webkit-appearance:none !important; box-sizing:border-box !important; width:20px !important; height:20px !important; margin-top:-3px !important; border-radius:50% !important; background:#fff !important; border:2px solid rgb(0 0 0 / .45) !important; box-shadow:0 1px 3px rgb(0 0 0 / .4) !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel label.cv-slider.cv-slider input[type=range]::-moz-range-thumb, html #settingsPanelStamp#settingsPanelStamp .ss-card label.cv-slider.cv-slider input[type=range]::-moz-range-thumb { box-sizing:border-box !important; width:20px !important; height:20px !important; border-radius:50% !important; background:#fff !important; border:2px solid rgb(0 0 0 / .45) !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel label.cv-slider.cv-slider input[type=range]:focus-visible, html #settingsPanelStamp#settingsPanelStamp .ss-card label.cv-slider.cv-slider input[type=range]:focus-visible { outline:2px solid var(--accent) !important; outline-offset:2px !important; } /* Heading block and tab bar never shrink, so the tab bar sits at the same top on both tabs (the Stamp tab's tall content used to squeeze the heading). */ html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel > .stamp-panel-top, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel > .proto-two-tabs { flex:0 0 auto !important; } /* More style: sub-headings, 2-column stepper rows, border colour, opacity, pointer tail */ html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-more-grid { gap:16px !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-sub { display:block; padding-top:12px; border-top:1px solid var(--cv-line); font:800 10.5px/1 var(--font-head); letter-spacing:.1em; text-transform:uppercase; color:var(--accent-text); } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-more-grid > .cv-sub:first-child { border-top:0; padding-top:0; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-opt-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; align-items:start; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-opt-grid > label { display:grid; gap:8px; min-width:0; font:700 10.5px/1.2 var(--font-head); letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-opt-grid .comment-size-control { display:grid; grid-template-columns:36px minmax(0,1fr) 36px; gap:4px; margin:0; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-opt-grid .comment-size-step { height:36px; min-height:36px; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-opt-grid input[type="number"] { height:36px; min-height:36px; box-sizing:border-box; text-align:center; padding:0 4px; font-size:13px; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-style-seg .comment-align-options { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-style-seg .comment-align-options label > span { font-size:9.5px; letter-spacing:0 !important; padding:0 2px !important; white-space:nowrap; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-style-seg .comment-align-options label:nth-child(1) > span { font-weight:900; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-style-seg .comment-align-options label:nth-child(2) > span { font-style:italic; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-style-seg .comment-align-options label:nth-child(3) > span { text-decoration:underline; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-bcol, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-opwrap { display:grid; gap:8px; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-bcol .panel-label, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-opwrap .panel-label { color:var(--text-muted) !important; font:700 10.5px/1.2 var(--font-head) !important; letter-spacing:.06em !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-bcrow { display:flex; align-items:center; gap:12px; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-bcrow input[type="color"] { width:56px; height:36px; padding:2px; box-sizing:border-box; border:1px solid var(--border); border-radius:8px; background:rgb(var(--overlay-rgb) / .04); cursor:pointer; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-bcrow strong { font:600 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color:var(--text-muted); } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel label.cv-slider.cv-slider.cv-op, html #settingsPanelStamp#settingsPanelStamp .ss-card label.cv-slider.cv-slider.cv-op { grid-template-columns:minmax(0,1fr) 40px !important; grid-template-areas:"track out" !important; } /* Orange comments: the Comments tab and its panel use the app's comment colour instead of blue (scoped token override). */ html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel { --accent:#E8943A; --accent-rgb:232 148 58; --accent-text:#E8943A; --accent-hover:#EA9F4E; --accent-deep:#BE7930; --accent-deep-rgb:190 121 48; --accent-border:#EA9F4E; --accent-border-rgb:234 159 78; --accent-button:#E8943A; --accent-button-rgb:232 148 58; --accent-button-hover:#EA9F4E; --accent-button-press:#BE7930; --accent-button-press-rgb:190 121 48; --accent-button-highlight:#EA9F4E; --accent-ink:#10151C; --accent-ink-rgb:16 21 28; --accent-marker-ink:#10151C; --accent-action-gradient:linear-gradient(180deg,#EA9F4E,#E8943A 48%,#BE7930); --comment-accent:#E8943A; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #sidePanelCommentsTab[aria-selected="true"] { background-image:linear-gradient(180deg,#C4701A,#B35E0C 55%,#9C500A) !important; color:#FFFFFF !important; border-color:transparent !important; box-shadow:0 2px 8px rgb(var(--comment-accent-rgb) / .35), inset 0 1px 0 rgb(255 255 255 / .2) !important; text-shadow:0 1px 1px rgb(0 0 0 / .25) !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #sidePanelCommentsTab[aria-selected="true"]:hover { background-image:linear-gradient(180deg,#CE7A24,#BC6510 55%,#A4550D) !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #sidePanelCommentsTab[aria-selected="true"]:active { background-image:linear-gradient(180deg,#9C500A,#8E4809) !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #sidePanelCommentsTab[aria-selected="false"] { color:#8D96A2 !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #sidePanelCommentsTab:focus-visible { outline:2px solid var(--comment-accent) !important; outline-offset:2px !important; } /* badge: flush with the box's left edge, its bottom edge 1 mm (100cqw/297) above the box top; resize circles float 2 mm clear of the box edge */ /* ---- Comments tab: sheet area + Export now orange; square corners on the drawing section ---- */ html body[data-has~="stamp-comments"]:not(#has-pad) #stampScreen#stampScreen .stamp-canvas { --accent:#E8943A; --accent-rgb:232 148 58; --accent-text:#E8943A; --accent-hover:#EA9F4E; --accent-deep:#BE7930; --accent-deep-rgb:190 121 48; --accent-border:#EA9F4E; --accent-border-rgb:234 159 78; --accent-button:#E8943A; --accent-button-rgb:232 148 58; --accent-button-hover:#EA9F4E; --accent-button-press:#BE7930; --accent-button-press-rgb:190 121 48; --accent-button-highlight:#EA9F4E; --accent-ink:#10151C; --accent-ink-rgb:16 21 28; --accent-marker-ink:#10151C; --accent-action-gradient:linear-gradient(180deg,#EA9F4E,#E8943A 48%,#BE7930); --comment-accent:#E8943A; } html body[data-has~="stamp-comments"]:not(#has-pad) #stampScreen#stampScreen .stamp-canvas .stamp-widget, html body[data-has~="stamp-comments"]:not(#has-pad) #stampScreen#stampScreen .stamp-canvas .stamp-widget * { --accent:#0B6FC3; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #commentsDoneButton { background:linear-gradient(180deg,#C4701A,#B35E0C 55%,#9C500A) !important; color:#FFFFFF !important; border-color:transparent !important; box-shadow:0 2px 8px rgb(var(--comment-accent-rgb, 232 148 58) / .35), inset 0 1px 0 rgb(255 255 255 / .2) !important; text-shadow:0 1px 1px rgb(0 0 0 / .25) !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #commentsDoneButton:hover:not(:disabled) { background:linear-gradient(180deg,#CE7A24,#BC6510 55%,#A4550D) !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #commentsDoneButton:active:not(:disabled) { background:linear-gradient(180deg,#9C500A,#8E4809) !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #commentsDoneButton:focus-visible { outline:2px solid var(--comment-accent, #E8943A) !important; outline-offset:2px !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] .stamp-panel-heading { border-bottom-color:rgb(232 148 58 / .55) !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] .stamp-panel-heading small { color:#E8943A !important; } html body[data-has~="stamp-comments"]:not(#has-pad) #stampScreen#stampScreen .stamp-canvas > header.stamp-pane-header { background:rgb(232 148 58 / .14) !important; } html body[data-has~="stamp-comments"]:not(#has-pad) #stampScreen#stampScreen #stampPaneLabel { color:#F0AE6B !important; } html body[data-has~="stamp-comments"]:not(#has-pad) #stampScreen#stampScreen .sheet-page-button, html body[data-has~="stamp-comments"]:not(#has-pad) #stampScreen#stampScreen .sheet-page-button:disabled, html body[data-has~="stamp-comments"]:not(#has-pad) #stampScreen#stampScreen .sheet-page-button:hover { border-color:rgb(232 148 58 / .82) !important; } html body[data-has~="stamp-comments"]:not(#has-pad) #stampScreen#stampScreen #stampZoomOut#stampZoomOut#stampZoomOut, html body[data-has~="stamp-comments"]:not(#has-pad) #stampScreen#stampScreen #stampZoomIn#stampZoomIn#stampZoomIn, html body[data-has~="stamp-comments"]:not(#has-pad) #stampScreen#stampScreen #stampZoomReset#stampZoomReset#stampZoomReset, html body[data-has~="stamp-comments"]:not(#has-pad) #stampScreen#stampScreen #stampExpandButton#stampExpandButton#stampExpandButton, html body[data-has~="stamp-comments"]:not(#has-pad) #stampScreen#stampScreen #stampZoomOut#stampZoomOut#stampZoomOut *, html body[data-has~="stamp-comments"]:not(#has-pad) #stampScreen#stampScreen #stampZoomIn#stampZoomIn#stampZoomIn *, html body[data-has~="stamp-comments"]:not(#has-pad) #stampScreen#stampScreen #stampZoomReset#stampZoomReset#stampZoomReset *, html body[data-has~="stamp-comments"]:not(#has-pad) #stampScreen#stampScreen #stampExpandButton#stampExpandButton#stampExpandButton * { color:#FFFFFF !important; stroke:#FFFFFF !important; text-shadow:0 1px 1px rgb(0 0 0 / .3); } html body[data-has~="stamp-comments"]:not(#has-pad) #stampScreen#stampScreen #stampZoomOut#stampZoomOut#stampZoomOut svg *, html body[data-has~="stamp-comments"]:not(#has-pad) #stampScreen#stampScreen #stampZoomIn#stampZoomIn#stampZoomIn svg *, html body[data-has~="stamp-comments"]:not(#has-pad) #stampScreen#stampScreen #stampZoomReset#stampZoomReset#stampZoomReset svg *, html body[data-has~="stamp-comments"]:not(#has-pad) #stampScreen#stampScreen #stampExpandButton#stampExpandButton#stampExpandButton svg * { fill:none !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-record b { background:#E8943A !important; background-image:none !important; text-shadow:none !important; color:#FFFFFF !important; border:0 !important; outline:0 !important; box-shadow:none !important; } /* =================== STAGE 1: one frame + type system on both tabs (side panel only, no colour changes) =================== */ /* width: cards, tab strip, heading rule and Export Now all share the cards' 549 px (rail width 553 minus its 4 px scrollbar gutter) */ html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel .side-panel-tabs, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel .stamp-panel-top, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #commentsDoneButton { width:calc(100% - 4px) !important; max-width:calc(100% - 4px) !important; box-sizing:border-box !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #sidePanelStampTab[aria-selected="false"], html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #sidePanelStampTab:not(.is-active) { color:#8D96A2 !important; } /* cards */ html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel { display:flex !important; flex-direction:column !important; gap:16px !important; padding:0 4px 16px 0 !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel > details.proto-acc { display:flex !important; flex-direction:column !important; gap:16px !important; padding:0 16px 16px !important; margin:0 !important; border:1px solid var(--border, #242C38) !important; border-radius:10px !important; zoom:1 !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel > details.proto-acc::details-content { display:contents !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel > details.proto-acc > summary, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-acc > summary { display:flex !important; align-items:center !important; justify-content:space-between !important; height:40px !important; min-height:40px !important; max-height:40px !important; padding:14px 0 12px !important; margin:0 !important; border:0 !important; box-sizing:border-box !important; font:800 11px/1.2 var(--font-body) !important; letter-spacing:.08em !important; text-transform:uppercase !important; color:#FFFFFF !important; cursor:pointer; list-style:none; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel > details.proto-acc[open] > summary { margin-bottom:0 !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-w-tpl[open] > summary { margin-bottom:0 !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel details.proto-acc .stamp-section, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel .date-pos-panel, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel #stampDateBody, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel .date-pos-tool, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel .stamp-section.panel-group-stack { gap:16px !important; padding:0 !important; margin:0 !important; row-gap:16px !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel .date-grp { display:flex !important; flex-direction:column !important; gap:8px !important; margin:0 !important; padding:0 !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel .date-grp-row, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel .date-pos-actions, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel .stamp-action-row, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel .stamp-icon-selects, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel .stamp-save-row { gap:12px !important; margin:0 !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel .date-pos-fields.date-grp { gap:16px !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel .date-pos-fields.date-grp > .date-grp-label { margin-bottom:-8px !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel .date-foot { margin:0 !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel .manual-mark-hint { margin:0 !important; } /* label system: app body font everywhere, replacing the prototype's Archivo */ html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel .date-grp-label, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel .panel-label, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-sub, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-more > summary { font:800 10px/1.2 var(--font-body) !important; letter-spacing:.1em !important; text-transform:uppercase !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel label > span.field-label, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel .date-grp label > span, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-style-grid label:not(.toggle), html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-palette-control .panel-label, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-align-control legend, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-position-grid label, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-opt-grid > label, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-opwrap .panel-label, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-bcol .panel-label { font:700 10px/1.2 var(--font-body) !important; letter-spacing:.06em !important; text-transform:uppercase !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .panel-label, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-w-add .comment-palette-control .panel-label { font:700 10px/1.2 var(--font-body) !important; letter-spacing:.06em !important; color:var(--text-muted) !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-style-grid label:not(.toggle), html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-opt-grid > label, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-position-grid label { display:grid !important; gap:8px !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel label.cv-slider.cv-slider .appearance-slider-name, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel .appearance-slider-name { font:700 10px/1 var(--font-body) !important; letter-spacing:.06em !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-palette-row strong, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-chip strong, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-chip span, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-lval, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .appearance-slider-value, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .appearance-slider output { font-family:var(--font-mono) !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-style-seg label span, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-style-seg > label, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-align-options label > span, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-align-options label { font:700 12px/1 var(--font-body) !important; letter-spacing:.04em !important; text-transform:uppercase !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-size-step { font-family:var(--font-body) !important; font-size:16px !important; } /* controls: 36 px high, radius 8, border 1, checkboxes 24 / --checkbox-radius, button text 12/700 */ html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]), html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel select, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel .custom-select-trigger, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel #dateColor, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel #commentBorderColor, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel #stampPositionName { height:36px !important; min-height:36px !important; border-radius:8px !important; border-width:1px !important; box-sizing:border-box !important; font:600 12px/1 var(--font-body) !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel #commentBorderColor { width:56px !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-bcrow, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-bcol { min-height:36px !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel .stamp-action-row button, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel .date-pos-actions button, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel #datePosReset, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel #dateColorDropper, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel #saveStampPositionButton, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel .stamp-save-row button, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel #deleteSelectedMarks { height:36px !important; min-height:36px !important; border-radius:8px !important; border-width:1px !important; box-sizing:border-box !important; font:700 12px/1 var(--font-body) !important; letter-spacing:.04em !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel #dateColorDropper { width:36px !important; min-width:36px !important; padding:0 !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-action-row button, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-template-save, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel #saveCommentTemplateButton { height:36px !important; min-height:36px !important; max-height:36px !important; font:700 12px/1 var(--font-body) !important; letter-spacing:.04em !important; border-radius:8px !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel input[type="checkbox"], html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel input[type="checkbox"] { width:24px !important; height:24px !important; min-width:24px !important; min-height:24px !important; border-radius:var(--checkbox-radius) !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel #commentSize { background:rgb(21,27,36) !important; border:1px solid rgb(36,44,56) !important; width:auto !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-style-grid input[type="number"], html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-style-grid select, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-style-grid .custom-select-trigger, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-style-grid .comment-size-step, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-more-grid input[type="number"] { font:600 12px/1 var(--font-body) !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-style-grid .comment-size-control { grid-template-columns:36px minmax(0,1fr) 36px !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-style-grid .comment-size-step { min-height:36px !important; height:36px !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-style-grid input[type="number"], html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-style-grid select, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-style-grid .custom-select-trigger { min-height:36px !important; height:36px !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel > details.proto-acc[hidden], html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel [hidden] { display:none !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel #datePosStage { margin:0 auto !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel label.toggle, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel label.toggle { padding-left:0 !important; margin-left:0 !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-position-grid { padding:0 !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-position-grid label, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-position-grid .size-input-row { margin-left:0 !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel #commentFont { margin:0 !important; left:0 !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel #stampLibraryStatus { margin:0 !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-action-row { gap:12px !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel .appearance-slider output { font:600 11px/1 var(--font-body) !important; letter-spacing:.06em !important; } /* ---- Stage 2: Stamp date colour = v4 colour editor (blue accents) ---- */ html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel .date-colour-row.cv-colour-row { display:grid !important; grid-template-columns:96px 36px minmax(0,1fr) !important; column-gap:12px !important; row-gap:0 !important; align-items:start !important; min-height:0 !important; padding:0 !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel .cv-colour-row .cv-chip { width:96px !important; height:96px !important; aspect-ratio:1 / 1; align-self:start; display:flex; align-items:flex-end; justify-content:space-between; box-sizing:border-box; padding:0 8px 6px; border-radius:8px; border:1px solid var(--border); box-shadow:inset 0 0 0 1px rgb(128 128 128 / .3), inset 0 1px 3px rgb(0 0 0 / .25); transition:background-color 150ms ease, background 150ms ease; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel .cv-colour-row .cv-chip > strong, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel .cv-colour-row .cv-chip > .cv-lval { margin:0 !important; padding:0 !important; align-self:flex-end !important; text-align:center; font:600 10px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; letter-spacing:0 !important; color:#fff !important; transition:color 150ms ease; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel .cv-colour-row .cv-chip[data-ink="dark"] > strong, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel .cv-colour-row .cv-chip[data-ink="dark"] > .cv-lval { color:#10151c !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel .cv-colour-row .cv-lcol { display:grid; justify-items:center; align-content:start; gap:8px; width:36px; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel .cv-colour-row .cv-strip { position:relative; display:block; width:14px; height:96px; box-sizing:border-box; border:1px solid var(--border); border-radius:999px; background:linear-gradient(0deg,#000,#fff); cursor:pointer; touch-action:none; outline:none; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel .cv-colour-row .cv-strip:focus-visible { outline:2px solid var(--accent); outline-offset:3px; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel .cv-colour-row .cv-mark { position:absolute; left:50%; top:0; box-sizing:border-box; width:20px; height:20px; margin:-10px 0 0 -10px; border-radius:50%; background:#fff; border:2px solid rgb(0 0 0 / .45); box-shadow:0 1px 3px rgb(0 0 0 / .4); pointer-events:none; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel .cv-colour-row .cv-sliders { display:grid !important; grid-template-rows:repeat(3,20px) !important; align-content:space-between !important; align-items:center !important; gap:0 !important; height:96px !important; min-width:0; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel label.cv-slider.cv-slider { display:grid !important; grid-template-columns:14px minmax(0,1fr) 28px !important; grid-template-areas:"name track out" !important; align-items:center !important; gap:10px !important; margin:0 !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel label.cv-slider.cv-slider.cv-lgone { display:none !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel label.cv-slider.cv-slider .appearance-slider-name { grid-area:name !important; color:var(--text-muted) !important; font:600 10.5px/1 var(--font-head) !important; letter-spacing:.04em !important; text-transform:uppercase !important; white-space:nowrap !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel label.cv-slider.cv-slider output { grid-area:out !important; color:var(--text-muted) !important; font:500 11px/1 var(--font-body) !important; text-align:right !important; font-variant-numeric:tabular-nums !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel label.cv-slider.cv-slider input[type=range] { grid-area:track !important; -webkit-appearance:none !important; appearance:none !important; display:block !important; width:100% !important; height:14px !important; min-height:0 !important; box-sizing:border-box !important; margin:0 !important; padding:0 !important; border:1px solid var(--border) !important; border-radius:999px !important; background:var(--track,linear-gradient(90deg,#000,#fff)) !important; cursor:pointer !important; opacity:1 !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel label.cv-slider.cv-slider input[type=range]::-webkit-slider-runnable-track { background:transparent !important; border:0 !important; height:14px !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel label.cv-slider.cv-slider input[type=range]::-webkit-slider-thumb { -webkit-appearance:none !important; box-sizing:border-box !important; width:20px !important; height:20px !important; margin-top:-3px !important; border-radius:50% !important; background:#fff !important; border:2px solid rgb(0 0 0 / .45) !important; box-shadow:0 1px 3px rgb(0 0 0 / .4) !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel label.cv-slider.cv-slider input[type=range]::-moz-range-thumb { box-sizing:border-box !important; width:20px !important; height:20px !important; border-radius:50% !important; background:#fff !important; border:2px solid rgb(0 0 0 / .45) !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel label.cv-slider.cv-slider input[type=range]:focus-visible { outline:2px solid var(--accent) !important; outline-offset:2px !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel .date-colour-row.cv-colour-row { grid-template-rows:96px 36px !important; row-gap:12px !important; width:100% !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel .date-colour-row.cv-colour-row > .cv-chip { grid-row:1; grid-column:1; position:relative; overflow:hidden; background:transparent !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel .date-colour-row.cv-colour-row > .cv-lcol { grid-row:1; grid-column:2; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel #stampDateBody#stampDateBody .date-colour-row.cv-colour-row > .date-sliders.cv-sliders { grid-row:1; grid-column:3; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel .date-colour-row.cv-colour-row > #dateColorDropper { grid-row:2; grid-column:1; width:36px !important; height:36px !important; min-width:36px !important; min-height:36px !important; padding:0 !important; margin:0 !important; justify-self:start; display:inline-flex !important; align-items:center; justify-content:center; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel .date-colour-row.cv-colour-row > #dateColorDropper svg { width:18px !important; height:18px !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel .cv-chip > #dateColor#dateColor { position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; min-height:0 !important; padding:0 !important; margin:0 !important; border:0 !important; border-radius:7px !important; background:transparent !important; cursor:pointer; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel .cv-chip > #dateColor::-webkit-color-swatch-wrapper { padding:0 !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel .cv-chip > #dateColor::-webkit-color-swatch { border:0 !important; border-radius:7px !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel .cv-chip > #dateColorValue#dateColorValue, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel .cv-chip > .cv-lval { position:relative; z-index:1; pointer-events:none; width:auto !important; display:block !important; background:transparent !important; border:0 !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel .cv-chip > #dateColorValue#dateColorValue { font:600 10px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; color:#fff !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel .cv-chip[data-ink="dark"] > #dateColorValue#dateColorValue { color:#10151c !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel label.date-pos-colour { display:block !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel #stampDateBody#stampDateBody .date-colour-row.cv-colour-row > .date-sliders.cv-sliders { grid-row:1 !important; grid-column:3 !important; width:auto !important; margin:0 !important; } /* ---- Stage 2: Add comment and Save as template use the deeper orange gradient with white text (4.7:1 at the mid stop) ---- */ html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel #addCommentButton, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel #saveCommentTemplateButton { background:linear-gradient(180deg,#C4701A,#B35E0C 55%,#9C500A) !important; color:#FFFFFF !important; border-color:transparent !important; box-shadow:0 2px 8px rgb(232 148 58 / .3), inset 0 1px 0 rgb(255 255 255 / .2) !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel #addCommentButton:hover:not(:disabled), html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel #saveCommentTemplateButton:hover:not(:disabled) { filter:brightness(1.08); } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel #addCommentButton svg, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel #saveCommentTemplateButton svg { color:#FFFFFF !important; stroke:currentColor; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel #addCommentButton:disabled, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel #saveCommentTemplateButton:disabled { opacity:.55 !important; } /* ---- Stage 2: 16px from every card title to its first row ---- */ html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-w-tpl, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-w-com { gap:16px !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-w-tpl > summary, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-w-com > summary, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-w-add > summary { margin:0 !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-w-tpl { display:grid !important; align-content:start; } /* ---- Stage 2 fix: dropper (left) and Reset (right) share one row under the date colour editor ---- */ html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel #stampDateBody#stampDateBody .date-colour-row.cv-colour-row > #datePosReset { grid-row:2 !important; grid-column:3 !important; justify-self:end !important; align-self:center; margin:0 !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel #stampDateBody#stampDateBody .date-foot.cv-foot-empty { display:none !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel #stampDateBody#stampDateBody .date-colour-row.cv-colour-row > #datePosReset#datePosReset { width:auto !important; min-width:96px !important; padding:0 20px !important; flex:none !important; } /* ---- Swatch text: hex bottom-left, "L n" bottom-right, one baseline, 8px insets, same mono 10px/600, all three swatches ---- */ html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel .cv-chip { position:relative !important; display:block !important; padding:0 !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel .cv-chip > strong, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel .cv-chip > #dateColorValue#dateColorValue, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel .cv-chip > .cv-lval { position:absolute !important; bottom:7px !important; top:auto !important; margin:0 !important; padding:0 !important; width:auto !important; height:12px !important; min-height:0 !important; display:block !important; font:600 10px/12px var(--font-mono), "IBM Plex Mono", ui-monospace, monospace !important; letter-spacing:0 !important; white-space:nowrap !important; text-align:left !important; z-index:1; pointer-events:none; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel .cv-chip > strong, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel .cv-chip > #dateColorValue#dateColorValue { left:7px !important; right:auto !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel .cv-chip > .cv-lval { right:7px !important; left:auto !important; text-align:right !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel #stampDateBody#stampDateBody .cv-chip > #dateColorValue#dateColorValue#dateColorValue { height:12px !important; min-height:0 !important; max-height:12px !important; width:auto !important; min-width:0 !important; max-width:none !important; line-height:12px !important; display:block !important; padding:0 !important; margin:0 !important; bottom:7px !important; top:auto !important; left:7px !important; right:auto !important; position:absolute !important; text-align:left !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel .cv-colour-row .cv-chip > strong, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel .cv-colour-row .cv-chip > .cv-lval { font:600 10px/12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; height:12px !important; align-self:auto !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel #stampDateBody#stampDateBody .cv-colour-row .cv-chip > #dateColorValue#dateColorValue { font:600 10px/12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel .cv-colour-row .cv-chip > strong, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel .cv-colour-row .cv-chip > .cv-lval { font:600 10px/12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; height:12px !important; } /* ---- Live adaptation: the live sections are boxed groups with their own heading; inside a card the summary is the heading and the section is plain. ---- */ html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel > .stamp-controls#sidePanelStampPanel > details.proto-acc > section.stamp-section { border: 0 !important; background: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; border-radius: 0 !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel > .stamp-controls#sidePanelStampPanel > details.proto-acc > section.stamp-section > .stamp-section-label { display: none !important; } /* ---- Attached stamp inspector (features/stamp-panel-o2.js). Fixed to the window, placed beside the stamp. ---- */ .o2-xf-card { position: fixed; z-index: 70; box-sizing: border-box; width: 224px; max-width: calc(100vw - 16px); display: flex; flex-direction: column; gap: 6px; padding: 8px 10px 10px; background: #12171F; color: var(--text-strong, #fff); border: 1px solid var(--border, #242C38); border-radius: 10px; box-shadow: 0 6px 18px rgb(0 0 0 / .4); font: 500 12px/1.2 var(--font-body, "IBM Plex Sans", sans-serif); } .o2-xf-card[hidden] { display: none; } .o2-xf-card.is-moving { box-shadow: 0 10px 26px rgb(0 0 0 / .55); } .o2-xf-head { display: flex; align-items: center; justify-content: space-between; margin: -8px -10px 0; padding: 8px 10px 6px; border-radius: 9px 9px 0 0; font: 700 11px/1 var(--font-body, sans-serif); letter-spacing: .08em; text-transform: uppercase; color: #4F9BFF; cursor: var(--cursor-move-4way, move); touch-action: none; user-select: none; -webkit-user-select: none; } .o2-xf-head:hover { background: rgb(46 127 242 / .10); } .o2-xf-title { display: inline-flex; align-items: center; gap: 6px; } .o2-xf-grip { color: var(--text-muted, #8D96A2); letter-spacing: -3px; font-size: 12px; opacity: .8; } .o2-xf-close { display: grid; place-items: center; width: 22px; height: 22px; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 6px; background: #E5484D; color: #fff; font: 700 16px/1 var(--font-body, sans-serif); cursor: var(--cursor-pointer, pointer); transition: background-color 140ms ease; } .o2-xf-close:hover { background: #C93A3F; } .o2-xf-close:focus-visible { outline: 2px solid #fff; outline-offset: 1px; } .o2-xf-row { display: grid; grid-template-columns: 70px minmax(0, 1fr) 22px; align-items: center; column-gap: 6px; margin: 0; } .o2-xf-lab { font: 700 12px/1 var(--font-body, sans-serif); letter-spacing: .04em; color: #4F9BFF; white-space: nowrap; } .o2-xf-unit { font: 500 11px/1 var(--font-body, sans-serif); color: #fff; text-align: left; } .o2-xf-num { box-sizing: border-box; width: 100%; height: 26px; min-height: 0; padding: 0 8px; border: 1px solid #242C38; border-radius: 8px; background: #07090D; color: #fff; font: 600 12px/1 var(--font-body, sans-serif); text-align: right; transition: border-color 140ms ease; } .o2-xf-num:focus { outline: none; border-color: #2E7FF2; } .o2-xf-num:disabled { opacity: .55; cursor: var(--cursor-not-allowed, not-allowed); } .o2-xf-slider { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 14px; min-height: 0; box-sizing: border-box; margin: 8px 0 4px; padding: 0; border: 1px solid #242C38; border-radius: 999px; background: linear-gradient(90deg, rgb(46 127 242 / .18), rgb(46 127 242 / .55)); cursor: var(--cursor-pointer, pointer); } .o2-xf-slider::-webkit-slider-runnable-track { background: transparent; border: 0; height: 14px; } .o2-xf-slider::-webkit-slider-thumb { -webkit-appearance: none; box-sizing: border-box; width: 20px; height: 20px; margin-top: -3px; border-radius: 50%; background: #fff; border: 2px solid rgb(0 0 0 / .45); box-shadow: 0 1px 3px rgb(0 0 0 / .4); } .o2-xf-slider::-moz-range-thumb { box-sizing: border-box; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid rgb(0 0 0 / .45); } @media (max-width: 640px) { .o2-xf-card { width: min(320px, calc(100vw - 16px)); } .o2-xf-head { cursor: default; } } /* ---- Sheet overlays: transform circles on the stamp and on comment boxes. Always blue, 2px ring, transparent centre, 2 mm clear of the box. No selection outline: the circles are the selection. ---- */ html body #stampSheet#stampSheet .stamp-widget#approvalStampWidget, html body #stampSheet#stampSheet .stamp-widget#approvalStampWidget:is(:hover, :focus, :focus-visible, :active) { outline: 0 none transparent !important; } html body #stampSheet#stampSheet .comment-widget, html body #stampSheet#stampSheet .comment-widget.is-active { outline: 0 none transparent !important; } html body #stampSheet#stampSheet .stamp-widget .stamp-resize-handle:not(.stamp-resize-handle-move), html body #stampSheet#stampSheet .comment-widget .comment-resize-handle { width: 10px !important; height: 10px !important; box-sizing: border-box !important; background: transparent !important; border: 2px solid #2E7FF2 !important; border-radius: 50% !important; box-shadow: none !important; transform: none !important; display: none; z-index: 3; touch-action: none; } html body #stampSheet#stampSheet .stamp-widget .stamp-resize-handle-move { display: none !important; } html body #stampSheet#stampSheet .stamp-widget .stamp-resize-handle::before, html body #stampSheet#stampSheet .comment-widget .comment-resize-handle::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; } html body #stampSheet#stampSheet .stamp-widget:is(.is-o2-selected, :focus-visible):not(.is-locked) .stamp-resize-handle:not(.stamp-resize-handle-move) { display: block; } html body #stampSheet#stampSheet .comment-widget.is-active:not(.is-editing):not(.is-empty) .comment-resize-handle { display: block; } html body #stampSheet#stampSheet :is(.stamp-resize-handle, .comment-resize-handle):hover { background: transparent !important; } html body #stampSheet#stampSheet .stamp-widget .stamp-resize-handle-nw, html body #stampSheet#stampSheet .comment-widget .comment-resize-nw { left: calc(-10px - 2mm) !important; top: calc(-10px - 2mm) !important; right: auto !important; bottom: auto !important; cursor: var(--cursor-resize-diagonal); } html body #stampSheet#stampSheet .stamp-widget .stamp-resize-handle-ne, html body #stampSheet#stampSheet .comment-widget .comment-resize-ne { right: calc(-10px - 2mm) !important; top: calc(-10px - 2mm) !important; left: auto !important; bottom: auto !important; cursor: var(--cursor-resize-diagonal-alt); } html body #stampSheet#stampSheet .stamp-widget .stamp-resize-handle-se, html body #stampSheet#stampSheet .comment-widget .comment-resize-se { right: calc(-10px - 2mm) !important; bottom: calc(-10px - 2mm) !important; left: auto !important; top: auto !important; cursor: var(--cursor-resize-diagonal); } html body #stampSheet#stampSheet .stamp-widget .stamp-resize-handle-sw, html body #stampSheet#stampSheet .comment-widget .comment-resize-sw { left: calc(-10px - 2mm) !important; bottom: calc(-10px - 2mm) !important; right: auto !important; top: auto !important; cursor: var(--cursor-resize-diagonal-alt); } html body #stampSheet#stampSheet .stamp-widget .stamp-resize-handle-n, html body #stampSheet#stampSheet .comment-widget .comment-resize-n { left: calc(50% - 5px) !important; top: calc(-10px - 2mm) !important; right: auto !important; bottom: auto !important; cursor: var(--cursor-resize-vertical); } html body #stampSheet#stampSheet .stamp-widget .stamp-resize-handle-s, html body #stampSheet#stampSheet .comment-widget .comment-resize-s { left: calc(50% - 5px) !important; bottom: calc(-10px - 2mm) !important; right: auto !important; top: auto !important; cursor: var(--cursor-resize-vertical); } html body #stampSheet#stampSheet .stamp-widget .stamp-resize-handle-w, html body #stampSheet#stampSheet .comment-widget .comment-resize-w { top: calc(50% - 5px) !important; left: calc(-10px - 2mm) !important; right: auto !important; bottom: auto !important; cursor: var(--cursor-resize-horizontal); } html body #stampSheet#stampSheet .stamp-widget .stamp-resize-handle-e, html body #stampSheet#stampSheet .comment-widget .comment-resize-e { top: calc(50% - 5px) !important; right: calc(-10px - 2mm) !important; left: auto !important; bottom: auto !important; cursor: var(--cursor-resize-horizontal); } /* Phone: the app shows the four corner circles only (styles.css, #stampScreen .stamp-resize-handle-n and friends). */ @media (max-width: 640px) { html body #stampSheet#stampSheet .stamp-widget :is(.stamp-resize-handle-n, .stamp-resize-handle-s, .stamp-resize-handle-e, .stamp-resize-handle-w) { display: none !important; } } /* The generic pressed-button shrink (styles.css [role="button"]:active) would scale a box while it is being dragged or resized, so the measured size and spot drift. */ html body #stampSheet#stampSheet :is(.stamp-widget, .comment-widget):active { transform: none !important; transition: none !important; } /* Phone: library tile buttons keep the 44px touch target. */ @media (max-width: 640px) { html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel #stampLibraryTileGrid .stamp-library-tile-select { aspect-ratio:auto !important; min-height:44px !important; height:44px !important; } } /* Comments tab: sheet arrows, zoom pill and expand button are orange with white ink (option2-comments-v23). */ html body[data-has~="stamp-comments"]:not(#has-pad) #appShell #stampScreen#stampScreen#stampScreen .stamp-canvas :is(.sheet-page-button, #stampZoomOut, #stampZoomIn, #stampZoomReset, #stampExpandButton), html body[data-has~="stamp-comments"]:not(#has-pad) #appShell #stampScreen#stampScreen#stampScreen .stamp-canvas :is(.sheet-page-button, #stampZoomOut, #stampZoomIn, #stampZoomReset, #stampExpandButton):not(:disabled), html body[data-has~="stamp-comments"]:not(#has-pad) #appShell #stampScreen#stampScreen#stampScreen .stamp-canvas :is(.sheet-page-button, #stampZoomOut, #stampZoomIn, #stampZoomReset, #stampExpandButton):disabled { background:linear-gradient(180deg,#EA9F4E,#E8943A 48%,#BE7930) !important; background-image:linear-gradient(180deg,#EA9F4E,#E8943A 48%,#BE7930) !important; border-color:rgb(234 159 78 / .82) !important; color:#FFFFFF !important; opacity:1 !important; } html body[data-has~="stamp-comments"]:not(#has-pad) #appShell #stampScreen#stampScreen#stampScreen .stamp-canvas :is(.sheet-page-button, #stampZoomOut, #stampZoomIn, #stampZoomReset, #stampExpandButton):not(:disabled):hover { background:linear-gradient(180deg,#F0AE6B,#EA9F4E 48%,#C98035) !important; } html body[data-has~="stamp-comments"]:not(#has-pad) #appShell #stampScreen#stampScreen#stampScreen .stamp-canvas :is(.sheet-page-button, #stampZoomOut, #stampZoomIn, #stampZoomReset, #stampExpandButton) :is(svg, svg *) { color:#FFFFFF !important; stroke:#FFFFFF !important; } /* Auto width / Auto height: one row of two checkboxes in the Add comment card. */ html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-option-toggles[aria-label="Comment auto size"] { display:grid !important; grid-template-columns:repeat(2, minmax(0, 1fr)) !important; column-gap:16px !important; row-gap:0 !important; } /* Panel rhythm (Jon 2026-10-12): 16px between rows, a spaced status row, 36px toggle rows, one-row collapsed Templates with an icon, 16px of room above Export. */ html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-w-add::details-content, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-w-tpl[open]::details-content, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-w-com::details-content { display:grid !important; align-content:start; gap:16px; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-w-tpl:not([open]) { gap:0 !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-w-tpl:not([open]) > summary { height:auto !important; min-height:0 !important; max-height:none !important; padding:16px 0 !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-w-tpl > summary .cv-head-label { display:inline-flex; align-items:center; gap:8px; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-w-tpl > summary .cv-head-icon { width:16px; height:16px; flex:none; fill:none; stroke:var(--comment-accent, #E8943A); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-action-status:not(:empty) { margin:0 !important; padding:0 !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-option-toggles .toggle { min-height:36px !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-action-row { margin:0 !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-w-add details.advanced-controls { padding:0 !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel.stamp-controls, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="stamp"] #sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel#sidePanelStampPanel.stamp-controls { padding-bottom:16px !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .comment-tab-panel { flex:0 0 auto !important; height:auto !important; max-height:none !important; } html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-w-add > summary, html #layoutV2FloatHost#layoutV2FloatHost #stampPanel#stampPanel#stampPanel#stampPanel#stampPanel#stampPanel[data-active-panel="comments"] #sidePanelCommentsPanel#sidePanelCommentsPanel .cv-w-com > summary { height:auto !important; min-height:0 !important; max-height:none !important; padding:16px 0 0 !important; border-bottom:0 !important; }