/* Shared public gallery UI. Start with Client Delivery, then reuse across Event and Proofing galleries.
 * DEMO PARITY: demo-selection.php uses the SAME app/public-gallery-ui.php
 * toolbar renderer and this stylesheet. Any layout/filter/selection changes
 * here must also be checked at /demo/client-selection/ on mobile + desktop.
 * scripts/demo-gallery-parity-qa.js enforces the shared integration. */
.gallery-ui-icon{width:18px;height:18px;flex:0 0 18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.gallery-album-hero{position:relative;min-height:260px;padding:0;text-align:left}
.gallery-album-hero.has-cover{min-height:clamp(390px,52vw,620px)}
.client-public-gallery .gallery-album-hero.has-cover{min-height:clamp(390px,52vw,620px)}
.client-public-gallery .gallery-album-hero .gallery-hero-cover{opacity:1}
.gallery-album-hero .gallery-hero-cover{opacity:1}
.gallery-album-hero.has-cover::after{background:linear-gradient(180deg,rgba(7,13,11,.04) 18%,rgba(7,13,11,.12) 48%,rgba(7,13,11,.72) 100%)}
.gallery-album-hero .gallery-hero-content{position:absolute;z-index:3;left:max(16px,calc((100% - 1280px)/2));right:max(16px,calc((100% - 1280px)/2));bottom:27px;width:auto;max-width:760px;text-align:left}
.gallery-album-hero .gallery-hero-content h1{max-width:680px;margin:0;font-size:clamp(2.15rem,5.6vw,4.55rem);line-height:1.02;letter-spacing:-.035em}
.gallery-album-hero .gallery-hero-content p{max-width:600px;margin:8px 0 0;font-size:clamp(.86rem,1.4vw,1.02rem);line-height:1.45}
.gallery-album-hero .gallery-hero-date{font-weight:700;letter-spacing:.02em;opacity:.9}
.gallery-album-hero .hero-accent-line{display:none}
.gallery-album-hero:not(.has-cover) .gallery-hero-content{position:relative;left:auto;right:auto;bottom:auto;width:min(1280px,calc(100% - 32px));margin:0 auto;padding:58px 0}
.gallery-album-hero .gallery-hero-media-count{position:absolute;z-index:4;right:max(16px,calc((100% - 1280px)/2));bottom:24px;display:flex;align-items:center;gap:9px;padding:8px 11px;border:1px solid rgba(255,255,255,.28);border-radius:999px;color:#fff;background:rgba(8,14,12,.38);backdrop-filter:blur(10px);font-size:.77rem;font-weight:800}
.gallery-album-hero .gallery-hero-media-count span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.gallery-album-hero .gallery-hero-media-count .gallery-ui-icon{width:15px;height:15px;flex-basis:15px}
.gallery-album-hero .gallery-slideshow-launch{top:16px;right:max(16px,calc((100% - 1280px)/2));bottom:auto}

.client-public-gallery .gallery-main{padding-top:13px}
.gallery-timescales-compact{margin:0 0 10px;border:1px solid var(--theme-border);border-radius:15px;background:var(--theme-surface);box-shadow:none}
.gallery-timescales-compact summary{min-height:44px;display:flex;align-items:center;gap:10px;padding:10px 13px;cursor:pointer;list-style:none}
.gallery-timescales-compact summary::-webkit-details-marker{display:none}
.gallery-timescales-compact .gallery-timescale-label{display:inline-flex;align-items:center;gap:8px;color:var(--theme-text);font-weight:800}
.gallery-timescales-compact summary small{margin-left:auto;color:var(--theme-muted);font-size:.76rem}
.gallery-timescales-compact[open] summary{border-bottom:1px solid var(--theme-border)}
.gallery-timescales-compact .event-timescale-grid{padding:11px 13px 13px}
.gallery-timescales-compact .event-timescale-grid>div{padding:5px 0}

.gallery-unified-toolbar{position:sticky;top:8px;z-index:32;display:block!important;margin:0 0 10px!important;padding:7px!important;border:1px solid var(--theme-border)!important;border-radius:16px!important;background:color-mix(in srgb,var(--theme-surface) 94%,transparent)!important;box-shadow:0 10px 26px rgba(17,35,29,.11)!important;backdrop-filter:blur(14px)}
.client-public-gallery .gallery-unified-toolbar{display:block!important;grid-template-columns:none!important;grid-template-areas:none!important}
.gallery-toolbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px}
.gallery-toolbar-control{min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 12px;border:1px solid var(--theme-border);border-radius:11px;color:var(--theme-control-text,var(--theme-text));background:var(--theme-control-background,var(--theme-surface));font:inherit;font-size:.84rem;font-weight:800;cursor:pointer}
.gallery-toolbar-control:hover,.gallery-toolbar-control:focus-visible{border-color:color-mix(in srgb,var(--theme-primary) 58%,var(--theme-border));outline:none}
.gallery-toolbar-sort{position:relative;overflow:hidden;padding:8px 12px;cursor:pointer}
.gallery-toolbar-sort-label{pointer-events:none;white-space:nowrap}
.gallery-toolbar-sort .sort-select{position:absolute;inset:0;width:100%;height:100%;min-height:0;max-width:none;padding:0;border:0;opacity:0;background:transparent;box-shadow:none;cursor:pointer}
.gallery-toolbar-sort .sort-select:focus{outline:none}
.gallery-toolbar-sort:focus-within{border-color:color-mix(in srgb,var(--theme-primary) 58%,var(--theme-border));outline:none}
.gallery-toolbar-select{color:#fff;background:var(--theme-primary);border-color:var(--theme-primary)}
.gallery-toolbar-select:hover,.gallery-toolbar-select:focus-visible{border-color:var(--theme-primary);background:color-mix(in srgb,var(--theme-primary) 88%,#000)}
.gallery-active-filter-count{min-width:18px;height:18px;display:grid;place-items:center;padding:0 4px;border-radius:999px;color:#fff;background:var(--theme-primary);font-size:.68rem;line-height:1}
.gallery-toolbar-control.has-active-filters{border-color:var(--theme-primary);color:var(--theme-primary)}

.gallery-filter-dialog{position:fixed;inset:0 0 0 auto;width:min(410px,calc(100vw - 22px));height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:24px 0 0 24px;color:var(--theme-text);background:var(--theme-surface);box-shadow:-24px 0 70px rgba(0,0,0,.24)}
.gallery-filter-dialog::backdrop{background:rgba(6,12,10,.48);backdrop-filter:blur(2px)}
.gallery-filter-sheet{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.gallery-filter-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:24px 22px 18px;border-bottom:1px solid var(--theme-border)}
.gallery-filter-header .eyebrow{margin:0 0 4px;color:var(--theme-primary)}
.gallery-filter-header h2{margin:0;font-size:1.35rem}
.gallery-filter-close{width:38px;height:38px;display:grid;place-items:center;flex:0 0 38px;padding:0;border:1px solid var(--theme-border);border-radius:50%;color:var(--theme-text);background:var(--theme-control-background,var(--theme-surface));cursor:pointer}
.gallery-filter-body{overflow:auto;display:grid;align-content:start;gap:20px;padding:22px}
.gallery-filter-section{display:grid;gap:9px;margin:0;padding:0;border:0;color:var(--theme-text);font:inherit}
.gallery-filter-section>span,.gallery-filter-section legend{padding:0;color:var(--theme-text);font-size:.86rem;font-weight:850}
.gallery-filter-section select{width:100%;min-height:45px;padding:9px 38px 9px 12px;border:1px solid var(--theme-border);border-radius:12px;color:var(--theme-control-text,var(--theme-text));background:var(--theme-control-background,var(--theme-surface));font:inherit}
.gallery-filter-segmented{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.gallery-filter-segmented label{position:relative}
.gallery-filter-segmented input{position:absolute;opacity:0;pointer-events:none}
.gallery-filter-segmented span{min-height:42px;display:grid;place-items:center;padding:7px;border:1px solid var(--theme-border);border-radius:11px;color:var(--theme-muted);background:var(--theme-control-background,var(--theme-surface));font-size:.82rem;font-weight:800;cursor:pointer}
.gallery-filter-segmented input:checked+span{color:#fff;background:var(--theme-primary);border-color:var(--theme-primary)}
.gallery-filter-segmented input:disabled+span{opacity:.42;cursor:not-allowed}
.gallery-filter-favourites{display:flex;align-items:flex-start;gap:10px;padding:14px;border:1px solid var(--theme-border);border-radius:13px;cursor:pointer}
.gallery-filter-favourites>input{width:19px;height:19px;flex:0 0 19px;margin:2px 0 0;accent-color:var(--theme-primary)}
.gallery-filter-favourites>span{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:3px 7px;min-width:0}
.gallery-filter-favourites .gallery-ui-icon{grid-row:1/3;color:var(--theme-primary)}
.gallery-filter-favourites strong{font-size:.88rem}
.gallery-filter-favourites small{color:var(--theme-muted);font-size:.76rem}
.gallery-filter-footer{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;padding:16px 22px 20px;border-top:1px solid var(--theme-border);background:var(--theme-surface)}
.gallery-filter-clear{padding:7px 0;border:0;color:var(--theme-primary);background:transparent;font:inherit;font-size:.8rem;font-weight:800;cursor:pointer}
.gallery-filter-apply{width:100%;min-height:43px}

@media(max-width:700px){
  .gallery-album-hero.has-cover{min-height:52svh}
  .client-public-gallery .gallery-album-hero.has-cover{min-height:52svh}
  .gallery-album-hero .gallery-hero-content{left:18px;right:18px;bottom:24px;max-width:calc(100% - 130px)}
  .gallery-album-hero .gallery-hero-content h1{font-size:clamp(1.9rem,9.2vw,3.15rem);line-height:1.03;overflow-wrap:anywhere}
  .gallery-album-hero .gallery-hero-content p{font-size:.82rem}
  .gallery-album-hero .gallery-hero-media-count{right:15px;bottom:18px;display:grid;gap:4px;padding:7px 9px;border-radius:13px;font-size:.68rem}
  .gallery-album-hero .gallery-slideshow-launch{top:12px;right:12px}
  .client-public-gallery .gallery-main{width:min(100% - 20px,1280px);padding-top:10px}
  .gallery-timescales-compact{margin-bottom:8px}
  .gallery-timescales-compact summary{padding-inline:10px}
  .gallery-timescales-compact summary small{max-width:46%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .gallery-unified-toolbar{top:7px;margin-bottom:8px!important;padding:6px!important;border-radius:14px!important}
  .gallery-toolbar-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
  .gallery-toolbar-actions:not(:has(#select-media)){grid-template-columns:repeat(3,minmax(0,1fr))}
  .gallery-toolbar-control{min-width:0;min-height:39px;padding:6px 4px;border-radius:10px;font-size:.73rem;gap:4px}
  .gallery-toolbar-control .gallery-ui-icon{width:15px;height:15px;flex-basis:15px}
  .gallery-toolbar-sort{padding:6px 4px}
  .gallery-toolbar-sort .sort-select{width:100%;min-width:0;max-width:none;padding:5px 16px 5px 0!important;font-size:.73rem}
  .gallery-filter-dialog{inset:auto 0 0;width:100%;height:auto;max-height:86dvh;border-radius:22px 22px 0 0}
  .gallery-filter-sheet{max-height:86dvh}
  .gallery-filter-header{padding:18px 17px 14px}
  .gallery-filter-body{gap:17px;padding:17px}
  .gallery-filter-footer{padding:13px 17px calc(15px + env(safe-area-inset-bottom));grid-template-columns:1fr}
  .gallery-filter-clear{order:2}
}


/* Gallery redesign refinements */
.client-public-gallery .gallery-album-hero .gallery-hero-content{
  top:auto!important;
  bottom:12px!important;
  padding:0!important;
  transform:none!important;
}
.gallery-album-hero.hero-subtitle-size-small .gallery-hero-subtitle{font-size:.76rem!important}
.gallery-album-hero.hero-subtitle-size-medium .gallery-hero-subtitle{font-size:.9rem!important}
.gallery-album-hero.hero-subtitle-size-large .gallery-hero-subtitle{font-size:1.05rem!important}
.gallery-album-hero .gallery-hero-date{
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:7px!important;
  font-size:.74rem!important;
  font-weight:600!important;
  letter-spacing:.01em!important;
  line-height:1.25!important;
  text-transform:none!important;
  opacity:.9;
}
.gallery-album-hero .gallery-hero-date .gallery-ui-icon{width:15px;height:15px;flex-basis:15px}
.gallery-album-hero .gallery-hero-media-count{font-weight:500;letter-spacing:0}
.gallery-album-hero .gallery-hero-media-count span{font-weight:500}

.gallery-timescales-compact summary{justify-content:flex-start!important;padding-right:44px}
.gallery-timescales-compact .event-timescale-grid{grid-template-columns:1fr}
.gallery-timescales-compact .event-timescale-grid>div{background:transparent}
.gallery-timescales-compact .event-timescale-grid strong{font-size:.9rem}
.gallery-timescales-compact .event-timescale-grid span{font-size:.82rem}

.gallery-filter-favourites{padding:0;border:0;border-radius:0;cursor:default}
.gallery-filter-favourite-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.gallery-filter-favourite-options button{
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:8px 10px;
  border:1px solid var(--theme-border);
  border-radius:11px;
  color:var(--theme-muted);
  background:var(--theme-control-background,var(--theme-surface));
  font:inherit;
  font-size:.8rem;
  font-weight:800;
  cursor:pointer;
}
.gallery-filter-favourite-options button .gallery-ui-icon{width:17px;height:17px;flex-basis:17px}
.gallery-filter-favourite-options button.is-active{color:#fff;background:var(--theme-primary);border-color:var(--theme-primary)}
.gallery-filter-favourite-options button.is-active .gallery-ui-icon{fill:currentColor}

.selection-mode .gallery-unified-toolbar{margin-bottom:4px!important}
.gallery-unified-toolbar + .selection-toolbar{margin-top:0!important}

/* Override older positional toolbar rules while this shared toolbar is rolled out. */
.gallery-unified-toolbar .gallery-toolbar-actions>.gallery-toolbar-control{
  grid-area:auto!important;
  grid-column:auto!important;
  grid-row:auto!important;
  margin:0!important;
}
.gallery-unified-toolbar .gallery-toolbar-actions>#select-media{
  grid-area:auto!important;
  grid-column:auto!important;
  grid-row:auto!important;
}
.gallery-unified-toolbar .gallery-toolbar-actions>.gallery-view-toggle{
  grid-area:auto!important;
  grid-column:auto!important;
  grid-row:auto!important;
}

/* Theme every surface in the delivery slideshow dialog. */
.client-public-gallery .delivery-slideshow-dialog{
  color:var(--theme-text);
  background:var(--theme-surface);
  border:1px solid var(--theme-border);
}
.client-public-gallery .delivery-slideshow-dialog h2{color:var(--theme-text)}
.client-public-gallery .delivery-slideshow-dialog>p:not(.eyebrow),
.client-public-gallery .delivery-tv-panel>div>p,
.client-public-gallery .delivery-tv-connected small,
.client-public-gallery .delivery-tv-extra-controls label,
.client-public-gallery .delivery-display-mode legend,
.client-public-gallery .delivery-display-mode span small,
.client-public-gallery .delivery-display-video-choice small,
.client-public-gallery .delivery-tv-link-box>span,
.client-public-gallery .delivery-tv-link-box>small{color:var(--theme-muted)}
.client-public-gallery .delivery-slideshow-dialog-close{
  color:var(--theme-text);
  background:color-mix(in srgb,var(--theme-primary) 8%,var(--theme-surface));
}
.client-public-gallery .delivery-slideshow-targets{
  background:color-mix(in srgb,var(--theme-primary) 8%,var(--theme-surface));
}
.client-public-gallery .delivery-slideshow-targets button{color:var(--theme-muted)}
.client-public-gallery .delivery-slideshow-targets button.is-active{
  color:var(--theme-button-text,#fff);
  background:var(--theme-primary);
}
.client-public-gallery .delivery-slideshow-device-option,
.client-public-gallery .delivery-display-mode label,
.client-public-gallery .delivery-display-video-choice,
.client-public-gallery .delivery-tv-link-box{
  color:var(--theme-text);
  background:color-mix(in srgb,var(--theme-primary) 4%,var(--theme-surface));
  border-color:var(--theme-border);
}
.client-public-gallery .delivery-display-mode label:has(input:checked){
  border-color:color-mix(in srgb,var(--theme-primary) 60%,var(--theme-border));
  background:color-mix(in srgb,var(--theme-primary) 9%,var(--theme-surface));
}
.client-public-gallery .delivery-tv-code-form input,
.client-public-gallery .delivery-tv-extra-controls select,
.client-public-gallery .delivery-tv-link-row input,
.client-public-gallery .delivery-tv-live-video-choice,
.client-public-gallery .delivery-tv-icon-button{
  color:var(--theme-control-text,var(--theme-text));
  background:var(--theme-control-background,var(--theme-surface));
  border-color:var(--theme-border);
}
.client-public-gallery .delivery-tv-play-button{
  color:var(--theme-button-text,#fff);
  background:var(--theme-primary);
  border-color:var(--theme-primary);
}
.client-public-gallery .delivery-tv-controller-footer{
  border-color:var(--theme-border);
  background:var(--theme-surface);
}
/* The label above the heading and the choices follow the theme too. The label mixes the theme colour with
   the text colour so it reads on light and dark themes. "Create display link" is the theme's main button,
   like "Start slideshow", so each theme's own readable button colours apply. */
.client-public-gallery .delivery-slideshow-dialog .eyebrow{color:color-mix(in srgb,var(--theme-primary) 72%,var(--theme-text))}
.client-public-gallery .delivery-slideshow-dialog input[type=radio],
.client-public-gallery .delivery-slideshow-dialog input[type=checkbox]{accent-color:var(--theme-primary)}
.client-public-gallery .delivery-tv-panel [data-tv-create]:disabled{opacity:.6}
.client-public-gallery .delivery-slideshow-dialog .delivery-tv-add-screen>span,
.client-public-gallery .delivery-slideshow-dialog .delivery-tv-add-screen>small{color:var(--theme-muted)}
.client-public-gallery .delivery-slideshow-dialog .delivery-tv-add-screen strong{color:var(--theme-text)}
.client-public-gallery .delivery-slideshow-dialog .delivery-tv-add-screen{border-color:var(--theme-border)}
.client-public-gallery .delivery-slideshow-dialog .delivery-tv-add-result.is-success{color:color-mix(in srgb,var(--theme-primary) 72%,var(--theme-text))}

@media(max-width:700px){
  .client-public-gallery .gallery-album-hero .gallery-hero-content{
    left:16px!important;
    right:16px!important;
    bottom:18px!important;
    max-width:calc(100% - 122px)!important;
  }
  .gallery-album-hero.hero-subtitle-size-small .gallery-hero-subtitle{font-size:.7rem!important}
  .gallery-album-hero.hero-subtitle-size-medium .gallery-hero-subtitle{font-size:.8rem!important}
  .gallery-album-hero.hero-subtitle-size-large .gallery-hero-subtitle{font-size:.92rem!important}
  .gallery-album-hero .gallery-hero-date{margin-top:6px!important;font-size:.68rem!important}
  .gallery-album-hero .gallery-hero-media-count{font-size:.65rem;font-weight:500}
  .gallery-unified-toolbar .gallery-toolbar-actions{
    grid-template-columns:minmax(0,.9fr) minmax(0,1fr) minmax(0,1.15fr) minmax(0,1fr)!important;
    grid-template-areas:none!important;
  }
  .gallery-unified-toolbar .gallery-toolbar-actions:not(:has(#select-media)){
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  .gallery-unified-toolbar .gallery-toolbar-actions>.gallery-toolbar-control{
    width:100%!important;
    min-width:0!important;
    grid-area:auto!important;
    grid-column:auto!important;
    grid-row:auto!important;
  }
  .gallery-unified-toolbar .gallery-toolbar-sort .sort-select{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    grid-area:auto!important;
    font-size:.69rem!important;
  }
  .gallery-unified-toolbar .gallery-toolbar-control{font-size:.69rem!important}
  .gallery-filter-dialog{
    left:0!important;
    right:0!important;
    top:auto!important;
    bottom:0!important;
    width:100vw!important;
    max-width:100vw!important;
    margin:0!important;
    box-sizing:border-box!important;
    border-radius:22px 22px 0 0!important;
  }
  .gallery-filter-sheet{width:100%;box-sizing:border-box}
  .gallery-filter-header,.gallery-filter-body,.gallery-filter-footer{box-sizing:border-box;width:100%}
}


/* Final album-cover positioning: override legacy gallery-cover-polish spacing. */
.client-public-gallery .gallery-album-hero.has-cover .gallery-hero-content{
  position:absolute!important;
  top:auto!important;
  left:max(16px,calc((100% - 1280px)/2))!important;
  right:auto!important;
  bottom:24px!important;
  width:min(760px,calc(100% - 190px))!important;
  max-width:760px!important;
  padding:0!important;
  margin:0!important;
  transform:none!important;
  place-self:auto!important;
}
.client-public-gallery .gallery-album-hero .gallery-hero-date{
  justify-content:flex-start!important;
  margin-top:7px!important;
  font-size:.74rem!important;
  font-weight:600!important;
  letter-spacing:.06em!important;
  text-transform:uppercase!important;
}
@media(max-width:700px){
  .client-public-gallery .gallery-album-hero.has-cover .gallery-hero-content{
    left:16px!important;
    right:auto!important;
    bottom:10px!important;
    width:calc(100% - 128px)!important;
    max-width:none!important;
    padding:0!important;
  }
  .client-public-gallery .gallery-album-hero .gallery-hero-date{
    justify-content:flex-start!important;
    margin-top:6px!important;
    font-size:.68rem!important;
    letter-spacing:.05em!important;
  }
}


/* Gallery polish: align the last visible text line with the media counter. */
.client-public-gallery .gallery-album-hero.has-cover .gallery-hero-content{bottom:24px!important}
.client-public-gallery .gallery-album-hero .gallery-hero-content> :last-child{margin-bottom:0!important}
.gallery-filter-close{color:var(--theme-primary)!important}
.gallery-filter-close .gallery-ui-icon{color:currentColor!important;stroke:currentColor!important}
.gallery-filter-favourite-options button.is-active .gallery-ui-icon{
  color:#fff!important;
  stroke:#fff!important;
  fill:none!important;
}
.selection-mode .gallery-unified-toolbar{margin-bottom:2px!important}
.gallery-unified-toolbar + .selection-toolbar{margin-top:-1px!important}
@media(max-width:700px){
  .client-public-gallery .gallery-album-hero.has-cover .gallery-hero-content{bottom:18px!important}
}


/* Shared selection-gallery refinements: keep proofing visually tied to Delivery. */
.gallery-timescales-compact summary{
  justify-content:flex-start!important;
  text-align:left!important;
}
.gallery-timescales-compact .gallery-timescale-label{
  justify-content:flex-start!important;
  text-align:left!important;
}
.selection-process-grid{display:grid!important;gap:13px!important}
.selection-process-grid>div{padding:0!important}
.selection-process-intro{
  display:block;
  color:var(--theme-muted);
  font-size:.84rem;
  line-height:1.5
}
.selection-process-steps{
  display:grid;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
  counter-reset:none
}
.selection-process-steps li{
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  align-items:center;
  gap:10px;
  min-width:0
}
.selection-process-steps li>span{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:var(--theme-button-text,#fff);
  background:var(--theme-primary);
  box-shadow:0 2px 7px color-mix(in srgb,var(--theme-primary) 25%,transparent);
  font-size:.72rem;
  font-weight:900
}
.selection-process-steps li>strong{
  color:var(--theme-text);
  font-size:.82rem;
  line-height:1.35
}
.selection-process-deadline{
  position:relative;
  display:flex!important;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:2px;
  padding-top:12px!important
}
.selection-process-deadline::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  border-radius:999px;
  background:var(--theme-border)
}
.selection-process-deadline strong{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--theme-text);
  font-size:.8rem
}
.selection-process-deadline strong .gallery-ui-icon{width:16px;height:16px}
.selection-process-deadline>span{color:var(--theme-muted);font-size:.78rem}

.client-proofing-gallery .proofing-selection-toolbar-v2{
  position:sticky;
  top:72px;
  z-index:35;
  margin-top:-1px!important
}
.client-proofing-gallery .proofing-selection-toolbar-v2 .selection-panel-top{
  grid-template-columns:minmax(110px,1fr) auto auto auto
}
.client-proofing-gallery .proofing-selection-toolbar-v2 .selection-panel-top>strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.client-proofing-gallery .proofing-selection-toolbar-v2 .selection-finalise-button{
  color:var(--theme-primary-dark,var(--theme-text))!important;
  background:var(--theme-accent)!important;
  border-color:var(--theme-accent)!important;
  box-shadow:0 5px 14px color-mix(in srgb,var(--theme-accent) 28%,transparent)!important
}
.client-proofing-gallery .proofing-selection-toolbar-v2 .selection-finalise-button:hover,
.client-proofing-gallery .proofing-selection-toolbar-v2 .selection-finalise-button:focus-visible{
  background:color-mix(in srgb,var(--theme-accent) 88%,#fff)!important;
  border-color:var(--theme-accent)!important
}
.client-proofing-gallery .proofing-selection-toolbar-v2 .selection-link,
.client-proofing-gallery .proofing-selection-toolbar-v2 .button{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap
}
.client-proofing-gallery .proofing-selection-toolbar-v2 .selection-message:empty{display:none}

/* Closed selection states reuse the gallery beneath and present one focused overlay. */
.selection-state-overlay{
  position:fixed;
  inset:0;
  z-index:180;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(12,28,24,.22);
  backdrop-filter:blur(7px)
}
.selection-state-card{
  width:min(480px,100%);
  display:grid;
  justify-items:center;
  gap:12px;
  padding:30px;
  border:1px solid var(--theme-border);
  border-radius:24px;
  color:var(--theme-text);
  background:color-mix(in srgb,var(--theme-surface) 96%,transparent);
  box-shadow:0 24px 70px rgba(0,0,0,.24);
  text-align:center
}
.selection-state-card h2{margin:0;font-size:1.35rem}
.selection-state-card p{max-width:410px;margin:0;color:var(--theme-muted);font-size:.88rem;line-height:1.55}
.selection-state-card p strong{color:var(--theme-text)}
.selection-state-card>.button{width:min(100%,340px);margin-top:4px}
.selection-state-card>.selection-link{margin-top:0}
.selection-state-icon{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:var(--theme-primary);
  background:color-mix(in srgb,var(--theme-accent) 24%,var(--theme-surface))
}
.selection-state-icon.is-ready{
  color:#fff;
  background:var(--theme-primary)
}
.selection-state-icon .gallery-ui-icon{width:25px;height:25px}
.selection-state-contact-actions{
  width:100%;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-top:5px
}
.selection-state-contact-actions .button{
  min-width:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  box-shadow:none
}
.selection-state-contact-actions .gallery-ui-icon,
.selection-state-card>.button .gallery-ui-icon{width:17px;height:17px;flex:0 0 17px}
.selection-state-overlay[hidden]{display:none!important}
body:has(.selection-state-overlay:not([hidden])){overflow:hidden}

@media(max-width:700px){
  .gallery-timescales-compact summary,
  .gallery-timescales-compact .gallery-timescale-label{
    justify-content:flex-start!important;
    text-align:left!important
  }
  .selection-process-intro{font-size:.78rem}
  .selection-process-steps{gap:8px}
  .selection-process-steps li>strong{font-size:.76rem}
  .selection-process-deadline strong,.selection-process-deadline>span{font-size:.72rem}
  .client-proofing-gallery .proofing-selection-toolbar-v2{
    top:64px;
    padding:8px 9px
  }
  .client-proofing-gallery .proofing-selection-toolbar-v2 .selection-panel-top{
    display:grid;
    grid-template-columns:minmax(90px,1fr) repeat(3,auto);
    gap:6px
  }
  .client-proofing-gallery .proofing-selection-toolbar-v2 .selection-panel-top>strong{font-size:.76rem}
  .client-proofing-gallery .proofing-selection-toolbar-v2 .selection-link,
  .client-proofing-gallery .proofing-selection-toolbar-v2 .button{
    min-width:0;
    min-height:36px;
    padding:6px 7px;
    font-size:.72rem
  }
  .selection-state-overlay{
    place-items:end center;
    padding:0;
    background:rgba(12,28,24,.18);
    backdrop-filter:blur(6px)
  }
  .selection-state-card{
    width:100%;
    min-height:46dvh;
    align-content:center;
    padding:26px 20px calc(24px + env(safe-area-inset-bottom));
    border-left:0;
    border-right:0;
    border-bottom:0;
    border-radius:24px 24px 0 0
  }
  .selection-state-card h2{font-size:1.18rem}
  .selection-state-card p{font-size:.8rem}
  .selection-state-contact-actions{grid-template-columns:1fr 1fr}
}

@media(max-width:410px){
  .client-proofing-gallery .proofing-selection-toolbar-v2 .selection-panel-top{
    grid-template-columns:minmax(82px,1fr) repeat(3,auto)
  }
  .client-proofing-gallery .proofing-selection-toolbar-v2 .selection-link,
  .client-proofing-gallery .proofing-selection-toolbar-v2 .button{
    padding-inline:5px;
    font-size:.68rem
  }
}

.gallery-timescales-compact>summary{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  width:100%;
  box-sizing:border-box;
  text-align:left!important
}
.gallery-timescales-compact>summary .gallery-timescale-label{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  margin-right:auto!important;
  text-align:left!important
}


/* Private preview now mirrors the public gallery surface. */
.private-client-preview .private-preview-banner{
  position:relative;
  z-index:80;
  padding:9px 14px;
  text-align:center;
  letter-spacing:.035em
}
.private-client-preview .event-topbar{top:0}
.private-client-preview .private-proof-preview{
  width:min(100% - 20px,1280px);
  max-width:1280px;
  margin:0 auto;
  padding:10px 0 48px
}
.private-preview-context{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin:0 0 8px;
  padding:11px 13px;
  border:1px solid var(--theme-border);
  border-radius:15px;
  color:var(--theme-text);
  background:var(--theme-surface)
}
.private-preview-context>div{display:grid;gap:2px;min-width:0}
.private-preview-context strong{font-size:.84rem}
.private-preview-context span,
.private-preview-context small{color:var(--theme-muted);font-size:.74rem;line-height:1.45}
.private-client-preview .private-proof-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px
}
.private-client-preview .private-proof-tile{
  width:100%;
  min-width:0;
  padding:0;
  border:0;
  font:inherit;
  text-align:left
}
.private-client-preview .private-proof-tile:not(.private-proof-pending){cursor:zoom-in}
.private-client-preview .private-proof-pending{cursor:default}
.private-client-preview .private-proof-pending .pending-media-placeholder{
  position:absolute;
  inset:0;
  display:grid;
  place-content:center;
  justify-items:center;
  gap:7px;
  padding:20px;
  color:var(--theme-text);
  background:color-mix(in srgb,var(--theme-primary) 8%,var(--theme-surface));
  text-align:center
}
.private-client-preview .private-proof-pending .pending-media-placeholder small{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--theme-muted)
}

@media(max-width:700px){
  .private-client-preview .private-preview-banner{padding:8px 10px;font-size:.69rem}
  .private-client-preview .private-proof-preview{width:min(100% - 20px,1280px);padding-top:10px}
  .private-preview-context{
    align-items:flex-start;
    display:grid;
    gap:5px;
    padding:10px 11px
  }
  .private-preview-context strong{font-size:.78rem}
  .private-preview-context span,
  .private-preview-context small{font-size:.7rem}
  .private-client-preview .private-proof-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px
  }
  .private-client-preview .private-proof-tile{aspect-ratio:1/1}
}


/* Title in up to three rows: a small line above, the title, and an optional italic second line in the accent colour. */
.gallery-hero-eyebrow{margin:0 0 .45em;font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;opacity:.92;color:inherit}
.gallery-hero-title-main,.gallery-hero-title-accent{display:block}
.gallery-hero-title-accent{font-style:italic;color:var(--hero-title-accent,color-mix(in srgb,var(--theme-accent,#c49a5f) 45%,#fff))}

/* Desktop: the header (logo, Share) lines up with the cover text and the photos (all 1280px wide). */
@media(min-width:701px){
  .client-public-gallery:not(.guest-upload-page) .event-topbar>.event-topbar-inner.container{width:min(1280px,calc(100% - 32px))}
}

/* Gallery timescales: a row of their own on phones (gallery-timescales-outer); on wider screens a
   button on the left of the tool bar (gallery-timescales-inline) that opens a small panel below it.
   The magazine layout's floating tool bar keeps the row, as the bar moves to the bottom there. */
.gallery-toolbar-timescales{display:none}
@media(min-width:701px){
  .gallery-timescales-outer{display:none}
  .gallery-unified-toolbar:has(.gallery-toolbar-timescales){display:flex!important;align-items:center;gap:8px}
  .gallery-unified-toolbar .gallery-toolbar-timescales{display:block;position:relative;flex:0 1 auto;min-width:0}
  .gallery-unified-toolbar:has(.gallery-toolbar-timescales) .gallery-toolbar-actions{margin-left:auto}
  .gallery-timescales-inline{margin:0;border:0;border-radius:12px;overflow:visible;background:transparent;box-shadow:none}
  .gallery-timescales-inline summary{position:relative;min-height:44px;padding:8px 38px 8px 13px;border:1px solid var(--theme-border);border-radius:12px;background:var(--theme-surface);white-space:nowrap}
  .gallery-timescales-inline summary:hover,.gallery-timescales-inline summary:focus-visible{border-color:color-mix(in srgb,var(--theme-text) 28%,var(--theme-border));outline:none}
  .gallery-timescales-inline[open] summary{border-bottom:1px solid var(--theme-border)}
  .gallery-timescales-inline summary::after{right:13px;font-size:1.15rem}
  .gallery-timescales-inline .event-timescale-grid{position:absolute;top:calc(100% + 8px);left:0;z-index:40;width:min(360px,80vw);padding:12px 14px;border:1px solid var(--theme-border);border-radius:14px;background:var(--theme-surface);box-shadow:0 14px 34px rgba(17,35,29,.16)}
  .has-floating-toolbar .gallery-timescales-outer{display:block}
  .has-floating-toolbar .gallery-unified-toolbar .gallery-toolbar-timescales{display:none}
}
/* Proofing: the Selection Process panel opened from the tool bar has steps and a deadline, so a little wider. */
@media(min-width:701px){.gallery-timescales-inline.selection-process-compact .event-timescale-grid{width:min(440px,85vw)}}