/* ==========================================================================
   Fan works wall — /fan-art
   --------------------------------------------------------------------------
   Linked only from dist/pages/fan-art-shell.html, the frame the build renders
   from templates/partials and src/lib/fan-art-api.js fills with the wall.

   What this replaces. Until 2026-10-28 the page carried its own <style> block
   with its own palette: #0f1117 page, #171a23 cards, #ffd166 button. Nothing
   else on the site uses those values (reports/design/palette-usage.csv, 1,608
   pages), so the one page that asks a visitor to send in their own picture was
   also the one page that stopped looking like sprunki.com: no header, no
   footer, a bare text breadcrumb, and a dark surface that follows neither the
   page background nor the site's palette.

   What it uses instead. The theme tokens the other 1,608 pages already define
   (DESIGN.md §1.1) - --primary-color, --secondary-color, --text-color,
   --text-light, --light-color, --border-radius - plus color-mix() of the page
   ink for borders and surfaces, the same trick blog-reading.css uses so one
   sheet is readable in both palettes. No new colour value is introduced here;
   the palette census after this change should show no additions.

   Contrast, measured on the light palette: body ink #2d3436 on the page
   #f5f6fa is 12.4:1; --text-light #636e72 on #f5f6fa is 4.9:1 (AA for text);
   the primary button's white label on #6c5ce7 is 4.7:1 (AA); the accent edge
   and borders are decoration only and never the sole carrier of meaning. The
   focus ring is the page ink rather than --secondary-color: #00cec9 measures
   1.9:1 on the light page, which is a ring a low-vision reader cannot see.

   Layout: one column of cards on a phone, a picture grid once there is room,
   and every control a 44px target. Logical properties throughout, so
   dir="rtl" mirrors it without an entry in rtl.css.
   ========================================================================== */

.fan-art {
  max-width: 68rem;
  margin-inline: auto;
  padding: 1.5rem 1rem 3rem;
}

/* Breadcrumb: the same trail the crawled pages carry, in the site's ink. */
.fan-art-crumbs { margin: 0 0 .75rem; font-size: .9rem; color: var(--text-light); }
.fan-art-crumbs a { color: inherit; text-decoration: underline; text-underline-offset: .18em; }
.fan-art-crumbs a:focus-visible { outline: 3px solid var(--text-color); outline-offset: 2px; }
.fan-art-crumbs span { margin-inline: .35rem; }

/* Links in body copy and in notices. The vendor base sheet strips the underline
   from every anchor, and a link carried by colour alone is a link a low-vision
   reader misses - so the ones that sit inside a sentence get it back. */
.fan-art p a { color: inherit; text-decoration: underline; text-underline-offset: .18em; }
.fan-art p a:focus-visible { outline: 3px solid var(--text-color); outline-offset: 2px; }

.fan-art h1 { margin: 0 0 .5rem; font-size: clamp(1.6rem, 4vw, 2.1rem); line-height: 1.25; text-wrap: balance; }
.fan-art-lede {
  max-width: 62ch; margin: 0 0 1.5rem;
  font-size: 1.03rem; line-height: 1.65; color: var(--text-color);
}

/* One notice, two tones. The mark in front carries the meaning, so the colour
   is a second cue rather than the only one. */
.fan-art-notice {
  margin: 0 0 1.25rem; padding: .8rem 1rem;
  border: 1px solid color-mix(in oklab, var(--text-color) 22%, transparent);
  border-inline-start: 4px solid var(--primary-color);
  border-radius: var(--border-radius, .5rem);
  background: color-mix(in oklab, var(--text-color) 4%, transparent);
  line-height: 1.55;
}
.fan-art-notice.is-ok { border-inline-start-color: var(--secondary-color); }
.fan-art-notice.is-bad { border-inline-start-color: var(--accent-color, var(--primary-color)); }
.fan-art-notice p { margin: 0 0 .4rem; }
.fan-art-notice p:last-child { margin-block-end: 0; }

/* The wall itself: a picture grid whose cards are the site's own light surface
   (--light-color), the way the hub cards are, so the table of pictures reads as
   one block instead of a floating gallery. */
.fan-art-grid {
  list-style: none; margin: 0 0 2rem; padding: 0;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}
.fan-art-grid li {
  margin: 0; overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--text-color) 18%, transparent);
  border-radius: var(--border-radius, .5rem);
  background: var(--light-color);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--text-color) 10%, transparent);
}
.fan-art-grid a { display: block; color: inherit; text-decoration: none; }
.fan-art-grid a:focus-visible { outline: 3px solid var(--text-color); outline-offset: -3px; }
.fan-art-grid img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3;
  object-fit: cover; background: color-mix(in oklab, var(--text-color) 8%, transparent);
}
.fan-art-caption { margin: 0; padding: .6rem .75rem .7rem; line-height: 1.4; }
.fan-art-caption strong { display: block; font-size: .98rem; overflow-wrap: anywhere; }
.fan-art-caption .fan-art-credit { font-size: .86rem; color: var(--text-light); overflow-wrap: anywhere; }
.fan-art-note { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
/* A card is a thumbnail, not a page: a long note is clamped here and read in
   full on the work's own URL, which is where it is signed and attributed. */
.fan-art-grid .fan-art-note {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3;
  overflow: hidden; margin-block-start: .3rem; font-size: .88rem; color: var(--text-light);
}

/* One work, on its own URL (/fan-art/<id>). The picture gets the width; the
   note is set as the maker's own words, not as a caption under a thumbnail. */
.fan-art-work { margin: 0 0 1.5rem; }
.fan-art-work-image {
  display: block; width: 100%; max-width: 56rem; height: auto; margin-inline: auto;
  border: 1px solid color-mix(in oklab, var(--text-color) 18%, transparent);
  border-radius: var(--border-radius, .5rem);
  background: color-mix(in oklab, var(--text-color) 8%, transparent);
}
.fan-art-work-note {
  max-width: 56rem; margin: 1rem auto 0; padding-inline-start: .9rem;
  border-inline-start: 3px solid color-mix(in oklab, var(--text-color) 25%, transparent);
  white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65;
}
.fan-art-work-note-by { display: block; margin-block-start: .4rem; font-size: .9rem; color: var(--text-light); font-style: normal; }
.fan-art-byline { margin: 0 0 1.25rem; color: var(--text-light); }

.fan-art-share {
  max-width: 38rem; margin: 0 0 1.5rem; padding: 1rem 1.1rem;
  border: 1px solid color-mix(in oklab, var(--text-color) 18%, transparent);
  border-radius: var(--border-radius, .5rem);
  background: color-mix(in oklab, var(--text-color) 3%, transparent);
}
.fan-art-share h2 { margin: 0 0 .5rem; font-size: 1.1rem; }
.fan-art-share p { margin: 0 0 .75rem; font-size: .95rem; line-height: 1.55; color: var(--text-light); }
.fan-art-share-label { display: block; margin: 0 0 .35rem; font-weight: 700; font-size: .9rem; }
/* A readonly input rather than a copy button: the wall ships no JavaScript, and
   one long press selects and copies this on a phone. */
.fan-art-share-url {
  width: 100%; min-height: 44px; padding: .6rem .7rem;
  font: inherit; font-size: .95rem; color: var(--text-color);
  background: var(--light-color);
  border: 1px solid color-mix(in oklab, var(--text-color) 30%, transparent);
  border-radius: .4rem;
}
.fan-art-share-url:focus-visible { outline: 3px solid var(--text-color); outline-offset: 2px; }

.fan-art-review-image { display: block; width: 100%; max-width: 40rem; height: auto; object-fit: contain; }
.fan-art-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-block: 1rem; }
.fan-art-actions .fan-art-form { padding: 0; border: 0; background: transparent; }

.fan-art-empty {
  margin: 0 0 2rem; padding: 1.5rem 1rem; text-align: center;
  color: var(--text-light);
  border: 1px dashed color-mix(in oklab, var(--text-color) 25%, transparent);
  border-radius: var(--border-radius, .5rem);
}

/* The form. One column, real labels above each field, and a field surface that
   is the page's own background so an empty box still reads as a box. */
.fan-art h2 { margin: 2rem 0 .75rem; font-size: 1.35rem; line-height: 1.3; }
.fan-art-form {
  max-width: 38rem; padding: 1.25rem;
  border: 1px solid color-mix(in oklab, var(--text-color) 18%, transparent);
  border-radius: var(--border-radius, .5rem);
  background: color-mix(in oklab, var(--text-color) 3%, transparent);
}
.fan-art-form .fan-art-rules { margin: 0 0 1.1rem; font-size: .92rem; line-height: 1.55; color: var(--text-light); }
.fan-art-form label { display: block; margin: 0 0 .35rem; font-weight: 700; font-size: .95rem; }
.fan-art-form .fan-art-field { margin: 0 0 1.1rem; }
.fan-art-form input[type="text"],
.fan-art-form input[type="file"],
.fan-art-form textarea {
  width: 100%; min-height: 44px; padding: .6rem .7rem;
  font: inherit; color: var(--text-color);
  background: var(--light-color);
  border: 1px solid color-mix(in oklab, var(--text-color) 30%, transparent);
  border-radius: .4rem;
}
.fan-art-form textarea { min-height: 6rem; resize: vertical; }
.fan-art-form input[type="text"]:focus-visible,
.fan-art-form input[type="file"]:focus-visible,
.fan-art-form textarea:focus-visible,
.fan-art-form button:focus-visible {
  outline: 3px solid var(--text-color); outline-offset: 2px;
}
.fan-art-form button {
  min-height: 44px; padding: .7rem 1.4rem;
  font: inherit; font-weight: 700; cursor: pointer;
  color: #fff; background: var(--primary-color); border: 1px solid transparent;
  border-radius: .4rem;
}
.fan-art-form button:hover { background: color-mix(in oklab, var(--primary-color) 82%, #000); }
.fan-art-footnote { margin: 1rem 0 0; max-width: 38rem; font-size: .9rem; line-height: 1.55; color: var(--text-light); }

@media (max-width: 480px) {
  .fan-art { padding: .9rem .8rem 2.5rem; }
  .fan-art-form { padding: 1rem .85rem; }
}