/* ============================================================================
   large-screens.css - tablet & TV adaptation for the Senku app pages.

   The app was built phone-first: every screen funnels its content through one
   of four shell containers, each hard-capped at a phone width (480-560px). On
   a phone that is correct. On a tablet or a TV it left a narrow ribbon of
   content stranded in the middle of a mostly empty screen, and above 1025px
   the bottom navigation bar hid itself while these pages have no sidebar to
   replace it - so on a landscape tablet or a TV the app lost its navigation
   entirely.

   This file is additive and shared: it introduces no new markup and overrides
   nothing below 768px, so phone layouts are byte-for-byte unchanged. Every
   rule here is scoped to a min-width media query.

   Breakpoints:
     768   tablet portrait
     1024  tablet landscape / small TV browser
     1280  large tablet / desktop / 720p TV
     1600  1080p TV at browser default zoom
     1920  4K TV / large desktop  (+ overscan-safe padding)
   ========================================================================= */


/* --- 1. Content shells ---------------------------------------------------
   .hv2-shell   home, feed, history, top-users, account, appearance,
                communities index, news index/create
   .hv2c-shell  communities view
   .np-shell    profile
   .nl-shell    library
   Selectors are prefixed with `body` so they outrank each page's own inline
   `.hv2-shell { max-width: 520px }` regardless of whether this file is linked
   before or after that inline <style> block.                              */

@media (min-width: 768px) {
  body .hv2-shell,
  body .hv2c-shell,
  body .np-shell,
  body .nl-shell { max-width: 700px; }
}

@media (min-width: 1024px) {
  body .hv2-shell,
  body .hv2c-shell,
  body .np-shell,
  body .nl-shell { max-width: 920px; }
}

@media (min-width: 1280px) {
  body .hv2-shell,
  body .hv2c-shell,
  body .np-shell,
  body .nl-shell { max-width: 1160px; }
}

@media (min-width: 1600px) {
  body .hv2-shell,
  body .hv2c-shell,
  body .np-shell,
  body .nl-shell { max-width: 1380px; }
}

@media (min-width: 1920px) {
  body .hv2-shell,
  body .hv2c-shell,
  body .np-shell,
  body .nl-shell { max-width: 1560px; }
}


/* --- 2. Single-column lists become real grids -----------------------------
   These lists are `display:flex; flex-direction:column`, i.e. one full-width
   card per row. Stretched to 1500px a news card turns into an absurdly long
   strip, so widening the shell alone is not enough - the lists have to gain
   columns. `align-items:start` keeps cards at their natural height instead of
   stretching every card in a row to match the tallest one.

   #hv2-comments-list reuses .hv2-feed-list for the comment thread; a threaded
   conversation must stay a single readable column, so it opts out.         */

@media (min-width: 900px) {
  .hv2-feed-list:not(#hv2-comments-list),
  .hv2c-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

@media (min-width: 1400px) {
  .hv2-feed-list:not(#hv2-comments-list),
  .hv2c-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1920px) {
  .hv2-feed-list:not(#hv2-comments-list),
  .hv2c-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* --- 3. Navigation on wide screens ----------------------------------------
   mobile-nav-v2.css hides the bottom bar outright at >=1025px. That is right
   for the pages that swap in a desktop sidebar, and wrong for the shell pages
   above, which have no sidebar - there the app simply had no navigation left.

   Bring the bar back for shell pages only, restyled as a centred floating
   pill rather than a full-width phone bar. The :not(:has(.sidebar)) guard
   means a page that does render a sidebar keeps the current behaviour, so
   nothing can end up with both - and it now covers EVERY sidebar-less page,
   not just the shell ones: the watch page has no shell class and no sidebar
   either, so above 1025px it was left with no navigation whatsoever.
   Browsers without :has() support keep today's behaviour instead of
   breaking.                                                                */

@media (min-width: 1025px) {
  body:not(:has(.sidebar)) .mobile-nav.mnv2-bar,
  body:has(.mobile-filter-bar) .mobile-nav.mnv2-bar {
    display: flex;
    bottom: calc(18px + env(safe-area-inset-bottom));
    background: transparent;
    border-top: none;
    box-shadow: none;
    padding: 0;
    pointer-events: none;
  }

  body:not(:has(.sidebar)) .mobile-nav.mnv2-bar .mnv2-list,
  body:has(.mobile-filter-bar) .mobile-nav.mnv2-bar .mnv2-list {
    pointer-events: auto;
    max-width: 560px;
    padding: 8px 12px;
    border-radius: 24px;
    background: #0b0b0c;
    border: 1px solid var(--v1-line, rgba(255, 255, 255, 0.08));
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45);
  }

  html[data-theme="light"] body:not(:has(.sidebar)) .mobile-nav.mnv2-bar .mnv2-list,
  html[data-theme="light"] body:has(.mobile-filter-bar) .mobile-nav.mnv2-bar .mnv2-list {
    background: #ffffff;
    border-color: #eef0f2;
    box-shadow: 0 10px 30px rgba(20, 20, 30, 0.12);
  }
}

/* Below 1025px the bar is still the full-width phone bar. On a tablet that
   stretches five items across ~1000px, leaving them marooned at the edges -
   cap and centre the row instead. */
@media (min-width: 768px) and (max-width: 1024.98px) {
  .mobile-nav.mnv2-bar .mnv2-list {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
}


/* --- 4. Fixed bars follow the content width -------------------------------
   .hv2-select-bar is `left:12px; right:12px`, so on a TV it became a 1900px
   wide strip holding two small buttons. Match it to the shell instead.     */

/* Centred with auto margins, NOT translateX: the bar slides itself in and out
   with `transform: translateY(140%)` / `.is-visible { translateY(0) }`, so
   touching transform here would clobber that animation and pin the bar open. */
@media (min-width: 768px) {
  .hv2-select-bar {
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: min(700px, calc(100vw - 24px));
  }
}

@media (min-width: 1024px) { .hv2-select-bar { width: 920px; } }
@media (min-width: 1280px) { .hv2-select-bar { width: 1160px; } }
@media (min-width: 1600px) { .hv2-select-bar { width: 1380px; } }
@media (min-width: 1920px) { .hv2-select-bar { width: 1560px; } }


/* --- 5. The .container family on very large screens -----------------------
   Those pages already have a proper desktop layout (sidebar + 1440px
   container), so they only need headroom on a 4K panel.                    */

@media (min-width: 1920px) {
  .container { max-width: 1720px; }
}


/* --- 6. TV: remote/D-pad focus -------------------------------------------
   A TV has no pointer. Navigation is a D-pad moving focus between elements,
   which is unusable when focus is invisible. :focus-visible only paints for
   keyboard/remote focus, so this never shows up for touch or mouse users.  */

@media (min-width: 1025px) {
  a:focus-visible,
  button:focus-visible,
  [role="button"]:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  [tabindex]:focus-visible {
    outline: 3px solid var(--v1-red, #ff3b3b);
    outline-offset: 3px;
    border-radius: 10px;
  }
}


/* --- 7. TV overscan -------------------------------------------------------
   Many TVs still overscan, cropping roughly 3-5% of each edge. A fixed bar
   flush against the edge can land outside the visible picture, so give the
   header and the bottom bar a little breathing room on TV-sized viewports.
   Scoped to coarse/no-pointer devices so a 1920px desktop monitor - which
   never overscans - keeps the tighter desktop spacing.                     */

@media (min-width: 1920px) and (pointer: coarse), (min-width: 1920px) and (pointer: none) {
  .hv2h-header { padding-left: 48px; padding-right: 48px; }
  .mobile-nav.mnv2-bar { bottom: calc(38px + env(safe-area-inset-bottom)); }
  body .hv2-shell,
  body .hv2c-shell,
  body .np-shell,
  body .nl-shell { max-width: 1480px; }
}


/* --- 8. Horizontal card rows -------------------------------------------
   .hv2-review-card (the news row AND the reviews row) sizes itself as
   `flex: 0 0 82%` - on a phone that is deliberate, it leaves the edge of the
   next card peeking so the row reads as swipeable. On a 1160px shell the same
   82% becomes a 925px card, so a row that should preview several news items
   showed one enormous stretched card instead. Fixed widths from here up: the
   row keeps scrolling, it just fits far more per screen.                  */

@media (min-width: 768px) {
  .hv2-review-card { flex: 0 0 330px; }
}

@media (min-width: 1280px) {
  .hv2-review-card { flex: 0 0 350px; }
}

@media (min-width: 1920px) {
  .hv2-review-card { flex: 0 0 380px; }
}


/* --- 9. Watch page hero ---------------------------------------------------
   The v1 (phone) design is now the layout at every width - see the
   `@media screen` block in Android-App/watch/index.html, which used to be
   capped at max-width:1023px and left everything wider on the old two-column
   desktop page. It is a single centred column by design, so cap it: stretched
   to the full 1160px container the title, buttons and info rows read as one
   very long line. The player and episode list below sit outside #v1-top and
   keep the full width.                                                    */

@media (min-width: 768px) {
  #v1-top {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 1280px) { #v1-top { max-width: 820px; } }
@media (min-width: 1920px) { #v1-top { max-width: 960px; } }


/* --- 10. Catalog list view ------------------------------------------------
   The catalog's list card format pins .anime-grid to max-width:720px. That is
   right on a phone and wastes most of a desktop or TV screen - the reported
   "huge empty area to the right". Widen it with the screen, and past 1600px
   run it as two columns so the rows stop being mostly whitespace.
   display/max-width need !important here because the base rule declares
   `display: flex !important`.                                             */

@media (min-width: 1024px) {
  html[data-card-format="list"] .anime-grid { max-width: 900px; }
}

@media (min-width: 1280px) {
  html[data-card-format="list"] .anime-grid { max-width: 1120px; }
}

@media (min-width: 1600px) {
  html[data-card-format="list"] .anime-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 40px;
    max-width: 1480px;
  }
}


/* --- 11. Watch page: keep the full-bleed cards inside the column ----------
   #v1-info-block / #v1-ep-block / #v1-cm-block deliberately break out of
   their container with `margin-inline: calc(50% - 50vw); width: 100vw`, so on
   a phone the Информация / Эпизоды / Комментарии cards run edge to edge. Now
   that the v1 design is the layout on desktop too, that same rule stretched
   them across the full 1920px while the hero above stayed in its column -
   the "everything is too wide" in the report. Let them follow the column. */

@media (min-width: 768px) {
  #v1-ep-block,
  #v1-info-block,
  #v1-cm-block {
    margin-left: 0;
    margin-right: 0;
    width: auto;
  }
}


/* --- 12. Catalog: the phone filter UI on large screens --------------------
   new-catalog.css ships two filter UIs: the desktop .filters-container (a row
   of always-open dropdowns) and the phone one - a single "Фильтры" button plus
   a slide-in drawer - which it only switches on below 768px. Every other
   screen in the app now uses the phone design at any width, so the catalog
   follows: the button and drawer come up, the dropdown row goes away.

   The declarations are repeated here rather than widening that max-width:768px
   block, because the same block also carries phone-only sizing (3-column grid,
   small type, small posters) that must NOT reach a big screen.

   Scoped to body:has(.mobile-filter-bar), so it cannot affect any other page.
   Browsers without :has() simply keep today's desktop filters. */

@media (min-width: 769px) {
  /* The catalog was the one page here still carrying a desktop sidebar. On the
     phone layout it gets the bottom pill instead - keeping both would put two
     navigations on the same screen. */
  body:has(.mobile-filter-bar) .sidebar { display: none !important; }
  body:has(.mobile-filter-bar) .page-wrapper { padding-left: 0 !important; }

  body:has(.mobile-filter-bar) .filters-container,
  body:has(.mobile-filter-bar) .catalog-sort-row { display: none; }

  body:has(.mobile-filter-bar) .mobile-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 24px;
  }

  body:has(.mobile-filter-bar) .mobile-sort-container {
    position: relative;
    flex: 1;
    max-width: 320px;
  }

  body:has(.mobile-filter-bar) .mobile-sort-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.02);
    background: #181818;
    color: #fff;
    font-family: "Unbounded", sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
  }

  body:has(.mobile-filter-bar) .mobile-sort-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    z-index: 2100;
    padding: 8px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #161618;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: 0.2s;
  }

  body:has(.mobile-filter-bar) .mobile-sort-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  body:has(.mobile-filter-bar) .mobile-sort-option {
    padding: 12px 16px;
    border-radius: 10px;
    color: #999;
    font-size: 13px;
    cursor: pointer;
  }

  body:has(.mobile-filter-bar) .mobile-sort-option.selected {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
  }

  body:has(.mobile-filter-bar) .mobile-filter-main-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border: 0;
    border-radius: 14px;
    background: #fff;
    color: #000;
    font-family: "Unbounded", sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
  }

  /* The drawer is already a fixed 400px right-hand panel; its base rule lives
     outside the phone media query, so it only needs switching on. */
  body:has(.mobile-filter-bar) .catalog-mobile-drawer { display: block; }

  html[data-theme="light"] body:has(.mobile-filter-bar) .mobile-sort-btn {
    background: #f2f2f2;
    color: #1e1e1e;
    border-color: #e6e6e6;
  }
}