/* Category gallery: viewport-sized dialog, fixed 30/70 split. */
#detail-dialog{width:80vw;max-width:80vw;height:80svh;max-height:80svh;min-height:0}
#detail-dialog[open]{grid-template-columns:30% 70%;grid-template-rows:minmax(0,1fr)}
#detail-dialog .detail-copy{padding:clamp(22px,2.3vw,44px);display:flex;flex-direction:column;align-content:normal;min-height:0;border-right:1px solid #ffffff12}
#detail-dialog .detail-copy h2{font-size:clamp(24px,2.5vw,40px);flex-shrink:0}
#detail-dialog .detail-copy .detail-kicker,#detail-dialog #detail-description{flex-shrink:0}
#detail-dialog .detail-copy #detail-description{font-size:12px;color:#bcb6ac}
.project-picker{display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start;align-items:flex-start;gap:8px 7px;overflow-y:auto;min-height:70px;flex:1;padding:4px 3px;scrollbar-width:none}
.project-picker::-webkit-scrollbar{display:none}
.project-picker:empty{display:none}
.project-choice{display:block;width:auto;max-width:100%;text-align:left;flex:0 0 auto;padding:7px 11px;border:1px solid #ffffff19;border-radius:999px;background:#ffffff04;font-size:11px;line-height:1.4;overflow-wrap:anywhere;transition:background 180ms,border-color 180ms}
.project-choice:hover{background:#ffffff0b;border-color:#ff702b80}
.project-choice[aria-pressed=true]{background:#ff702b1c;border-color:#ff702b;color:#ff995f}
#detail-dialog .detail-note{font-size:10px!important;margin:15px 0 0!important;color:#a39b90!important;flex-shrink:0}
#detail-dialog .back-button{align-self:flex-start;flex-shrink:0}
#detail-dialog .detail-image{display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;width:100%;height:100%;background:#d9a838;overflow:hidden;padding:0}
.detail-media{display:block;flex:none;object-fit:contain;max-width:90%;max-height:90%;box-shadow:0 16px 40px #0009;border-radius:3px}
.media-empty{font-size:12px;color:#57401c;letter-spacing:1px;text-align:center;line-height:1.8;padding:24px}
#detail-dialog .close-dialog{z-index:5}
.long-triptych{width:100%;height:100%;display:grid;grid-template-columns:repeat(var(--long-columns,3),minmax(0,1fr));gap:2%;padding:0 6%;overflow:hidden}
.long-panel{position:relative;min-width:0;height:76%;top:16%;overflow:hidden;transform:skewY(8deg);box-shadow:0 12px 25px #573e1830;background:#b88525}
.long-panel:nth-child(2){top:10%}
.long-panel:nth-child(3){top:4%}
.long-panel img{display:block;width:100%;max-width:none;height:auto;position:absolute;left:0;top:0;will-change:transform}
@media(prefers-reduced-motion:reduce){.long-panel img{will-change:auto}}
@media(max-width:760px){
  #detail-dialog{width:90vw;max-width:90vw;height:80svh}
  #detail-dialog[open]{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);border-radius:14px}
  #detail-dialog .detail-copy{padding:12px 16px 10px;border-right:0;border-bottom:1px solid #ffffff12;overflow:hidden}
  #detail-dialog .detail-copy h2{font-size:22px;overflow-wrap:anywhere;margin:5px 0 9px}
  #detail-dialog .detail-copy .detail-kicker{font-size:9px;letter-spacing:1px}
  #detail-dialog .detail-copy #detail-description,#detail-dialog .detail-note,#detail-dialog .back-button{display:none}
  .project-picker{flex:0 1 auto;min-height:0;max-height:clamp(68px,12svh,112px);padding:3px;gap:6px}
  .project-choice{font-size:11px;padding:7px 9px;border-radius:12px}
  #detail-dialog .back-button{font-size:10px}
  #detail-dialog .back-button span{margin-left:5px}
  #detail-dialog .close-dialog{right:8px;top:8px;width:30px;height:30px}
}

/* Planning decks: two equal, independently bounded vertical columns. */
.planning-gallery{width:100%;height:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4%;padding:0 5%;overflow:hidden;touch-action:none;outline-offset:-4px}
.planning-lane{height:100%;min-width:0;overflow:hidden}
.planning-track{display:flex;flex-direction:column;gap:24px;padding:28px 0;will-change:transform}
#detail-dialog .planning-track img{display:block;position:static;width:100%;height:auto;max-width:none;max-height:none;flex:none;object-fit:contain;border-radius:1px;box-shadow:0 8px 18px #65430d26}
@media(max-width:760px){.planning-gallery{gap:4%;padding:0 4%}.planning-track{gap:12px;padding:16px 0}}
@media(prefers-reduced-motion:reduce){.planning-track{will-change:auto}}

/* Shared software badges sit below the preview, outside the clipped artwork. */
#detail-dialog .detail-image{flex-direction:column}
.detail-media-stage{display:flex;align-items:center;justify-content:center;width:100%;flex:1;min-height:0;min-width:0;overflow:hidden}
.detail-software-tools{display:flex;align-items:center;justify-content:center;gap:12px;flex:0 0 60px;width:100%;padding:4px 18px 14px;box-sizing:border-box}
.detail-software-tools[hidden]{display:none}
.software-badge{display:inline-flex;align-items:center;justify-content:center;border-radius:9px;box-shadow:0 3px 8px #56340030}
.software-badge img{display:block;width:36px;height:36px;border-radius:8px}
@media(max-width:760px){.detail-software-tools{flex-basis:46px;padding:3px 12px 9px;gap:9px}.software-badge img{width:30px;height:30px}}

/* Landscape rounded badges include readable software names. */
.detail-software-tools{flex-basis:76px;padding:4px 18px 12px}
.software-badge{border-radius:8px;overflow:hidden}
.software-badge img{width:72px;height:56px;border-radius:8px}
@media(max-width:760px){.detail-software-tools{flex-basis:65px;padding:3px 12px 9px}.software-badge img{width:66px;height:auto;aspect-ratio:144/112}}

/* Tools are anchored inside the opened preview, clear of the artwork. */
#detail-dialog .detail-image{position:relative}
.detail-software-tools{justify-content:flex-end;padding-right:22px;gap:10px}
@media(max-width:760px){.detail-software-tools{padding-right:14px;gap:8px}}