/* Guides and Feedback use viewport density automatically, without a toggle. */
@media (min-width: 761px) and (max-width: 1550px),
       (min-width: 761px) and (max-height: 870px) {
  :root {
    --support-width: 1200px;
    --support-pad: 1.2rem;
    --support-gap: 0.85rem;
    --support-body: 0.82rem;
    --support-small: 0.72rem;
    --support-title: 2.6rem;
  }
  .guides-page.about-page, .fb-page {
    max-width: var(--support-width);
    padding: 5.5rem 1.5rem 2.5rem;
    margin-inline: auto;
  }
  .guides-page .about-section-head { margin-bottom: 0.8rem; }
  .guides-page .about-section-head h2, .fb-page-header h1 { font-size: var(--support-title); }
  .guides-page .about-section-lead, .fb-page-header p { font-size: var(--support-body); line-height: 1.45; }
  .guides-page .about-guides-intro-copy .about-section-lead { font-size: clamp(0.88rem, 1.1vw, 1rem); line-height: 1.4; }
  .guide-workspace { grid-template-columns: 230px minmax(0, 1fr); gap: var(--support-gap); }
  .guide-sidebar { display: flex; flex-direction: column; }
  .guide-sidebar-head { padding: 0.55rem; flex-shrink: 0; }
  .guide-search input { height: 30px; font-size: var(--support-small); }
  .guide-nav { min-height: 0; max-height: none; overflow-y: auto; padding: 0.35rem; }
  .guide-nav-group summary, .guide-nav-home { min-height: 34px; font-size: var(--support-small); }
  .guide-nav-title { font-size: var(--support-small); }
  .guide-nav-pages a { min-height: 29px; font-size: var(--support-small); padding-block: 0.25rem; }
  .guide-reader-head { padding: var(--support-pad); }
  .guide-breadcrumb { margin-bottom: 0.7rem; font-size: 0.62rem; flex-wrap: wrap; }
  .guide-reader h1 { font-size: 2.2rem; }
  .guide-reader-icon { width: 38px; height: 38px; }
  .guide-reader-icon .material-symbols-rounded { font-size: 1.2rem; }
  .guide-reader-title-row { gap: 0.65rem; }
  .guide-reader-index b { font-size: 2.7rem; }
  .guide-reader-index s, .guide-reader-index i { font-size: 2rem; }
  .guide-reader-intro, .guide-landing-lede { margin-top: 0.7rem; font-size: var(--support-body); line-height: 1.5; }
  .guide-landing-body { padding: 0.9rem var(--support-pad); font-size: 0.9rem; line-height: 1.5; }
  .guide-landing-section { margin-top: 1.2rem; padding-inline: var(--support-pad); }
  .guide-landing-section:last-of-type { margin-bottom: 1.2rem; }
  .guide-landing-section > h2 { font-size: 1.5rem; margin-bottom: 0.65rem; }
  .guide-card-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 0.6rem; }
  .guide-card { padding: 0.75rem; gap: 0.45rem; }
  .guide-card strong { font-size: var(--support-body); }
  .guide-card-text, .guide-table, .guide-task-copy li { font-size: var(--support-small); line-height: 1.5; }
  .guide-table th, .guide-table td { padding: 0.55rem 0.7rem; }
  .guide-task-list { padding-inline: var(--support-pad); }
  .guide-task { padding-block: 1rem; gap: 0.7rem; }
  .guide-task-copy h2 { font-size: 1rem; margin-bottom: 0.4rem; }
  .guide-task-copy > p, .guide-tip p { font-size: var(--support-body); line-height: 1.5; }
  .guide-task-copy ul { gap: 0.35rem; margin-top: 0.55rem; }
  .guide-tip { margin: 0 var(--support-pad) 1rem; padding: 0.7rem; gap: 0.5rem; }
  .guide-shot { --guide-shot-height: 260px; max-width: 600px; margin-block: 1rem; }
  .guide-side-shot .guide-shot-frame img, .guide-task-shot .guide-shot-frame img { max-height: 240px; object-fit: contain; }
  .guide-page-link { min-height: 54px; padding: 0.6rem 0.8rem; }
  .guide-page-link strong { font-size: var(--support-small); }

  .fb-page-header { padding: var(--support-pad); gap: 1rem; }
  .fb-process { gap: 0.65rem; margin-bottom: 0.85rem; }
  .fb-process-step { padding: 0.7rem; gap: 0.55rem; }
  .fb-process-step strong { font-size: var(--support-body); }
  .fb-process-step > span:last-child > span:last-child { font-size: var(--support-small); }
  .fb-process-icon { width: 28px; height: 28px; }
  .fb-auth-notice, .fb-submit-panel, .fb-list-hero { padding: var(--support-pad); margin-bottom: 0.85rem; }
  .fb-auth-notice { font-size: var(--support-body); }
  .fb-primary-action, .fb-secondary-action, .fb-signin-btn, .fb-submit-btn { min-height: 32px; padding: 0.4rem 0.75rem; font-size: var(--support-small); }
  .fb-submit-panel h2, .fb-list-header h2 { font-size: 1.5rem; }
  .fb-field { margin-bottom: 0.75rem; }
  .fb-field label { font-size: var(--support-small); }
  .fb-field input, .fb-field textarea { padding: 0.6rem 0.75rem; font-size: var(--support-body); }
  .fb-field textarea { min-height: 90px; }
  .fb-filter-row { grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); gap: 0.55rem; }
  .fb-filter-side { grid-column: 1 / -1; justify-self: end; width: auto; }
  .fb-search-shell, .fb-filter-chip, .fb-filter-side .fb-filter-chip { min-height: 30px; padding: 0.3rem 0.5rem; font-size: var(--support-small); }
  .fb-search-input { font-size: var(--support-small); min-width: 0; }
  .fb-list { gap: var(--support-gap); }
  .fb-card { padding: 0.7rem; gap: 0.55rem; }
  .fb-card-header, .fb-card-desc-block { padding: 0.7rem; }
  .fb-card-title { font-size: 0.95rem; }
  .fb-card-top-row { grid-template-columns: 40px minmax(0, 1fr) auto; min-height: 40px; gap: 0.6rem; }
  .fb-vote-btn { min-height: 40px; }
  .fb-card-desc { font-size: var(--support-body); line-height: 1.5; overflow-wrap: anywhere; }
  .fb-card-meta, .fb-card-status { font-size: 0.64rem; }
  .fb-card-body { gap: 0.5rem; }
  .fb-modal { width: min(520px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow-y: auto; padding: 1.2rem; }
  .fb-modal input, .fb-modal textarea { font-size: var(--support-body); }
}

@media (min-width: 761px) and (max-width: 1320px),
       (min-width: 761px) and (max-height: 770px) {
  :root {
    --support-width: 1080px;
    --support-pad: 0.9rem;
    --support-gap: 0.65rem;
    --support-body: 0.78rem;
    --support-small: 0.68rem;
    --support-title: 2.2rem;
  }
  .guide-workspace { grid-template-columns: 210px minmax(0, 1fr); }
  .guide-reader h1 { font-size: 1.85rem; }
  .guide-shot { --guide-shot-height: 220px; max-width: 520px; }
  .guide-side-shot .guide-shot-frame img, .guide-task-shot .guide-shot-frame img { max-height: 200px; }
  .fb-card-title { font-size: 0.88rem; }
}

/* Retain the existing drawer and header on tablet widths. */
@media (min-width: 761px) and (max-width: 1023px) {
  .guides-page.about-page, .fb-page { padding-top: 1.5rem; }
}

@media (min-width: 1024px) and (max-width: 1550px),
       (min-width: 1024px) and (max-height: 870px) {
  .site-header.cinematic-site-header { padding-block: 0.45rem; }
  .cinematic-site-header .brand-lockup { min-height: 36px; gap: 0.55rem; }
  .cinematic-site-header .logo-tile { width: 30px; height: 30px; flex-basis: 30px; }
  .cinematic-site-header .logo-tile img { width: 29px; height: 29px; }
  .cinematic-site-header .site-title { font-size: 1.55rem; }
  .cinematic-site-header .header-utilities { padding: 0.18rem; }
  .cinematic-site-header :is(.utility-link, .labs-switcher summary) {
    min-height: 30px; padding-inline: 0.5rem; font-size: 0.62rem; gap: 0.35rem;
  }
  .cinematic-site-header :is(.labs-menu, .pt-account-menu) {
    max-height: calc(100dvh - 5rem); overflow-y: auto;
  }

}
/* Footer type and logos follow the same density as the content above. */
@media (min-width: 761px) and (max-width: 1550px),
       (min-width: 761px) and (max-height: 870px) {
  .site-footer .brand-lockup { gap: 0.5rem; min-height: 30px; }
  .site-footer .brand-lockup .logo-tile { width: 30px; height: 30px; flex-basis: 30px; }
  .site-footer .brand-lockup .logo-tile img { width: 29px; height: 29px; }
  .site-footer .brand-lockup .site-title { font-size: 1.45rem; }
  .ft-brand { gap: 0.7rem; }
  .ft-tagline { font-size: 0.78rem; line-height: 1.4; }
  .ft-cols { gap: 1.15rem; }
  .ft-col { padding-top: 0.65rem; }
  .ft-label { font-size: 0.58rem; letter-spacing: 0.13em; }
  .ft-links { gap: 0.42rem; margin-top: 0.65rem; }
  .ft-links a, .ft-links span { font-size: 0.75rem; }
  .ft-scenes a { gap: 0.4rem; }
  .ft-scenes .material-symbols-rounded { font-size: 15px; }
  .ft-hosts img { width: 19px; height: 19px; }
  .ft-credits img { height: 17px; max-width: 6.5rem; }
  .ft-credits img[alt="fanart.tv"] { height: 22px; }
  .ft-community img { height: 28px; }
  .ft-copy { font-size: 0.68rem; }
  .ft-meta { font-size: 0.56rem; letter-spacing: 0.13em; }
}

@media (min-width: 761px) and (max-width: 1320px),
       (min-width: 761px) and (max-height: 770px) {
  .ft-tagline { font-size: 0.72rem; }
  .ft-links a, .ft-links span { font-size: 0.68rem; }
  .ft-links { gap: 0.35rem; }
  .ft-label { font-size: 0.54rem; }
  .ft-copy { font-size: 0.62rem; }
  .ft-meta { font-size: 0.52rem; }
  .ft-community img { height: 24px; }
  .site-footer .brand-lockup .site-title { font-size: 1.25rem; }
}

@media (min-width: 761px) and (max-width: 1550px),
       (min-width: 761px) and (max-height: 870px) {
  .site-footer { padding: 2rem 1.5rem 1rem; }
  .ft-inner { gap: 2rem; padding-bottom: 1.25rem; }
  .ft-bottom { padding-top: 0.85rem; }
}