/* Art: cards, collection page, viewer, Gallery, search groups, Saved › Galleries. */

/* ── Art cards: natural shape, capped at 1.5× the card width ── */
.ar-row{display:flex;gap:18px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none;align-items:flex-start}
.ar-row::-webkit-scrollbar{display:none}
.ar-card{width:200px;flex-shrink:0;cursor:pointer;container-type:inline-size;color:var(--text)}
.ar-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:10px}
.ar-cover{position:relative;border-radius:10px;overflow:hidden;background:var(--surface2)}
.ar-cover img{display:block;width:100%;height:auto;max-height:150cqw;object-fit:cover;transition:transform .35s ease}
.ar-card:hover .ar-cover img{transform:scale(1.03)}
.ar-cover.is-broken{aspect-ratio:4/3}
.ar-title{margin:10px 0 2px;font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ar-sub{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ar-sample{margin-top:4px;font-size:11px;color:var(--muted)}
html body .sv-rail > .ar-card,.sv-rank .ar-card,html body #page-discover #disc-grid > .ar-card{width:auto;min-width:0}
.sv-rank .ar-card{flex:1 1 0}

/* ── Collection page ── */
.collection-shell{max-width:1080px;margin:0 auto;padding:96px 32px 48px}
.cl-head{display:flex;flex-direction:column;gap:8px}
.cl-kind{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cl-title{margin:0;font-size:clamp(30px,5vw,56px);line-height:1.05;letter-spacing:-.03em;color:var(--text);text-wrap:balance}
.cl-sample{align-self:flex-start;padding:3px 10px;border-radius:999px;border:1px solid var(--border2);font-size:12px;color:var(--muted)}
.cl-by{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cl-artist{padding:0;border:0;background:none;color:var(--text);font:inherit;font-weight:700;font-size:15px;cursor:pointer}
.cl-artist:hover{text-decoration:underline}
.cl-facts{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:14px;color:var(--muted)}
.cl-actions{display:flex;align-items:center;gap:12px;margin:24px 0 28px;flex-wrap:wrap}
.cl-appreciate{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 20px;border:0;border-radius:999px;background:var(--accent);color:#0a0a0f;font:inherit;font-weight:700;cursor:pointer}
.cl-appreciate.on{background:#ff5c8a;color:#fff}
.cl-count{font-variant-numeric:tabular-nums;opacity:.8}
.cl-act{height:44px;padding:0 18px;border:1px solid var(--border2);border-radius:999px;background:transparent;color:var(--text);font:inherit;font-weight:600;cursor:pointer}
.cl-act.on{border-color:var(--text)}
.cl-appreciate:focus-visible,.cl-act:focus-visible,.cl-piece-img:focus-visible,.cl-prompt-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.cl-pieces{display:flex;flex-direction:column;gap:32px}
.cl-piece{margin:0;display:flex;flex-direction:column;gap:10px}
.cl-piece-img{position:relative;display:flex;justify-content:center;padding:0;border:0;background:var(--surface2);border-radius:8px;overflow:hidden;cursor:zoom-in}
.cl-piece-img img{display:block;max-width:100%;width:auto;height:auto;max-height:90vh;object-fit:contain}
.cl-broken{display:none}
.cl-piece.is-broken .cl-piece-img{min-height:220px;align-items:center;cursor:default}
.cl-piece.is-broken img{display:none}
.cl-piece.is-broken .cl-broken{display:block;color:var(--muted);font-size:14px}
.cl-piece figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:14px;color:var(--text)}
.cl-prompt-toggle{padding:4px 12px;border:1px solid var(--border2);border-radius:999px;background:transparent;color:var(--muted);font:inherit;font-size:12px;cursor:pointer}
.cl-prompt{flex-basis:100%;margin:0;padding:12px 14px;border-radius:8px;background:rgba(255,255,255,.04);color:var(--muted);font-size:13px;line-height:1.6}
.cl-empty,.cl-loading{color:var(--muted);padding:24px 0}
.cl-missing{padding:64px 0;text-align:center}
.cl-about,.cl-shelf,.cl-comments{margin-top:48px}
.cl-about h2,.cl-shelf h2,.cl-comments h2{font-size:20px;margin:0 0 12px}
.cl-about p{max-width:720px;line-height:1.6;color:var(--muted)}
.cl-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.cl-tags span{padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.06);font-size:12px;color:var(--muted)}
.cl-credits h3{font-size:14px;margin:18px 0 6px}
.cl-credits p{margin:4px 0;font-size:13px;overflow-wrap:anywhere}
.cl-credits a{color:var(--text);text-underline-offset:2px}
body.theme-light .cl-prompt,body.theme-light .cl-tags span{background:rgba(0,0,0,.05)}

/* ── Viewer (moved from creative.css) ── */
#art-viewer{position:fixed;inset:0;z-index:9600;display:none;align-items:center;justify-content:center;gap:12px;padding:56px 24px 24px;background:rgba(5,5,9,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
#art-viewer.open{display:flex}
.av-stage{margin:0;flex:1;min-width:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;overflow:hidden}
.av-img{max-width:100%;max-height:calc(100% - 48px);object-fit:contain;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.5);transform-origin:center center;transition:transform .15s ease}
.av-cap{display:flex;align-items:baseline;gap:12px;color:#fff;font-size:14px}
.av-cap .av-count{color:rgba(255,255,255,.55);font-size:12px;font-variant-numeric:tabular-nums}
.av-close,.av-nav{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#fff;border-radius:50%;cursor:pointer}
.av-close{position:absolute;top:14px;right:16px;width:40px;height:40px;font-size:16px}
.av-nav{width:48px;height:48px;font-size:28px;line-height:1}
.av-close:hover,.av-nav:hover{background:rgba(255,255,255,.14)}
.av-close:focus-visible,.av-nav:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.av-nav[hidden]{display:none!important}

@media (max-width:768px){
  .collection-shell{padding:16px 16px 170px}
  .cl-pieces{gap:20px}
  /* Action bar pinned above the mobile nav for the whole page (the shell's bottom padding keeps content clear of it). */
  .cl-actions{position:fixed;left:0;right:0;bottom:calc(81px + env(safe-area-inset-bottom,0px));z-index:5;margin:0;padding:10px 16px;background:rgba(18,18,28,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--border)}
  body.theme-light .cl-actions{background:rgba(255,255,255,.95)}
  .ar-card{width:160px}
  #art-viewer{padding:56px 8px 16px;gap:4px}
  .av-nav{width:40px;height:40px;font-size:24px}
}
@media (max-width:480px){
  .cl-appreciate,.cl-act{height:40px;padding:0 14px;font-size:14px}
  .ar-card{width:140px}
  #art-viewer .av-nav{position:absolute;bottom:18px}
  #art-viewer .av-prev{left:calc(50% - 56px)}
  #art-viewer .av-next{right:calc(50% - 56px)}
  #art-viewer{padding-bottom:80px}
}

/* ── Viewer: top bar, info panel, zoom ── */
.av-top{position:absolute;top:14px;right:16px;display:flex;gap:8px;z-index:2}
.av-btn{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.14);border-radius:50%;background:rgba(255,255,255,.06);color:#fff;font:inherit;font-size:16px;cursor:pointer}
.av-btn:hover{background:rgba(255,255,255,.14)}
.av-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.av-top .av-close{position:static}
.av-like.on{color:#ff5c8a}
.av-info{position:absolute;top:66px;right:16px;bottom:16px;width:min(340px,calc(100% - 32px));overflow-y:auto;padding:18px;border-radius:12px;background:rgba(20,20,30,.96);border:1px solid rgba(255,255,255,.12);color:#fff;z-index:2}
.av-info h2{margin:0 0 10px;font-size:18px}
.av-info h3{margin:14px 0 4px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.av-info p{margin:0;font-size:14px;line-height:1.6;overflow-wrap:anywhere}
.av-info a{display:inline-block;margin-top:8px;color:#fff;font-size:13px}
.av-muted{color:rgba(255,255,255,.6)}
#art-viewer.is-zoomed .av-img{cursor:grab;transition:none}
#art-viewer:not(.is-zoomed) .av-img{cursor:zoom-in}
@media (max-width:480px){.av-info{top:auto;left:8px;right:8px;width:auto;max-height:55vh}}

/* ── Gallery page ── */
.gallery-shell{max-width:1320px;margin:0 auto;padding:80px 32px 48px}
.gl-featured{position:relative;min-height:340px;display:flex;align-items:flex-end;padding:32px;border-radius:16px;overflow:hidden;background:var(--surface2)}
.gl-f-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gl-featured::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 30%,rgba(8,8,14,.85))}
.gl-f-copy{z-index:2}
.gl-f-copy{position:relative;color:#fff;max-width:560px}
.gl-f-copy small{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.8}
.gl-f-title{margin:6px 0;font-size:clamp(28px,5vw,52px);line-height:1.05;letter-spacing:-.03em}
.gl-f-copy p{margin:0 0 16px;opacity:.85}
.gl-open{height:44px;padding:0 22px;border:0;border-radius:999px;background:var(--accent);color:#0a0a0f;font:inherit;font-weight:700;cursor:pointer}
.gl-open:focus-visible,.gl-chip:focus-visible,.gl-artist:focus-visible,.gl-piece:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.gl-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:28px 0 20px}
.gl-chips{display:flex;gap:8px;flex-wrap:wrap}
.gl-chip{height:36px;padding:0 14px;border:1px solid var(--border2);border-radius:999px;background:transparent;color:var(--text);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.gl-chip.on{background:var(--text);color:var(--bg);border-color:var(--text)}
.gl-sort{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.gl-sort select{height:36px;padding:0 10px;border:1px solid var(--border2);border-radius:8px;background:var(--surface);color:var(--text);font:inherit}
.gl-wall{columns:4 240px;column-gap:20px}
.gl-tile{position:relative;break-inside:avoid;margin-bottom:24px}
.gl-wall .ar-card{width:auto}
.gl-wall .ar-cover img{max-height:none}
.gl-stats{position:absolute;left:10px;right:10px;top:10px;display:flex;justify-content:flex-end;gap:8px;opacity:0;transition:opacity .2s;pointer-events:none}
.gl-stats span{padding:3px 8px;border-radius:999px;background:rgba(8,8,14,.75);color:#fff;font-size:12px;font-variant-numeric:tabular-nums}
.gl-tile:hover .gl-stats,.gl-tile:focus-within .gl-stats{opacity:1}
@media (hover:none){.gl-stats{opacity:1}}
.gl-shelf{margin-top:44px}
.gl-shelf h2{margin:0 0 14px;font-size:22px}
.gl-artist{width:220px;flex-shrink:0;display:flex;flex-direction:column;gap:6px;padding:10px;border:1px solid var(--border);border-radius:12px;background:transparent;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.gl-a-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.gl-a-thumbs img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:6px}
.gl-artist small{color:var(--muted);font-size:12px}
.gl-piece{width:180px;flex-shrink:0;display:flex;flex-direction:column;gap:6px;padding:0;border:0;background:none;color:var(--text);font:inherit;font-size:13px;text-align:left;cursor:zoom-in}
.gl-piece img{width:100%;height:220px;object-fit:contain;background:var(--surface2);border-radius:8px}
.gl-empty{padding:48px 0;text-align:center;color:var(--muted)}

@media (max-width:768px){
  .gallery-shell{padding:16px 16px 40px}
  .gl-featured{min-height:260px;padding:20px}
  .gl-wall{columns:3 180px;column-gap:14px}
  .gl-artist{width:180px}
}
@media (max-width:480px){
  .gl-wall{columns:2;column-gap:10px}
  .gl-tile{margin-bottom:16px}
  .gl-tools{flex-direction:column;align-items:stretch}
  .gl-chips{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .gl-piece{width:140px}.gl-piece img{height:170px}
}

/* ── Search groups ── */
.as-groups{display:flex;flex-direction:column;gap:28px;margin-bottom:28px}
.as-groups h2{margin:0 0 10px;font-size:18px}
.as-pieces{columns:5 150px;column-gap:12px}
.as-piece{display:block;width:100%;break-inside:avoid;margin:0 0 12px;padding:0;border:0;background:none;color:var(--text);font:inherit;font-size:12px;text-align:left;cursor:zoom-in}
.as-piece img{display:block;width:100%;height:auto;border-radius:8px;background:var(--surface2)}
.as-piece span{display:block;margin-top:4px}
.as-piece:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:768px){.as-pieces{columns:3 120px}}
@media (max-width:480px){.as-pieces{columns:2}}

/* ── Saved › Galleries ── */
#saved-grid.saved-art{display:block}
.sa-collections,.sa-pieces{margin-bottom:36px}
.sa-collections h2,.sa-pieces h2{margin:0 0 12px;font-size:20px}

/* ── Upload wizard: art review shows pieces stacked at their real shape ── */
.wiz-art-rev{margin:0 0 14px;display:flex;flex-direction:column;gap:6px}
.wiz-art-rev img{display:block;max-width:100%;max-height:320px;width:auto;object-fit:contain;border-radius:8px;background:rgba(255,255,255,.04)}
.wiz-art-rev figcaption{font-size:13px;color:#fff}
.wiz-art-rev figcaption span{color:rgba(196,202,172,.45);font-size:12px;margin-left:6px}
.wiz-art-rev-empty{height:120px;display:flex;align-items:center;justify-content:center;border:1px dashed rgba(255,255,255,.18);border-radius:8px;color:rgba(196,202,172,.5);font-size:13px}

/* Touch gestures on the viewer image belong to the viewer (pan while zoomed, swipe otherwise), not the page behind. */
#art-viewer{overscroll-behavior:contain}
#art-viewer .av-img{touch-action:none}