/* The showcase's tools and the dialog an object is customized in are drawn in the gallery's warm greys
   by day; by night they name the theme's tokens (docs/design-system.md, Themes). The felt dialog and the
   scenes keep their own colours. */
:is(.profile-showcase, .showcase-layout-tools, dialog.showcase-object-editor) { --gallery-line: #d8d0c6; --gallery-rule: #e1dbd0; --gallery-hover-line: #a99f8f; --gallery-paper: #fffaf3; --gallery-sheet: #fffdf8; --gallery-dialog: #fcfaf5; --gallery-field: #fff; --gallery-checked: #f3f0e6; --gallery-chip: #eae3d5; --gallery-text: #38372f; --gallery-ink: #514b43; --gallery-button-ink: #474539; --gallery-label: #635c50; --gallery-field-ink: #38382f; --gallery-note: #776d5f; --gallery-hint: #827666; --gallery-quiet: #71665a; --gallery-empty: #fbf9f3; --gallery-empty-line: #d4ccbf; --gallery-empty-ink: #756b5d; --gallery-deep: #343b32; --gallery-on-deep: #fffdf7; --gallery-error: #a02d3e; }
html[data-theme="dark"] :is(.profile-showcase, .showcase-layout-tools, dialog.showcase-object-editor:not(.is-felt)) { --gallery-line: var(--line); --gallery-rule: var(--line); --gallery-hover-line: var(--ink-border); --gallery-paper: var(--white); --gallery-sheet: var(--bg-subtle); --gallery-dialog: var(--bg-subtle); --gallery-field: var(--white); --gallery-checked: var(--muted-gray); --gallery-chip: var(--muted-gray); --gallery-text: var(--text-dark); --gallery-ink: var(--text-dark); --gallery-button-ink: var(--text-dark); --gallery-label: var(--text-muted); --gallery-field-ink: var(--text-dark); --gallery-note: var(--text-muted); --gallery-hint: var(--text-muted); --gallery-quiet: var(--text-muted); --gallery-empty: var(--bg-subtle); --gallery-empty-line: var(--line); --gallery-empty-ink: var(--text-muted); --gallery-deep: var(--text-dark); --gallery-on-deep: var(--on-ink); --gallery-error: var(--danger); }
dialog.showcase-object-editor { box-sizing: border-box; width: min(900px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 22px; overflow: auto; border: 1px solid var(--gallery-line); border-radius: 18px; background: var(--gallery-dialog); color: var(--gallery-text); box-shadow: 0 18px 70px #181b2240; }
dialog.showcase-object-editor:not([open]) { display: none; }
dialog.showcase-object-editor.is-decorating { width: min(900px, calc(100vw - 32px)); }
dialog.showcase-object-editor::backdrop { background: #191b236b; backdrop-filter: blur(5px); }
dialog.showcase-object-editor > .showcase-object-editor-header { display: flex; align-items: center; gap: 14px; grid-column: 1 / -1; margin: 0 0 22px; padding: 0 0 16px; border-bottom: 1px solid var(--gallery-rule); }
dialog.showcase-object-editor .showcase-object-editor-header h3 { flex: 1; margin: 0; color: inherit; font-size: 24px; line-height: 1.2; letter-spacing: -.025em; }
dialog.showcase-object-editor .showcase-object-editor-header button { min-width: 40px; min-height: 40px; margin: 0; padding: 7px 10px; border: 1px solid var(--gallery-line); border-radius: 99px; background: transparent; box-shadow: none; color: inherit; font-size: 14px; cursor: pointer; }
dialog.showcase-object-editor .showcase-object-editor-header .showcase-object-editor-close { margin-left: auto; font-size: 24px; line-height: 1; }
dialog.showcase-object-editor [hidden] { display: none !important; }
.showcase-object-editor-content { min-width: 0; }
.showcase-object-editor-content:empty { display: none; }
.showcase-object-editor-actions { display: grid; gap: 10px; }
.showcase-object-editor-actions:empty { display: none; }
.showcase-object-editor-actions button { min-height: 44px; padding: 12px 16px; border: 1px solid var(--gallery-line); border-radius: 10px; background: var(--gallery-field); color: var(--gallery-button-ink); font: inherit; text-align: left; cursor: pointer; }
.showcase-object-editor-actions button.is-primary { border-color: var(--gallery-deep); background: var(--gallery-deep); color: var(--gallery-on-deep); }
.showcase-object-editor-status { margin: 14px 0 0; font-size: 13px; color: var(--gallery-error); }
.showcase-object-editor-status:empty { display: none; }
.showcase-object-editor :is(button, select, input):focus-visible { outline: 3px solid #8060c5; outline-offset: 3px; }
.showcase-object-editor button:disabled { opacity: .55; cursor: default; }
.showcase-slot-editor .showcase-slot-hint { margin: 0 0 20px; color: var(--gallery-hint); font-size: 13px; }
.showcase-slot-editor > footer { position: sticky; bottom: -22px; z-index: 2; display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-top: 20px; padding: 14px 0; background: var(--gallery-dialog); border-top: 1px solid var(--gallery-rule); }
.showcase-slot-editor .picker-grid { overflow: visible; overscroll-behavior: auto; }
.showcase-slot-editor [data-slot-status] { margin-right: auto; color: var(--gallery-error); font-size: 13px; }
/* What the slot does with its card, above the picker: a row of tiles, each with its switch, lit while it is on. */
:is(.showcase-slot-editor, .showcase-object-panel) .showcase-slot-options { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 22px; }
:is(.showcase-slot-editor, .showcase-object-panel) .showcase-slot-option { position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 16px; border: 1.5px solid var(--gallery-line); border-radius: 14px; background: var(--gallery-field); color: var(--gallery-button-ink); font-size: 15px; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
:is(.showcase-slot-editor, .showcase-object-panel) .showcase-slot-option label { display: flex; align-items: center; gap: 12px; cursor: pointer; }
:is(.showcase-slot-editor, .showcase-object-panel) .showcase-slot-option:hover { border-color: var(--gallery-hover-line); }
:is(.showcase-slot-editor, .showcase-object-panel) .showcase-slot-option:has(input[type="checkbox"]:checked) { border-color: var(--gallery-deep); background: var(--gallery-checked); box-shadow: 0 2px 0 var(--gallery-deep); }
:is(.showcase-slot-editor, .showcase-object-panel) .showcase-slot-option strong { font-weight: 750; white-space: nowrap; }
:is(.showcase-slot-editor, .showcase-object-panel) .showcase-slot-option input[type="checkbox"] { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
:is(.showcase-slot-editor, .showcase-object-panel) .showcase-slot-switch { position: relative; flex: 0 0 auto; width: 40px; height: 24px; border-radius: 99px; background: var(--gallery-line); transition: background .15s; }
:is(.showcase-slot-editor, .showcase-object-panel) .showcase-slot-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px #0004; transition: transform .15s; }
:is(.showcase-slot-editor, .showcase-object-panel) input:checked + .showcase-slot-switch { background: var(--gallery-deep); }
:is(.showcase-slot-editor, .showcase-object-panel) input:checked + .showcase-slot-switch::after { transform: translateX(16px); }
:is(.showcase-slot-editor, .showcase-object-panel) input:focus-visible + .showcase-slot-switch { outline: 3px solid #8060c5; outline-offset: 3px; }
.motion-reduced :is(.showcase-slot-editor, .showcase-object-panel) :is(.showcase-slot-option, .showcase-slot-switch, .showcase-slot-switch::after, .showcase-slot-choice-option) { transition: none; }
.motion-reduced .showcase-object-panel > .is-arriving { animation: none; }
/* The price tag, on: the price the card is listed at on the market, written on a little tag. */
.showcase-slot-editor .showcase-slot-price-amount input { width: 96px; min-height: 36px; padding: 0 10px 0 16px; border: 1px solid #b89c62; border-radius: 4px 8px 8px 4px; background: #fff6dc; color: #4a3a1c; font: 800 15px/1 "Cinzel", Georgia, serif; clip-path: polygon(9px 0, 100% 0, 100% 100%, 9px 100%, 0 50%); }
.showcase-slot-editor [data-slot-save] { min-height: 42px; padding: 10px 18px; border: 0; border-radius: 99px; background: var(--gallery-deep); color: var(--gallery-on-deep); }
.showcase-slot-editor .picker-order { display: none; }
@media (max-width: 760px) { dialog.showcase-object-editor { padding: 16px; } dialog.showcase-object-editor .showcase-object-editor-header h3 { font-size: 21px; } .showcase-slot-editor > footer { bottom: -16px; } }

/* The customization panel every object shares (showcase-object-editor.js, `panel`; docs/showcase-items.md): the object
   on its stage to the left, and to the right its settings as tiles, the card picker and its actions. While the
   stickers are being arranged the panel steps aside and the sticker workspace takes its column. */
dialog.showcase-object-editor.has-object-panel[open] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 1.15fr); grid-template-rows: auto auto auto; align-content: start; gap: 20px 36px; }
dialog.showcase-object-editor.has-object-panel > .showcase-object-stage { grid-column: 1; grid-row: 2 / span 2; align-self: center; }
dialog.showcase-object-editor.has-object-panel > .showcase-object-panel { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; min-width: 0; gap: 18px; }
dialog.showcase-object-editor.has-object-panel > .sticker-editor { grid-column: 2; grid-row: 3; }
dialog.showcase-object-editor.has-object-panel.is-decorating > .showcase-object-panel { display: none; }
/* Decorating starts from the panel's own button; the sticker workspace shows once it has. */
dialog.showcase-object-editor.has-object-panel:not(.is-decorating) > .sticker-editor { display: none; }
dialog.showcase-object-editor.has-object-panel.is-decorating > .sticker-editor { grid-row: 2 / span 2; }
:is(.showcase-object-panel, .sticker-editor) .card-picker { flex: 1 1 auto; min-height: 0; }
/* On the felt the dialog is the window: the panel keeps to it and the card grid scrolls. */
dialog.showcase-object-editor.is-felt.has-object-panel > :is(.showcase-object-panel, .sticker-editor) { max-height: calc(100dvh - var(--panel-above, 150px)); }
dialog.showcase-object-editor.has-object-panel.is-decorating > .sticker-editor { display: flex; flex-direction: column; min-width: 0; }
:is(.showcase-object-panel, .sticker-editor) .picker-grid { flex: 1 1 auto; min-height: 200px; max-height: min(46vh, 520px); }
:is(.showcase-object-panel, .sticker-editor) .picker-order { display: none; }
.showcase-object-panel .showcase-slot-options { margin: 0; }
.showcase-object-panel .showcase-object-editor-actions.is-row { display: flex; flex-wrap: wrap; gap: 10px; }
.showcase-object-panel .showcase-object-editor-status { margin: 0; }
.showcase-object-panel.is-busy .card-picker { opacity: .6; pointer-events: none; }
/* Each piece of the panel comes up in turn as the object opens. */
.showcase-object-panel > .is-arriving { animation: panel-rise .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(60ms + var(--panel-step, 0) * 70ms); }
@keyframes panel-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
/* A setting that is a choice among a few: its options as a row of pills, the one taken lit. */
.showcase-slot-option.is-choice { flex-direction: column; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 16px 14px; cursor: default; }
.showcase-slot-option.is-choice legend { float: left; padding: 0; }
.showcase-slot-choice { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; clear: both; }
.showcase-slot-choice-option { position: relative; display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border: 1px solid var(--gallery-line); border-radius: 999px; background: var(--gallery-field); color: var(--gallery-button-ink); font-size: 13px; font-weight: 700; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.showcase-slot-choice-option input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.showcase-slot-choice-option:hover { border-color: var(--gallery-hover-line); }
.showcase-slot-choice-option:has(input:checked) { border-color: var(--gallery-deep); background: var(--gallery-deep); color: var(--gallery-on-deep); }
.showcase-slot-choice-option:has(input:focus-visible) { outline: 3px solid #8060c5; outline-offset: 3px; }
.showcase-slot-cost { margin-left: auto; padding: 3px 9px; border-radius: 999px; background: var(--pastel-yellow, #f5d982); color: var(--text-dark); font-size: 11px; font-weight: 800; white-space: nowrap; }
@media (max-width: 760px) {
    dialog.showcase-object-editor.has-object-panel[open] { display: block; }
    dialog.showcase-object-editor.has-object-panel > .showcase-object-panel { margin-top: 18px; }
    .showcase-object-panel .picker-grid { max-height: 40vh; }
}

/* An object of the showcase opened up close the way any object is (#971, docs/design-system.md, Inspectors): the
   whole window, the inspector's felt, the object on its stage and what is done with it beside it in light ink,
   quiet pills and dark fields. Each object's dialog opts in with `is-felt`. */
dialog.showcase-object-editor.is-felt {
    --felt-ink: #ece6f3; --felt-muted: #b9afc9; --felt-line: #ffffff2e; --felt-fill: #ffffff0d; --felt-fill-strong: #ffffff1f;
    width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 28px clamp(16px, 4vw, 60px);
    border: 0; border-radius: 0; color: var(--felt-ink);
    background: radial-gradient(ellipse at 35% 45%, #4a3b66 0, #2a2139 55%, #1a1424 100%);
}
dialog.showcase-object-editor.is-felt::backdrop { background: #1a1424; backdrop-filter: none; }
dialog.showcase-object-editor.is-felt > .showcase-object-editor-header { border-bottom: 1px solid var(--felt-line); }
dialog.showcase-object-editor.is-felt .showcase-object-editor-header h3 { color: #fff; font-size: clamp(22px, 2.3vw, 30px); font-weight: 800; }
/* A book on the shelf is a button only to be picked and dragged: it keeps its spine, not a pill (shelf.css). */
dialog.showcase-object-editor.is-felt :is(button:not(.shelf-book), a.button) { min-height: 34px; padding: 0 14px; border: 1px solid var(--felt-line); border-radius: 999px; background: var(--felt-fill); color: var(--felt-ink); box-shadow: none; transform: none; font-size: 12px; font-weight: 700; }
dialog.showcase-object-editor.is-felt :is(button:not(.shelf-book), a.button):is(:hover, :focus-visible):not(:disabled) { border-color: #ffffff73; background: var(--felt-fill-strong); box-shadow: none; transform: none; }
dialog.showcase-object-editor.is-felt :is(button[data-sticker-save], button.is-primary) { border-color: var(--pastel-yellow, #f5d982); background: var(--pastel-yellow, #f5d982); color: #25252d; }
dialog.showcase-object-editor.is-felt :is(input, select, textarea) { border: 1px solid var(--felt-line); border-radius: 999px; background: #00000033; color: var(--felt-ink); box-shadow: none; }
dialog.showcase-object-editor.is-felt :is(input, textarea)::placeholder { color: #8e82a3; }
dialog.showcase-object-editor.is-felt :is(p, small, span, label, legend, output) { color: inherit; }
dialog.showcase-object-editor.is-felt :is(.sticker-editor header p, .sticker-tools > span, .sticker-tools small, .sticker-editor footer) { color: var(--felt-muted); }
dialog.showcase-object-editor.is-felt .sticker-tools output { color: #fff; }
dialog.showcase-object-editor.is-felt :is(.sticker-editor, .sticker-tools) { border-color: var(--felt-line); }
dialog.showcase-object-editor.is-felt :is(.picker-empty, .card-browser-empty) { grid-column: 1 / -1; margin: 0; padding: 8px; border: 0; background: transparent; color: var(--felt-muted); font-size: 14px; }
dialog.showcase-object-editor.is-felt .card-browser-search-options summary { border: 1px solid var(--felt-line); border-radius: 999px; background: var(--felt-fill); color: var(--felt-ink); box-shadow: none; }
dialog.showcase-object-editor.is-felt button[data-sticker-save]:is(:hover, :focus-visible):not(:disabled) { border-color: #fbe7a8; background: #fbe7a8; }
dialog.showcase-object-editor.is-felt :is(button[data-save], button[data-statue-save]) { border-color: var(--pastel-yellow, #f5d982); background: var(--pastel-yellow, #f5d982); color: #25252d; }
dialog.showcase-object-editor.is-felt button:disabled { border-color: var(--felt-line); background: var(--felt-fill); color: #8e82a3; opacity: 1; }
dialog.showcase-object-editor.is-felt .card-picker { --picker-accent: var(--pastel-yellow, #f5d982); --picker-wash: #f5d9822b; }
dialog.showcase-object-editor.is-felt .picker-heading strong { color: #fff; font-size: 15px; }
dialog.showcase-object-editor.is-felt .picker-heading > span { background: var(--felt-fill-strong); color: var(--felt-ink); }
dialog.showcase-object-editor.is-felt .is-full .picker-heading > span { background: var(--picker-accent); color: #25252d; }
dialog.showcase-object-editor.is-felt .picker-tray { border-color: var(--felt-line); background: radial-gradient(ellipse at 30% 0, #ffffff14, transparent 65%), #00000033; box-shadow: inset 0 2px 10px #00000040; scrollbar-color: #ffffff40 transparent; }
dialog.showcase-object-editor.is-felt .picker-slot { border-color: #ffffff40; }
dialog.showcase-object-editor.is-felt .picker-slot-empty { color: var(--felt-muted); }
dialog.showcase-object-editor.is-felt .picker-slot.is-drop-target { box-shadow: 0 0 0 4px #f5d98233; }
dialog.showcase-object-editor.is-felt .picker-library .card-browser :is(input, select) { border-color: var(--felt-line); background: #00000033; color: var(--felt-ink); }
dialog.showcase-object-editor.is-felt .picker-library .card-browser > label { color: var(--felt-muted); }
dialog.showcase-object-editor.is-felt .picker-library .card-browser > button { height: 23px; min-height: 23px; padding: 0 4px; border: 0; border-radius: 8px; background: transparent; color: var(--felt-muted); }
dialog.showcase-object-editor.is-felt .picker-library .card-browser > button:is(:hover, :focus-visible) { background: var(--felt-fill-strong); color: #fff; }
/* The universal picker's own shapes (collection-workspace.css, card-browser.css), only recoloured for the felt:
   its fields keep their corners, its filters and search scopes open as dark panels, their titles in muted ink. */
dialog.showcase-object-editor.is-felt .picker-library .card-browser :is(input, select) { border-radius: 7px; }
dialog.showcase-object-editor.is-felt .card-browser-search-options > summary { border-radius: 8px; }
dialog.showcase-object-editor.is-felt .card-browser-search-options[open] > summary { background: var(--felt-fill-strong); border-color: #ffffff73; }
dialog.showcase-object-editor.is-felt .card-browser-search-options:has(input:checked) > summary { border-color: var(--pastel-yellow, #f5d982); color: #fff; }
dialog.showcase-object-editor.is-felt .card-browser-search-options > .card-browser-scopes { border-color: #ffffff40; background: #2b2240; box-shadow: 0 12px 34px #00000080; }
dialog.showcase-object-editor.is-felt .card-browser-scopes legend { color: var(--felt-muted); }
dialog.showcase-object-editor.is-felt .card-browser input[type="checkbox"] { accent-color: var(--pastel-yellow, #f5d982); }
dialog.showcase-object-editor.is-felt .card-browser-filters > summary { color: var(--felt-muted); }
dialog.showcase-object-editor.is-felt .card-browser-filters > summary:hover, dialog.showcase-object-editor.is-felt .card-browser-filters[open] > summary { color: #fff; }
dialog.showcase-object-editor.is-felt .card-browser-filter-panel { border-color: #ffffff40; background: #2b2240; box-shadow: 0 12px 30px #00000080; }
dialog.showcase-object-editor.is-felt .card-browser-filter-panel label { color: var(--felt-muted); }
dialog.showcase-object-editor.is-felt select option { background: #2b2240; color: var(--felt-ink); }
dialog.showcase-object-editor.is-felt .picker-results { color: var(--felt-muted); }
dialog.showcase-object-editor.is-felt .picker-grid { scrollbar-color: #ffffff40 transparent; }
dialog.showcase-object-editor.is-felt .card-picker .picker-card { min-height: 0; padding: 0; border: 0; border-radius: 9px; background: transparent; }
dialog.showcase-object-editor.is-felt .card-picker .picker-card:is(:hover, :focus-visible):not(:disabled) { border: 0; background: transparent; }
dialog.showcase-object-editor.is-felt .card-picker .picker-card:hover { transform: translateY(-4px) rotate(-1deg); filter: drop-shadow(0 8px 10px #00000080); }
dialog.showcase-object-editor.is-felt .card-picker .picker-check { background: #ffffffe6; color: #25252d; }
dialog.showcase-object-editor.is-felt .card-picker .is-selected .picker-check { background: var(--picker-accent); color: #25252d; }
dialog.showcase-object-editor.is-felt .card-picker .picker-caption button { min-height: 28px; padding: 0; border: 0; background: transparent; color: var(--felt-muted); }
dialog.showcase-object-editor.is-felt .card-picker .picker-caption button:hover { background: var(--felt-fill-strong); color: #fff; }
dialog.showcase-object-editor.is-felt .picker-message { color: #ffb4c4; }
dialog.showcase-object-editor.is-felt .showcase-slot-option { border-color: var(--felt-line); background: var(--felt-fill); color: var(--felt-ink); }
dialog.showcase-object-editor.is-felt .showcase-slot-option:hover { border-color: #ffffff73; }
dialog.showcase-object-editor.is-felt .showcase-slot-option:has(input[type="checkbox"]:checked) { border-color: var(--pastel-yellow, #f5d982); background: #f5d98214; box-shadow: none; }
dialog.showcase-object-editor.is-felt .showcase-slot-switch { background: #ffffff33; }
dialog.showcase-object-editor.is-felt input:checked + .showcase-slot-switch { background: var(--pastel-yellow, #f5d982); }
dialog.showcase-object-editor.is-felt input:checked + .showcase-slot-switch::after { background: #25252d; box-shadow: none; }
dialog.showcase-object-editor.is-felt .showcase-slot-choice-option { border-color: var(--felt-line); background: var(--felt-fill); color: var(--felt-ink); }
dialog.showcase-object-editor.is-felt .showcase-slot-choice-option:hover { border-color: #ffffff73; background: var(--felt-fill-strong); }
dialog.showcase-object-editor.is-felt .showcase-slot-choice-option:has(input:checked) { border-color: var(--pastel-yellow, #f5d982); background: var(--pastel-yellow, #f5d982); color: #25252d; }
dialog.showcase-object-editor.is-felt .showcase-object-editor-status { color: #ffb4c4; }
dialog.showcase-object-editor.is-felt .showcase-object-editor-actions button { min-height: 38px; padding: 0 18px; border-radius: 999px; text-align: center; }
dialog.showcase-object-editor.is-felt .showcase-object-editor-actions button.is-primary:is(:hover, :focus-visible):not(:disabled) { border-color: #fbe7a8; background: #fbe7a8; }