/* Shared chrome only: template artwork has its own typography and palette. */
:root {
  --ui-surface:#27242c; --ui-raised:#322e38; --ui-edge:#48414d;
  --ui-ink:#faf5fa; --ui-muted:#c6baca; --ui-accent:#eadbed;
  --ui-on-accent:#332438; --ui-radius:16px; --ui-focus:#d8b7e3;
}
:is(#studio,#app) :is(button,summary,input,textarea,a):focus-visible {
  outline:2px solid var(--ui-focus);outline-offset:2px;
}
#layer .rows {display:grid;gap:6px}
#layer .rows button, .rumi-picker summary, .picker-items button {
  min-height:44px;border:1px solid transparent;border-radius:var(--ui-radius);
  background:var(--ui-surface);color:var(--ui-ink);font:inherit;
}
#layer .rows button {padding:10px 15px}
#layer .rows button:active,.picker-items button:active {background:var(--ui-raised)}
.rumi-picker {margin:0 0 12px}
.rumi-picker summary {cursor:pointer;display:flex;align-items:center;gap:12px;
  padding:10px 14px;border-color:var(--ui-edge);list-style:none}
.rumi-picker summary::-webkit-details-marker {display:none}
.rumi-picker summary span {display:grid;gap:2px;flex:1}
.rumi-picker summary small,.picker-items small {font-size:12px;color:var(--ui-muted)}
.rumi-picker summary svg {width:19px;height:19px}
.rumi-picker summary svg:last-child {transform:rotate(90deg)}
.rumi-picker[open] summary svg:last-child {transform:rotate(-90deg)}
.picker-items {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;padding:8px 0;max-height:32dvh;overflow:auto}
.picker-items button {padding:6px 10px;display:flex;align-items:center;text-align:left;justify-content:space-between;gap:4px}
.picker-items button[aria-pressed=true],.work-filters button.active,.screen .chip.on {background:var(--ui-accent);color:var(--ui-on-accent)}
.picker-items button[aria-pressed=true] small {color:var(--ui-on-accent)}
.editor-choice.primary,.screen .btn-ink,.sheet .btn-ink {background:var(--ui-accent);color:var(--ui-on-accent)}
.screen .btn,.sheet .btn,.editor-choice {border-radius:var(--ui-radius)}
.screen .chip,.work-filters button {border-radius:100px}
:is(.sheet,.fld) :is(input:not([type]),input[type=text],input[type=tel],textarea) {
  box-sizing:border-box;background:var(--ui-surface);color:var(--ui-ink);border:1px solid var(--ui-edge);
  border-radius:var(--ui-radius);padding:10px 13px;min-height:44px;font:inherit;max-width:100%;
}
:is(.sheet,.fld) input[type=range] {accent-color:var(--ui-accent)}
#choices button {overflow:hidden;border-radius:12px}

.chat-in .chat-attach {flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:15px;background:var(--ui-surface);color:var(--ui-ink);border:1px solid var(--ui-edge)}
.chat-attach svg {width:22px;height:22px}
.chat-preview:not([hidden]) {display:flex;position:absolute;bottom:100%;left:16px;padding:5px;background:var(--ui-surface);border:1px solid var(--ui-edge);border-radius:14px}
.chat-preview img {width:64px;height:64px;object-fit:cover;border-radius:10px}
.chat-preview button {position:absolute;right:-6px;top:-6px;background:#423546;color:white;border-radius:50%;width:28px;height:28px}
.chat-photo {display:block;max-width:100%;width:auto;max-height:240px;border-radius:10px;object-fit:contain}
.chat .bub.me {background:var(--ui-accent);color:var(--ui-on-accent)}

.annual-picker {padding:14px;border:1px solid var(--ui-edge);border-radius:18px;background:var(--ui-surface)}
.annual-years,.annual-swatches {display:flex;flex-wrap:wrap;gap:6px}
.annual-heading,.custom-swatch {display:flex;align-items:center;justify-content:space-between;gap:8px;margin:16px 0}
.annual-picker small,.annual-picker p,.annual-picker figcaption {font-size:12px;color:var(--ui-muted)}
.annual-picker p {margin:14px 0 8px}
.annual-groups {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.annual-groups button {padding:6px;border:1px solid var(--ui-edge);border-radius:10px;text-align:left;font-size:12px;color:var(--ui-ink)}
.annual-groups i {display:flex;height:15px;overflow:hidden;border-radius:5px;margin-bottom:4px}
.annual-groups b {flex:1}
.annual-picker [aria-pressed=true] {outline:2px solid var(--ui-accent);outline-offset:-2px}
.annual-swatches button {width:33px;height:33px;background:var(--swatch);border-radius:50%}
.annual-swatches [aria-pressed=true] {box-shadow:inset 0 0 0 4px #27242c}
.annual-picker a {color:inherit;text-decoration:underline}
.annual-samples {display:grid;grid-template-columns:1fr 1fr;gap:10px}
.annual-samples figure {margin:0;min-width:0}
.annual-samples .pt {width:100%;border-radius:8px}
.custom-swatch input {width:52px;height:38px}
.material-print {position:relative;display:block;overflow:hidden}
.material-print::after,.pt .ph.has-img::after {content:"";position:absolute;inset:0;pointer-events:none;background:var(--print,var(--brand));mix-blend-mode:color;opacity:.28}
.mat-grid.photo .mat .material-print {position:absolute;inset:0}
.folio {position:absolute;inset:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:2.4cqw;padding:5cqw;font-family:serif}
.folio header,.folio footer {display:flex;align-items:center;justify-content:space-between;gap:2cqw;font:600 2.6cqw/1.35 sans-serif}
.folio header i {height:.25cqw;flex:1;background:currentColor;opacity:.5}
.folio footer {font-size:2.2cqw;border-top:.25cqw solid currentColor;padding-top:1.7cqw}
.folio footer svg {width:6cqw;height:6cqw}
.folio-art {position:relative;min-height:0;overflow:hidden;background:color-mix(in srgb,var(--wash) 24%,transparent);border-radius:45cqw 45cqw 1cqw 1cqw}
.folio-art svg,.folio-art .ph {width:100%;height:100%}
.folio-copy {min-width:0}.folio-copy small {font:600 2.3cqw/1.4 sans-serif;letter-spacing:.35cqw}
.folio-copy strong {display:block;font-size:8cqw;line-height:1.15;margin:.7cqw 0 1.3cqw}
.folio-copy p {margin:0;font:400 3.2cqw/1.45 sans-serif}
.folio.edition-1 .folio-art {border-radius:1cqw}
.folio.edition-2 .folio-art {grid-row:3;border-radius:0;background:transparent;border-block:.5cqw solid currentColor}
.folio.edition-2 {grid-template-rows:auto auto minmax(0,1fr) auto}
.folio.edition-2 strong {font-family:sans-serif;font-weight:900;font-size:11cqw}
.folio.landscape {padding:3cqw;grid-template: auto 1fr auto / 1fr .85fr;gap:1cqw 3cqw}
.folio.landscape header,.folio.landscape footer {grid-column:1/-1}
.folio.landscape .folio-art {grid-row:2;grid-column:2}
.folio.landscape .folio-copy {grid-row:2;grid-column:1;align-self:center}
.folio.landscape strong {font-size:6cqw}.folio.landscape p {font-size:2.35cqw}
.lib-more {display:block;margin:16px auto}
.folio-code {display:block;width:7cqw;height:7cqw;flex:none}
.lib-count {margin:10px 16px;color:var(--ui-muted);font-size:12px}
.folio.edition-3:not(.landscape) {grid-template: auto 1fr auto / 1fr 32%;gap:2cqw}
.folio.edition-3:not(.landscape) header,.folio.edition-3:not(.landscape) footer {grid-column:1/-1}
.folio.edition-3:not(.landscape) .folio-copy {grid-area:2/1;align-self:center}
.folio.edition-3:not(.landscape) .folio-art {grid-area:2/2;border-radius:20cqw;align-self:stretch}
.folio.edition-3.landscape .folio-art {border-radius:40cqw;grid-column:1}
.folio.edition-3.landscape .folio-copy {grid-column:2}
.catalog-tags {display:block;color:var(--ui-muted);font-size:11px;line-height:1.5}
.mat-grid .catalog-tags {font-size:9px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.mat-grid .mat:has(.catalog-tags) > span:last-child {right:4px;max-width:100%}
.mat-grid.photo .catalog-tags {color:white;text-shadow:0 1px 3px black}
.industry-other {display:grid;flex:0 0 100%;gap:6px;margin-top:8px;font-size:13px;color:var(--ui-muted)}
.industry-other input {width:100%;min-width:0}
.annual-color-families {display:grid;gap:13px;margin:12px 0 15px}
.annual-color-families h4 {margin:0 0 5px;font-size:13px;color:var(--ui-muted)}
.annual-color-families .annual-swatches {display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:3px}
.annual-color-families .annual-swatches button,.annual-reference button {width:100%;min-height:36px;border-radius:8px;background:var(--swatch)}
.annual-reference {display:flex;align-items:center;gap:8px;margin-bottom:8px}
.annual-reference button {width:36px}
.manual-picks {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.manual-picks button {padding:6px;border-radius:8px;color:var(--ui-ink);background:var(--ui-raised);font-size:12px}
.manual-picks i {display:block;height:18px;margin-bottom:4px;border-radius:5px}
.pair-discs {display:flex;justify-content:center;align-items:center;gap:3px;margin:4px 0 7px}
.manual-picks .pair-discs i {width:25px;height:25px;margin:0;border-radius:50%;box-shadow:inset 0 0 0 1px #ffffff24}
.manual-picks button[aria-pressed=true]:has(.pair-discs) {outline:1px solid var(--ui-ink);outline-offset:-1px}
.hex-fields {display:flex;gap:8px;margin:12px 0}.hex-field {display:grid;gap:4px;flex:1;min-width:0}
.hex-field input {width:100%;box-sizing:border-box;min-height:40px;padding:6px;border:1px solid var(--ui-edge);border-radius:8px;color:var(--ui-ink);background:var(--ui-surface)}
.annual-picker>.seg {margin-bottom:12px}