/* ---------------------------------------------------------------------------
   Peltify — the media card (src/ui/mediaCard.js). RESTORED 2026-08-29.

   These rules lived in dashboard.css until round eight's rewrite of that
   file (96f61a1, 2026-08-28) dropped them — the card every title opens has
   rendered as unstyled text since, on the deployed build too. They are the
   rules as they stood at 035e51f, in their own file, imported from
   dashboard.css so they load wherever the app's stylesheets do.
   --------------------------------------------------------------------------- */

/* ======================================================= the media card == */

.mc-panel { position: relative; padding: 0; }

.mc-close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  display: grid; place-items: center; width: 32px; height: 32px;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 253, 250, 0.86); color: var(--ink);
  box-shadow: var(--lift);
}

.mc-close:hover { background: var(--white); }

.mc-head {
  display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: var(--gap-3);
  padding: var(--gap-4) var(--gap-4) var(--gap-3);
  align-items: center;
}

.mc-art {
  width: 128px; aspect-ratio: 2 / 3; border-radius: var(--r-md); overflow: hidden;
  background: var(--paper-deep); box-shadow: var(--raise);
}

.mc-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 12.11: the play control and the trailer frame live on the popup's artwork. */
.mc-art { position: relative; }
.mc-art .cd-play { left: 6px; bottom: 6px; height: 28px; padding: 0 9px 0 6px; font-size: 11px; }
.mc-art .cd-play-l { max-width: 90px; }
.mc-art .cd-trailer { position: absolute; inset: 0; width: 100%; height: 100%; }
.mc-art img { transition: opacity 700ms ease; }
.mc-art.is-sampling img { opacity: 0; }

.mc-art.is-blank {
  display: grid; place-items: center; gap: 6px; color: var(--ink-faint);
  border: 1px dashed var(--line);
}

.mc-art-none { display: grid; justify-items: center; gap: 4px; font-size: 10.5px; }

.mc-titles { min-width: 0; }

.mc-kind {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint);
}

.mc-title { margin: 4px 0 2px; font-size: clamp(19px, 2.4vw, 26px); line-height: 1.2; }

.mc-by { margin: 0; font-size: 13px; color: var(--ink-soft); }

.mc-loading { display: flex; align-items: center; gap: 8px; padding: 0 var(--gap-4) var(--gap-4); font-size: 13px; color: var(--ink-soft); }

.mc-body { padding: 0 var(--gap-4) var(--gap-4); display: grid; gap: var(--gap-3); }

.mc-tags { display: flex; flex-wrap: wrap; gap: 6px; }

.mc-tag {
  padding: 3px 10px; border-radius: var(--r-pill); font-size: 11.5px;
  background: var(--paper-deep); color: var(--ink-soft);
}

.mc-tag-from { background: transparent; border: 1px dashed var(--line-strong); }

/* THE CATALOGUE'S WORDS ARE SET IN THE SERIF. Somebody else's sentences look
   like somebody else's sentences, before a syllable is read. */
.mc-synopsis { margin: 0; font-family: var(--font-serif); font-size: 15px; line-height: 1.6; }

.mc-prov { margin: 8px 0 0; display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink-faint); }

.mc-fact { padding: var(--gap-3); border-radius: var(--r-md); background: var(--paper); }

.mc-none, .mc-miss-sub { margin: 0; font-size: 13px; color: var(--ink-soft); }

.mc-miss {
  display: flex; align-items: center; gap: 7px; margin: 0;
  font-size: 14px; font-weight: 550; color: var(--warn);
}

.mc-yours {
  display: flex; align-items: center; gap: 7px; margin: 0;
  padding: 9px 13px; border-radius: var(--r-pill);
  background: var(--ok-wash); color: var(--ok); font-size: 12.5px; font-weight: 550;
}

.mc-where { display: flex; flex-wrap: wrap; gap: 8px; }

.mc-link {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--white);
  font-size: 12.5px; font-weight: 550; color: var(--spine); text-decoration: none;
}

.mc-link:hover { border-color: var(--violet); background: var(--violet-wash); }

.mc-head { grid-template-columns: 92px minmax(0, 1fr); padding: var(--gap-3); }

.mc-art { width: 92px; }

.mc-body, .mc-loading { padding: 0 var(--gap-3) var(--gap-3); }

@media (max-width: 520px) {
  .mc-head { grid-template-columns: 92px minmax(0, 1fr); padding: var(--gap-3); }
  .mc-art { width: 92px; }
  .mc-body, .mc-loading { padding: 0 var(--gap-3) var(--gap-3); }
}

/* ---------------------------------------------------------------------------
   2026-09-06 (media-card/RAW.md entry 3) — "a living card … bigger image
   … more concreteness … it doesnt feel that official". A magazine page:
   the artwork large and square-cornered on the left, the facts in a column
   beside it; the catalogue's words as a short lead with More; boxy tags,
   boxy links, a 6px corner on the panel and nothing rounder than that.
   --------------------------------------------------------------------------- */
.mc-panel { border-radius: 6px; overflow: hidden; }
.mc-head { grid-template-columns: 220px minmax(0, 1fr); gap: var(--gap-4); padding: var(--gap-4); align-items: end; }
.mc-art { width: 220px; aspect-ratio: 1 / 1; border-radius: 4px; box-shadow: 0 22px 40px -22px rgba(36, 20, 46, 0.7), 0 1px 0 rgba(255,255,255,0.6); }
.mc-head.is-loading .mc-art { aspect-ratio: 1 / 1; }
.mc-kind { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; color: var(--spine); }
.mc-title { margin: 6px 0 4px; font-size: clamp(24px, 3vw, 34px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.mc-by { font-size: 15px; color: var(--ink-soft); }
.mc-body, .mc-loading { padding: 0 var(--gap-4) var(--gap-4) calc(220px + var(--gap-4) * 2); }
.mc-body { gap: 14px; }
.mc-tags { gap: 6px; }
.mc-tag, .mc-tags span { padding: 4px 9px; border-radius: 3px; border: 1px solid var(--line); background: var(--white);
                         font-size: 12px; font-weight: 600; color: var(--ink); }
.mc-fact { padding: 14px 0 0; border-radius: 0; border-top: 1px solid var(--line-soft); background: transparent; }
.mc-synopsis { font-size: 15.5px; line-height: 1.55; }
.mc-fact-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.mc-fact-foot .mc-prov { margin: 0; }
.mc-more { border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--spine); cursor: pointer; }
.mc-more:hover { text-decoration: underline; }
.mc-link { border-radius: 3px; padding: 8px 14px; font-weight: 700; }
.mc-yours { border-radius: 3px; }
.mc-close { border-radius: 3px; box-shadow: none; background: var(--paper); }
.mc-close:hover { background: var(--paper-deep); }
@media (max-width: 640px) {
  .mc-head { grid-template-columns: 140px minmax(0, 1fr); gap: var(--gap-3); padding: var(--gap-3); }
  .mc-art { width: 140px; }
  .mc-body, .mc-loading { padding: 0 var(--gap-3) var(--gap-3); }
  .mc-title { font-size: 22px; }
}

/* ===========================================================================
   2026-09-07 — THE CARD AS NICK'S CONCEPT IMAGE: the artwork blurred and
   darkened across the whole screen, the cover large on the left, the facts
   in white on the right — kind in violet, a light big title, the creator as
   a violet link, genres as dotted words, a hairline, the description, the
   sources, two outlined Open buttons. No white panel any more.
   =========================================================================== */
.mc-scrim { background: #0b0709; padding: 0; overflow: hidden; }
.mc-scrim::before {
  content: ""; position: absolute; inset: -40px;
  background: var(--mc-bg, none) center / cover no-repeat;
  filter: blur(48px) saturate(1.2) brightness(.55);
  opacity: .95;
}
.mc-panel, .pop-panel.mc-panel {
  position: relative; z-index: 1;
  width: min(1180px, 100%); max-height: 100vh; overflow: auto;
  display: grid; grid-template-columns: minmax(280px, 440px) minmax(0, 1fr);
  column-gap: 64px; row-gap: 0; align-items: center;
  /* 20.5 (`pelt-card/SPEC.md` entry 12) — SAFE centre. Nick: "The pelt card
     sits too high, on desktop and more so on laptop where it blocks the top
     search bar." A plain `center` centres the overflow too, so a card taller
     than the window has its head pushed ABOVE the top edge — which is both
     "too high" and unreachable. `safe center` centres while it fits and falls
     back to the start when it does not, so the top is never cut off and the
     rest scrolls. */
  align-content: safe center;
  padding: 64px 48px;
  border: 0; border-radius: 0; background: transparent !important; box-shadow: none;
  color: #fff;
}
.mc-head, .mc-head.is-local, .mc-head.is-loading { display: contents; }
.mc-art, .mc-head.is-loading .mc-art {
  grid-column: 1; grid-row: 1 / span 2; align-self: center;
  width: 100%; max-width: 440px; aspect-ratio: 1 / 1; border-radius: 2px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8);
}
.mc-art.is-blank { border-color: rgba(255, 255, 255, .25); color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .06); }
.mc-titles { grid-column: 2; grid-row: 1; align-self: end; }
.mc-body, .mc-loading { grid-column: 2; grid-row: 2; align-self: start; padding: 0 !important; min-width: 0; }
.mc-kind { font-size: 12px; font-weight: 700; letter-spacing: .28em; color: rgba(255, 255, 255, .72); }
.mc-title { margin: 12px 0 8px; font-size: clamp(28px, 3.4vw, 44px); font-weight: 500; letter-spacing: -0.01em; line-height: 1.1; color: #fff; }
.mc-by { font-size: 17px; color: rgba(255, 255, 255, .85); }
.mc-by a, .mc-by button, .mc-by .ig-handle { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.5); }
.mc-body { gap: 14px; margin-top: 14px; }
.mc-tags { gap: 0 12px; }
.mc-tag, .mc-tags span, .mc-tag-from {
  padding: 0; border: 0; background: none; border-radius: 0;
  font-size: 16px; font-weight: 400; color: #fff;
}
.mc-tag + .mc-tag::before, .mc-tags span + span::before { content: "·"; margin-right: 12px; color: rgba(255, 255, 255, .5); }
.mc-tag-from { color: rgba(255, 255, 255, .6); }
.mc-fact { padding: 18px 0 0; border-top: 1px solid rgba(255, 255, 255, .2); }
.mc-synopsis { font-family: var(--font-sans); font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, .92); }
.mc-prov { color: rgba(255, 255, 255, .55); font-size: 13px; }
.mc-more { color: #a86bff; }
.mc-miss { color: #ffb4a6; }
.mc-yours { background: rgba(255, 255, 255, .08); color: #fff; border-radius: 3px; }
.mc-where { gap: 12px; margin-top: 6px; }
.mc-link {
  padding: 12px 20px; border-radius: 4px; font-size: 14px; font-weight: 500;
  border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .06); color: #fff;
}
.mc-link:hover { border-color: #fff; background: rgba(255, 255, 255, .12); }
.mc-loading { display: flex; color: rgba(255, 255, 255, .7); }
.mc-close, .mc-panel .mc-close {
  position: fixed; top: 24px; right: 32px; width: 44px; height: 44px; z-index: 3;
  background: transparent; color: #fff; border-radius: 50%;
}
.mc-close:hover { background: rgba(255, 255, 255, .12); }
@media (max-width: 900px) {
  .mc-panel, .pop-panel.mc-panel { grid-template-columns: minmax(0, 1fr); padding: 72px 24px 40px; align-content: start; column-gap: 0; }
  .mc-art, .mc-head.is-loading .mc-art { grid-column: 1; grid-row: 1; max-width: 300px; margin: 0 auto; }
  .mc-titles { grid-column: 1; grid-row: 2; margin-top: 24px; }
  .mc-body, .mc-loading { grid-column: 1; grid-row: 3; }
  .mc-title { font-size: 26px; }
}

/* ===========================================================================
   17.2 — THE PELT CARD NEVER SCROLLS, AND ← → MOVE BETWEEN PELTS
   (pelt-card/SPEC.md entry 11).

   The shape Nick accepted — the 2×3 grid, the verdict line, the lit reactions —
   is untouched. What changes is that the panel spends a height budget instead
   of growing past the window: the artwork is the one thing that gives, and
   `fit.js` measures how much rather than guessing at a breakpoint.
   =========================================================================== */
.mc-scrim .mc-panel { overflow: auto; overscroll-behavior: contain; }
.mc-art, .mc-head.is-loading .mc-art { max-width: calc(440px * var(--mc-fit, 1)); }
@media (max-width: 900px) {
  .mc-art, .mc-head.is-loading .mc-art { max-width: calc(min(300px, 40dvh) * var(--mc-fit, 1)); }
}

/* ← → : one control per side, on the edge of the window, out of the card's way. */
.mc-move {
  position: fixed; top: 50%; z-index: 3; width: 44px; height: 44px;
  display: grid; place-items: center; transform: translateY(-50%);
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer;
}
.mc-move:hover:not(:disabled) { background: rgba(255, 255, 255, .18); }
.mc-move:disabled { opacity: 0; pointer-events: none; }
.mc-move.is-prev { left: 12px; }
.mc-move.is-next { right: 12px; }
.mc-move.is-prev svg { transform: rotate(90deg); }
.mc-move.is-next svg { transform: rotate(-90deg); }
/* the swipe: the card leaves the way the thumb pushed it */
.mc-scrim.is-swipe-left .mc-panel { animation: mc-swipe-left 180ms cubic-bezier(.4, 0, 1, 1) both; }
.mc-scrim.is-swipe-right .mc-panel { animation: mc-swipe-right 180ms cubic-bezier(.4, 0, 1, 1) both; }
@keyframes mc-swipe-left { to { transform: translateX(-9%); opacity: 0; } }
@keyframes mc-swipe-right { to { transform: translateX(9%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .mc-scrim.is-swipe-left .mc-panel, .mc-scrim.is-swipe-right .mc-panel { animation: none; opacity: 0; }
}

/* 20.5 — AND THE SHORT LAPTOP GETS ITS AIR BACK. At 620px the 64px of top and
   bottom padding is a fifth of the window; the card is centred in what is
   left of it rather than pressed against the search bar. */
@media (max-height: 760px) and (min-width: 901px) {
  .mc-panel, .pop-panel.mc-panel { padding: 32px 40px; column-gap: 40px; }
  .mc-close, .mc-panel .mc-close { top: 14px; right: 18px; }
}

/* ===========================================================================
   28.2 — THE MEDIA SHEET: the same blurred overlay, grown. Left: the cover at
   its size, your rating, In your library, Pelt, Pin, lists. Right: title,
   creator, the whole record, Peltify's layer, Reviews, Talked about. It
   scrolls; the small card keeps its no-scroll fit. Stacks on a phone.
   =========================================================================== */
.mc-scrim.is-big .mc-panel, .mc-scrim.is-big .pop-panel.mc-panel {
  overflow: auto; align-content: start; align-items: start;
  grid-template-columns: minmax(240px, 340px) minmax(0, 1fr); column-gap: 56px;
}
.mc-panel.is-big .mc-left { grid-column: 1; grid-row: 1 / span 2; align-self: start; display: grid; gap: 18px; }
.mc-panel.is-big .mc-left .mc-art { grid-column: auto; grid-row: auto; width: 100%; max-width: 100%; }
.mc-panel.is-big .mc-left .lb-manage { margin-top: 0; }
.mc-panel.is-big .mc-titles { grid-column: 2; grid-row: 1; align-self: end; }
.mc-panel.is-big .mc-body { grid-column: 2; grid-row: 2; }
.mc-panel.is-big .mc-grow { display: none; }
.mc-big { display: grid; gap: 22px; margin-top: 8px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .2); }
.mc-big .mp-sec h2 { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.mc-big .mp-note, .mc-big .mp-from, .mc-big .mp-stat span, .mc-big .mp-year, .mc-big .mp-dur, .mc-big .mp-n { color: rgba(255, 255, 255, .65); }
.mc-big .mp-stat b, .mc-big .mp-about, .mc-big .mp-facts, .mc-big .mp-disco, .mc-big .mp-tracks, .mc-big .mp-cast { color: #fff; }
.mc-big .mp-layer { border: 0; padding: 0; background: none; }
.mc-big .pc { color: var(--ink); }
@media (max-width: 900px) {
  .mc-scrim.is-big .mc-panel, .mc-scrim.is-big .pop-panel.mc-panel { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .mc-panel.is-big .mc-left { grid-column: 1; grid-row: 1; position: static; }
  .mc-panel.is-big .mc-left .mc-art { max-width: 240px; margin: 0 auto; }
  .mc-panel.is-big .mc-titles { grid-column: 1; grid-row: 2; margin-top: 18px; }
  .mc-panel.is-big .mc-body { grid-column: 1; grid-row: 3; }
}

/* 28.3 — the genre pills on the card and the sheet carry the suggestion
   card's shade (cards.js genreShades): Peltify purple by --rel, plain when
   the viewer's library does not carry the genre. */
.mc-tags .mc-genres { display: flex; flex-wrap: wrap; gap: 6px; }
.mc-tags .mc-genres .sc-tag {
  padding: 4px 11px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #fff;
  background: color-mix(in srgb, var(--violet) calc(var(--rel, 0) * 100%), rgba(255, 255, 255, .06));
  border: 1px solid color-mix(in srgb, var(--violet) calc(var(--rel, 0) * 100%), rgba(255, 255, 255, .28));
}
.mc-tags .mc-genres .sc-tag::before { content: none; }

/* 2026-09-14 — THE WHOLE OVERLAY SCROLLS. Nick: "the media scroll should
   work as a whole … When my cursor is outside the scroll box, it doesnt
   work." The scrim is the scroller, the panel just grows; the blurred
   backdrop is fixed so it does not scroll away. A light cover made the
   purple kind/creator unreadable: white now, and the backdrop a touch darker. */
.mc-scrim { overflow: auto; align-items: start; overscroll-behavior: contain; }
.mc-scrim::before { position: fixed; filter: blur(48px) saturate(1.2) brightness(.42); }
.mc-scrim .mc-panel, .mc-scrim.is-big .mc-panel, .mc-scrim.is-big .pop-panel.mc-panel { max-height: none; overflow: visible; }
@media (max-width: 720px) { .mc-title { font-size: 22px; } .mc-panel, .pop-panel.mc-panel { padding-top: 64px; } }

/* 2026-09-15 — THE PHONE ORDER OF THE SHEET (Nick): title and facts, then the
   genres, then the cover with its play control, then Your copy (rating, In
   your library, Pelt, Pin, Add to list, Fix the record), then everything
   else. The two columns dissolve into their children so they can be ordered. */
@media (max-width: 900px) {
  .mc-panel.is-big .mc-left, .mc-panel.is-big .mc-body { display: contents; }
  .mc-panel.is-big .mc-titles, .mc-panel.is-big .mc-art, .mc-panel.is-big .lb-manage,
  .mc-panel.is-big .mc-tags, .mc-panel.is-big .mc-fact, .mc-panel.is-big .mc-none, .mc-panel.is-big .mc-where,
  .mc-panel.is-big .mc-inside, .mc-panel.is-big .mc-big, .mc-panel.is-big .mc-miss, .mc-panel.is-big .mc-yours {
    grid-column: 1; grid-row: auto; order: 5; margin-top: 0;
  }
  /* 2026-09-15 — `align-self: end` is the desktop grid's "sit on the bottom
     of the cell"; in this flex column it hugged the RIGHT edge, so the title
     and "Desire · 2009" stood off-centre (chrome_qWvpXfyPRk). Left, like
     every other line here. */
  .mc-panel.is-big .mc-titles { order: 1; margin-top: 0; align-self: stretch; text-align: left; }
  .mc-panel.is-big .mc-tags { order: 2; margin: 12px 0 4px; }
  .mc-panel.is-big .mc-art { order: 3; margin: 12px 0 10px; max-width: 260px; width: 100%; }   /* a breath under the cover */
  .mc-panel.is-big .lb-manage { order: 4; margin: 14px 0 6px; }
  .mc-panel.is-big .mc-big { order: 6; }
  .mc-panel, .pop-panel.mc-panel { row-gap: 0; }
}

@media (max-width: 900px) {
  .mc-scrim .mc-panel .mc-title, .mc-scrim.is-big .mc-panel.is-big .mc-titles .mc-title { font-size: 22px; line-height: 1.15; margin: 8px 0 6px; }
}

/* 2026-09-15 — on a phone the big sheet is a plain column: nothing can share
   a cell or overlap (the community sheet's note sat on top of its paragraph) */
@media (max-width: 900px) {
  .mc-scrim.is-big .mc-panel, .mc-scrim.is-big .pop-panel.mc-panel { display: flex; flex-direction: column; align-items: stretch; }
  .mc-panel.is-big .mc-art { align-self: center; }
}