/* The same paint follows a card between canvas, timeline and replay. */
[data-card-paint]{background:var(--card-fill)!important;border-color:var(--card-border)!important;color:var(--card-ink)!important}
[data-card-paint] :is(.node-heading,.node-writing,.node-inline-editor,.node-kind,.dm-map-title,.dm-map-body,.dm-map-title-editor,.dm-map-body-editor,h3,.replay-card-body,.replay-card-label){color:var(--card-ink)!important}
[data-card-paint] :is(.replay-card-action,.node-link){color:var(--card-ink)!important}
.node.image-only[data-card-paint]>.node-kind{color:#345574!important}
[data-card-paint] :is(.node-inline-editor,.dm-map-title-editor,.dm-map-body-editor){background:transparent!important}
[data-card-paint] :is(.node-writing,.replay-card-body,.dm-map-body){opacity:1}
.node-role{background:var(--role-fill)!important;color:var(--role-ink)!important;border-color:var(--role-border)!important}
.card-options .role-picker-grid>[data-card-role]{background:var(--role-fill);color:var(--role-ink);border-color:transparent}
.card-options .role-picker-grid>[data-card-role]:hover,.card-options .role-picker-grid>[data-card-role].active{background:var(--role-fill);color:var(--role-ink);border-color:var(--role-border)}
.role-picker-grid>[data-card-role].active{box-shadow:inset 0 0 0 1px var(--role-border)}
.card-colour-section{border-top:1px solid var(--line);margin-top:9px;padding-top:8px}
.colour-picker{font-size:11px;color:#60728e}
.colour-swatches{display:grid;grid-template-columns:repeat(var(--swatch-count,10),1fr);gap:5px;padding:3px}
.colour-swatch{width:100%;aspect-ratio:1;min-width:0;padding:0;border-radius:50%;border:1px solid #c5cfde;background:var(--swatch)}
.colour-swatch[aria-pressed=true]{outline:2px solid #508df0;outline-offset:2px}
.colour-custom{display:flex;align-items:center;gap:7px;margin-top:9px}
.colour-native{width:26px;height:26px;flex-shrink:0;border:1px solid #c8d3e3;border-radius:6px;overflow:hidden;cursor:pointer}
.colour-native input{display:block;width:100%;height:100%;padding:0;border:0;cursor:pointer}
.colour-native input::-webkit-color-swatch-wrapper{padding:2px}.colour-native input::-webkit-color-swatch{border:0;border-radius:3px}
.colour-hex{min-width:0;width:85px;padding:5px 6px;font:11px ui-monospace,monospace;border-radius:5px}
.colour-auto{font-size:11px;margin-top:7px;padding:4px 7px;border:1px solid #d8e2f1;border-radius:5px}
.colour-auto[aria-pressed=true]{background:#edf4ff;color:#1769ee;border-color:#a8c7f3}
.colour-error{display:block;color:#ba3746;font-size:11px;margin-top:3px}.colour-error:empty{display:none}
.selection-colour-dot{width:14px;height:14px;border:1px solid #a8b9cf;border-radius:50%}
.selection-colour-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font-size:12px}
.card-colour-target{display:flex;align-items:center;gap:4px;margin-bottom:10px;font-size:12px}
.card-colour-target button{padding:5px 10px;border-radius:6px;color:#667b98}
.card-colour-target button[aria-pressed=true]{background:#edf3ff;color:#1769ee}
.card-colour-target>span{margin-left:auto;color:#7e8ea7;font-size:11px}
.inspector-colors>.card-colour-picker{display:block}
.board-appearance{position:absolute;right:14px;top:58px;width:282px;max-height:calc(100dvh - 75px);overflow:auto;padding:14px;background:#fff;border:1px solid #dfe7f3;border-radius:11px;box-shadow:0 12px 45px #263e7029}
.board-appearance h2{font-size:14px;margin:0}.board-appearance>header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.background-patterns{display:flex;gap:6px;margin:14px 0 10px}.background-patterns button{flex:1;border:1px solid #d8e2f1;border-radius:6px;padding:7px;font-size:12px}
.background-patterns button[aria-pressed=true]{border-color:#83aff0;background:#edf4ff;color:#1769ee}
.background-reset{font-size:11px;color:#657b9b;padding:5px 0}
[data-board-pattern] :is(.canvas-viewport,.dm-map-viewport,.replay-viewport){--grid-tone:color-mix(in srgb,var(--board-grid) var(--grid-strength,70%),transparent);background-color:var(--board-fill);background-image:radial-gradient(circle,var(--grid-tone) var(--grid-radius,.75px),transparent var(--grid-radius,.75px));background-size:24px 24px}
[data-board-pattern=grid] :is(.canvas-viewport,.dm-map-viewport,.replay-viewport){background-image:linear-gradient(var(--grid-tone) 1px,transparent 1px),linear-gradient(90deg,var(--grid-tone) 1px,transparent 1px)}
[data-board-pattern=plain] :is(.canvas-viewport,.dm-map-viewport,.replay-viewport){background-image:none}
[data-board-pattern] .dm-map-lane h3{color:var(--board-ink)}
.inspector-colors .colour-swatches{display:grid;gap:5px}.inspector-colors .colour-swatch{height:auto}