/* ============================================================
   CASE-316 — transmission player + episode index
   Used by index.html (home hero slot) and case-316.html.
   Page-specific by rule 21a: keeps a two-page feature from forcing
   a styles.css bump on every page. Driven by case-316.js.
   ============================================================ */

.c316 [hidden], .c316-page [hidden]{display:none !important;}  /* rule 17 */

.c316{
  position:relative;
  z-index:1;
}

/* ---------- header bar ---------- */
.c316-head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:6px 18px;
  padding:16px 24px 12px;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg, rgba(232,169,74,0.07), rgba(5,8,15,0.35));
}
.c316-live{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.74rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0;
  display:flex;
  align-items:center;
  gap:9px;
}
.c316-dot{
  width:8px;height:8px;border-radius:50%;
  background:#FF3B3B;
  box-shadow:0 0 8px rgba(255,59,59,0.85);
  flex:none;
  animation:c316pulse 1.6s ease-in-out infinite;
}
@keyframes c316pulse{0%,100%{opacity:1;}50%{opacity:0.35;}}
.c316-title{
  font-family:'Big Shoulders', sans-serif;
  font-weight:900;
  font-size:clamp(1.9rem, 5vw, 3rem);
  line-height:1;
  letter-spacing:0.02em;
  color:var(--ink);
  margin:4px 0 0;
}
.c316-title a{text-decoration:none;}
.c316-title a:hover{color:var(--cyan-glow);}
.c316-open{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.8rem;
  letter-spacing:0.06em;
  color:var(--gold);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .2s ease;
}
.c316-open:hover{border-bottom-color:var(--gold);}

/* ---------- player ---------- */
.c316-stage{
  background:#05070d;
  padding:0;
}
.c316-frame{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  background:#05070d;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  overflow:hidden;
  margin:0 auto;
}
/* Vertical feed: 9:16, never taller than most of the screen. */
.c316[data-fmt="shorts"] .c316-frame{
  aspect-ratio:9 / 16;
  width:min(100%, calc(78vh * 9 / 16));
  width:min(100%, calc(78svh * 9 / 16));
  border-left:1px solid var(--line);
  border-right:1px solid var(--line);
}
.c316-frame iframe,
.c316-frame > div{
  position:absolute;inset:0;
  width:100%;height:100%;border:0;
}
.c316-standby{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  text-align:center;padding:2em;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.8rem;line-height:1.7;letter-spacing:0.06em;
  color:var(--ink-soft);
}

/* ---------- status line under the player ---------- */
.c316-status{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:4px 18px;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.7rem;
  letter-spacing:0.05em;
  color:var(--ink-soft);
  padding:8px 24px;
  border-bottom:1px solid var(--line);
  background:rgba(5,8,15,0.35);
}
.c316-status strong{color:var(--gold);font-weight:600;}
.c316-status span{min-width:0;}

/* ---------- case page ---------- */
main.c316-main{
  display:block;
  grid-template-columns:none;
}
.c316-main .c316-intro{max-width:66ch;}
.c316-main .c316{margin:1.4em 0 0;border:1px solid var(--line);}
.c316-main .c316-head{border-top:0;}

.c316-tools{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;
  margin:1.4em 0 0;
}
.c316-tools .c316-tools-label{
  font-family:'IBM Plex Mono', monospace;font-size:0.7rem;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--ink-soft);margin-right:4px;
}
.c316-btn{
  font-family:'IBM Plex Mono', monospace;font-size:0.74rem;letter-spacing:0.05em;
  padding:7px 14px;border-radius:2px;cursor:pointer;
  border:1px solid rgba(120,205,225,0.3);
  background:transparent;color:var(--ink-soft);
  transition:border-color .2s ease,color .2s ease,background .2s ease;
}
.c316-btn:hover{border-color:var(--cyan);color:var(--cyan);}
.c316-btn[aria-pressed="true"]{border-color:var(--gold);background:var(--gold);color:var(--bg);}
.c316-btn.c316-reset{margin-left:auto;}
.c316-btn.c316-reset.armed{border-color:#FF3B3B;color:#FF3B3B;}

.c316-index-head{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px;
  margin:2.4em 0 0.9em;
}
.c316-index-head h2{margin:0;}
.c316-count{
  font-family:'IBM Plex Mono', monospace;font-size:0.74rem;letter-spacing:0.06em;color:var(--ink-soft);
}
.c316-count strong{color:var(--gold);font-weight:600;}

.c316-grid{
  list-style:none;margin:0;padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(168px, 1fr));
  gap:12px;
}
.c316-ep{
  display:flex;flex-direction:column;gap:6px;
  width:100%;min-width:0;
  padding:8px 8px 10px;
  text-align:left;
  font:inherit;color:inherit;
  background:rgba(19,29,48,0.55);
  border:1px solid var(--line);
  border-radius:2px;
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
}
.c316-ep:hover{border-color:var(--cyan);background:rgba(19,29,48,0.85);}
.c316-ep:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}
.c316-thumb{
  position:relative;
  aspect-ratio:16 / 9;
  background:#05070d;
  overflow:hidden;
  border:1px solid rgba(120,205,225,0.12);
}
.c316-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.c316-sealed{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-family:'IBM Plex Mono', monospace;font-size:0.62rem;letter-spacing:0.18em;
  color:rgba(147,170,185,0.6);
  background:repeating-linear-gradient(135deg, rgba(120,205,225,0.05) 0 6px, transparent 6px 12px);
}
.c316-num{
  font-family:'Big Shoulders', sans-serif;font-weight:800;
  font-size:1.35rem;line-height:1;letter-spacing:0.03em;color:var(--ink);
}
.c316-meta{
  font-family:'IBM Plex Mono', monospace;font-size:0.64rem;letter-spacing:0.04em;
  color:var(--ink-soft);
  overflow:hidden;text-overflow:ellipsis;
}
.c316-tag{
  align-self:flex-start;
  font-family:'IBM Plex Mono', monospace;font-size:0.6rem;letter-spacing:0.12em;
  padding:2px 6px;border:1px solid currentColor;border-radius:2px;
}
.c316-ep.is-seen .c316-tag{color:var(--teal);}
.c316-ep.is-next .c316-tag{color:var(--gold);}
.c316-ep.is-new .c316-tag{color:#FF6B6B;}
.c316-ep.is-now{border-color:var(--gold);background:rgba(232,169,74,0.08);}
.c316-ep.is-now .c316-tag{color:var(--gold);}

.c316-empty{
  font-family:'IBM Plex Mono', monospace;font-size:0.8rem;color:var(--ink-soft);
}

@media (max-width:760px){
  .c316-head{padding:14px 16px 10px;}
  .c316-status{padding:8px 16px;}
  .c316-grid{grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));gap:10px;}
  .c316-btn.c316-reset{margin-left:0;}
}

@media (prefers-reduced-motion:reduce){
  .c316-dot{animation:none;}
}