/* =====================================================================
   KEEP CALM Posters app (/posters/) - a POSTERS browser that follows
   the /music page's organization. It REUSES, unmodified:
     - the site chrome (cdo-watchtower.css)          header + ribbon + footer
     - the shared music engine tokens/bar (kc-music-engine.css)  --mus-* + bar
     - the v17 "Curated, full width" LAYOUT (v17.css) .am-app / .am-side /
       .am-shelf / .am-rail / full-width shell
   This file only adds what posters need on top of that layout: the black-crown
   "Posters" lockup, poster-sized rails/grid, and the Collections/Colors tiles
   (the Posters analog of Music's Playlists + Made-for-You). It loads ONLY on
   this page, so every override here is local and never touches /music.

   Colors are all engine --mus-* tokens, so this page flips light/dark with the
   site header toggle exactly like /music does. No em dashes in any copy.
   ===================================================================== */

/* ---------- brand marks ----------
   Mirroring /music exactly: the LEFT sidebar top is a small-caps, letter-spaced
   muted text label (.am-side__hd "KEEP CALM Posters"), NOT a crown - that markup
   lives in the HTML and is styled by v17.css, so nothing is needed here. The
   crown + "Posters" lockup lives ONLY in the main content header (.am-lockup),
   just like "[crown] Music" tops /music's scrolling content.

   Owner logo rule for that main lockup: the crown is BLACK in light mode
   (var(--mus-ink) is near black in light, near white in dark, so it stays
   visible in both), sits CLOSE to the word (small gap), and is raised HIGHER
   (nudged above the word's center). The mobile top-bar brand keeps its crown
   too (also black-in-light), matching /music's mobile top bar. */
.pa-app .am-topbar__brand .am-crownglyph { color: var(--mus-ink); }
.pa-home-lockup { gap: 7px; }
.pa-home-lockup .am-lockup__crown {
  color: var(--mus-ink); height: 1.24em; transform: translateY(-0.05em);
}

/* ---------- poster rails + grids ----------
   The real poster card is .kc-pcard (kc-gallery.js), whose flip is
   .kc-flip--gallery { width:100% } - so it fills whatever cell we give it.
   Rails/grids just set the cell size; the card does the rest (fill + wrap +
   family color + hover controls), byte-identical to the /posters wall. */
.pa-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: 196px; gap: 22px;
  overflow-x: auto; overflow-y: hidden;
  padding: 6px 4px 16px; scroll-snap-type: x proximity; scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
.pa-rail > * { scroll-snap-align: start; }
.pa-rail--tile { grid-auto-columns: 232px; }
.pa-grid { display: grid; gap: 28px 20px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); padding: 8px 4px 8px; }
.pa-rail .kc-pcard, .pa-grid .kc-pcard { min-width: 0; }

.pa-status { color: var(--mus-ink-soft); padding: 8px 4px; font-size: 14.5px; }
.pa-empty { color: var(--mus-ink-quiet); padding: 10px 4px; font-size: 14px; }
.pa-lede { color: var(--mus-ink-soft); font-size: 15px; max-width: 640px; margin: 2px 0 14px; line-height: 1.5; }

/* ---------- collection + color tiles (the Playlists / Made-for-You analog) ----------
   These are the whole-tile links that open a Collection or a Color, standing
   in for Music's editorial/mix tiles. Color comes from the poster palette. */
.pa-tile {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  aspect-ratio: 8 / 5; border-radius: 14px; overflow: hidden; isolation: isolate;
  padding: 16px; text-decoration: none; color: #fffdf9;
  background: var(--mus-accent); box-shadow: var(--mus-shadow);
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}
/* the app shell's ".am-app a { color: inherit }" outranks a bare class and
   turned tile text ink-on-dark; every family swatch is dark, so light text
   is correct on all of them in both themes */
a.pa-tile, .am-app a.pa-tile, .pa-app a.pa-tile { color: #fffdf9; }
.pa-tile::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(150deg, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 0.42));
}
/* faint cropped-crown watermark, echoing the music tiles */
.pa-tile__crown {
  position: absolute; right: -12%; top: -14%; width: 62%; height: 128%; z-index: -1;
  opacity: 0.16; background: currentColor;
  -webkit-mask: url("/assets/logos/keepcalm-crown-white.svg?v=20260720") no-repeat right center / contain;
  mask: url("/assets/logos/keepcalm-crown-white.svg?v=20260720") no-repeat right center / contain;
}
.pa-tile__name { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.12; }
.pa-tile__sub { font-size: 12.5px; font-weight: 600; opacity: 0.94; margin-top: 4px; }
.pa-tile:hover { transform: translateY(-3px); box-shadow: var(--mus-shadow); filter: brightness(1.05); }
.pa-tile:focus-visible { outline: 3px solid var(--mus-focus); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .pa-tile { transition: filter 0.16s ease; } .pa-tile:hover { transform: none; } }
.pa-tile--color { justify-content: flex-end; }
.pa-tile--color .pa-tile__name { text-transform: capitalize; }
.pa-colorgrid { display: grid; gap: 20px 18px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); padding: 8px 4px; }

/* collection detail: a light action row above the poster grid */
.pa-detailhd { margin: 6px 0 10px; }
.pa-count { display: inline-block; font-size: 13px; color: var(--mus-ink-quiet); margin: 0 0 10px; }

/* Load More: pages /api/posters (capped at 48 per request) on the grid views */
.pa-more { display: block; margin: 20px auto 8px; }
.pa-more[hidden] { display: none; }

/* ---------- loading skeletons (never a blank rail while fetching) ---------- */
.pa-skel {
  aspect-ratio: 5 / 7; border-radius: 10px;
  background: linear-gradient(100deg, var(--mus-surface-2) 30%, var(--mus-rule) 50%, var(--mus-surface-2) 70%);
  background-size: 220% 100%; animation: pa-shimmer 1.3s ease-in-out infinite;
}
@keyframes pa-shimmer { 0% { background-position: 180% 0; } 100% { background-position: -180% 0; } }
@media (prefers-reduced-motion: reduce) { .pa-skel { animation: none; } }

/* ---------- minimal accessible dialog (New / Manage Collections) ----------
   Self-contained so it works even if the music engine failed to load; never a
   native prompt/alert (which would leak the "keepcalm.org says" chrome). */
.pa-modal { position: fixed; inset: 0; z-index: 1400; display: flex; align-items: center; justify-content: center; padding: 20px; }
.pa-modal__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); border: 0; padding: 0; cursor: pointer; }
.pa-modal__panel {
  position: relative; z-index: 1; width: min(440px, 100%);
  background: var(--mus-surface); color: var(--mus-ink);
  border: 1px solid var(--mus-rule); border-radius: 16px; box-shadow: var(--mus-shadow);
  padding: 22px; max-height: 82vh; overflow-y: auto;
}
.pa-modal__title { font-size: 19px; font-weight: 800; margin: 0 0 6px; letter-spacing: -0.01em; }
.pa-modal__msg { font-size: 14px; color: var(--mus-ink-soft); margin: 0 0 14px; line-height: 1.5; }
.pa-modal__input {
  width: 100%; font: inherit; font-size: 15px; color: var(--mus-ink);
  background: var(--mus-bg); border: 1px solid var(--mus-rule); border-radius: 10px;
  padding: 11px 14px; min-height: 46px; margin: 0 0 16px;
}
.pa-modal__input:focus-visible { outline: 3px solid var(--mus-focus); outline-offset: 1px; }
.pa-modal__actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.pa-btn {
  font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer;
  min-height: 44px; padding: 0 20px; border-radius: 999px; border: 0;
  background: var(--mus-accent); color: var(--mus-accent-ink);
}
.pa-btn:hover { background: var(--mus-accent-hover); }
.pa-btn--ghost { background: none; color: var(--mus-ink-soft); border: 1px solid var(--mus-rule); }
.pa-btn--ghost:hover { background: var(--mus-surface-2); color: var(--mus-ink); }
.pa-btn--danger { background: none; color: #c02a3f; border: 1px solid var(--mus-rule); }
.pa-btn--danger:hover { background: rgba(192, 42, 63, 0.1); }
html[data-mode="batman"] .pa-btn--danger, html[data-theme="dark"] .pa-btn--danger { color: #f6a8b3; }
.pa-btn:focus-visible, .pa-modal__scrim:focus-visible { outline: 3px solid var(--mus-focus); outline-offset: 2px; }

/* manage-collections list */
.pa-collist { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pa-collist li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--mus-rule); border-radius: 10px; }
.pa-collist__name { flex: 1 1 auto; min-width: 0; font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-collist__count { font-size: 12.5px; color: var(--mus-ink-quiet); flex: 0 0 auto; }
.pa-collist__del {
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; flex: 0 0 auto;
  min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--mus-rule);
  background: none; color: #c02a3f;
}
.pa-collist__del:hover { background: rgba(192, 42, 63, 0.1); }
html[data-mode="batman"] .pa-collist__del, html[data-theme="dark"] .pa-collist__del { color: #f6a8b3; }
.pa-collist__del:focus-visible { outline: 3px solid var(--mus-focus); outline-offset: 2px; }