/* Get Qurio signed-in app pages: watch (the player), My List, sign-in, settings, verify, reset, thanks. Loaded after
   /assets/app.css (the design system) and only adds what those pages need. Never style the player's watermark. */

/* Spacing helper these pages share (also in app.css's older-pages block, which may go). */
.section-gap { margin-top: 1.25rem; }

/* ---- Watch page ---- */
.watch-main { position: relative; min-height: 100vh; min-height: 100svh; }
.player.is-page { touch-action: manipulation; outline: none; }
.player:not([data-state=active]) :is(.player-center, .player-bar) { visibility: hidden; }
.player:is([data-state=gate], [data-state=loading]) .player-chrome { z-index: 6; }
.player:is([data-state=gate], [data-state=loading]) #keys-btn { visibility: hidden; }
.player[data-state=idle] .start { background: linear-gradient(to top, rgba(7,8,11,.92), rgba(7,8,11,.6) 55%, rgba(7,8,11,.4)); }
.start { align-content: center; gap: .875rem; }
.start-label { padding: 0 1rem; font: 700 clamp(1rem, .9rem + .5vw, 1.375rem)/1.25 var(--font); text-shadow: 0 1px 10px rgba(0,0,0,.7); }
/* Resume from 23:14 / Play from …: one light button, "Start over" a ghost button under it (watch.js sets .is-resume) */
.start.is-resume .start-in { display: none; }
.start.is-resume .start-label { display: inline-flex; align-items: center; gap: .625rem; min-height: 3.25rem; padding: .875rem 1.625rem; border-radius: var(--r);
  background: var(--text); color: var(--bg); font-size: 1.0625rem; line-height: 1.2; text-shadow: none; transition: background-color var(--fast), transform var(--fast); }
.start.is-resume .start-label::before { content: ""; width: .8125rem; height: .9375rem; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.start.is-resume:hover .start-label { background: #fff; transform: scale(1.02); }
.start-over { position: absolute; z-index: 3; left: 50%; top: calc(50% + 2.75rem); transform: translateX(-50%); }
.start-over:active { transform: translateX(-50%) scale(.96); }
.player-top .player-btn, .player-row .player-btn { flex-shrink: 0; }
.player-heading { padding-inline: .25rem; }
.player-btn.text { min-width: 3.5rem; }
.player-bar .scrub { margin-bottom: .125rem; }
.scrub-tip { position: absolute; bottom: calc(100% + .25rem); left: clamp(3.75rem, calc(var(--p, 0) * 100%), calc(100% - 3.75rem)); transform: translateX(-50%);
  padding: .3125rem .625rem; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: rgba(15,17,22,.96); color: var(--text);
  font: 600 .8125rem/1.3 var(--font); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
.player-osd { position: absolute; z-index: 6; left: 50%; top: 16%; max-width: calc(100% - 2rem); padding: .5rem 1rem; border-radius: var(--pill);
  background: rgba(0,0,0,.72); font-weight: 700; font-size: .9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transform: translateX(-50%); transition: opacity var(--med); pointer-events: none; }
.player-osd.show { opacity: 1; }
.player-osd:empty { display: none; }
.player-spinner { position: absolute; z-index: 3; left: 50%; top: 50%; width: 3.5rem; height: 3.5rem; margin: -1.75rem 0 0 -1.75rem; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.22); border-top-color: var(--accent); animation: spin .8s linear infinite; pointer-events: none; }
.player:has(.player-spinner:not([hidden])) .player-center .big { opacity: 0; }
.option-note { display: block; margin-top: .125rem; color: var(--muted); font-size: .75rem; font-weight: 500; }
.player-option > span { min-width: 0; }
.keymap { grid-template-columns: max-content minmax(0, 1fr); align-items: center; margin-top: .25rem; }
.keymap dt { display: flex; gap: .25rem; }
.keymap kbd { color: var(--text); }
.player-panel .fine { padding: 0 .25rem .5rem; }
.busy-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .625rem; margin-top: .375rem; }
.busy .eyebrow { color: var(--accent); }
#gate .busy-title, #end .busy-title { font: 800 clamp(1.25rem, 1rem + 1.4vw, 2rem)/1.15 var(--font-display); letter-spacing: -.02em; }
#gate .busy-sub, #end .busy-sub { max-width: 30rem; font-size: .9375rem; color: var(--soft); }
.busy-in > .linkbtn { margin-top: .25rem; font-size: var(--fs-sm); }
.noscript-msg { position: fixed; z-index: 10; left: 1rem; right: 1rem; top: 1rem; }
@media (max-width: 767.98px) {
  .player.is-page .busy-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .player.is-page .busy-in { justify-items: stretch; text-align: left; }
  .player.is-page .busy-in > .linkbtn { justify-self: start; }
}
@media (max-height: 500px) {
  .player-top { padding-bottom: 1.25rem; }
  .player-bar { padding-top: 1.25rem; }
  .player-btn.big { width: 3.75rem; height: 3.75rem; }
  .player-btn.big .i { width: 1.875rem; }
  .start-in { width: 4rem; height: 4rem; }
  .player.is-page .busy { place-items: end stretch; padding: 0; }
  .player.is-page .busy-in { max-width: none; justify-items: stretch; padding: 1rem var(--pad-r) calc(1rem + var(--safe-b)) var(--pad-l);
    border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--surface); text-align: left; }
}
@media (pointer: coarse) { .player-time { padding: 0 .25rem; } }

/* ---- My List ---- */
.lib-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 1.5rem; }
.lib-head-text { display: grid; gap: .5rem; }
.lib-head > .btn { margin-bottom: .25rem; }
@media (max-width: 599.98px) { .lib-head > .btn { display: none; } }   /* phones: Account is in the avatar menu */
#load-error, #claim-note, #inactive-note { margin-bottom: var(--s5); }
.lib-pending { margin-bottom: var(--s6); }
.lib-pending > p:not(.msg) { color: var(--soft); }
.continue { position: relative; isolation: isolate; display: grid; overflow: hidden; margin-bottom: var(--s7); border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); }
.continue-art { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--surface-2); }
.continue-art img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.continue-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--surface) 2%, rgba(15,17,22,0) 55%); }
.continue-body { position: relative; display: grid; gap: .625rem; justify-items: start; margin-top: -2.25rem; padding: 0 1.25rem 1.375rem; }
.continue-title { font-size: var(--fs-h2); letter-spacing: -.025em; }
.continue-sub { color: var(--soft); font-size: var(--fs-sm); font-weight: 500; }
.continue .progress { width: 100%; max-width: 26rem; margin: .25rem 0 .5rem; }
.continue-actions { width: 100%; }
.lib-owned { margin-bottom: var(--s5); }
.lib-empty-actions { justify-content: center; }
#soon-row:not(:empty) { margin-top: var(--s7); }
.lib-restore { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; }
.lib-restore .settings-h { margin-bottom: .25rem; }
.lib-restore .msg { flex-basis: 100%; margin: 0; }
@media (max-width: 599.98px) {
  .continue-actions .btn { flex: 1 1 auto; }
  .continue-actions .btn.light { flex-basis: 100%; }
  .lib-empty-actions { flex-direction: column; align-items: stretch; width: 100%; }
}
@media (min-width: 768px) {
  .continue { min-height: clamp(17rem, 30vw, 27rem); }
  .continue-art { position: absolute; inset: 0; z-index: -1; aspect-ratio: auto; }
  .continue-art::after { background: linear-gradient(90deg, rgba(15,17,22,.96), rgba(15,17,22,.78) 36%, rgba(15,17,22,0) 72%), linear-gradient(to top, rgba(15,17,22,.6), rgba(15,17,22,0) 40%); }
  .continue-body { align-content: end; max-width: 36rem; margin: 0; padding: clamp(1.75rem, 3vw, 3rem); }
  .continue-actions { width: auto; }
}

/* ---- Settings ---- */
.settings-body .panel-row > p, .settings-body .panel-row > div:not(.purchase):not(.cluster):not(.msg) { flex: 1 1 18rem; min-width: 0; }
.row-msg { flex-basis: 100% !important; margin: 0; }
.row-title { font-weight: 600; color: var(--text); }
.profile-id { flex-wrap: nowrap; gap: 1rem; min-width: 0; }
.profile-text { min-width: 0; overflow-wrap: anywhere; }
.profile-name { font-size: 1.125rem; font-weight: 700; color: var(--text); }
.mono-code { font: 600 .9375rem/1.4 var(--font-mono); letter-spacing: .12em; color: var(--text); }
.js-email { word-break: break-all; }   /* an address fills its lines evenly instead of breaking at a hyphen ("vis-") */
.settings-body .facts { margin: 0; }
.settings-form { max-width: 32rem; }
.settings-form .row-split { margin-top: 0; }
.pref-field { width: 100%; max-width: 32rem; margin: 0; }
.purchase-blank { display: block; width: 3.5rem; aspect-ratio: 2/3; border-radius: var(--r-sm); background: var(--surface-3); }
.is-warn { color: var(--accent); }
#purchase-list:empty { display: none; }
.settings-body > .settings-section:last-child { padding-bottom: 20vh; }

/* ---- Sign-in card pages: account, verify, reset, thanks ---- */
.auth-top { position: relative; z-index: 2; padding-top: var(--safe-t); }
.auth-top-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: var(--header-h); }
.auth-page { flex: 1 0 auto; }
.auth-card > .eyebrow { margin-bottom: .625rem; }
.auth-card .tabs { margin: 1.5rem 0 1.25rem; }
.auth-card #page-msg { margin-top: 1rem; }
.auth-card form > .btn.wide { margin-top: .25rem; }
.auth-card .auth-foot .linkbtn { color: var(--text); font-weight: 600; }
.auth-card .actions .btn { flex: 1 1 auto; }
.auth-body .site-footer { margin-top: 0; }
.thanks-mark { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin-bottom: 1.25rem; border-radius: 50%; background: rgba(63,214,198,.14); color: var(--accent-2); }
.thanks-mark svg { width: 1.75rem; height: 1.75rem; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 600px) { .auth-page { padding-bottom: var(--s8); } }
/* Touch: a text link inside a sentence gets a 44 px hit area without moving the text. */
@media (pointer: coarse) {
  :is(.auth-card, .settings-body, .lib-restore, .lib-pending, .page-section) :is(p, .row-end) > a:not(.btn) { display: inline-block; min-width: 2.75rem;
    padding: .8125rem .125rem; margin: -.8125rem -.125rem; text-align: center; }
}

/* ---- Creator studio (/creators) and the review queue (/admin) ---- */
.studio-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin: 1rem 0 1.25rem; }
.studio-list { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); padding: 0; list-style: none; }
.studio-card { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: .875rem; align-items: start; height: 100%; color: inherit; text-decoration: none;
  transition: border-color var(--fast); }
.studio-card:hover { border-color: var(--line-2); }
.studio-name { overflow-wrap: anywhere; }
.studio-card .stack { display: flex; flex-direction: column; align-items: flex-start; gap: .375rem; }
.studio-card .stack > * + * { margin-top: 0; }
/* /creators and /admin: the same top and bottom space as the other pages */
.page-pad { padding-block: var(--s6) var(--s8); }
.studio-thumb { display: block; width: 4.5rem; aspect-ratio: 2/3; border-radius: var(--r-sm); background: var(--surface-2); object-fit: cover; }
.is-empty { background: repeating-linear-gradient(135deg, var(--surface-2) 0 10px, var(--surface-3) 10px 20px); }
.studio-fields, .ep-fields { display: grid; gap: 0 1rem; grid-template-columns: minmax(0, 1fr); }
.studio-fields .full, .ep-fields .full { grid-column: 1 / -1; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.studio-section { margin-top: 1.25rem; }
.studio-section > h3 { margin-bottom: .75rem; }
.studio-note { font-weight: 600; }
.art-grid { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
.art-box { display: grid; gap: .5rem; align-content: start; }
.art-img { display: block; width: 100%; border-radius: var(--r); background: var(--surface-2); object-fit: cover; }
.art-box.poster .art-img { aspect-ratio: 2/3; max-width: 12rem; }
.art-box.backdrop .art-img { aspect-ratio: 16/9; }
.file { max-width: 100%; font-size: .9375rem; }
.ep { display: grid; gap: .75rem; padding: 1rem 0; border-top: 1px solid var(--line); }
.ep-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.ep-video { display: grid; gap: .5rem; justify-items: start; }
.studio-progress { width: 100%; height: 8px; border-radius: 4px; }
.studio-video { width: 100%; max-height: 60vh; border-radius: var(--r); background: #000; }
.review-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-top: 1rem; }
.review-card .studio-thumb { width: 7rem; }
.review-backdrop { width: 100%; max-width: 32rem; aspect-ratio: 16/9; border-radius: var(--r); object-fit: cover; }
.review-eps { padding: 0; list-style: none; }
@media (min-width: 600px) {
  .studio-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ep-fields { grid-template-columns: 6rem 6rem minmax(0, 1fr); align-items: end; }
  .ep-fields > .cluster, .ep-fields > div:last-child:not(.field) { grid-column: 1 / -1; }
  .art-grid { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); }
  .review-card { grid-template-columns: 7rem minmax(0, 1fr); }
}