/* ===========================================================================
   SILVER PRINT — photo.php
   Overrides assets/css/photo-page.css.

   This is the cheapest page in the whole skin, and it is worth saying why:
   the base sheet contains ZERO hard-coded chromatic colours. Every value it
   paints comes from the twelve custom properties it declares on `article`.
   Re-pointing those twelve, in section 1, turns the entire page monochrome.
   Everything after section 1 is geometry, type and the two places where the
   page should behave differently on white paper than it did on grey.

   Two things are deliberately left alone:

   - The dominant-colour custom property that photo.php writes as an inline
     style on the hero section. Nothing in the base stylesheet reads it, so
     it paints nothing here; only the noir skin spends it. Overriding it
     would be dead code that looks meaningful.
   - The extracted-palette bars, whose background is an inline style written
     by PHP from the photograph itself. They are the photograph's colours,
     reported as data. Same principle as the swatch grid on search.php.
   =========================================================================== */

/* ---- 1. Token bridge ---------------------------------------------------- */

/* assets/css/photo-page.css declares these on the bare `article` element
   (0-0-1). This selector is 0-1-2, so it wins cleanly. */

body[data-skin="silver"] article {
  --ph-ink:          var(--s-ink-0);
  --ph-ink-2:        var(--s-ink-1);
  --ph-text:         var(--s-ink-1);
  --ph-muted:        var(--s-ink-2);
  --ph-line:         var(--s-line);
  --ph-line-strong:  var(--s-line-strong);
  --ph-surface:      var(--s-paper-0);
  --ph-surface-2:    var(--s-paper-1);
  --ph-surface-3:    var(--s-paper-2);
  --ph-empty:        var(--s-ink-3);
  --ph-radius:       0;
  --ph-shadow:       none;
}


/* ---- 2. The hero band --------------------------------------------------- */

/* The base sheet already puts the photograph on near-black, which is the
   correct thing to do and the one place this skin keeps a dark surface: a
   print is judged against a dark mount, not against the page. It is only
   normalised onto the token and the stray white blur is removed — at 5%
   opacity behind a 150px blur it did nothing but add a smudge. */

body[data-skin="silver"] .ph-hero {
  background: var(--s-ink-bg);
  padding: var(--s-s6) var(--s-gutter) var(--s-s7);
  min-height: 0;
}

body[data-skin="silver"] .ph-hero::after {
  display: none;
}

body[data-skin="silver"] .ph-breadcrumb,
body[data-skin="silver"] .ph-breadcrumb-current {
  color: var(--s-on-ink-muted);
  font-size: var(--s-fz-sm);
}

body[data-skin="silver"] .ph-breadcrumb a {
  color: var(--s-on-ink-muted);
  text-decoration: none;
}

body[data-skin="silver"] .ph-breadcrumb a:hover {
  color: var(--s-on-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body[data-skin="silver"] .ph-breadcrumb-sep {
  color: var(--s-on-ink-dim);
}

body[data-skin="silver"] .ph-img {
  border-radius: 0;
  box-shadow: none;
}

body[data-skin="silver"] .ph-zoom {
  background: transparent;
  border: 1px solid var(--s-line-on-ink-strong);
  border-radius: 0;
  color: var(--s-on-ink);
  box-shadow: none;
}

body[data-skin="silver"] .ph-zoom:hover {
  background: rgba(255, 255, 255, .10);
  border-color: var(--s-paper-0);
}

body[data-skin="silver"] .ph-zoom svg {
  color: currentColor;
  stroke: currentColor;
}

body[data-skin="silver"] .ph-title {
  font-family: var(--s-font-display);
  font-weight: var(--s-fw-bold);
  font-size: var(--s-fz-3xl);
  line-height: var(--s-lh-snug);
  color: var(--s-on-ink);
  letter-spacing: -.01em;
}

body[data-skin="silver"] .ph-share-btn {
  background: transparent;
  border: 1px solid var(--s-line-on-ink-strong);
  border-radius: 0;
  color: var(--s-on-ink-muted);
  box-shadow: none;
}

body[data-skin="silver"] .ph-share-btn:hover {
  background: rgba(255, 255, 255, .10);
  border-color: var(--s-paper-0);
  color: var(--s-on-ink);
  transform: none;
}

body[data-skin="silver"] .ph-share-btn svg {
  fill: currentColor;
  color: currentColor;
}

/* photo.php flips the copy-link icon to green with an inline style on click.
   That is JavaScript writing an inline style, which no stylesheet can
   outrank without force, and it is a one-and-a-half second confirmation
   flash on a single icon. Left as it is on purpose: forcing it would take a
   forced declaration to cancel feedback the visitor asked for. */


/* ---- 3. Body cards ------------------------------------------------------ */

body[data-skin="silver"] .ph-body {
  max-width: 900px;
  padding: var(--s-s7) var(--s-gutter) var(--s-s8);
}

body[data-skin="silver"] .ph-specs,
body[data-skin="silver"] .ph-downloads,
body[data-skin="silver"] .ph-license-block,
body[data-skin="silver"] .ph-duo-section,
body[data-skin="silver"] .ph-comments {
  background: var(--s-paper-0);
  border: 1px solid var(--s-line-strong);
  border-radius: 0;
  box-shadow: none;
}

body[data-skin="silver"] .ph-card-label,
body[data-skin="silver"] .ph-duo-label {
  font-family: var(--s-font-body);
  font-size: var(--s-fz-xs);
  font-weight: var(--s-fw-semi);
  letter-spacing: var(--s-tracking-wide);
  text-transform: uppercase;
  color: var(--s-text-muted);
}

body[data-skin="silver"] .ph-spec {
  border-color: var(--s-line);
}

body[data-skin="silver"] .ph-spec-label {
  font-size: var(--s-fz-xs);
  letter-spacing: var(--s-tracking-wide);
  text-transform: uppercase;
  color: var(--s-text-muted);
}

body[data-skin="silver"] .ph-spec-val {
  font-family: var(--s-font-mono);
  font-size: var(--s-fz-sm);
  color: var(--s-ink-0);
}

body[data-skin="silver"] .ph-tag {
  background: var(--s-paper-0);
  border: 1px solid var(--s-line-strong);
  border-radius: 0;
  color: var(--s-text);
  font-size: var(--s-fz-sm);
}

body[data-skin="silver"] .ph-tag:hover {
  background: var(--s-paper-2);
  border-color: var(--s-line-heavy);
  color: var(--s-ink-0);
  transform: none;
}


/* ---- 4. Downloads and licence ------------------------------------------- */

body[data-skin="silver"] .ph-dl-btn {
  background: var(--s-paper-0);
  border: 1px solid var(--s-line-strong);
  border-radius: 0;
  color: var(--s-ink-0);
  box-shadow: none;
  font-weight: var(--s-fw-semi);
}

body[data-skin="silver"] .ph-dl-btn:hover {
  background: var(--s-paper-2);
  border-color: var(--s-line-heavy);
  transform: none;
}

body[data-skin="silver"] .ph-dl-btn--primary {
  background: var(--s-ink-0);
  border-color: var(--s-ink-0);
  color: var(--s-paper-0);
}

body[data-skin="silver"] .ph-dl-btn--primary:hover {
  background: var(--s-ink-1);
  border-color: var(--s-ink-1);
  color: var(--s-paper-0);
}

body[data-skin="silver"] .ph-dl-btn svg {
  color: currentColor;
  stroke: currentColor;
}

body[data-skin="silver"] .ph-license-badge {
  background: var(--s-ink-0);
  color: var(--s-paper-0);
  border: 0;
  border-radius: 0;
  font-size: var(--s-fz-xs);
  font-weight: var(--s-fw-semi);
  letter-spacing: var(--s-tracking-wide);
  text-transform: uppercase;
}

body[data-skin="silver"] .ph-license-text,
body[data-skin="silver"] .ph-license-credit-label {
  color: var(--s-text);
}

body[data-skin="silver"] .ph-license-credit {
  background: var(--s-paper-2);
  border: 1px solid var(--s-line);
  border-radius: 0;
}

body[data-skin="silver"] .ph-license-credit code {
  font-family: var(--s-font-mono);
  color: var(--s-ink-0);
  background: transparent;
}

body[data-skin="silver"] .ph-license-credit-copy {
  color: var(--s-text-muted);
}

/* The warning, the notices and the alerts all carried a tinted background in
   the base sheet. On a monochrome page the signal has to come from weight
   and from a rule, not from a wash of colour. */
body[data-skin="silver"] .ph-license-warning,
body[data-skin="silver"] .ph-download-notice,
body[data-skin="silver"] .ph-private-notice,
body[data-skin="silver"] .ph-viewonly-notice,
body[data-skin="silver"] .ph-alert,
body[data-skin="silver"] .ph-alert--ok,
body[data-skin="silver"] .ph-alert--err {
  background: var(--s-paper-2);
  border: 1px solid var(--s-line-strong);
  border-inline-start: 3px solid var(--s-ink-0);
  border-radius: 0;
  color: var(--s-text);
}

body[data-skin="silver"] .ph-license-warning strong,
body[data-skin="silver"] .ph-viewonly-notice strong {
  color: var(--s-ink-0);
}

body[data-skin="silver"] .ph-license-link,
body[data-skin="silver"] .ph-download-notice a,
body[data-skin="silver"] .ph-viewonly-contact {
  color: var(--s-ink-0);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body[data-skin="silver"] .ph-license-link:hover,
body[data-skin="silver"] .ph-download-notice a:hover,
body[data-skin="silver"] .ph-viewonly-contact:hover {
  color: var(--s-ink-1);
  text-decoration-thickness: 2px;
}


/* ---- 5. Extracted palette ----------------------------------------------- */

/* The bars keep their fill: it is the photograph's own colour, measured and
   reported. Only the frame and the tooltip go monochrome. */

body[data-skin="silver"] .ph-palette {
  border: 1px solid var(--s-line);
  border-radius: 0;
  overflow: hidden;
}

body[data-skin="silver"] .ph-swatch:first-child .ph-swatch-bar,
body[data-skin="silver"] .ph-swatch:last-child .ph-swatch-bar {
  border-radius: 0;
}

body[data-skin="silver"] .ph-swatch-tip {
  background: var(--s-ink-0);
  color: var(--s-paper-0);
  border-radius: 0;
  font-family: var(--s-font-mono);
  font-size: var(--s-fz-xs);
}

body[data-skin="silver"] .ph-swatch-tip::after {
  border-top-color: var(--s-ink-0);
}


/* ---- 6. Rating, story link, comments ------------------------------------ */

body[data-skin="silver"] .ph-star-filled {
  color: var(--s-ink-0);
  fill: var(--s-ink-0);
}

body[data-skin="silver"] .ph-star-empty {
  color: var(--s-ink-3);
  fill: none;
}

/* An interactive control, so it needs 3:1 of its own; the empty stars in
   the read-only display above keep ink-3, where the contrast that matters
   is against the filled star beside them. */
body[data-skin="silver"] .ph-star-form label {
  color: var(--s-ink-2);
}

body[data-skin="silver"] .ph-star-form label:hover,
body[data-skin="silver"] .ph-star-form label:hover ~ label,
body[data-skin="silver"] .ph-star-form input[type="radio"]:checked ~ label {
  color: var(--s-ink-0);
}

body[data-skin="silver"] .ph-rating-score {
  font-family: var(--s-font-display);
  color: var(--s-ink-0);
}

body[data-skin="silver"] .ph-rating-meta,
body[data-skin="silver"] .ph-rate-label,
body[data-skin="silver"] .ph-voted {
  color: var(--s-text-muted);
  font-size: var(--s-fz-sm);
}

body[data-skin="silver"] .ph-divider {
  background: var(--s-line-strong);
  height: 1px;
}

body[data-skin="silver"] .ph-story {
  background: var(--s-paper-0);
  border: 1px solid var(--s-line-strong);
  border-radius: 0;
  box-shadow: none;
  color: var(--s-ink-0);
  text-decoration: none;
}

body[data-skin="silver"] .ph-story:hover {
  background: var(--s-paper-2);
  border-color: var(--s-line-heavy);
  transform: none;
  box-shadow: none;
}

body[data-skin="silver"] .ph-cm-title,
body[data-skin="silver"] .ph-comment-name {
  font-family: var(--s-font-display);
  color: var(--s-ink-0);
}

body[data-skin="silver"] .ph-comment {
  border-color: var(--s-line);
}

body[data-skin="silver"] .ph-comment-date,
body[data-skin="silver"] .ph-no-comments {
  color: var(--s-text-muted);
  font-size: var(--s-fz-sm);
}

body[data-skin="silver"] .ph-comment-text {
  color: var(--s-text);
}

body[data-skin="silver"] .ph-cf input[type="text"],
body[data-skin="silver"] .ph-cf textarea,
body[data-skin="silver"] .ph-captcha input {
  background: var(--s-paper-2);
  border: 1px solid var(--s-line);
  border-radius: 0;
  color: var(--s-ink-0);
  font-family: var(--s-font-body);
}

body[data-skin="silver"] .ph-cf input:focus,
body[data-skin="silver"] .ph-cf textarea:focus,
body[data-skin="silver"] .ph-captcha input:focus {
  background: var(--s-paper-0);
  border-color: var(--s-line-strong);
  outline: var(--s-ring);
  outline-offset: var(--s-ring-offset);
  box-shadow: none;
}

body[data-skin="silver"] .ph-captcha img {
  border: 1px solid var(--s-line);
  border-radius: 0;
  filter: grayscale(1);
}

body[data-skin="silver"] .ph-cf-submit {
  background: var(--s-ink-0);
  border: 1px solid var(--s-ink-0);
  border-radius: 0;
  color: var(--s-paper-0);
  box-shadow: none;
  font-weight: var(--s-fw-semi);
}

body[data-skin="silver"] .ph-cf-submit:hover {
  background: var(--s-ink-1);
  border-color: var(--s-ink-1);
  transform: none;
}

body[data-skin="silver"] .ph-cm-toggle {
  background: transparent;
  border: 1px solid var(--s-line-strong);
  border-radius: 0;
  color: var(--s-ink-0);
}

body[data-skin="silver"] .ph-admin,
body[data-skin="silver"] .ph-admin a {
  color: var(--s-text-muted);
}


/* ---- 7. Mobile action bar ----------------------------------------------- */

/* photo.php shows this fixed bar on small screens. It is styled here rather
   than in css/mobile.css because it belongs to this page and the base rules
   for it live in this page's stylesheet. */

body[data-skin="silver"] .ph-mob-bar {
  background: var(--s-paper-0);
  border-top: 1px solid var(--s-line-strong);
  box-shadow: none;
}

body[data-skin="silver"] .ph-mob-btn {
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--s-ink-0);
  font-size: var(--s-fz-sm);
  font-weight: var(--s-fw-semi);
}

body[data-skin="silver"] .ph-mob-btn-icon svg {
  color: currentColor;
  stroke: currentColor;
}