/* Library workspace. Shared typography, palettes and site navigation live in shared/. */
/* Keep the page width stable when a dialog locks background scrolling. */
html { scrollbar-gutter: stable; }
.atlas-paired-home {
  --library-gutter: clamp(20px, 3.35vw, 56px);
  --library-width: 1680px;
}
.atlas-paired-home .ls-header {
  max-width: var(--library-width);
  padding-inline: var(--library-gutter);
}
.intro, .collection {
  width: 100%;
  max-width: var(--library-width);
  margin-inline: auto;
  padding-inline: var(--library-gutter);
}
.intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 28px;
  padding-bottom: 24px;
}
.intro-main { min-width: 0; }
.intro h1 {
  font-family: var(--display, var(--sans));
  font-size: clamp(28px, 2.5vw, 36px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.035em;
}
.intro-copy {
  margin-top: 12px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}
.saved-references {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 10px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: var(--surface);
  font-size: 15px;
  font-weight: 600;
}
.saved-references:hover { border-color: var(--muted); background: var(--hover); }
.catalog-layout, .catalog-main { min-width: 0; }
.style-category-toolbar {
  display: grid;
  gap: 16px;
  padding: 16px 0;
  border: 0;
}
.collection-guide { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.collection-guide h2 { font-size: 16px; font-weight: 650; line-height: 1.5; }
.collection-guide p { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; line-height: 1.6; }
#category-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.category-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  font-size: 15px;
  line-height: 1.5;
  transition: border-color .15s, background .15s;
}
.category-button:hover { background: var(--hover); border-color: var(--muted); }
.category-button[aria-current="true"] { background: color-mix(in srgb,var(--action-bg) 70%,#fff); border-color: color-mix(in srgb,var(--action-bg) 70%,#fff); color: var(--action-ink); }
.category-label { font-weight: 550; }
.category-count { font-size: 12px; font-variant-numeric: tabular-nums; opacity: .8; }
.category-load-status { font-size: 14px; color: var(--muted); }
.catalog-pagination { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 0; color: var(--muted); font-size: 14px; }
.catalog-pagination[data-pagination="bottom"] { margin-top: 16px; border-top: 0; }
.atlas-paired-home .ls-footer{max-width:var(--library-width);margin-top:24px;padding:24px var(--library-gutter)}
.page-summary { font-variant-numeric: tabular-nums; }
.page-buttons { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.page-buttons button {
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
}
.page-buttons button[aria-current="page"] { background: var(--action-bg); border-color: var(--action-bg); color: var(--action-ink); font-weight: 650; }
.page-buttons button:hover:not(:disabled) { border-color: var(--muted); }
.page-buttons button:disabled { opacity: .45; }
.page-gap { padding-inline: 2px; }
.paired-catalog { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 24px; align-items: start; }
.atlas-paired-home{display:flex;flex-direction:column;min-height:100vh;min-height:100svh}
.atlas-paired-home>main{flex:1 0 auto}
.atlas-paired-home>.ls-footer{flex-shrink:0;width:100%}
.empty-state { text-align: center; padding: 80px 24px; color: var(--muted); }
.empty-state > span { font-size: 48px; }
.empty-state h3 { font-size: 20px; color: var(--ink); margin: 16px 0; }
.empty-state button { margin-top: 8px; }
.preview-note { font-size: 16px; color: var(--muted); padding-block: 32px; }





/* Prompt workspace. The prompt language remains an independent control. */
#detail-dialog, #pair-dialog {
  margin: auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  width: min(1400px, calc(100vw - 48px));
  max-width: none;
  max-height: calc(100dvh - 48px);
  overflow: auto;
  overscroll-behavior: contain;
  box-shadow: 0 24px 96px #0005;
}
#detail-dialog::backdrop, #pair-dialog::backdrop { background: #101417b3; backdrop-filter: blur(5px); }
.detail-shell { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.icon-button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--surface); font-size: 20px; flex-shrink: 0; }
.icon-button:hover { background: var(--hover); border-color: var(--muted); }
.close-detail { position: sticky; top: 20px; grid-column: 2; grid-row: 1; align-self: start; justify-self: end; z-index: 5; margin: 20px 20px -64px 0; }
.detail-content { grid-column: 2; grid-row: 1; min-width: 0; padding: 32px; }
.eyebrow { color: var(--muted); font-size: 14px; font-weight: 550; line-height: 1.6; }
.detail-content > .eyebrow { padding-right: 52px; }
.detail-title-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px 14px; margin: 8px 52px 14px 0; }
.detail-id { color: var(--muted); font-size: 20px; font-weight: 550; font-variant-numeric: tabular-nums; }
.detail-title-row h2 { font-family: var(--display, var(--sans)); font-size: 28px; line-height: 1.35; font-weight: 700; letter-spacing: -.025em; overflow-wrap: anywhere; }
.source-tag { color: var(--muted); font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.source-tag span { display: inline-block; padding: 4px 8px; background: var(--surface-soft); border-radius: 4px; }
.detail-theme { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.7; }
.detail-theme > span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 14px; font-weight: 600; }
.language-switch { display: inline-flex; gap: 4px; max-width: 100%; margin-top: 24px; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); }
.language-switch button { min-height: 44px; padding: 10px 20px; border-radius: 5px; font-size: 15px; color: var(--muted); }
.language-switch button[aria-pressed="true"] { color: var(--action-ink); background: var(--action-bg); font-weight: 600; }
.prompt-section { margin-top: 28px; }
.prompt-label { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.prompt-label h3 { font-size: 18px; font-weight: 650; line-height: 1.5; }
.copy-button, .download-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 6px; font-size: 15px; font-weight: 600; line-height: 1.5; background: var(--surface); color: var(--ink); }
.copy-button:hover { border-color: var(--muted); background: var(--hover); }
.download-button { background: var(--action-bg); color: var(--action-ink); border-color: var(--action-bg); }
.prompt-help { margin: 8px 0 12px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.prompt-text { padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); font-size: 16px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 340px; overflow: auto; scrollbar-width: thin; }
.detail-footnote { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; line-height: 1.7; }
#detail-dialog.prompt-only { width: min(920px, calc(100vw - 48px)); }
.prompt-only .detail-shell { display: block; }
.prompt-only .detail-visual { display: none; }
.prompt-only .detail-content { padding: 36px 40px; }
.prompt-only .close-detail { float: right; margin: 20px 20px -64px 0; }
.detail-visual { grid-column: 1; grid-row: 1; padding: 24px; background: var(--surface-soft); min-width: 0; }
.image-stage { display: flex; align-items: center; justify-content: center; position: relative; min-height: 320px; overflow: auto; background: var(--paper-deep); border: 1px solid var(--line); border-radius: 8px; scrollbar-width: thin; }
.image-stage img { display: block; max-width: 100%; max-height: 65vh; height: auto; object-fit: contain; cursor: zoom-in; }
.image-stage.is-zoomed { display: block; max-height: 65vh; }
.image-stage.is-zoomed img { max-width: none; max-height: none; cursor: zoom-out; }
.image-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; padding-block: 16px; font-size: 15px; }
.text-button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 0; font-size: 15px; text-decoration: underline; text-underline-offset: 4px; }
.generation-info { display: flex; flex-wrap: wrap; gap: 8px 20px; padding-top: 16px; margin-top: 8px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.generation-info .model { width: 100%; font-size: 15px; color: var(--ink); font-weight: 600; }
.download-hint, .quality-note { color: var(--muted); font-size: 14px; line-height: 1.7; margin-block: 12px; }
.detail-placeholder, .pending-visual { display: grid; justify-items: center; align-content: center; gap: 12px; min-height: 280px; padding: 32px; color: var(--muted); text-align: center; }
.detail-placeholder > span { font-size: 24px; font-weight: 600; }
.detail-placeholder p, .pending-visual { font-size: 16px; }
.pending-visual small { font-size: 14px; }
.toast { position: fixed; z-index: var(--z-toast, 60); bottom: 28px; left: 50%; transform: translate(-50%, 12px); width: max-content; max-width: calc(100vw - 32px); padding: 14px 20px; border-radius: 8px; color: var(--action-ink); background: var(--action-bg); font-size: 15px; line-height: 1.5; opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; box-shadow: 0 8px 24px #0003; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
body.modal-open { overflow: hidden; }
.scroll-controls { position: fixed; right: 24px; bottom: 24px; z-index: 20; }
.scroll-controls button { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--surface); box-shadow: 0 4px 16px #0002; font-size: 20px; }
.scroll-controls button span { font-size: 14px; font-weight: 600; }
.scroll-controls button:hover { background: var(--hover); }

@media (max-width: 1279px) { .paired-catalog { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 980px) {
  .paired-catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .intro { padding-top: 28px; padding-bottom: 24px; }
  .collection-guide { align-items: start; flex-direction: column; gap: 8px; }
  .detail-shell { grid-template-columns: minmax(0, 1fr); }
  .detail-visual { grid-column: 1; grid-row: 2; }
  .detail-content, .close-detail { grid-column: 1; grid-row: 1; }
}
@media (max-width: 640px) {
  .intro { align-items: start; flex-direction: column; gap: 20px; }
  .intro h1 { font-size: 30px; }
  .saved-references { align-self: start; }
  .paired-catalog { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .style-category-toolbar { padding-block: 20px; }
  .category-button { padding-inline: 12px; }
  .catalog-pagination { gap: 12px; }
  .page-buttons { gap: 8px; }
  .page-buttons button { padding-inline: 10px; }
  #detail-dialog, #detail-dialog.prompt-only, #pair-dialog { width: 100%; max-height: 100dvh; height: 100dvh; border: 0; border-radius: 0; margin: 0; }
  .detail-content, .prompt-only .detail-content { padding: 28px 20px; }
  .detail-title-row { gap: 8px 12px; }
  .detail-title-row h2 { font-size: 24px; }
  .close-detail, .prompt-only .close-detail { top: 12px; margin: 12px 12px -56px 0; }
  .prompt-label h3 { font-size: 17px; }
  .prompt-text { padding: 16px; max-height: 360px; }
  .scroll-controls { right: 16px; bottom: 16px; }
  .scroll-controls button { padding: 8px; }
  .scroll-controls button span { display: none; }
}

/* Keep viewport positioning after :modal ends, while the exit transition is visible.
   Reserve room below two full-width squares; only the prompt text scrolls. */
#detail-dialog{position:fixed;inset:0;width:min(1040px,calc(100vw - 48px),max(360px,calc(200dvh - 680px)));height:min(860px,calc(100dvh - 48px));max-height:min(860px,calc(100dvh - 48px));overflow:hidden}
#detail-dialog .detail-shell{display:block;height:100%}
#detail-dialog .close-detail{position:absolute;top:12px;right:12px;margin:0;width:44px;height:44px;min-height:44px;padding:0;border:0;background:transparent;box-shadow:none;color:var(--muted)}
#detail-dialog .close-detail svg{display:block;width:16px;height:16px;pointer-events:none}
#detail-dialog .close-detail:hover{background:transparent;color:var(--ink)}
#detail-dialog .close-detail:focus-visible{outline:1px solid var(--accent);outline-offset:-7px}
#detail-dialog .detail-content{display:flex;flex-direction:column;gap:12px;height:100%;min-height:0;padding:20px;overflow:hidden}
#detail-dialog .detail-heading{display:flex;align-items:center;flex-wrap:wrap;gap:6px 16px;flex:none;padding-right:60px}
#detail-dialog .detail-title-row{margin:4px 0 0;gap:12px}
#detail-dialog .detail-title-row h2{font-size:24px}
#detail-dialog .detail-controls{display:flex;align-items:center;gap:10px;flex:none;flex-wrap:wrap}
#detail-dialog .detail-controls :is(select,.ls-select){width:156px}
#detail-dialog .language-switch{margin:0;padding:3px}
#detail-dialog .language-switch button{min-height:36px;padding:6px 14px;font-size:14px}
#detail-dialog .download-button{margin-left:auto;font-size:14px;min-height:42px;padding:8px 14px}
#detail-dialog .detail-examples{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;flex:none}
#detail-dialog .detail-examples figure{display:block;position:relative;min-width:0;min-height:0;aspect-ratio:1;margin:0;overflow:hidden;background:var(--paper);border-radius:8px}
#detail-dialog .detail-examples img{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#detail-dialog .detail-examples figcaption{position:absolute;z-index:1;top:8px;left:8px;max-width:calc(100% - 16px);padding:5px 7px;border:1px solid var(--line);border-radius:4px;background:var(--surface);color:var(--ink);text-align:left;font-size:16px;line-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#detail-dialog .prompt-section{display:flex;flex-direction:column;gap:8px;flex:1;min-height:0;margin:0;overflow:hidden}
#detail-dialog .prompt-label{flex:none;gap:12px}
#detail-dialog .prompt-label h3{font-size:16px}
#detail-dialog .copy-button{min-height:36px;padding:6px 12px;font-size:13px}
#detail-dialog .prompt-text{flex:1;min-height:0;max-height:none;overflow:auto;overscroll-behavior:contain;padding:14px;font-size:14px;line-height:1.7}
@media(max-width:600px){#detail-dialog{width:min(100%,max(320px,calc(200dvh - 440px)));height:100dvh;max-height:100dvh}#detail-dialog .detail-content{padding:16px;gap:10px}#detail-dialog .detail-examples{gap:10px}#detail-dialog .download-button{padding-inline:10px}#detail-dialog .language-switch button{padding-inline:10px}}

#detail-dialog .detail-controls .ls-select>summary{height:36px;min-height:36px;padding:7px;line-height:20px}
#detail-dialog .detail-controls .ls-select-options{top:auto;bottom:calc(100% + 6px);max-height:min(240px,calc(100dvh - 120px))}
#detail-dialog .download-button,#detail-dialog .copy-button{min-height:36px;padding:7px;line-height:20px}
#detail-dialog .language-switch button{min-height:28px;padding:4px;line-height:20px}

/* One type size, controls outside the text, and independent image downloads. */
#detail-dialog .detail-content{font-size:16px}
#detail-dialog :is(.detail-id,.prompt-label h3,.copy-button,.download-example,.detail-examples figcaption,.language-switch button,.ls-select>summary){font-size:16px;line-height:20px}
#detail-dialog .prompt-text{font-size:16px}
#detail-dialog .detail-id{font-size:24px;line-height:30px;font-weight:650;font-variant-numeric:tabular-nums}
#detail-dialog .detail-examples figure{position:relative}
#detail-dialog .download-example{position:absolute;right:8px;bottom:8px;display:grid;place-items:center;width:36px;height:36px;min-height:36px;padding:0;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink);box-shadow:0 2px 8px #0003}
#detail-dialog .download-example svg{display:block;width:18px;height:18px;pointer-events:none}




@media(pointer:coarse){#detail-dialog .download-example{width:44px;height:44px}}
#detail-dialog .download-example:hover:not(:disabled){background:var(--hover);border-color:var(--muted)}
#detail-dialog .download-example:disabled{opacity:.5;cursor:default}
#detail-dialog .prompt-section[hidden]{display:none}
#detail-dialog .prompt-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex:none;min-width:0}
#detail-dialog .prompt-resource-links{display:flex;align-items:center;gap:16px;min-width:0}
#detail-dialog .prompt-resource-links a{display:inline-flex;align-items:center;gap:4px;min-height:36px;color:var(--muted);font-size:16px;line-height:20px;white-space:nowrap;text-decoration:none}
#detail-dialog .prompt-resource-links a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
#detail-dialog .prompt-resource-links a:focus-visible{outline:1px solid var(--accent);outline-offset:3px;border-radius:3px}
#detail-dialog .prompt-resource-links a>span[aria-hidden]{font-size:12px}

/* Short landscape viewports keep the close/copy controls and a scrollable text line. */
@media(max-height:500px){
 #detail-dialog{width:min(100vw,max(320px,calc(200dvh - 440px)));height:100dvh;max-height:100dvh}
 #detail-dialog .detail-content{padding:8px;gap:6px}
 #detail-dialog .close-detail{top:0;right:0}
 #detail-dialog .detail-id{font-size:20px;line-height:24px}
 #detail-dialog .detail-examples{gap:10px}
 #detail-dialog .detail-controls :is(select,.ls-select){width:124px}
 #detail-dialog .detail-controls{gap:6px}
 #detail-dialog .prompt-section{gap:6px}
 #detail-dialog .prompt-text{padding:6px;line-height:1.35}
}

@media(max-width:440px),(max-height:500px){
 #detail-dialog .prompt-actions{gap:8px}
 #detail-dialog .prompt-resource-links{gap:10px}
 #detail-dialog .prompt-resource-links a,#detail-dialog .prompt-actions .copy-button{font-size:14px}
}

#detail-dialog .prompt-resource-links .github-mark{display:block;width:16px;height:16px;flex:0 0 16px;margin-right:2px}

/* Native dialog transitions stay interruptible and preserve immediate focus handling. */
@media(prefers-reduced-motion:no-preference){
 #detail-dialog{opacity:0;transform:translateY(12px) scale(.96);transform-origin:50% 48%;transition:opacity .18s ease,transform .22s cubic-bezier(.2,.8,.2,1),overlay .22s allow-discrete,display .22s allow-discrete}
 #detail-dialog[open]{opacity:1;transform:none;transition-duration:.3s,.38s,.38s,.38s}
 #detail-dialog::backdrop{opacity:0;transition:opacity .18s ease,overlay .22s allow-discrete,display .22s allow-discrete}
 #detail-dialog[open]::backdrop{opacity:1;transition-duration:.28s,.38s,.38s}
 @starting-style{
  #detail-dialog[open]{opacity:0;transform:translateY(12px) scale(.96)}
  #detail-dialog[open]::backdrop{opacity:0}
 }
}

.library-loading{grid-column:1/-1;min-height:160px}

/* Phone galleries keep references scannable and actions large enough to tap. */
@media(max-width:600px){
 .atlas-paired-home{--library-gutter:12px}
 .paired-catalog{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}
 .style-category-toolbar{padding-block:12px;gap:8px}
 #visual-tag-toolbar,.style-category-list{gap:6px}
 body .category-button{min-height:40px;padding:8px;font-size:13px;white-space:nowrap}
 .atlas-paired-home .curtain-card-bar{padding:4px 6px;gap:2px;min-height:52px}
 .atlas-paired-home .curtain-card-bar .curtain-number{font-size:14px;white-space:nowrap;flex:1;min-width:0}
 .atlas-paired-home .curtain-card-bar .favorite-button{width:44px;height:44px;flex:none}
 .atlas-paired-home .curtain-card-bar .row-prompt-action{width:44px;min-width:44px;height:44px;padding:12px;font-size:0;gap:0;border:0}
 .row-prompt-action svg{width:20px;height:20px}
 .row-prompt-action:not(:has(svg))::before{content:'';display:block;width:20px;height:20px;background:currentColor;mask:url("assets/icons/download.svg") center/contain no-repeat}
 .row-prompt-action .palette-reference-label{display:none}
 .atlas-paired-home .curtain-label{font-size:10px;padding:3px 4px;max-width:calc(100% - 12px);left:6px;top:6px}
 #detail-dialog{width:100%;max-width:100%;height:100dvh;max-height:100dvh;margin:0;border-radius:0}
 #detail-dialog .detail-content{padding:16px 12px;gap:12px}
 #detail-dialog .detail-examples{gap:8px}
 #detail-dialog .detail-examples figcaption{font-size:11px;line-height:16px;left:4px;top:4px;max-width:calc(100% - 8px);padding:3px}
 .atlas-paired-home .ls-footer{padding-inline:12px}
}
@media(max-width:359px){.paired-catalog{grid-template-columns:minmax(0,1fr)}}

/* Full-width phone references scroll as a document instead of squeezing images. */
@media(max-width:600px){
 #detail-dialog:not(.color-detail){overflow-y:auto;overscroll-behavior:contain}
 #detail-dialog:not(.color-detail) .detail-shell{height:auto}
 #detail-dialog:not(.color-detail) .detail-content{height:auto;overflow:visible}
 #detail-dialog:not(.color-detail) .detail-examples{grid-template-columns:minmax(0,1fr);gap:12px}
 #detail-dialog:not(.color-detail) .detail-examples figure{aspect-ratio:auto}
 #detail-dialog:not(.color-detail) .detail-examples img{position:static;width:100%;height:auto;object-fit:contain}
 #detail-dialog:not(.color-detail) .prompt-section{flex:none;overflow:visible}
 #detail-dialog:not(.color-detail) .prompt-text{flex:none;max-height:none;overflow:visible}
 #detail-dialog:not(.color-detail) .close-detail{position:fixed;top:8px;right:8px;width:42px;height:42px;min-height:42px;border-radius:6px;background:var(--surface);z-index:3}
}