/* Pages: sign-in, home, review, people. */

/* sign-in */
main.login { display: grid; place-items: center; min-height: 100dvh; padding: var(--s5) var(--s4); max-width: none; }
.loginbox { width: 100%; max-width: 420px; display: grid; gap: var(--s4); padding: var(--s6) var(--s5); box-shadow: var(--shadow); }
.loginbox .seal { width: 64px; height: 64px; border-radius: 50%; }
.loginbox h1 { font-size: 2.25rem; }
.loginbox input { font-size: 1.25rem; letter-spacing: .12em; text-transform: uppercase; text-align: center; min-height: 56px; }
.loginbox .err { color: var(--bad); font-weight: 500; font-size: var(--t-small); }
.loginbox.bad input { border-color: var(--bad); }

/* home */
.home { display: grid; gap: var(--s6); }
.hero h1 { margin-top: 8px; max-width: 18ch; }
.doors { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
a.card.door { display: flex; align-items: center; gap: var(--s4); padding: var(--s3); }
.door .cover { width: 84px; flex: none; border-radius: var(--r-sm); }
.door .cover .pill { left: 4px; top: 4px; height: 20px; padding: 0 7px; font-size: .625rem; }
.door-text { min-width: 0; }
.door-text h3 { margin: 2px 0; font-size: 1.25rem; }
.door-text p:last-child { color: var(--muted); font-size: var(--t-small); }
.door .chev { margin-left: auto; color: var(--muted); }
.tiles { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.seen li { padding: var(--s3) 0; }
.seen li:first-child { padding-top: 0; }
.seen li:last-child { padding-bottom: 0; }
.seen b { display: block; }
.avatar.sm { width: 36px; height: 36px; border: 0; font-size: .8125rem; background: var(--brass-soft); color: var(--ink); }
@media (min-width: 900px) {
  .hero h1 { max-width: 30ch; }
  a.card.door { flex-direction: column; align-items: stretch; padding: var(--s3) var(--s3) var(--s4); }
  .door .cover { width: 100%; aspect-ratio: 4 / 5; border-radius: var(--r-md); }
  .door .cover .pill { left: 10px; top: 10px; height: 24px; padding: 0 10px; font-size: .75rem; }
  .door .chev { display: none; }
  .door-text { padding: 0 var(--s1); }
  .doors { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

/* review */
.rv .pagehead { margin-bottom: var(--s4); }
.rv .tabs { margin-top: var(--s4); margin-bottom: var(--s3); }
.rv-body { display: grid; gap: var(--s4); margin-top: var(--s4); }
.rv-stage { min-width: 0; }
.player { background: #14110B; border-radius: var(--r-lg); overflow: hidden; display: grid; place-items: center; }
.player video { width: 100%; max-height: 43dvh; aspect-ratio: 9 / 16; object-fit: contain; background: #14110B; }
.rv-panel { display: grid; gap: var(--s3); align-content: start; min-width: 0; }
.rv-title { font-size: 1.5rem; overflow-wrap: anywhere; }
.rv-meta { min-height: 24px; }
.verdict { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: var(--s2); }
.verdict .btn { padding: 0 10px; }
.verdict .btn[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--brass); }
.pend { color: var(--green); font-weight: 600; }
.notebox { display: grid; gap: var(--s3); }
.rv-sub { margin-top: var(--s3); font-size: 1rem; }
.answers { display: grid; gap: var(--s3); }
.answers li { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.answers li p { flex-basis: 100%; padding: 8px 12px; border-radius: var(--r-md); background: var(--bg); font-size: .9375rem; }
.rv-list { display: grid; gap: var(--s2); align-content: start; min-width: 0; }
.rv-list h3 { font-size: 1rem; margin-bottom: 2px; }
.rv-item {
  display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 64px; padding: 6px 10px 6px 6px; text-align: left;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); transition: border-color .15s;
}
.rv-item:hover { border-color: var(--line-strong); }
.rv-item.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.rv-item .thumb { width: 34px; height: 52px; flex: none; border-radius: 6px; overflow: hidden; background: #14110B; }
.rv-item .thumb img { width: 100%; height: 100%; object-fit: cover; }
.rv-item .t { flex: 1; min-width: 0; font: 600 .9375rem/1.25 var(--serif); overflow-wrap: anywhere; }
@media (max-width: 899px) {
  .rv .pagehead h1 { font-size: 1.5rem; }
  .rv .pagehead p:not(.eyebrow) { display: none; }
  .rv-stage { order: 1; }
  .rv-panel { order: 2; }
  .rv-list { order: 3; margin-top: var(--s3); }
}
@media (min-width: 900px) {
  .rv-body { grid-template-columns: 300px minmax(0, 1fr) 360px; gap: var(--s5); align-items: start; }
  .rv-list { max-height: calc(100dvh - 240px); overflow: auto; padding-right: 4px; }
  .player video { max-height: calc(100dvh - 250px); width: auto; max-width: 100%; }
  .rv-panel { position: sticky; top: calc(var(--top-h) + var(--s4)); }
  .verdict { grid-template-columns: 1fr; }
}

/* people */
.people { display: grid; gap: var(--s3); }
.person { display: grid; gap: var(--s3); }
.person .row b { display: block; font: 600 1.125rem/1.2 var(--serif); }
.person .row .small { display: block; }
.person dl { margin: 0; display: grid; gap: var(--s3); font-size: var(--t-small); }
.person dl div { display: grid; gap: 2px; }
.person dt { font-weight: 700; }
.person dd { margin: 0; color: var(--muted); }
@media (min-width: 600px) { .person dl div { grid-template-columns: 130px minmax(0, 1fr); gap: var(--s3); } }
@media (min-width: 900px) { .people { grid-template-columns: repeat(2, minmax(0, 1fr)); } }