/* Aulama Anime — phones held sideways.
 *
 * A layer over the main stylesheet, active only while the app marks itself
 * .is-phone-landscape (a phone-sized screen turned sideways). Portrait,
 * tablets and desktops are untouched.
 *
 * The screen is short and wide, so what sat across the top moves to the left
 * edge as two Liquid Glass capsules of the same width, one above the other:
 * the five destinations, and below them search and the account. They sit in
 * exactly the same place on every page, the player included, so nothing
 * jumps when you move around. Pages start right beside them, use the full
 * height, and keep their main action inside the first screen.
 */

.anime-app.is-phone-landscape {
  --ls-safe-left: env(safe-area-inset-left, 0px);
  --ls-safe-top: env(safe-area-inset-top, 0px);
  --ls-safe-bottom: env(safe-area-inset-bottom, 0px);
  --ls-rail: 64px;
  --ls-rail-x: max(8px, var(--ls-safe-left));
  --ls-edge: 8px;            /* screen edge to capsule, and capsule to capsule */
  --ls-inset: 6px;           /* capsule edge to its contents */
  --ls-btn: 44px;            /* search and account */
  --ls-foot: calc(var(--ls-btn) * 2 + var(--ls-inset) * 3);
  /* the tab capsule's height, and the five destinations share it */
  --ls-rail-h: calc(100dvh - var(--ls-safe-top) - var(--ls-safe-bottom) - var(--ls-edge) * 3 - var(--ls-foot));
  --ls-tab: clamp(34px, calc((var(--ls-rail-h) - var(--ls-inset) * 2) / 5), 60px);
  /* Pages begin at the capsules' right edge (the app's own offset for
     everything it lays out there) and every page's content keeps the same
     24px gutter from it, so the left edge never moves between pages. */
  --phone-nav-inset: calc(var(--ls-rail-x) + var(--ls-rail)) !important;
  --ls-gutter: 24px;
  --ls-left: calc(var(--phone-nav-inset) + var(--ls-gutter));
  --ls-right: calc(max(0px, env(safe-area-inset-right, 0px)) + var(--ls-gutter));
  /* posters beside text are sized from the screen height */
  --ls-poster: clamp(112px, calc((100dvh - var(--ls-safe-top) - var(--ls-safe-bottom) - 40px) * .5), 200px);
  /* nothing runs across the top any more */
  --header-height: 0px;
}

/* ------------------------------------------------------------------ tabs */
.anime-app.is-phone-landscape .mobile-nav.liquid-navigation {
  top: calc(var(--ls-safe-top) + var(--ls-edge)) !important;
  bottom: calc(var(--ls-safe-bottom) + var(--ls-edge) * 2 + var(--ls-foot)) !important;
  left: var(--ls-rail-x) !important;
  width: var(--ls-rail) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  grid-template-rows: none !important;
  grid-auto-rows: var(--ls-tab) !important;
  align-content: center !important;
  justify-items: center;
  gap: 0 !important;
  padding: var(--ls-inset) 0 !important;
  border-radius: calc(var(--ls-rail) / 2) !important;
  transform: none !important;
  translate: none !important;
}
/* Whole pixels: the glass lens places its copies of the tabs by their
   rounded offsets, so a fractional tab height would leave the magnified icon
   half a pixel off the real one. */
@supports (top: round(down, 1.5px, 1px)) {
  .anime-app.is-phone-landscape {
    --ls-tab: clamp(34px, round(down, calc((var(--ls-rail-h) - var(--ls-inset) * 2) / 5), 1px), 60px);
  }
  .anime-app.is-phone-landscape .mobile-nav.liquid-navigation {
    align-content: start !important;
    padding-top: calc(var(--ls-inset) + round(down, calc((var(--ls-rail-h) - var(--ls-inset) * 2 - var(--ls-tab) * 5) / 2), 1px)) !important;
  }
}
/* The rail moves up and down, but the app lights its glass as if it moved
   sideways: the glow under a pressed tab and the light that travels with a
   tapped selection were both placed along x. Here they run along y. */
.anime-app.is-phone-landscape .mobile-nav.liquid-navigation::before {
  background:
    radial-gradient(ellipse 110% 32% at 50% var(--nav-light-x, 50%), rgb(255 255 255 / var(--nav-light-opacity, 0)), transparent 100%),
    linear-gradient(145deg, rgb(255 255 255 / 10%), rgb(255 255 255 / 3%)),
    rgb(26 32 43 / 36%) !important;
}
/* the travelling light is moved along x by the app; transposing its frame
   (x and y swapped) makes that motion run down the rail */
.anime-app.is-phone-landscape .mobile-nav.liquid-navigation > .liquid-nav-light-clip {
  inset: 0 auto auto 0 !important;
  width: calc(var(--ls-rail-h) - 2px) !important;
  height: calc(var(--ls-rail) - 2px) !important;
  transform: matrix(0, 1, 1, 0, 0, 0);
  transform-origin: 0 0;
}
/* the tabs and their copies inside the glass lens are the same size, so the
   magnified icon sits exactly over the real one */
.anime-app.is-phone-landscape .mobile-nav.liquid-navigation button { min-height: 0 !important; }
.anime-app.is-phone-landscape .mobile-nav.liquid-navigation > button {
  width: calc(var(--ls-rail) - var(--ls-inset) * 2) !important;
  height: var(--ls-tab) !important;
  border-radius: calc(var(--ls-rail) / 2 - var(--ls-inset)) !important;
}
.anime-app.is-phone-landscape .mobile-nav.liquid-navigation button > :is(span, small) {
  font-size: 10.5px !important;
  letter-spacing: .02em;
}
/* below this there is no room for a label under each icon */
@media (max-height: 360px) {
  .anime-app.is-phone-landscape .mobile-nav.liquid-navigation button > :is(span, small) { display: none !important; }
}
@media (max-height: 340px) {
  .anime-app.is-phone-landscape { --ls-btn: 40px; }
}

/* ------------------------------------------------------------------ search and account */
/* The header's pieces sit above the page; the rest of it lets touches
   through. It used to slide away on scroll (will-change: transform), which
   would make it the frame for its fixed pieces, so here it stays put. */
.anime-app.is-phone-landscape .app-header-shell {
  z-index: 95 !important;
  pointer-events: none !important;
}
.anime-app.is-phone-landscape .app-header {
  will-change: auto !important;
  transform: none !important;
  translate: none !important;
}
.anime-app.is-phone-landscape .page-top-blur { display: none !important; }
/* the header's wordmark has no room by the tabs; the home page shows it
   instead (see the hero below) */
.anime-app.is-phone-landscape .app-header .brand-button { display: none !important; }

.anime-app.is-phone-landscape .app-header .header-actions-pill {
  position: fixed !important;
  z-index: 3;
  top: auto !important;
  right: auto !important;
  left: var(--ls-rail-x) !important;
  bottom: calc(var(--ls-safe-bottom) + var(--ls-edge)) !important;
  width: var(--ls-rail) !important;
  height: var(--ls-foot) !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--ls-inset) !important;
  padding: var(--ls-inset) 0 !important;
  margin: 0 !important;
  border-radius: calc(var(--ls-rail) / 2) !important;
  pointer-events: auto !important;
}
.anime-app.is-phone-landscape .app-header .header-actions-pill :is(.search-trigger, .account-area, .account-trigger) {
  width: var(--ls-btn) !important;
  height: var(--ls-btn) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  flex: none !important;
}
.anime-app.is-phone-landscape .app-header .header-actions-pill .account-avatar {
  width: calc(var(--ls-btn) - 8px) !important;
  height: calc(var(--ls-btn) - 8px) !important;
}

/* ------------------------------------------------------------------ pages */
/* home: the featured artwork runs under the glass capsules to the screen
   edge, so nothing cuts the scene (or the play button's glow) short beside
   them; the title fits the screen with its actions in reach */
.anime-app.is-phone-landscape .home-editorial-flow {
  margin-left: calc(var(--phone-nav-inset) * -1) !important;
  padding-left: var(--phone-nav-inset) !important;
}
.anime-app.is-phone-landscape .today-focus-hero {
  margin-left: calc(var(--phone-nav-inset) * -1) !important;
  width: calc(100% + var(--phone-nav-inset)) !important;
  max-width: none !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 300px !important;
  max-height: 520px !important;
}
.anime-app.is-phone-landscape .today-focus-inner {
  min-height: 0 !important;
  height: 100%;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start !important;
  padding: calc(var(--ls-safe-top) + 14px) var(--ls-right) calc(var(--ls-safe-bottom) + 14px) 0 !important;
  margin-left: var(--ls-left) !important;
}
/* the wordmark heads the featured title and scrolls away with it */
.anime-app.is-phone-landscape .today-focus-inner::before {
  content: "";
  flex: none;
  width: 88px;
  height: 36px;
  margin: 0 0 10px;
  background: url("/anime/aulama-anime-wordmark.png") left center / contain no-repeat;
  filter: drop-shadow(0 3px 10px rgb(0 0 0 / 40%));
}
@media (max-height: 340px) {
  .anime-app.is-phone-landscape .today-focus-inner::before { display: none; }
}
.anime-app.is-phone-landscape .today-focus-copy { max-width: min(500px, 56vw) !important; }
.anime-app.is-phone-landscape .today-focus-kicker { margin-bottom: 4px !important; }
.anime-app.is-phone-landscape .today-focus-kicker strong { font-size: 13px !important; }
.anime-app.is-phone-landscape .today-focus-copy h1 {
  font-size: clamp(24px, 3.4vw, 32px) !important;
  line-height: 1.12 !important;
  margin: 4px 0 6px !important;
}
.anime-app.is-phone-landscape .today-focus-copy .meta-line {
  gap: 5px !important;
  flex-wrap: nowrap !important;
  overflow: hidden;
}
.anime-app.is-phone-landscape .today-focus-copy .meta-line > span {
  height: 24px !important;
  padding: 0 9px !important;
  font-size: 12px !important;
  flex: none;
}
.anime-app.is-phone-landscape .today-focus-copy .feature-summary {
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  margin: 8px 0 12px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  max-height: none !important;
}
.anime-app.is-phone-landscape .today-focus-copy .feature-actions { gap: 8px !important; flex-wrap: nowrap !important; }
.anime-app.is-phone-landscape .today-focus-copy .feature-actions :is(button, a) {
  height: 42px !important;
  min-height: 0 !important;
  font-size: 14px !important;
  white-space: nowrap !important;
  flex: none !important;
  width: auto !important;
  padding-inline: 18px !important;
}
.anime-app.is-phone-landscape .today-focus-pagination {
  margin-top: 12px !important;
  transform: scale(.88);
  transform-origin: left center;
}

/* section headings and their spacing below the fold */
.anime-app.is-phone-landscape :is(.home-rail-heading, .timeline-heading) {
  padding-left: var(--ls-gutter) !important;
}
.anime-app.is-phone-landscape :is(.home-rail-heading, .timeline-heading) :is(h2, h3) {
  font-size: 20px !important;
}

/* the spotlight rails (recommendations and friends): poster, title, summary
   and actions in one screen-height band, the carousel right under it */
.anime-app.is-phone-landscape .immersive-content-rail { margin-top: 18px !important; padding-top: 22px !important; }
.anime-app.is-phone-landscape .immersive-content-rail .home-rail-heading { padding-bottom: 10px !important; }
.anime-app.is-phone-landscape .immersive-content-rail-stage {
  grid-template-columns: calc(var(--ls-poster) * .78) minmax(0, 1fr) !important;
  gap: 0 24px !important;
  align-items: center !important;
  padding: 10px var(--ls-right) 10px var(--ls-gutter) !important;
  min-height: 0 !important;
}
.anime-app.is-phone-landscape .immersive-content-rail-mobile-poster {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 2 / 3;
  margin: 0 !important;
}
.anime-app.is-phone-landscape .immersive-content-rail-mobile-poster img { width: 100% !important; height: 100% !important; object-fit: cover; }
.anime-app.is-phone-landscape .immersive-content-rail-copy { gap: 8px !important; align-self: center !important; }
.anime-app.is-phone-landscape .immersive-content-rail-copy h3 {
  font-size: clamp(20px, 2.8vw, 26px) !important;
  line-height: 1.22 !important;
}
.anime-app.is-phone-landscape .immersive-content-rail-meta { flex-wrap: nowrap !important; overflow: hidden; }
.anime-app.is-phone-landscape .immersive-content-rail-meta > * { flex: none !important; }
.anime-app.is-phone-landscape .immersive-content-rail-summary {
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  -webkit-line-clamp: 3 !important;
}
.anime-app.is-phone-landscape .immersive-content-rail-actions { margin-top: 2px !important; gap: 8px !important; }
.anime-app.is-phone-landscape .immersive-content-rail-actions :is(button, a) {
  height: 40px !important;
  min-height: 0 !important;
  font-size: 14px !important;
}
.anime-app.is-phone-landscape .immersive-content-rail-carousel { padding: 6px 0 12px !important; }
/* The carousels run on under the glass capsules to the screen edge, so cards
   slide behind the glass (and past the gap between the capsules) instead of
   vanishing at the content edge. The card still rests, and snaps, centred
   on the content area: the extra width is added on the left only, and the
   snapping area starts where the content does. */
.anime-app.is-phone-landscape .immersive-content-rail-carousel .immersive-content-rail-scroller {
  margin-left: calc(var(--phone-nav-inset) * -1) !important;
  padding-left: calc(var(--phone-nav-inset) + (100% - var(--touch-card-width, 0px)) / 2) !important;
  scroll-padding-left: var(--phone-nav-inset) !important;
}
@media (max-height: 380px) {
  .anime-app.is-phone-landscape .immersive-content-rail-summary { -webkit-line-clamp: 2 !important; }
}

/* detail: room for the rail, and the essentials in the first screen; the
   poster's size lets title, synopsis and the play button sit beside it
   without scrolling */
.anime-app.is-phone-landscape :is(.detail-hero-inner, .detail-content) {
  margin-left: var(--ls-left) !important;
  margin-right: var(--ls-right) !important;
  width: auto !important;
  max-width: none !important;
}
.anime-app.is-phone-landscape .detail-hero { min-height: 0 !important; }
.anime-app.is-phone-landscape .detail-hero-inner {
  grid-template-columns: var(--ls-poster) minmax(0, 1fr) !important;
  gap: 0 24px !important;
  align-items: center !important;
  min-height: calc(100dvh - 8px);
  padding: calc(var(--ls-safe-top) + 18px) 0 calc(var(--ls-safe-bottom) + 18px) !important;
}
.anime-app.is-phone-landscape .detail-poster-frame {
  width: var(--ls-poster) !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: 2 / 3;
  align-self: center !important;
  border-radius: 18px !important;
}
.anime-app.is-phone-landscape .detail-poster-frame img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}
.anime-app.is-phone-landscape .detail-hero-copy { gap: 0 !important; align-self: center !important; }
.anime-app.is-phone-landscape .detail-title-block { gap: 6px !important; }
.anime-app.is-phone-landscape .detail-title-block h2 {
  font-size: clamp(22px, 3.2vw, 28px) !important;
  line-height: 1.22 !important;
}
.anime-app.is-phone-landscape .detail-title-block h2 .semantic-title-unit { font-size: inherit !important; line-height: inherit !important; }
.anime-app.is-phone-landscape .detail-hero-copy > .detail-meta:not(.detail-meta-measure) {
  margin-top: 10px !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
  mask: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
  padding-right: 24px;
}
.anime-app.is-phone-landscape .detail-hero-copy > .detail-meta::-webkit-scrollbar { display: none; }
.anime-app.is-phone-landscape .detail-hero-copy > .detail-meta > span { flex: none !important; }
.anime-app.is-phone-landscape .detail-hero-synopsis { margin-top: 10px !important; }
.anime-app.is-phone-landscape .detail-hero-synopsis > p {
  font-size: 14px !important;
  line-height: 1.65 !important;
  -webkit-line-clamp: 3 !important;
}
.anime-app.is-phone-landscape .detail-hero-synopsis > .detail-hero-synopsis-measure {
  font-size: 14px !important;
  line-height: 1.65 !important;
}
.anime-app.is-phone-landscape .detail-synopsis-tools { min-height: 0 !important; margin-top: 2px !important; }
.anime-app.is-phone-landscape .detail-synopsis-tools button { height: 32px !important; min-height: 0 !important; font-size: 13.5px !important; }
.anime-app.is-phone-landscape .detail-actions { margin-top: 10px !important; gap: 8px !important; flex-wrap: nowrap !important; }
.anime-app.is-phone-landscape .detail-actions :is(button, a) {
  height: 42px !important;
  min-height: 0 !important;
  font-size: 14px !important;
  padding-inline: 16px !important;
  flex: none !important;
  width: auto !important;
}
@media (max-height: 380px) {
  .anime-app.is-phone-landscape .detail-hero-synopsis > p { -webkit-line-clamp: 2 !important; }
}

/* watch: the app moves its header into the details column here; its
   pieces stay in the capsules, so the slot it leaves takes no room */
.anime-app.is-phone-landscape .watch-header-slot {
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.anime-app.is-phone-landscape .watch-header-slot .app-header {
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
}
.anime-app.is-phone-landscape .watch-stage-grid {
  /* the page already pads 12px on the right; this makes both gutters 24px */
  margin-left: var(--ls-gutter) !important;
  width: calc(100% - var(--ls-gutter) * 2 + 12px) !important;
  max-width: none !important;
}

/* The account menu grows out of the avatar at the foot of the rail. It is
   rendered outside the app, so the rail's geometry is spelled out here:
   rail x + rail width + 10px, bottom-aligned with the foot capsule. */
.anime-app.is-phone-landscape .account-menu,
.anime-app.is-phone-landscape ~ * .account-menu,
body:has(.anime-app.is-phone-landscape) .account-menu {
  top: auto !important;
  right: auto !important;
  left: calc(max(8px, env(safe-area-inset-left, 0px)) + 64px + 10px) !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
  width: min(340px, calc(100vw - 110px)) !important;
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 16px) !important;
  transform-origin: 0% 100% !important;
}

/* ------------------------------------------------------------------ list pages
   Discover, history, favourites, schedule: a compact heading, then content
   straight away. */
.anime-app.is-phone-landscape .page-section {
  padding-top: calc(var(--ls-safe-top) + 14px) !important;
}
.anime-app.is-phone-landscape .page-heading {
  margin-bottom: 12px !important;
  align-items: baseline !important;
}
.anime-app.is-phone-landscape .page-heading h1 {
  font-size: 22px !important;
  line-height: 1.2 !important;
}
/* one type scale on every list page: page title 22, groups 18, months 15 */
.anime-app.is-phone-landscape .page-section h2 {
  font-size: 18px !important;
  line-height: 1.3 !important;
}
.anime-app.is-phone-landscape .favorites-month-heading > h3 {
  font-size: 15px !important;
  line-height: 1.3 !important;
}

/* discover: each filter is one line that scrolls sideways */
.anime-app.is-phone-landscape .discover-filters {
  padding: 4px 12px 6px !important;
  border-radius: 22px !important;
}
.anime-app.is-phone-landscape .discover-filter-heading {
  padding-bottom: 2px !important;
}
.anime-app.is-phone-landscape .discover-filter-heading button { height: 30px !important; }
.anime-app.is-phone-landscape .filter-row {
  min-height: 0 !important;
  padding: 3px 0 !important;
  align-items: center !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
}
.anime-app.is-phone-landscape .filter-row .filter-label {
  align-self: center !important;
  padding-top: 0 !important;
  font-size: 12.5px !important;
}
.anime-app.is-phone-landscape .filter-row .filter-options {
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-mask: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  mask: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  padding-right: 28px !important;
  max-height: none !important;
}
.anime-app.is-phone-landscape .filter-row .filter-options::-webkit-scrollbar { display: none; }
.anime-app.is-phone-landscape .filter-row .filter-options > button {
  height: 32px !important;
  min-height: 0 !important;
  padding: 0 11px !important;
  font-size: 13.5px !important;
  flex: none !important;
  white-space: nowrap !important;
}
/* the "show more" chevrons are pointless when a row scrolls */
.anime-app.is-phone-landscape .filter-row > button:last-child:not(:only-child) { display: none !important; }
.anime-app.is-phone-landscape .discover-page .anime-grid { margin-top: 14px !important; }

/* history: the "continue watching" card leaves room for the list below it */
.anime-app.is-phone-landscape .history-feature .history-main {
  grid-template-columns: calc(var(--ls-poster) * .78) minmax(0, 1fr) !important;
  gap: 20px !important;
  padding: 12px !important;
}
.anime-app.is-phone-landscape .history-feature .history-poster {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 2 / 3;
}
.anime-app.is-phone-landscape .history-feature .history-copy {
  padding: 4px 20px 4px 0 !important;
  justify-content: center !important;
  gap: 6px !important;
}
.anime-app.is-phone-landscape .history-feature .history-copy :is(h2, h3, strong) {
  font-size: clamp(19px, 2.6vw, 24px) !important;
  line-height: 1.25 !important;
}
.anime-app.is-phone-landscape .history-feature .history-copy :is(button, .primary-button, .history-resume) {
  height: 40px !important;
  min-height: 0 !important;
}

/* poster grids: columns sized for a short screen, so a whole poster and its
   title fit at once whatever the phone's width */
.anime-app.is-phone-landscape .anime-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(118px, 100%), 1fr)) !important;
  gap: 18px 14px !important;
}
.anime-app.is-phone-landscape .schedule-poster-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(118px, 100%), 1fr)) !important;
  gap: 18px 14px !important;
  padding-top: 12px !important;
}

/* schedule: same left edge as the other pages, less air around the filters */
.anime-app.is-phone-landscape .schedule-page { margin-inline: var(--ls-gutter) !important; }
.anime-app.is-phone-landscape .schedule-view-toolbar { margin: 12px 0 10px !important; }

/* search: a smaller heading, so recent searches start in the first screen */
body:has(.anime-app.is-phone-landscape) .search-dialog .search-results { padding-top: 96px !important; }
body:has(.anime-app.is-phone-landscape) .search-dialog .search-intro h1 { font-size: 24px !important; line-height: 1.25 !important; }