/* ==========================================================================
   Private video library — plain, neutral, readable.
   Self-contained: no shared site CSS, no course branding. Merriweather for
   headings (the main site's face), system sans for everything else.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap');

:root{
  --paper:#fbfbfa;
  --card:#ffffff;
  --ink:#1c1c1c;
  --ink-2:#555555;
  --ink-3:#7d7d7d;
  --hair:#e0dfdc;
  --hair-2:#efeeeb;
  --accent:#2f5d8a;
  --mark:#fdf1c0;
  --now:#eef3f8;

  --display:'Merriweather',Georgia,'Times New Roman',serif;
  --body:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

@media (prefers-color-scheme: dark){
  :root{
    --paper:#151515;
    --card:#1d1d1d;
    --ink:#e8e7e4;
    --ink-2:#adaca8;
    --ink-3:#84837f;
    --hair:#333331;
    --hair-2:#272725;
    --accent:#8fb8dd;
    --mark:#5a4a12;
    --now:#23292f;
  }
}

*{box-sizing:border-box}

html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
}

.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:2rem 1.25rem 3rem;
}

a{ color:var(--accent) }
a:hover{ text-decoration:none }

h1{
  font-family:var(--display);
  font-size:1.6rem;
  line-height:1.3;
  margin:.2rem 0 .5rem;
  font-weight:700;
}

h2{
  font-family:var(--display);
  font-size:1.05rem;
  margin:0 0 .5rem;
  font-weight:700;
}

.mono{
  font-family:var(--mono);
  font-size:.75rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ink-3);
}

.top{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:1rem;
  border-bottom:1px solid var(--hair);
  padding-bottom:.75rem;
  margin-bottom:1.75rem;
}

.top a{ font-family:var(--mono); font-size:.78rem; text-decoration:none }

/* ---------- index ---------- */

.head{ margin-bottom:1.75rem }
.head p{ color:var(--ink-2); margin:.35rem 0 0; max-width:60ch }

ul.rows{ list-style:none; margin:0; padding:0 }

ul.rows li{ border-top:1px solid var(--hair-2) }
ul.rows li:first-child{ border-top:1px solid var(--hair) }
ul.rows li:last-child{ border-bottom:1px solid var(--hair) }

ul.rows a{
  display:block;
  padding:1rem .25rem;
  text-decoration:none;
  color:inherit;
}
ul.rows a:hover{ background:var(--hair-2) }

.row-top{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.5rem 1rem;
}

.row-title{ font-family:var(--display); font-weight:700; font-size:1.05rem; color:var(--accent) }
.row-meta{ font-family:var(--mono); font-size:.75rem; color:var(--ink-3) }
.row-sum{ margin:.35rem 0 0; color:var(--ink-2); font-size:.92rem; max-width:78ch }
.row-sum p{ margin:0 }

.empty{ color:var(--ink-2); font-style:italic }

/* ---------- one video ---------- */

.studio{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:2rem;
  align-items:start;
}

.left{ position:sticky; top:1.25rem }

.player{
  background:#000;
  border:1px solid var(--hair);
  border-radius:3px;
  overflow:hidden;
  line-height:0;
}
.player video{ width:100%; height:auto; display:block }

.facts{
  margin-top:1rem;
  border-top:1px solid var(--hair);
}
.facts div{
  display:flex;
  gap:1rem;
  padding:.5rem 0;
  border-bottom:1px solid var(--hair-2);
  font-size:.9rem;
}
.facts .k{
  font-family:var(--mono);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--ink-3);
  min-width:6.5rem;
  flex:none;
  padding-top:.15rem;
}
.facts .v{ color:var(--ink) }

.summary{
  margin-top:1.25rem;
  padding:1rem 1.1rem;
  background:var(--card);
  border:1px solid var(--hair);
  border-radius:3px;
}
.summary p{ margin:0; color:var(--ink-2); font-size:.95rem }
.summary p + p{ margin-top:.75rem }

/* ---------- transcript ---------- */

.search{
  display:flex;
  align-items:center;
  gap:.75rem;
  margin-bottom:.75rem;
}
.search input{
  flex:1;
  min-width:0;
  font:inherit;
  font-size:.9rem;
  padding:.45rem .6rem;
  color:var(--ink);
  background:var(--card);
  border:1px solid var(--hair);
  border-radius:3px;
}
.search .count{
  font-family:var(--mono);
  font-size:.72rem;
  color:var(--ink-3);
  white-space:nowrap;
}

.tr{
  border-top:1px solid var(--hair);
  max-height:none;
}

.cue{
  display:grid;
  grid-template-columns:4.5rem minmax(0,1fr);
  gap:.75rem;
  padding:.55rem .4rem;
  border-bottom:1px solid var(--hair-2);
  scroll-margin-top:1.5rem;
}
.cue.now{ background:var(--now) }

.cue button.t{
  font-family:var(--mono);
  font-size:.74rem;
  color:var(--accent);
  background:none;
  border:0;
  padding:.15rem 0 0;
  text-align:left;
  cursor:pointer;
}
.cue button.t:hover{ text-decoration:underline }

.cue p{ margin:0; font-size:.93rem }
.cue .sp{ font-weight:700; color:var(--ink) }

mark{ background:var(--mark); color:inherit }

.note{ font-family:var(--mono); font-size:.72rem; color:var(--ink-3); padding:.75rem 0 }

/* ---------- prev / next ---------- */

.nextprev{
  display:flex;
  gap:1rem;
  justify-content:space-between;
  margin-top:1.75rem;
  border-top:1px solid var(--hair);
  padding-top:1rem;
}
.nextprev a{
  display:block;
  text-decoration:none;
  color:var(--accent);
  font-size:.9rem;
  max-width:48%;
}
.nextprev a.n{ text-align:right; margin-left:auto }
.nextprev .k{
  display:block;
  font-family:var(--mono);
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--ink-3);
}

footer{
  margin-top:2.5rem;
  border-top:1px solid var(--hair);
  padding-top:.9rem;
  font-family:var(--mono);
  font-size:.72rem;
  color:var(--ink-3);
}

@media (max-width: 860px){
  .studio{ grid-template-columns:1fr; gap:1.5rem }
  .left{ position:static }
  .cue{ grid-template-columns:4rem minmax(0,1fr); gap:.6rem }
}