/* css/gallery-order.css — the gallery's group headings, scrubber, semantic zoom and far-out hover caption
   (2026-10-10; js/collection.js orders, js/gallery-order.js the rest). */
:root{
  --go-tx:var(--tx,#000);
  --go-tx2:var(--tx2,rgba(0,0,0,.58));
  --go-bg:var(--surface-bg,#fff);
  --go-line:var(--surface-border,rgba(0,0,0,.12));
  --go-mark:rgba(var(--ink,0,0,0),.34);
  --go-box:rgba(var(--ink,0,0,0),.10);
  --go-box-line:rgba(var(--ink,0,0,0),.45);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --go-bg:var(--surface-bg,#1b1b1b); }
}
:root[data-theme="dark"]{ --go-bg:var(--surface-bg,#1b1b1b); }

/* ── group headings (By show, By colour, Look-alikes) ── */
.year-band.gal-oband{flex-direction:column;align-items:flex-start;gap:.15rem;padding:1.4rem 0 .35rem;margin-top:.6rem}
.year-band.gal-oband:first-child{margin-top:0;padding-top:.2rem;border-top:0}
.year-band.gal-oband span{text-transform:none;letter-spacing:normal;opacity:1;color:var(--go-tx)}
.year-band.gal-oband .gal-oband-t{font-family:var(--ff-serif);font-style:italic;font-size:var(--fs-lead,1.15rem);line-height:1.2}
.year-band.gal-oband .gal-oband-s{font-family:var(--ff-sans);font-size:var(--fs-meta,.8rem);color:var(--go-tx2)}

/* ── the order, in the search panel's footer ── */
.af-hud-order{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;margin-right:auto}
.af-hud-order-l{font-size:var(--fs-meta,.8rem);color:var(--go-tx2);margin-right:.15rem}

/* ── semantic zoom ── */
[data-col-gallery="1"].zoom-mid > .it .cap,
[data-col-gallery="1"].zoom-mid > .it .tile-badges,
[data-col-gallery="1"].zoom-far > .it .cap,
[data-col-gallery="1"].zoom-far > .it .tile-badges{display:none !important}
[data-col-gallery="1"].zoom-far > .it{padding:2px !important}
[data-col-gallery="1"].zoom-far > .it img{object-fit:contain}
[data-col-gallery="1"].zoom-far > .year-band{padding-top:.8rem}

.gal-zcap{position:fixed;z-index:2147483000;display:none;align-items:center;gap:.5rem;max-width:min(22rem,calc(100vw - 16px));
  padding:.35rem .4rem .35rem .55rem;background:var(--go-bg);color:var(--go-tx);border:1px solid var(--go-line);border-radius:var(--r-4,6px);
  box-shadow:0 4px 18px rgba(0,0,0,.14);font-family:var(--ff-sans);font-size:var(--fs-meta,.8rem);line-height:1.3}
.gal-zcap.is-on{display:flex}
.gal-zcap-info{all:unset;cursor:pointer;display:flex;gap:.4rem;align-items:baseline;min-width:0}
.gal-zcap-info:hover .gal-zcap-t,.gal-zcap-info:focus-visible .gal-zcap-t{text-decoration:underline;text-underline-offset:.15em}
.gal-zcap-info:focus-visible,.gal-zcap-open:focus-visible{outline:2px solid var(--focus-ring,#2266cc);outline-offset:2px}
.gal-zcap-t{font-style:italic;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gal-zcap-y{color:var(--go-tx2);flex-shrink:0}
.gal-zcap-open{flex-shrink:0;padding:.15rem .5rem;border:1px solid var(--go-line);border-radius:var(--r-pill,999px);color:inherit;text-decoration:none}
.gal-zcap-open:hover{background:var(--go-box)}

/* ── the scrubber ── */
.gal-scrub{display:none;z-index:40;width:16px;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none}
.gal-scrub.is-on{display:block}
.gal-scrub-track{position:absolute;inset:0 6px 0 7px;border-radius:2px;background:var(--go-line)}
.gal-scrub-tick{position:absolute;left:-3px;right:-3px;height:1px;background:var(--go-mark)}
.gal-scrub-lab{position:absolute;right:calc(100% + 8px);top:-.6em;white-space:nowrap;max-width:14rem;overflow:hidden;text-overflow:ellipsis;
  font-family:var(--ff-sans);font-size:var(--fs-micro,.68rem);color:var(--go-tx2);background:var(--go-bg);padding:0 .3rem;border-radius:3px;
  opacity:0;pointer-events:none;transition:opacity .15s}
.gal-scrub:hover .gal-scrub-lab,.gal-scrub.is-drag .gal-scrub-lab{opacity:1}
.gal-scrub-box{position:absolute;left:2px;right:2px;min-height:6px;border:1px solid var(--go-box-line);border-radius:3px;background:var(--go-box);pointer-events:none;transition:top .12s,height .12s}
.gal-scrub-tip{position:absolute;right:calc(100% + 8px);transform:translateY(-50%);white-space:nowrap;max-width:18rem;overflow:hidden;text-overflow:ellipsis;
  font-family:var(--ff-sans);font-size:var(--fs-meta,.8rem);color:var(--go-tx);background:var(--go-bg);border:1px solid var(--go-line);
  border-radius:var(--r-3,4px);padding:.2rem .5rem;box-shadow:0 2px 10px rgba(0,0,0,.12);display:none;pointer-events:none;z-index:2}
.gal-scrub-tip.is-on{display:block}
.gal-scrub:hover .gal-scrub-tl,.gal-scrub.is-drag .gal-scrub-tip{display:block}
@media (hover:none){ .gal-scrub{width:22px} }
@media (prefers-reduced-motion: reduce){
  .gal-scrub-box,.gal-scrub-lab{transition:none}
}

/* Signed in, a tile is never narrower than 11rem so its chips fit (style.css, @layer base). Far out and in the
   middle the chips and captions are gone, so the slider's size holds. Same layer, a little more specific. */
@layer base{
html body.admin-mode:not(.gallery-table-mode) #galleryMount > .wrap:has(> [data-col-gallery="1"].zoom-far),
html body.admin-mode:not(.gallery-table-mode) #galleryMount > .wrap:has(> [data-col-gallery="1"].zoom-mid){
  grid-template-columns:repeat(auto-fill, min(var(--tile-size, 240px), 100%)) !important; justify-content:center !important; }
}

/* With group headings the tiles keep their order: no back-filling a gap above a heading (the grid packs dense). */
html body #galleryMount > .wrap:has(> [data-col-gallery="1"] > .gal-oband){grid-auto-flow:row !important}