/* Shared finishing: art stays expressive, controls stay legible and deliberate. */
:root { --image-paper: #f4f1e9; --tool-radius: 5px 8px 4px 6px; }
:root[data-theme="ink"], :root[data-theme="cobalt"] { --tool-radius: 1px; }
.atlas-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; flex: none; }
button .atlas-icon, a .atlas-icon { stroke-width: 1.65; }
button, a, select, summary { transition: color .14s, background-color .14s, border-color .14s, box-shadow .14s; }
:focus-visible { outline-width: 2px; outline-offset: 3px; }
button:disabled, select option:disabled { cursor: default; }
select option:disabled { opacity: .45; color: var(--muted); }
select option:disabled:hover { background: transparent; outline: none; }
select optgroup { padding-block: 4px; color: var(--muted); font-size: 14px; font-weight: 400; }
select optgroup option { color: var(--ink); font-size: 17px; }

/* The first row of pictures belongs in the first screen. */
.site-header { min-height: 74px; grid-template-columns: auto 1fr auto auto; }
.sky-shell:has(#theme-picker[open]) { z-index: 6; }
.hero { height: 198px; }
.hero-copy { padding-bottom: 0; }
.hero p { margin-bottom: 14px; }
.search-box { height: 47px; }
.hero-art--gouache { top: -12px; width: 445px; height: 214px; }
[data-theme="ink"] .hero-art--ink { width: 470px; height: 214px; top: -10px; }
[data-theme="cobalt"] .theme-art--cobalt { top: -6px; height: 193px; width: min(450px,34vw); }
[data-theme="lifestyle"] .theme-art--lifestyle { top: -9px; height: 216px; width: 330px; }
[data-theme="storybook"] .theme-art--storybook { top: -9px; width: 306px; height: 216px; }
[data-theme="storybook"] .garden-ornament { right: calc(var(--page) + 335px); bottom: -3px; height: 80px; width: 95px; }
.decor-sprig { height: 78px; bottom: -2px; }
.paper-shore { height: 14px; }
main { padding-top: 14px; }
.page-header { padding-block: 4px 7px; margin-bottom: 16px; }
.toolbar { min-height: 40px; padding-bottom: 3px; }
.refine-row { min-height: 40px; }
.sort-label select { min-height: 38px; padding-block: 5px; font-size: 17px; }
.facet-select select { min-height: 34px; padding-block: 4px; }
.density-control { padding: 2px; }
.density-control button { min-height: 32px; }
.page-header.is-stuck { padding-block: 7px; column-gap: 18px; box-shadow: 0 3px 0 var(--card-shadow); }
.page-header.is-stuck .toolbar { min-height: 38px; }
.page-header.is-stuck .refine-row { padding-top: 3px; }
.compact-search, .compact-tools .facet-select select { height: 38px; }
.collection-heading { margin-bottom: 14px; }
#categories button:disabled { opacity: .4; }
#categories button:disabled:hover::before { background: transparent; }
.active-filters { gap: 8px; margin-bottom: 18px; }
.active-filters button { gap: 9px; border: 1px solid var(--line); border-radius: var(--tool-radius); padding: 3px 9px; }
.active-filters .atlas-icon { width: 14px; height: 14px; }

/* Comfortable reads the work; compact scans more works, with the same type. */
.gallery { --card-gap: 30px; }
.card-content { transition: border-color .16s, box-shadow .16s; }
.card-content:hover, .card-content:focus-within { border-color: var(--muted); box-shadow: 2px 4px 0 var(--card-shadow); }
.card-heading h3 button { transition: color .14s; }
.card-actions { padding-top: 8px; margin-top: 12px; }
.card-actions button { border-radius: 3px; }
.card-actions .atlas-icon { width: 18px; height: 18px; }
.card-copy { min-width: 94px; justify-content: flex-end; }
.card-copy.is-copied { color: var(--ink); }
.card-actions .card-copy { min-width: 32px; justify-content: center; margin-left: 2px; }
.card-actions { justify-content: flex-start; gap: 8px; }
.card-create { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 7px; color: var(--ink); text-decoration: none; border-radius: var(--tool-radius); white-space: nowrap; font-size: 17px; }
.card-create .atlas-icon, .detail-create .atlas-icon { flex-shrink: 0; }
.card-create .atlas-icon { width: 21px; height: 21px; }
.card-create:hover, .card-create:focus-visible { background: var(--panel); }
.header-create { display: inline-flex; align-items: center; gap: 7px; color: inherit; font-size: 18px; text-decoration: none; border-bottom: 1px solid currentColor; padding: 5px 2px; white-space: nowrap; }
.header-create:hover { opacity: .75; }
.inspector-top .detail-create { display: inline-flex; align-items: center; gap: 7px; margin-right: auto; min-height: 36px; padding: 5px 12px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); border-radius: var(--tool-radius); font: inherit; font-size: 17px; }
.inspector-top .detail-create:hover { background: var(--card); color: var(--ink); }
.card-save .atlas-icon { width: 19px; height: 19px; }
.open-indicator { width: 32px; height: 32px; background: var(--card); border: 1px solid var(--line); border-radius: var(--tool-radius); }
html[data-density="compact"] .gallery { --card-gap: 24px; column-gap: 18px; }
html[data-density="compact"] .card-summary { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-bottom: 10px; }
html[data-density="compact"] .card-heading { margin-bottom: 6px; }
html[data-density="compact"] .card-actions { margin-top: 9px; }
html[data-density="compact"] .card-create { font-size: 16px; }
@media (max-width:1399px) {
  html[data-density="comfortable"] .gallery { grid-template-columns: repeat(3,minmax(0,1fr)); }
  html[data-density="compact"] .gallery { grid-template-columns: repeat(4,minmax(0,1fr)); }
}

/* Identity first, the reusable prompt next; archive details unfold when needed. */
.inspector-top { height: 52px; padding: 9px 18px 5px; justify-content: flex-end; }
.inspector-scroll { padding-top: 0; }
.inspector h2 { font-size: 32px; margin-bottom: 8px; }
#detail-description { font-size: 18px; line-height: 1.7; margin-bottom: 18px; }
.section-heading { padding-block: 8px 10px; }
.section-heading h3 { font-size: 19px; }
.style-records { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 6px; }
.style-records>summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; padding: 12px 0; color: var(--muted); font-size: 17px; list-style: none; }
.style-records>summary::-webkit-details-marker { display: none; }
.style-records>summary::after { content: ''; width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); margin-right: 4px; }
.style-records[open]>summary::after { transform: rotate(225deg); }
.style-records>summary:hover { color: var(--ink); }
.archive-identity { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 7px 0 12px; }
.detail-layout.has-workbench .archive-identity .style-id { margin: 0; }
#archive-description { font-size: 16px; line-height: 1.8; }
.style-records .detail-tags { margin-bottom: 14px; }
.style-records .evidence-section { margin-top: 12px; padding-top: 16px; }
.style-records .archive-links { margin-top: 16px; padding-block: 16px 4px; }
.style-records .evidence-section>p { font-size: 16px; }
.viewer, [data-theme="ink"] .viewer, .compare-image-stage, [data-theme="ink"] .compare-image-stage, [data-theme="cobalt"] .compare-image-stage, .lightbox-stage, [data-theme="cobalt"] .lightbox-stage { background: var(--image-paper) url('assets/paper-grain.svg'); }
.viewer-toolbar { margin-bottom: 15px; }
.viewer-tabs button { font-size: 17px; padding: 6px 10px; }
.image-arrow { border: 1px solid transparent; }
.image-arrow:hover:not(:disabled) { border-color: var(--line); background: var(--card); }
.image-arrow:disabled { visibility: hidden; }
.image-caption { margin-block: 12px 8px; }
.thumbnails { gap: 8px; }
.thumbnails img { object-fit: contain; }
.thumbnails button { opacity: .8; background: var(--card); border-radius: var(--tool-radius); }
.thumbnails button.active { border-color: var(--ink); box-shadow: 0 1px 0 var(--card-shadow); }
.file-links a:hover, .archive-links a:hover, .page-footer a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.page-footer { padding-block: 22px 26px; }
.theme-options button { min-height: 44px; }
.theme-check { font-family: var(--text-font); font-size: 15px; }
.theme-check, .theme-chevron { display: inline-flex; align-items: center; }
.theme-check .atlas-icon { width: 17px; height: 17px; }
.theme-chevron .atlas-icon { width: 13px; height: 13px; }
.theme-picker[open] .theme-chevron { transform: rotate(180deg); }
[data-theme="cobalt"] .viewer { background: var(--image-paper) url('assets/paper-grain.svg'); }
@media (max-width:1279px) {
  .hero-art--gouache { width: 395px; }
  [data-theme="ink"] .hero-art--ink { width: 390px; }
  [data-theme="cobalt"] .theme-art--cobalt { height: 185px; }
  [data-theme="lifestyle"] .theme-art--lifestyle { width: 285px; right: var(--page); }
  [data-theme="storybook"] .theme-art--storybook { width: 285px; height: 207px; }
  .hero-tools { gap: 13px; }
  .inspector h2 { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  button, a, select, summary, .card-content { transition: none; }
}