/* ==========================================================================
   PHOTOS looks — what PHOTOS adds to the nine themes
   The active theme is <html data-look="…">, set through shared/ztheme.js by the
   look provider in app.js (the project's own look while one is open, else the
   visitor's pick, else the PHOTOS-wide look). The colour tokens for every look
   are in /shared/zui.css; this file adds what only PHOTOS draws: cover
   placeholders, card frames and decorations. Loaded after zui.css.
   Album themes (body[data-album-theme]) still repaint the shell over a look.
   ========================================================================== */

/* ---------- Project cover placeholders per look (the colour tokens are in /shared/zui.css) ---------- */
:root[data-look="studio-light"] {
  --zs-cover-a: #e6e4de;
  --zs-cover-b: #c4c1b8;
  --zs-cover-ink: rgba(20, 20, 20, .5);
  --zs-cover-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 10px 22px -10px rgba(0, 0, 0, .3);
  --zs-cover-shadow-hover: 0 2px 4px rgba(0, 0, 0, .06), 0 18px 34px -12px rgba(0, 0, 0, .38);
}

:root[data-look="dark-room"] {
  --zs-cover-a: #3a1512;
  --zs-cover-b: #110808;
  --zs-cover-ink: rgba(255, 122, 104, .6);
  --zs-cover-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 26px -10px rgba(0, 0, 0, .85);
  --zs-cover-shadow-hover: 0 2px 4px rgba(0, 0, 0, .5), 0 18px 36px -12px rgba(120, 10, 10, .7);
}

:root[data-look="cinematic-matte"] {
  --zs-cover-a: #2b4a4a;
  --zs-cover-b: #5a3a26;
  --zs-cover-ink: rgba(240, 220, 190, .62);
  --zs-cover-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 26px -10px rgba(0, 0, 0, .7);
  --zs-cover-shadow-hover: 0 2px 4px rgba(0, 0, 0, .35), 0 18px 36px -12px rgba(0, 0, 0, .8);
}

:root[data-look="classic-chrome"] {
  --zs-cover-a: #8ea3a6;
  --zs-cover-b: #4f6670;
  --zs-cover-ink: rgba(255, 255, 255, .75);
  --zs-cover-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 10px 22px -10px rgba(20, 30, 35, .38);
  --zs-cover-shadow-hover: 0 2px 4px rgba(0, 0, 0, .08), 0 18px 34px -12px rgba(20, 30, 35, .45);
}

:root[data-look="mono"] {
  --zs-cover-a: #2a2a2a;
  --zs-cover-b: #050505;
  --zs-cover-ink: #ffffff;
  --zs-cover-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 12px 26px -10px rgba(0, 0, 0, .9);
  --zs-cover-shadow-hover: 0 0 0 1px rgba(255, 255, 255, .4), 0 18px 36px -12px rgba(0, 0, 0, .9);
}

:root[data-look="sepia"] {
  --zs-cover-a: #d8c19a;
  --zs-cover-b: #9c7448;
  --zs-cover-ink: rgba(255, 248, 236, .85);
  --zs-cover-shadow: 0 1px 2px rgba(60, 40, 15, .1), 0 10px 22px -10px rgba(60, 40, 15, .42);
  --zs-cover-shadow-hover: 0 2px 4px rgba(60, 40, 15, .1), 0 18px 34px -12px rgba(60, 40, 15, .5);
}

:root[data-look="midnight-blue"] {
  --zs-cover-a: #1d3a7a;
  --zs-cover-b: #0a1430;
  --zs-cover-ink: rgba(170, 200, 255, .7);
  --zs-cover-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 26px -10px rgba(0, 0, 0, .8);
  --zs-cover-shadow-hover: 0 2px 4px rgba(0, 0, 0, .4), 0 18px 36px -12px rgba(30, 60, 160, .55);
}

/* ---------- PHOTOS' own accents per look (declared on .zs-app, so they repeat here) ---------- */
[data-look="studio-light"] .zs-app { --zs-terracotta: #c95f33; --zs-ivory: #ffffff; --zs-seg-on-bg: #141414; --zs-seg-on-fg: #ffffff; }
[data-look="dark-room"] .zs-app { --zs-terracotta: #ff7a5c; --zs-ivory: #efe9e4; --zs-seg-on-bg: #f1ece9; --zs-seg-on-fg: #0b0a0a; }
[data-look="cinematic-matte"] .zs-app { --zs-terracotta: #e39a5b; --zs-ivory: #ebe5d9; --zs-seg-on-bg: #e8e2d6; --zs-seg-on-fg: #1c1e20; }
[data-look="classic-chrome"] .zs-app { --zs-terracotta: #a6493a; --zs-ivory: #f6f5ef; --zs-seg-on-bg: #23262a; --zs-seg-on-fg: #f4f4f0; }
[data-look="mono"] .zs-app { --zs-terracotta: #ffffff; --zs-ivory: #ffffff; --zs-seg-on-bg: #ffffff; --zs-seg-on-fg: #000000; }
[data-look="sepia"] .zs-app { --zs-terracotta: #a5532a; --zs-ivory: #fbf6ea; --zs-seg-on-bg: #3a2a19; --zs-seg-on-fg: #f8f1e3; }
[data-look="midnight-blue"] .zs-app { --zs-terracotta: #ffb37a; --zs-ivory: #eef2fb; --zs-seg-on-bg: #e6ecfa; --zs-seg-on-fg: #070d1c; }

/* ==========================================================================
   Graphics: each look frames the project rows and the album cards its own way.
   Tokens are read by style.css (.zs-row-*, .zs-fan-card, .zs-feed-cap);
   decorations that tokens can't express are the pseudo-elements further down.
     --zs-thumb-*   project card frame: radius, mat, padding (pad-x/-y place the name inside it)
     --zs-glow-*    the blurred copy of the cover behind it
     --zs-fan-*     album cards on a project page: frame, mat (in cqi of the fan), shadow
     --zs-photo-filter  how preview photos are developed (cards and rows only)
     --zs-title-* / --zs-meta-* / --zs-cap-size  type for names and captions
   ========================================================================== */

/* 1. Studio: gallery prints, a crisp white mat, soft studio shadow */
:root[data-look="studio-light"] {
  --zs-thumb-radius: 5px;
  --zs-thumb-mat: #ffffff;
  --zs-thumb-pad: 4px;
  --zs-thumb-pad-x: 4px;
  --zs-thumb-pad-y: 4px;
  --zs-thumb-img-radius: 2px;
  --zs-thumb-shadow: 0 1px 2px rgba(0, 0, 0, .1), 0 0 0 .5px rgba(0, 0, 0, .06);
  --zs-glow-opacity: .55;
  --zs-fan-radius: 4px;
  --zs-fan-border: 0 solid transparent;
  --zs-fan-pad: 1.5cqi;
  --zs-fan-bg: #ffffff;
  --zs-fan-img-radius: 1px;
  --zs-fan-shadow: 0 18px 36px -16px rgba(0, 0, 0, .35), 0 2px 4px rgba(0, 0, 0, .08);
}

/* 2. Dark Room: fibre prints pegged on a line under the safelight */
:root[data-look="dark-room"] {
  --zs-thumb-radius: 2px;
  --zs-thumb-mat: #efe8de;
  --zs-thumb-pad: 3px;
  --zs-thumb-pad-x: 3px;
  --zs-thumb-pad-y: 3px;
  --zs-thumb-shadow: 0 0 0 1px rgba(255, 90, 70, .15);
  --zs-glow-opacity: .5;
  --zs-fan-radius: 2px;
  --zs-fan-border: 0 solid transparent;
  --zs-fan-pad: 1.35cqi;
  --zs-fan-bg: #efe8de;
  --zs-fan-img-radius: 0;
  --zs-fan-shadow: 0 0 0 1px rgba(255, 90, 70, .14), 0 24px 44px -18px rgba(190, 20, 10, .6);
  --zs-photo-filter: contrast(1.06) saturate(.9);
  --zs-title-font: var(--font-num);
  --zs-title-size: 13.5px;
  --zs-cap-size: 15px;
  --zs-title-weight: 600;
  --zs-title-tracking: .04em;
  --zs-title-case: uppercase;
  --zs-meta-font: var(--font-num);
  --zs-meta-tracking: .02em;
}

/* 3. Cinematic: anamorphic frames with letterbox bars, widescreen titles */
:root[data-look="cinematic-matte"] {
  --zs-thumb-radius: 3px;
  --zs-thumb-mat: #000000;
  --zs-thumb-shadow: 0 0 0 1px rgba(232, 226, 214, .08);
  --zs-glow-opacity: .6;
  --zs-fan-radius: 5px;
  --zs-fan-border: 0 solid transparent;
  --zs-fan-bg: #000000;
  --zs-fan-img-radius: 5px;
  --zs-fan-shadow: 0 24px 50px -20px rgba(0, 0, 0, .85), 0 0 0 1px rgba(232, 226, 214, .06);
  --zs-photo-filter: contrast(1.06) saturate(1.08);
  --zs-title-size: 13px;
  --zs-cap-size: 15px;
  --zs-title-weight: 500;
  --zs-title-tracking: .22em;
  --zs-title-case: uppercase;
  --zs-meta-tracking: .08em;
}

/* 4. Classic Chrome: 35mm frames on a strip of film, sprocket holes and all */
:root[data-look="classic-chrome"] {
  --zs-thumb-radius: 2px;
  --zs-thumb-pad: 9px 2px;
  --zs-thumb-pad-x: 2px;
  --zs-thumb-pad-y: 9px;
  --zs-thumb-mat:
    linear-gradient(90deg, #d9d3c3 0 55%, transparent 55%) 1px 2px / 7px 3px repeat-x,
    linear-gradient(90deg, #d9d3c3 0 55%, transparent 55%) 1px calc(100% - 2px) / 7px 3px repeat-x,
    #17160f;
  --zs-thumb-shadow: 0 6px 14px -8px rgba(20, 30, 35, .5);
  --zs-glow-opacity: .45;
  --zs-fan-radius: 3px;
  --zs-fan-border: 0 solid transparent;
  --zs-fan-pad: 3.9cqi 1.2cqi;
  --zs-fan-bg:
    linear-gradient(90deg, #d9d3c3 0 55%, transparent 55%) 4px 4.2% / 13px 4.5% repeat-x,
    linear-gradient(90deg, #d9d3c3 0 55%, transparent 55%) 4px 95.8% / 13px 4.5% repeat-x,
    #17160f;
  --zs-fan-img-radius: 1px;
  --zs-fan-shadow: 0 18px 34px -16px rgba(20, 30, 35, .5);
  --zs-photo-filter: saturate(.78) contrast(1.06) brightness(1.02);
  --zs-meta-font: var(--font-num);
  --zs-meta-tracking: .02em;
}

/* 5. Mono: hard edges, white keylines, offset block shadows, black and white */
:root[data-look="mono"] {
  --zs-thumb-radius: 0;
  --zs-thumb-border: 1.5px solid #ffffff;
  --zs-thumb-mat: #000000;
  --zs-thumb-shadow: 4px 4px 0 #3a3a3a;
  --zs-glow-opacity: .3;
  --zs-fan-radius: 0;
  --zs-fan-border: 2px solid #ffffff;
  --zs-fan-bg: #000000;
  --zs-fan-img-radius: 0;
  --zs-fan-shadow: 8px 8px 0 #2e2e2e;
  --zs-photo-filter: grayscale(1) contrast(1.15);
  --zs-title-weight: 800;
  --zs-cap-size: 19px;
  --zs-title-tracking: .01em;
  --zs-title-case: uppercase;
  --zs-meta-case: uppercase;
  --zs-meta-tracking: .06em;
}

/* 6. Sepia: aged prints in an album, cream borders and mounting corners */
:root[data-look="sepia"] {
  --zs-thumb-radius: 3px;
  --zs-thumb-mat: linear-gradient(160deg, #fbf5e6, #efe2c6);
  --zs-thumb-pad: 6px;
  --zs-thumb-pad-x: 6px;
  --zs-thumb-pad-y: 6px;
  --zs-thumb-img-radius: 1px;
  --zs-thumb-shadow: 0 2px 5px rgba(60, 40, 15, .22);
  --zs-glow-opacity: .45;
  --zs-fan-radius: 3px;
  --zs-fan-border: 0 solid transparent;
  --zs-fan-pad: 2.1cqi;
  --zs-fan-bg: linear-gradient(160deg, #fbf5e6, #ecdcbc);
  --zs-fan-img-radius: 1px;
  --zs-fan-shadow: 0 18px 32px -16px rgba(60, 40, 15, .5), 0 1px 3px rgba(60, 40, 15, .18);
  --zs-photo-filter: sepia(.6) saturate(.85) contrast(.96) brightness(1.02);
  --zs-title-font: 'Caveat', 'Segoe Print', cursive;
  --zs-title-size: 21px;
  --zs-cap-size: 30px;
  --zs-title-weight: 700;
  --zs-title-tracking: 0;
  --zs-title-case: none;
}

/* 7. Midnight: rounded glass tiles with a cool rim light and a blue bloom */
:root[data-look="midnight-blue"] {
  --zs-thumb-radius: 16px;
  --zs-thumb-border: 1px solid rgba(160, 190, 255, .45);
  --zs-thumb-shadow: 0 0 18px -4px rgba(91, 140, 255, .4);
  --zs-glow-opacity: .55;
  --zs-glow-blur: 12px;
  --zs-fan-radius: 22px;
  --zs-fan-border: 1px solid rgba(160, 190, 255, .5);
  --zs-fan-bg: #0e1730;
  --zs-fan-img-radius: 21px;
  --zs-fan-shadow: 0 0 0 1px rgba(91, 140, 255, .12), 0 22px 50px -18px rgba(50, 90, 255, .65), 0 0 34px -10px rgba(143, 211, 255, .4);
  --zs-title-glow: 0 0 18px rgba(91, 140, 255, .4);
}

/* ---------- Decorations ---------- */

/* Dark Room: a wooden peg holds each print to the line */
[data-look="dark-room"] .zs-fan-card::before {
  content: '';
  position: absolute;
  top: -7%;
  left: 50%;
  z-index: 3;
  width: 9%;
  height: 15%;
  border-radius: 2px;
  background: linear-gradient(90deg, #a87a4a, #d9b081 50%, #a87a4a);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .55);
  transform: translateX(-50%);
  pointer-events: none;
}

[data-look="dark-room"] .zs-fan {
  background: linear-gradient(transparent 13px, rgba(255, 235, 230, .22) 13px 14px, transparent 14px);
}

/* Cinematic: letterbox bars over the photo */
[data-look="cinematic-matte"] .zs-fan-card:not(.is-note)::before,
[data-look="cinematic-matte"] .zs-fan-card:not(.is-note)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  height: 12%;
  background: #000;
  pointer-events: none;
}

[data-look="cinematic-matte"] .zs-fan-card:not(.is-note)::before {
  top: 0;
  border-radius: 5px 5px 0 0;
}

[data-look="cinematic-matte"] .zs-fan-card:not(.is-note)::after {
  bottom: 0;
  border-radius: 0 0 5px 5px;
}

/* Sepia: dark paper mounting corners */
[data-look="sepia"] .zs-fan-card::before,
[data-look="sepia"] .zs-fan-card::after {
  content: '';
  position: absolute;
  z-index: 2;
  width: 17%;
  aspect-ratio: 1;
  background: linear-gradient(135deg, #4a3520 50%, transparent 50%);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3));
  pointer-events: none;
}

[data-look="sepia"] .zs-fan-card::before {
  top: 2%;
  left: 2%;
}

[data-look="sepia"] .zs-fan-card::after {
  right: 2%;
  bottom: 2%;
  transform: rotate(180deg);
}

/* Row glows follow the developing: grey in Mono, warm in Sepia */
[data-look="mono"] .zs-row-glow { filter: blur(12px) grayscale(1); }
[data-look="sepia"] .zs-row-glow { filter: blur(12px) sepia(.7); }
[data-look="mono"] .zs-row-name,
[data-look="mono"] .zs-feed-cap b { font-family: var(--zs-title-font, var(--font-ui)); }

/* ---------- Title fonts: the owner's pick (<html data-zs-font>) replaces the look's own title font
   on the project list and project pages; an open album keeps its own theme. The picker's samples
   carry the same attribute, so each shows in its own font. ---------- */
[data-zs-font="caveat"] { --zs-script: 'Caveat', cursive; --zs-script-scale: 1.35; --zs-script-weight: 700; }
[data-zs-font="kalam"] { --zs-script: 'Kalam', cursive; --zs-script-scale: 1.1; --zs-script-weight: 700; }
[data-zs-font="shadows-into-light"] { --zs-script: 'Shadows Into Light', cursive; --zs-script-scale: 1.3; --zs-script-weight: 400; }
[data-zs-font="alex-brush"] { --zs-script: 'Alex Brush', cursive; --zs-script-scale: 1.5; --zs-script-weight: 400; }
[data-zs-font="great-vibes"] { --zs-script: 'Great Vibes', cursive; --zs-script-scale: 1.5; --zs-script-weight: 400; }

:root[data-zs-font] :is(#view-home, #view-group) {
  --zs-title-font: var(--zs-script);
  --zs-title-size: calc(15px * var(--zs-script-scale));
  --zs-cap-size: calc(22px * var(--zs-script-scale));
  --zs-title-weight: var(--zs-script-weight);
  --zs-title-style: normal;
  --zs-title-tracking: 0;
  --zs-title-case: none;
}

:root[data-zs-font] #view-group :is(.zs-title-block h1, .zs-lock-title) {
  font-family: var(--zs-script);
  font-size: calc(clamp(24px, 4.5vw, 34px) * var(--zs-script-scale));
  font-weight: var(--zs-script-weight);
  letter-spacing: 0;
  line-height: 1.25;
}

/* Picker samples: "Default" shows the plain UI font whatever is picked */
.zs-font-sample[data-zs-font="default"] { --zs-script: var(--font-ui); --zs-script-scale: 1; --zs-script-weight: 600; }