/* Scrolling rows and the individual show cards
   Lines 147-226 of the original index.html. */

/* ---------------- rows ---------------- */
#rows{position:relative;z-index:3;margin-top:0;padding-top:var(--row-gap);padding-bottom:3rem}
.row{margin:var(--row-gap) 0;position:relative}
.row:first-child{margin-top:0}
.row-head{display:flex;align-items:baseline;gap:.8rem;padding:0 var(--gut);margin-bottom:.85rem}
.row-title{font-family:var(--font);font-weight:700;font-size:clamp(1.15rem,2vw,1.55rem);color:var(--accent2);letter-spacing:-.015em}
.row-title b{color:var(--accent2);font-weight:700;font-style:normal}
.row-sub{font-size:.82rem;color:var(--ink-dim);font-style:normal}
.row-count{margin-left:auto;font-family:var(--font);letter-spacing:.18em;font-size:.6rem;font-weight:600;color:var(--ink-dim);
  text-transform:uppercase;padding-right:var(--gut)}
.rail-wrap{position:relative}
.rail{display:flex;gap:.9rem;overflow-x:auto;scroll-behavior:smooth;padding:1.4rem var(--gut) 1.2rem;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail-btn{position:absolute;top:0;bottom:0;width:clamp(2rem,4vw,3.4rem);z-index:6;border:0;cursor:pointer;
  background:linear-gradient(90deg,var(--bg),transparent);color:var(--accent);font-size:1.6rem;
  opacity:0;transition:.25s;display:flex;align-items:center;justify-content:center}
.rail-btn.r{right:0;transform:scaleX(-1)}
.rail-wrap:hover .rail-btn{opacity:1}
.rail-btn:hover{color:var(--accent-deep)}

/* ---------------- card ---------------- */
.card{position:relative;flex:0 0 auto;width:clamp(210px,22vw,290px);aspect-ratio:16/9;border-radius:6px;
  overflow:hidden;cursor:pointer;background:var(--bg-soft);border:1px solid rgba(50,31,18,.12);
  transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s,border-color .28s;transform-origin:center}
.card img{width:100%;height:100%;object-fit:cover;object-position:center 50%;transition:transform .5s,filter .3s;filter:saturate(1) brightness(.92)}
.card .cscrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.92) 4%,rgba(0,0,0,.28) 44%,rgba(0,0,0,0) 72%)}
.card .cbody{position:absolute;left:0;right:0;bottom:0;padding:.7rem .8rem .75rem}
.card .cyear{font-family:var(--font);font-style:normal;color:rgba(253,247,247,.82);font-size:.72rem;letter-spacing:.02em;margin-bottom:.14rem;
  text-shadow:0 1px 3px rgba(0,0,0,.85)}
.card .cname{font-family:var(--font);font-weight:700;font-size:1rem;line-height:1.14;color:var(--light);letter-spacing:-.01em;
  text-shadow:0 2px 10px rgba(0,0,0,.5);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .cbadge{position:absolute;top:.55rem;left:.6rem;font-family:var(--font);text-transform:uppercase;font-weight:600;
  letter-spacing:.12em;font-size:.5rem;padding:.24rem .55rem;border-radius:999px;background:rgba(0,0,0,.62);
  color:rgba(253,247,247,.85);border:1px solid rgba(253,247,247,.2)}
.card .cbadge.cout{color:#FDF7F7;border-color:rgba(179,19,19,.9);background:rgba(179,19,19,.82)}
.card .cplay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.7);width:52px;height:52px;
  border-radius:50%;background:rgba(0,0,0,.72);border:1px solid var(--accent-hi);display:flex;align-items:center;
  justify-content:center;opacity:0;transition:.28s;color:var(--accent-hi)}
.card .cdek{position:absolute;left:0;right:0;bottom:0;padding:.6rem .8rem .2rem;font-style:normal;font-size:.82rem;
  line-height:1.4;color:rgba(253,247,247,.94);opacity:0;transform:translateY(6px);transition:.28s;
  box-sizing:border-box;max-height:calc(1.4em * 3 + .6rem);overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 66%,transparent 97%);mask-image:linear-gradient(180deg,#000 66%,transparent 97%);
  background:linear-gradient(0deg,#2a180c 26%,rgba(42,24,12,.82) 66%,rgba(42,24,12,0))}
.card:hover{transform:scale(1.11) translateY(-4px);box-shadow:var(--shadow);border-color:var(--accent);z-index:7}
.card:hover img{transform:scale(1.06);filter:saturate(1.05) brightness(.72)}
.card:hover .cplay{opacity:1;transform:translate(-50%,-58%) scale(1)}
.card:hover .cname,.card:hover .cyear{opacity:0}
.card:hover .cdek{opacity:1;transform:none}
.card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* grid mode */
#grid-view{display:none;z-index:3;position:relative;padding:7.5rem var(--gut) 4rem}
#grid-head{margin:0 0 1.6rem}
#grid-head h2{font-family:var(--font);font-weight:800;font-size:clamp(1.7rem,4vw,2.8rem);margin:.2rem 0;letter-spacing:-.02em;color:var(--accent2)}
#grid-head h2 b{color:var(--accent2);font-style:normal}
#grid-head p{color:var(--ink-dim);font-style:normal;margin:0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.1rem}
.grid .card{width:auto}
.grid .card:hover{transform:scale(1.05) translateY(-3px)}
.no-results{color:var(--muted);font-style:normal;padding:3rem 0;text-align:center}
.btn-syllabus{display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;border:0;background:var(--accent);color:var(--on-accent);border-radius:999px;font-family:var(--font);letter-spacing:0;font-size:.95rem;font-weight:600;padding:.55rem 1.1rem;transition:.2s;white-space:nowrap;box-shadow:0 8px 20px -8px rgba(135,74,84,.7)}
.btn-syllabus:hover{background:var(--accent-deep);transform:translateY(-1px)}
.btn-syllabus .syl-count{display:none;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--on-accent);color:var(--accent);font-size:.7rem;font-weight:700;align-items:center;justify-content:center;line-height:1}
.btn-syllabus.has .syl-count{display:inline-flex}
@media(max-width:760px){.btn-syllabus span.syl-label{display:none}}
.card .cadd{position:absolute;top:.5rem;right:.5rem;z-index:3;width:30px;height:30px;border-radius:50%;border:1px solid rgba(253,247,247,.5);background:rgba(20,12,8,.62);color:#fff;font-size:1.15rem;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:.18s}
.card:hover .cadd,.card .cadd.on{opacity:1}
.card .cadd:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent);transform:scale(1.08)}
.card .cadd.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
@media(hover:none){.card .cadd{opacity:.88}}
/* line-height is set rather than left at normal: the font's own half-leading
   put the label a pixel below the bookmark beside it, so the icon and the
   words did not sit on the same line as each other. */
.railsyl{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:none;color:var(--accent);border:1px solid var(--accent);font-family:var(--font);font-weight:700;font-size:.98rem;line-height:1.1;padding:.58rem 1rem;border-radius:999px;transition:.2s;cursor:pointer;width:100%}
.railsyl:hover{background:var(--accent);color:var(--on-accent);transform:translateY(-1px)}
.railsyl.on{background:var(--accent);color:var(--on-accent)}
.railsyl svg{width:16px;height:16px;flex-shrink:0}
.syl-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin:.4rem 0 1.6rem}
.syl-act{display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--ink);font-family:var(--font);font-weight:600;font-size:.9rem;padding:.5rem .9rem;border-radius:999px;transition:.2s}
.syl-act:hover{border-color:var(--accent);color:var(--accent)}
.syl-act.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.syl-act.primary:hover{background:var(--accent-deep);color:var(--on-accent)}
.syl-empty{grid-column:1/-1;color:var(--muted);padding:1rem 0 3rem;text-align:left;line-height:1.7;max-width:62ch}

/* study progress: a quiet corner marker, and a dimmed card once completed */
.cprog{position:absolute;top:.5rem;left:.5rem;z-index:3;font-size:.8rem;line-height:1;
  color:var(--accent);text-shadow:0 1px 6px rgba(0,0,0,.8);pointer-events:none}
.card[data-prog="done"] img{filter:saturate(.55) brightness(.72)}
.card[data-prog="done"]:hover img{filter:none}

/* ---- the Runway page --------------------------------------------------
   Title on the left, the page's own field on the right, the way a browse
   page carries its own controls rather than borrowing the bar's. */
.runway-head{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.runway-head h2{margin:0;flex:0 0 auto}
.pagesearch{display:flex;align-items:center;gap:.6rem;margin-left:auto;
  border:1px solid var(--line);border-radius:999px;padding:.55rem 1rem;
  background:var(--bg-soft);transition:border-color .2s;min-width:min(320px,70vw)}
.pagesearch:focus-within{border-color:var(--accent)}
.pagesearch svg{width:16px;height:16px;stroke:var(--muted);flex-shrink:0}
.pagesearch input{border:0;outline:0;background:none;width:100%;
  font-family:var(--font);font-size:.95rem;color:var(--ink)}
.pagesearch input::placeholder{color:var(--muted)}
.runway-sub{margin:.7rem 0 0;color:var(--ink-dim);font-size:.9rem}
@media(max-width:700px){.pagesearch{margin-left:0;min-width:100%}}

/* ---- the account panel ---- */
.acct{grid-column:1/-1;max-width:640px;border:1px solid var(--line);border-radius:8px;
  background:var(--bg-soft);padding:.4rem 1.3rem 1.3rem}
.acctrow{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 0;border-bottom:1px solid var(--line);color:var(--ink-dim);font-size:.95rem}
.acctrow b{color:var(--ink);font-weight:600}
.acctacts{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.2rem}
.acctacts button{border:1px solid var(--accent);background:none;color:var(--accent);
  border-radius:999px;padding:.55rem 1.1rem;font-family:var(--font);font-size:.9rem;
  cursor:pointer;transition:.2s}
.acctacts button:hover{background:var(--accent);color:var(--on-accent)}

/* The sign-in offer. A second panel under the account figures, quieter than
   them: the archive reads perfectly well without an account, so this asks
   rather than insists. */
.acct.signin{margin-top:1rem}
.signin-h{font-family:var(--font);font-weight:600;font-size:.98rem;color:var(--ink);margin-bottom:.9rem}
.signin-g{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;width:100%;
  max-width:320px;padding:.62rem 1rem;border-radius:999px;cursor:pointer;
  font-family:var(--font);font-size:.95rem;font-weight:600;line-height:1.1;
  color:var(--ink);background:none;border:1px solid var(--line);transition:.2s}
.signin-g:hover{border-color:rgba(253,247,247,.45)}
.signin-g svg{width:17px;height:17px;flex-shrink:0}
/* a rule with the word sitting in a gap in it, rather than a word floating
   over a line that runs behind it */
.signin-or{display:flex;align-items:center;gap:.75rem;max-width:320px;
  margin:.9rem 0;color:var(--muted);font-size:.76rem;letter-spacing:.06em;text-transform:uppercase}
.signin-or::before,.signin-or::after{content:"";flex:1;height:1px;background:var(--line)}
.signin-mail{display:flex;gap:.5rem;max-width:320px;flex-wrap:wrap}
.signin-mail input{flex:1 1 170px;min-width:0;padding:.6rem .8rem;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--ink);
  font-family:var(--font);font-size:.92rem}
.signin-mail input:focus{outline:none;border-color:var(--accent)}
.signin-mail button{flex:0 0 auto;padding:.6rem 1rem;border-radius:999px;cursor:pointer;
  border:1px solid var(--accent);background:none;color:var(--accent);
  font-family:var(--font);font-size:.9rem;font-weight:600;transition:.2s}
.signin-mail button:hover:not(:disabled){background:var(--accent);color:var(--on-accent)}
.signin-mail button:disabled{opacity:.5;cursor:default}
.signin-fine{margin:1rem 0 0;color:var(--muted);font-size:.78rem;line-height:1.55;max-width:420px}

/* ---- the Runway page's sort ---------------------------------------------
   Sits beside the search field and matches it: same height, same pill, same
   hairline. The native select carries the menu so the keyboard and the phone
   both get the control they expect; only the arrow is ours. */
.pagesort{position:relative;display:flex;align-items:center;gap:.5rem;
  border:1px solid var(--line);border-radius:999px;padding:.55rem 1rem;
  background:var(--bg-soft);transition:border-color .2s;cursor:pointer;flex-shrink:0}
.pagesort:focus-within{border-color:var(--accent)}
.pagesort .ps-label{font-family:var(--font);font-size:.82rem;color:var(--muted);
  letter-spacing:.02em;flex-shrink:0}
.pagesort select{appearance:none;-webkit-appearance:none;border:0;outline:0;background:none;
  font-family:var(--font);font-size:.95rem;color:var(--ink);cursor:pointer;
  padding:0 1.25rem 0 0;margin:0;line-height:1.3}
.pagesort select option{background:var(--panel);color:var(--ink)}
.pagesort .ps-chev{position:absolute;right:.9rem;width:14px;height:14px;
  stroke:var(--muted);pointer-events:none}
@media(max-width:700px){
  .runway-head{gap:.8rem}
  .pagesort{margin-left:0}
}

/* A tile for a collection with no footage: no borrowed frame, just the fact. */
.card.nofilm .cnofilm{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#1a1a1a,#0c0c0c);color:rgba(255,255,255,.42);
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;text-align:center;line-height:1.7}