/* The member pages' larger layouts, beside site.css: Account's panels and the Watch library and video page (decision
   0110). Split from site.css only to keep each file small; the same page loads both. */
/* Account (account.js): panels, two to a row where the page is wide. A panel's own cards become rows inside it. */
.panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 20px; align-items: start; }
.panels > .part { padding: 24px; border: 1px solid var(--line); border-radius: var(--r); gap: 14px; min-width: 0; }
.panels > .wide { grid-column: 1 / -1; }
.panels > .part > h2 { font-size: 1.125em; }
.panels .card { border: 0; border-radius: 0; padding: 14px 0 0; border-top: 1px solid var(--line); }
.panels > .part > h2 + .card, .panels > .part > h2 + * .card:first-child { border-top: 0; padding-top: 0; }
/* What is on sale, as tiles side by side. */
.panels #buy { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.panels #buy > :not(.card) { grid-column: 1 / -1; }
.panels #buy > .card { border: 1px solid var(--line); border-radius: var(--r); padding: 18px; align-content: start; transition: border-color .15s; }
.panels #buy > .card:hover { border-color: color-mix(in srgb, var(--ink) 40%, transparent); }
.panels #buy > .card button { margin-top: 6px; }
.panels #buy > .card:has(form) { grid-column: 1 / -1; }
.panels ul.facts b { font-family: var(--sala-heading-font, inherit); font-size: 2em; line-height: 1; margin-right: 4px; }
@media (max-width: 640px) {
  .panels { gap: 0; }
  .panels > .part { border: 0; border-radius: 0; padding: 24px 0 8px; border-top: 1px solid var(--line); }
  .panels > .part:first-child { border-top: 0; padding-top: 8px; }
}
.sheet .panels { gap: 0; grid-template-columns: minmax(0, 1fr); }
.sheet .panels > .part { border: 0; border-radius: 0; padding: 24px 0 8px; border-top: 1px solid var(--line); }
.sheet .panels > .part:first-child { border-top: 0; padding-top: 8px; }
/* Watch (watch.js): a library in the manner of the studio's own website. A row of tabs, then search and the filters as
   one toolbar of pills (a scrolling row on a phone), then the videos as large cards: the picture with its length and
   any progress drawn on it, the title, the instructor. Vimeo's player at 16:9. */
nav.tabs { gap: 0 28px; border-bottom: 1px solid var(--line); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
nav.tabs a { color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8125em; font-weight: 700;
  padding: 12px 0; white-space: nowrap; transition: color .15s, box-shadow .15s; }
nav.tabs a:hover { color: var(--ink); }
nav.tabs a[aria-current="page"] { color: var(--ink); text-decoration: none; box-shadow: inset 0 -2px 0 var(--ink); }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.toolbar .search { position: relative; flex: 1 1 260px; max-width: 380px; }
.toolbar .search input { border-radius: 999px; padding-left: 44px; min-height: 44px; background: var(--surface); border-color: transparent; }
.toolbar .search input:focus { background: var(--bg); border-color: var(--line); }
.toolbar .search::before { content: ""; position: absolute; left: 17px; top: 50%; width: 15px; height: 15px; margin-top: -8px;
  border: 1.75px solid var(--muted); border-radius: 50%; box-sizing: border-box; pointer-events: none; }
.toolbar .search::after { content: ""; position: absolute; left: 29px; top: 50%; width: 6px; height: 1.75px; margin-top: 5px;
  background: var(--muted); transform: rotate(45deg); pointer-events: none; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.filters select { width: auto; min-height: 44px; border-radius: 999px; padding: 0 38px 0 18px; font-size: max(16px, 0.9375em);
  font-weight: 600; background-position: right 16px center; }
.filters select.on { background-color: var(--accent); color: var(--accent-ink); border-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23ffffff' stroke-width='1.5'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"); }
.toolbar .clear { min-height: 44px; }
.count { margin-top: -4px; }
@media (max-width: 640px) {
  .toolbar .search { max-width: none; flex-basis: 100%; }
  .filters { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--edge, 16px)); padding: 2px var(--edge, 16px); }
  .filters::-webkit-scrollbar, nav.tabs::-webkit-scrollbar { display: none; }
  .filters select { flex: none; }
}
.inline { --edge: var(--gutter); }
.videos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
  gap: 36px 24px; }
a.video { display: grid; gap: 6px; color: inherit; text-decoration: none; min-width: 0; align-content: start; }
a.video b { font-weight: 700; font-size: 1.0625em; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
a.video:hover b, a.video:focus-visible b { text-decoration: underline; text-underline-offset: 3px; }
a.video .thumb { margin-bottom: 6px; }
.thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--r); background: var(--surface); overflow: hidden; }
.thumb img, img.still { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb img { transition: transform .5s var(--ease); }
a.video:hover .thumb img { transform: scale(1.04); }
.thumb .len { position: absolute; right: 10px; bottom: 10px; padding: 3px 8px; border-radius: 4px; background: rgba(0, 0, 0, .72);
  color: #fff; font-size: 0.75em; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.thumb .flag { position: absolute; left: 10px; top: 10px; padding: 3px 9px; border-radius: 999px; background: #fff; color: #161616;
  font-size: 0.6875em; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.thumb .done { background: #161616; color: #fff; }
.thumb .progress { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, .45); }
.thumb .progress i { display: block; height: 100%; background: var(--accent); }
img.still { aspect-ratio: 16 / 9; border-radius: var(--r); }
.tag { justify-self: start; font-size: 0.75em; font-weight: 700; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); }
.more { justify-self: center; min-width: 200px; }
.empty { display: grid; gap: 12px; justify-items: start; padding: 32px 0; }
.back { color: var(--muted); text-decoration: none; text-transform: uppercase; letter-spacing: .08em; font-size: 0.75em; font-weight: 700;
  justify-self: start; padding: 8px 0; }
.back:hover { color: var(--ink); }
.kicker { text-transform: uppercase; letter-spacing: .08em; font-size: 0.75em; font-weight: 700; color: var(--muted); }
a.video .kicker { margin-bottom: -2px; }
/* A play mark over the picture while the pointer is on it, as the studio's own site and the apps do. */
a.video .thumb::before { content: ""; position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px;
  border-radius: 50%; background: rgba(255, 255, 255, .92); opacity: 0; transform: scale(.85); transition: opacity .2s, transform .25s var(--ease); z-index: 1; }
a.video .thumb::after { content: ""; position: absolute; left: 50%; top: 50%; margin: -9px 0 0 -5px; border-style: solid;
  border-width: 9px 0 9px 15px; border-color: transparent transparent transparent #161616; opacity: 0; transition: opacity .2s; z-index: 1; }
a.video:is(:hover, :focus-visible) .thumb::before { opacity: 1; transform: none; }
a.video:is(:hover, :focus-visible) .thumb::after { opacity: 1; }
/* A shelf: one row that scrolls sideways, each card a little under a third of the width, snapping into place. */
.videos.shelf { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(78%, 300px); overflow-x: auto;
  scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.videos.shelf::-webkit-scrollbar { display: none; }
.videos.shelf > li { scroll-snap-align: start; }
.part h2 { font-size: 1.125em; }
/* One video: the player as wide as the page, then what it is beside who leads it, then more like it. */
.player { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: #000; }
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player.locked img { width: 100%; height: 100%; object-fit: cover; opacity: .45; filter: blur(2px); transform: scale(1.03); }
.player .why { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 16px; padding: 24px;
  text-align: center; color: #fff; background: linear-gradient(180deg, rgba(0, 0, 0, .15), rgba(0, 0, 0, .55)); }
.player .why p { max-width: 42ch; font-weight: 600; font-size: 1.0625em; }
.player .why .btn { background: #fff; color: #161616; justify-self: center; }
@media (max-width: 520px) {
  .player.locked { aspect-ratio: auto; min-height: 240px; }
  .player.locked img { position: absolute; inset: 0; }
  .player .why p { font-size: 0.9375em; }
}
.about { display: grid; gap: 28px; padding-top: 8px; }
.about .main { display: grid; gap: 14px; align-content: start; min-width: 0; }
.about .main h1 { margin-top: -6px; }
@media (min-width: 860px) { .about { grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; } }
.about ul.facts { list-style: none; margin: 0; padding: 14px 0; display: flex; flex-wrap: wrap; gap: 12px 36px; border-block: 1px solid var(--line); }
.about ul.facts li { display: grid; gap: 2px; }
.about ul.facts b { font-size: 1em; font-variant-numeric: tabular-nums; }
.teacher { display: grid; gap: 14px; align-content: start; align-self: start; padding: 20px; background: var(--surface); border-radius: var(--r); }
.teacher .who { display: flex; gap: 14px; align-items: center; }
.teacher img, .teacher .initial { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; }
.teacher .initial { display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 1.5em; }
.teacher p { display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
ul.plain { margin: 0; padding-left: 18px; }
button.heart[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.words { white-space: pre-line; }
/* The studio's categories as a row of pills to tap (Peloton, One Playground); scrolls sideways on a phone. */
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.chips::-webkit-scrollbar { display: none; }
.chips button { flex: none; min-height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line);
  font-weight: 600; background: var(--bg); }
.chips button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
h2.all { padding-top: 8px; }
.shelves { display: grid; gap: 28px; }
/* The level, with a dot before it, as Peloton marks a class. */
.level { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.level::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }