/* ===========================================================================
   NOIR CHROMA — photo.php
   Overrides assets/css/photo-page.css.
   =========================================================================== */

/* ---- 1. Token bridge ---------------------------------------------------- */
/* photo-page.css declares its own greyscale ramp on `article` (0-0-1).
   Re-pointing it here (0-1-2) flips almost the entire page in one block —
   only the pieces that hard-code a colour need their own rule below. */

body[data-skin="noir"] article {
  --ph-ink:          var(--n-fg);
  --ph-ink-2:        var(--n-accent);
  --ph-text:         var(--n-text);
  --ph-muted:        var(--n-text-muted);
  --ph-line:         var(--n-border);
  --ph-line-strong:  var(--n-border-strong);
  --ph-surface:      var(--n-surface);
  --ph-surface-2:    var(--n-surface-2);
  --ph-surface-3:    var(--n-surface-hover);
  --ph-empty:        var(--n-fg-3);
  --ph-radius:       var(--n-r-md);
  --ph-shadow:       none;
}


/* ---- 2. Hero ------------------------------------------------------------ */
/* photo.php:288 already ships the photo's dominant colour as an inline
   --glow custom property. Noir spends it: every photograph lights its own
   frame, which is what makes the chromatic accent feel earned rather than
   decorative. */

body[data-skin="noir"] .ph-hero {
  position: relative;
  background: var(--n-ink-0);
  padding: var(--n-s6) var(--n-gutter) var(--n-s5);
  min-height: 0;
  isolation: isolate;
}

body[data-skin="noir"] .ph-hero::before {
  content: '';
  position: absolute;
  inset-inline: 12%;
  top: 8%;
  bottom: 12%;
  z-index: -1;
  border-radius: 50%;
  background: var(--glow, var(--n-violet));
  filter: blur(90px);
  opacity: .28;
  pointer-events: none;
}

body[data-skin="noir"] .ph-hero-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

body[data-skin="noir"] .ph-img {
  max-height: 92dvh;
  width: auto;
  max-width: 100%;
  height: auto;
  border-radius: var(--n-r-sm);
  border: 1px solid var(--n-border);
  background: var(--n-ink-1);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .7);
}

body[data-skin="noir"] .ph-zoom {
  background: rgba(11, 11, 13, .7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--n-border-strong);
  color: var(--n-fg);
  border-radius: var(--n-r-pill);
}
body[data-skin="noir"] .ph-zoom:hover { border-color: var(--n-accent); }

body[data-skin="noir"] .ph-breadcrumb,
body[data-skin="noir"] .ph-breadcrumb a { color: var(--n-text-dim); }
body[data-skin="noir"] .ph-breadcrumb a:hover { color: var(--n-text-muted); }
body[data-skin="noir"] .ph-breadcrumb-sep { color: var(--n-fg-3); }
body[data-skin="noir"] .ph-breadcrumb-current { color: var(--n-text-muted); }

body[data-skin="noir"] .ph-title {
  font-family: var(--n-font-display);
  font-size: var(--n-fz-2xl);
  font-weight: var(--n-fw-semi);
  color: var(--n-fg);
  line-height: var(--n-lh-snug);
  letter-spacing: -.015em;
}


/* ---- 3. Share ----------------------------------------------------------- */

body[data-skin="noir"] .ph-share-btn {
  background: var(--n-surface-2);
  border: 1px solid var(--n-border);
  color: var(--n-text-muted);
  border-radius: 50%;
  transition: color var(--n-dur) var(--n-ease),
              border-color var(--n-dur) var(--n-ease),
              background var(--n-dur) var(--n-ease);
}
body[data-skin="noir"] .ph-share-btn:hover {
  color: var(--n-fg);
  border-color: var(--n-accent);
  background: var(--n-surface-hover);
}
body[data-skin="noir"] .ph-share-btn svg { fill: currentColor; }


/* ---- 4. Body ------------------------------------------------------------ */

body[data-skin="noir"] .ph-body {
  background: var(--n-bg);
  color: var(--n-text);
  max-width: 980px;
}

body[data-skin="noir"] .ph-tag {
  background: var(--n-surface-2);
  border: 1px solid var(--n-border);
  color: var(--n-text-muted);
  border-radius: var(--n-r-pill);
}
body[data-skin="noir"] .ph-tag:hover {
  color: var(--n-fg);
  border-color: var(--n-accent);
}

body[data-skin="noir"] .ph-story {
  background: var(--n-grad-soft);
  border: 1px solid var(--n-border-strong);
  color: var(--n-fg);
  border-radius: var(--n-r-pill);
}
body[data-skin="noir"] .ph-story:hover { box-shadow: var(--n-glow); }

body[data-skin="noir"] .ph-card-label,
body[data-skin="noir"] .ph-duo-label {
  color: var(--n-text-dim);
  font-family: var(--n-font-display);
}

body[data-skin="noir"] .ph-spec-label { color: var(--n-text-dim); }
body[data-skin="noir"] .ph-spec-val {
  color: var(--n-fg);
  font-family: var(--n-font-display);
}

body[data-skin="noir"] .ph-divider { background: var(--n-border); border: 0; }


/* ---- 5. Downloads & licensing ------------------------------------------ */

body[data-skin="noir"] .ph-dl-btn {
  background: transparent;
  border: 1px solid var(--n-border-strong);
  color: var(--n-text);
  border-radius: var(--n-r-sm);
}
body[data-skin="noir"] .ph-dl-btn:hover {
  background: var(--n-surface-hover);
  border-color: var(--n-accent);
}
body[data-skin="noir"] .ph-dl-btn--primary {
  background: var(--n-grad);
  border-color: transparent;
  color: var(--n-on-accent);
  -webkit-text-fill-color: var(--n-on-accent);
  font-weight: var(--n-fw-bold);
}
body[data-skin="noir"] .ph-dl-btn--primary:hover {
  filter: brightness(1.08);
  box-shadow: var(--n-glow);
}

body[data-skin="noir"] .ph-license-badge {
  background: var(--n-grad-soft);
  border: 1px solid var(--n-border-strong);
  color: var(--n-fg);
  border-radius: var(--n-r-pill);
}
body[data-skin="noir"] .ph-license-text,
body[data-skin="noir"] .ph-download-notice { color: var(--n-text-muted); }
body[data-skin="noir"] .ph-license-warning { color: var(--n-warning); }
body[data-skin="noir"] .ph-license-link { color: var(--n-accent); }

body[data-skin="noir"] .ph-license-credit,
body[data-skin="noir"] .ph-private-notice,
body[data-skin="noir"] .ph-viewonly-notice {
  background: var(--n-surface-2);
  border: 1px solid var(--n-border);
  color: var(--n-text);
  border-radius: var(--n-r-sm);
}
body[data-skin="noir"] .ph-license-credit-label { color: var(--n-text-dim); }
body[data-skin="noir"] .ph-license-credit-copy { color: var(--n-text-muted); }
body[data-skin="noir"] .ph-license-credit.copied {
  border-color: var(--n-success);
  color: var(--n-success);
}
body[data-skin="noir"] .ph-viewonly-contact { color: var(--n-accent); }


/* ---- 6. Palette & rating ------------------------------------------------ */

/* --ph-ink serves double duty in photo-page.css: it is the heading/body ink
   AND the fill of every solid button. Mapping it to a light value above is
   right for text and wrong for fills, so the twelve rules that use it as a
   background need an explicit dark treatment. Without this they render
   near-white on near-white and vanish. */
body[data-skin="noir"] .ph-tag:hover,
body[data-skin="noir"] .ph-dl-btn:hover,
body[data-skin="noir"] .ph-license-credit-copy,
body[data-skin="noir"] .ph-license-credit:hover .ph-license-credit-copy,
body[data-skin="noir"] .ph-viewonly-contact,
body[data-skin="noir"] .ph-swatch-tip {
  background: var(--n-surface-hover);
  color: var(--n-fg);
  -webkit-text-fill-color: var(--n-fg);
  border-color: var(--n-border-strong);
}
body[data-skin="noir"] .ph-viewonly-contact:hover,
body[data-skin="noir"] .ph-license-credit.copied .ph-license-credit-copy {
  background: var(--n-grad);
  color: var(--n-on-accent);
  -webkit-text-fill-color: var(--n-on-accent);
  border-color: transparent;
}

body[data-skin="noir"] .ph-swatch-bar {
  border-radius: var(--n-r-xs);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
body[data-skin="noir"] .ph-swatch.active .ph-swatch-bar {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), var(--n-glow);
}
body[data-skin="noir"] .ph-swatch-tip {
  color: var(--n-text-dim);
  font-family: var(--n-font-display);
}

body[data-skin="noir"] .ph-star-filled { color: var(--n-amber); }
body[data-skin="noir"] .ph-star-empty { color: var(--n-fg-3); }
body[data-skin="noir"] .ph-rating-score {
  color: var(--n-fg);
  font-family: var(--n-font-display);
}
body[data-skin="noir"] .ph-rating-meta,
body[data-skin="noir"] .ph-rate-label { color: var(--n-text-dim); }
body[data-skin="noir"] .ph-voted { color: var(--n-success); }
body[data-skin="noir"] .ph-star-form label { color: var(--n-fg-3); }
body[data-skin="noir"] .ph-star-form label:hover,
body[data-skin="noir"] .ph-star-form label:hover ~ label { color: var(--n-amber); }


/* ---- 7. Comments -------------------------------------------------------- */

body[data-skin="noir"] .ph-cm-title {
  color: var(--n-fg);
  font-family: var(--n-font-display);
}
body[data-skin="noir"] .ph-cm-toggle { color: var(--n-accent); }
body[data-skin="noir"] .ph-comment { border-bottom: 1px solid var(--n-border); }
body[data-skin="noir"] .ph-comment-name {
  color: var(--n-fg);
  font-family: var(--n-font-display);
}
body[data-skin="noir"] .ph-comment-date { color: var(--n-text-dim); }
body[data-skin="noir"] .ph-comment-text { color: var(--n-text-muted); }
body[data-skin="noir"] .ph-no-comments { color: var(--n-text-dim); }

body[data-skin="noir"] .ph-cf input,
body[data-skin="noir"] .ph-cf textarea {
  background: var(--n-surface-2);
  border: 1px solid var(--n-border);
  color: var(--n-text);
  -webkit-text-fill-color: var(--n-text);
  caret-color: var(--n-pink);
  border-radius: var(--n-r-sm);
  font-size: max(16px, var(--n-fz-base));
}
body[data-skin="noir"] .ph-cf input:focus,
body[data-skin="noir"] .ph-cf textarea:focus {
  outline: none;
  border-color: var(--n-accent);
  box-shadow: 0 0 0 3px rgba(255, 61, 139, .18);
}
body[data-skin="noir"] .ph-cf-submit {
  background: var(--n-grad);
  color: var(--n-on-accent);
  -webkit-text-fill-color: var(--n-on-accent);
  border: 0;
  border-radius: var(--n-r-pill);
  font-weight: var(--n-fw-bold);
}
body[data-skin="noir"] .ph-captcha {
  border: 1px solid var(--n-border);
  border-radius: var(--n-r-xs);
  background: var(--n-fg);
}

body[data-skin="noir"] .ph-alert {
  border-radius: var(--n-r-sm);
  border: 1px solid var(--n-border);
}
body[data-skin="noir"] .ph-alert--ok {
  background: rgba(61, 217, 160, .12);
  border-color: rgba(61, 217, 160, .35);
  color: var(--n-success);
}
body[data-skin="noir"] .ph-alert--err {
  background: rgba(255, 92, 108, .12);
  border-color: rgba(255, 92, 108, .35);
  color: var(--n-danger);
}

body[data-skin="noir"] .ph-admin {
  background: var(--n-surface-2);
  border: 1px dashed var(--n-border-strong);
  border-radius: var(--n-r-sm);
}


/* ---- 8. Mobile ---------------------------------------------------------- */

@media (max-width: 900px) {
  /* The glow becomes a soft wash behind the photo rather than a wide halo —
     at phone width a large blur just fogs the whole viewport. */
  body[data-skin="noir"] .ph-hero {
    padding: var(--n-s3) var(--n-s3) var(--n-s4);
  }
  body[data-skin="noir"] .ph-hero::before {
    inset-inline: 0;
    top: 0;
    bottom: 30%;
    filter: blur(60px);
    opacity: .22;
  }
  body[data-skin="noir"] .ph-breadcrumb { display: none; }
  body[data-skin="noir"] .ph-zoom { display: none; }
  body[data-skin="noir"] .ph-img {
    width: 100%;
    max-height: none;
    object-fit: contain;
    border-radius: var(--n-r-sm);
    box-shadow: none;
  }
  body[data-skin="noir"] .ph-hero-inner { align-items: stretch; }
  body[data-skin="noir"] .ph-title {
    font-size: var(--n-fz-xl);
    text-align: start;
    margin: var(--n-s4) 0 var(--n-s2);
  }
  body[data-skin="noir"] .ph-share { justify-content: flex-start; }
  body[data-skin="noir"] .ph-body { padding: var(--n-s4); }
  body[data-skin="noir"] .ph-duo { grid-template-columns: 1fr; }

  /* Fixed action bar has to clear the injected tab bar. */
  body[data-skin="noir"] .ph-mob-bar {
    background: rgba(11, 11, 13, .92);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    border-top: 1px solid var(--n-border);
    bottom: calc(var(--n-bottomnav-h) + var(--n-safe-bottom));
  }
  body[data-skin="noir"] .ph-mob-btn { color: var(--n-text-muted); }
  body[data-skin="noir"] .ph-mob-btn-icon { color: var(--n-accent); }
}

@media (prefers-reduced-motion: reduce) {
  body[data-skin="noir"] .ph-share-btn,
  body[data-skin="noir"] .ph-dl-btn { transition: none; }
}