/* Sofia Demo Reel: the pieces house.css does not have. Videos on navy plates, the reel grid,
   the "how it was checked" list. Every colour is a house token; nothing new is coloured. */

/* the spec header's logo links home without looking like a link */
.spec .logo { display: inline-block; text-decoration: none; }
.spec code, .fighead code, .reel code, .close code {
  font-family: var(--mono); font-size: 0.86em; background: var(--bg-2); border: 1px solid var(--line);
  padding: 0.05em 0.35em; border-radius: 3px; color: var(--ink); overflow-wrap: anywhere;
}
/* the short spec header (the index): logo and id, then status, which keeps its column
   from the four-cell header on the case pages */
.spec.short { grid-template-columns: minmax(0, 4fr) minmax(0, 1fr); }
@media (max-width: 900px) { .spec.short { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .spec.short { grid-template-columns: 1fr; } }
.lede-row.solo { grid-template-columns: minmax(0, 1fr); }

/* ---------- videos on plates ---------- */
.case-plate { position: relative; overflow: hidden; }
.case-plate video, .case-plate img { width: 100%; height: auto; border-radius: var(--radius-sm); background: var(--plate); }
.case-plate .cover { aspect-ratio: 16 / 9; object-fit: cover; }
.case-plate .embed { position: relative; aspect-ratio: 16 / 9; }
.case-plate .embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--radius-sm); }
.case-plate .slate {
  aspect-ratio: 16 / 9; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px;
  border: 1px dashed var(--plate-ink-3); border-radius: var(--radius-sm); color: var(--plate-ink-3); font-size: 14px;
}
.case-plate .slate .label { color: var(--plate-ink-2); }
.case-figure { margin-top: 3rem; }
.case-figure .case-plate video { max-height: 82vh; object-fit: contain; }

/* ---------- the reel ---------- */
.reel { margin-top: 4rem; }
.reel-head {
  display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline;
  border-top: 2px solid var(--line-strong); padding-top: 1rem; margin-bottom: 1.6rem;
}
.reel-head h2 { font-family: var(--display); font-weight: 600; font-size: 1.65rem; line-height: 1.2; letter-spacing: -0.015em; margin: 0; }
.reel-head p { margin: 0; font-size: 14px; color: var(--ink-3); }
.reel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem 32px; }
.case { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.case.lead { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.case .screen { display: block; text-decoration: none; color: var(--plate-ink); }
.case .screen .play {
  position: absolute; right: 22px; bottom: 22px; padding: 3px 10px; border-radius: 999px;
  background: rgba(9, 18, 32, 0.78); color: var(--plate-ink);
}
.case.pending .screen { pointer-events: none; }
.case .meta { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.case .fighead { padding: 10px 0 2px; }
.case .fighead b { color: var(--ink-3); }
.case h3 { font-family: var(--display); font-weight: 600; font-size: 1.2rem; line-height: 1.3; margin: 0; text-wrap: balance; }
.case.lead h3 { font-size: 1.65rem; letter-spacing: -0.015em; line-height: 1.2; }
.case h3 a { color: var(--ink); text-decoration-color: transparent; }
.case h3 a:hover { color: var(--accent); text-decoration-color: currentColor; }
.case .desc, .case .desc p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); max-width: 68ch; }
.case.lead .desc p { font-size: 17px; }
.case .check { margin: 2px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); display: flex; gap: 8px; align-items: baseline; }
.case .check b { color: var(--ink); font-weight: 600; }

/* the lime mark, outside the spec header: "passes" (solid) or "pending" (dashed ring) */
.mark { flex: 0 0 auto; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--signal); border: 1.5px solid var(--ink); transform: translateY(1px); }
.mark.draft { background: transparent; border-style: dashed; }

/* ---------- how it was checked: a keyed list, rows divided by hairlines ---------- */
.checks { margin: 0 0 1.15em; border-top: 1px solid var(--line-strong); }
.checks > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 4px 16px; padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
.checks dt { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); padding-top: 0.35em; }
.checks dd { margin: 0; color: var(--ink-2); font-size: 16px; }
.checks dd .mark { margin-right: 8px; }

.close-note { margin: 0; color: var(--ink-2); font-size: 15px; max-width: 52ch; }
.close li code { font-size: 12px; }

@media (max-width: 900px) {
  .reel-grid { grid-template-columns: minmax(0, 1fr); }
  .case.lead { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
@media (max-width: 480px) {
  .checks > div { grid-template-columns: 1fr; }
  .case .screen .play { right: 18px; bottom: 18px; }
}
@media print {
  .case .screen .play { display: none; }
  .case-figure .case-plate video { max-height: none; }
}