/* viewer.css — <dialog id="viewer"> (spec 4.4). Night mat; chrome in the mat, never over the image. */

#viewer[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr)}
#viewer .sep{color:var(--on-night-muted);padding-inline:0}

/* top: entry link + year chip · CLOSE */
#viewer .vw-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3);
  min-height:56px;padding:max(6px, env(safe-area-inset-top, 0px)) calc(var(--m) - 10px) 6px var(--m)}
#viewer .vw-where{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--s3);min-width:0}
#viewer .vw-entry{display:inline-flex;align-items:center;min-height:44px}
#viewer .vw-chip{padding:4px 6px 3px;line-height:1;white-space:nowrap;color:var(--on-night-muted);
  border:1px solid color-mix(in srgb, var(--on-night) 26%, transparent)}
@media (hover:hover){ #viewer .vw-chip:hover{color:var(--on-night)} }
@media (max-width:767px){ #viewer .vw-cl{display:none} }
#viewer .vw-close:focus-visible{outline-offset:-4px}

/* buttons: 44px targets, caps, underline on hover (.ui) */
#viewer .vw-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding-inline:10px;white-space:nowrap}
#viewer .vw-btn[aria-disabled="true"]{color:var(--on-night-muted);opacity:.5;cursor:default;text-decoration-color:transparent}

/* track: one slide per screen, native snap and swipe */
#viewer .vw-track{display:grid;grid-auto-flow:column;grid-auto-columns:100%;margin:0;padding:0;list-style:none;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior:contain;scrollbar-width:none;
  outline:none;-webkit-user-select:none;user-select:none}
#viewer .vw-track::-webkit-scrollbar{display:none}
#viewer .vw-track.zoomable{cursor:zoom-in}
#viewer .vw-slide{position:relative;display:grid;place-items:center;min-width:0;min-height:0;overflow:hidden;
  container-type:size;scroll-snap-align:center;scroll-snap-stop:always}
/* min(track − 2m, trackH × ratio, W / 1.5): never upscaled, small files sit small */
#viewer .vw-img{width:min(calc(100cqw - 2 * var(--m)), calc(100cqh * var(--ar)), calc(var(--nw) * 1px));
  max-width:none;height:auto;object-fit:contain;-webkit-user-drag:none}

/* end card: an entry sends on to the next one (cover, N°, title); Selected ends on the open slot */
#viewer .vw-endc{display:grid;justify-items:center;gap:var(--s3);padding-inline:var(--m);text-align:center}
#viewer .vw-endk{color:var(--on-night-muted)}
#viewer .vw-end .ui{display:inline-flex;align-items:center;min-height:44px;text-align:center}
#viewer .vw-next{display:grid;justify-items:center;gap:var(--s2);color:var(--on-night);text-decoration:none}
#viewer .vw-ncov{max-height:36svh;width:auto;object-fit:contain;margin-bottom:var(--s2)}
#viewer .vw-nt{font-size:clamp(44px, 7vw, 120px);color:var(--on-night)}
#viewer .vw-next .v-20{color:var(--on-night-muted)}
#viewer .vw-slot{display:grid;place-items:center;width:200px;color:var(--on-night);
  --slot:#1B1A18;--stitch:color-mix(in srgb, var(--on-night) 45%, transparent);--mark:#EA5A4E}
#viewer .vw-slot img{width:100%;height:100%;object-fit:cover}

/* bottom: credit · PREVIOUS · NEXT · COPY LINK TO FRAME · DETAIL · counter */
#viewer .vw-bot{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:var(--s4);
  min-height:64px;padding:0 var(--m) env(safe-area-inset-bottom, 0px)}
#viewer .vw-credit{color:var(--on-night-muted)}
#viewer .vw-ctrl{position:relative;display:flex;align-items:center}
#viewer .vw-copywrap,#viewer .vw-detwrap{display:flex;align-items:center}
/* DETAIL hangs off the right so the centred group never shifts when it appears */
#viewer .vw-detwrap{position:absolute;left:100%;top:0;bottom:0;visibility:hidden}
#viewer.has-detail .vw-detwrap{visibility:visible}
#viewer .vw-count{justify-self:end;white-space:nowrap}
#viewer.at-end .vw-credit,#viewer.at-end .vw-count,#viewer.at-end .vw-copywrap,
#viewer.at-end .vw-entry,#viewer.at-end .vw-chip{visibility:hidden}

@media (max-width:767px){
  #viewer .vw-bot{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"credit count" "ctrl ctrl";
    row-gap:var(--s1);padding-top:var(--s3);padding-bottom:max(var(--s2), env(safe-area-inset-bottom, 0px))}
  #viewer .vw-credit{grid-area:credit}
  #viewer .vw-count{grid-area:count;align-self:start}
  /* one row that never reflows: DETAIL keeps its slot, so the image area never changes height */
  #viewer .vw-ctrl{grid-area:ctrl;margin-inline:-8px}
  #viewer .vw-btn{padding-inline:8px}
  #viewer .vw-detwrap{position:static}
}

@media (max-width:389px){ #viewer .vw-long{display:none} }

/* landscape phones: the chrome moves into the side mats, so the photograph gets the full height */
@media (orientation:landscape) and (max-height:500px){
  #viewer[open]{grid-template-columns:minmax(150px,1fr) minmax(0,3fr) minmax(150px,1fr);grid-template-rows:minmax(0,1fr) auto}
  #viewer .vw-top,#viewer .vw-bot{display:contents}
  #viewer .vw-track{grid-column:2;grid-row:1/-1}
  #viewer .vw-where{grid-column:1;grid-row:1;align-self:start;flex-direction:column;align-items:flex-start;
    padding:8px 0 0 max(var(--m), env(safe-area-inset-left, 0px))}
  #viewer .vw-credit{grid-column:1;grid-row:2;padding:0 var(--s2) 12px max(var(--m), env(safe-area-inset-left, 0px))}
  /* a narrow column: the credit stacks one part per line (wrapping at spaces, never inside a hyphenated name),
     and the chip stacks like the slip does: ARCHIVE {YEAR} / POLAROIDS → */
  #viewer .vw-credit > .nowrap{display:block;white-space:normal}
  #viewer .vw-credit .vw-dash{display:none}
  #viewer .vw-chip{white-space:normal;text-align:left;line-height:1.35}
  #viewer .vw-cy{display:block}
  #viewer .vw-cdot,#viewer .vw-cl{display:none}
  /* right column: button text aligns with the counter (buttons carry 10px side padding) */
  #viewer .vw-close{grid-column:3;grid-row:1;align-self:start;justify-self:end;margin:6px calc(max(var(--m), env(safe-area-inset-right, 0px)) - 10px) 0 0}
  #viewer .vw-count{grid-column:3;grid-row:1;align-self:center;justify-self:end;padding-right:max(var(--m), env(safe-area-inset-right, 0px))}
  #viewer .vw-ctrl{grid-column:3;grid-row:2;flex-direction:column;align-items:flex-end;margin:0;padding:0 calc(max(var(--m), env(safe-area-inset-right, 0px)) - 10px) 8px 0}
  #viewer .vw-ctrl .sep{display:none}
  #viewer .vw-detwrap{position:static}
  #viewer .vw-long{display:none}
}

/* Detail: the 2400w file at 1:1, panned by scroll, drag or arrow keys; the track stops swiping */
#viewer.is-detail .vw-track{overflow:hidden}
#viewer .vw-pan{position:absolute;inset:0;display:flex;overflow:auto;overscroll-behavior:contain;background:var(--night);
  cursor:zoom-out;scrollbar-width:none}
#viewer .vw-pan::-webkit-scrollbar{display:none}
#viewer .vw-pan.is-drag{cursor:grabbing}
#viewer .vw-big{flex:none;margin:auto;max-width:none;height:auto;background-size:100% 100%;-webkit-user-drag:none}