/* ===== Phone "app feel" (≤575px) — loaded last so it wins over per-area sheets =====
   Ideas: compact hide-on-scroll header, bottom tab bar (header.css), horizontal snap rows
   instead of tall stacks, list-style news cards, touch feedback, safe areas. */
@media (max-width:575.98px){
  .author-box{flex-wrap:wrap}
  .author-box>a,.author-box .btn-ghost{flex:1 1 100%;justify-content:center}
  html{-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}
  .container{--bs-gutter-x:calc(max(16px,env(safe-area-inset-left)) * 2)}
  /* header: slides away when scrolling down, returns on scroll up (modules/header.js) */
  .topbar{transition:transform .25s}
  .topbar.is-hidden{transform:translateY(-100%)}
  .topbar__in{height:54px}
  /* sections */
  /* --band also positions the divider (tokens.css ::before/::after at -band/2), so it moves with the
     margin. flow-root stops a first-child .row's negative gutter margin collapsing through the band,
     which shrank the gap to 2px and drew the divider inside the on-air card. */
  .band{margin-top:26px;--band:26px;display:flow-root}.band::after{width:16px;height:3px;margin-top:-1px}
  .sh{margin-bottom:12px}.sh h2,.sh .sh__t{font-size:19px}
  /* touch feedback */
  a.card:active,.chip:active,.poster:active,.ocard:active{transform:scale(.985);transition:transform .08s}
  a.card:hover{transform:none;box-shadow:var(--c-shadow)}
  /* news cards become list rows */
  .ncard{display:flex;flex-direction:row;align-items:stretch}
  .ncard .ncard__media{width:128px;min-height:100px;height:auto;flex:none;border-radius:0}
  .ncard .ncard__body{padding:12px 14px;min-width:0}
  .ncard .ncard__t{font-size:15px;line-height:1.3}
  .ncard .ncard__lead,.ncard .ncard__x,.ncard .ncard__go{display:none}
  .ncard--lead,.ncard--video,.ncard--sport{flex-direction:column}
  .ncard--lead .ncard__media,.ncard--video .ncard__media,.ncard--sport .ncard__media{width:auto;height:200px!important}
  .ncard--lead .ncard__t{font-size:22px}
  /* chips rows scroll */
  .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;touch-action:pan-x;-webkit-overflow-scrolling:touch;mask-image:linear-gradient(90deg,#000 92%,transparent)}.chips::-webkit-scrollbar{display:none}
  .chip{flex:none}
  /* player & on-air */
  /* the player sits in the container like every other block: same margins, same corners (user, 12 Sep 2026) */
  .player{border-radius:var(--r-lg);margin-inline:0;overflow:hidden}
  .onair{border-radius:var(--r-lg)}
  /* hero / show pages */
  .show-hero h1{font-size:28px}.show-hero__logo{width:88px;height:88px}.show-hero__in{padding:24px 0}
  .serial-hero{height:320px}.serial-hero h1{font-size:34px}
  .cat-band{padding:16px;border-radius:var(--r-card)}.cat-band h1{font-size:26px}
  .author-hero{padding:20px}
  /* mega / popups irrelevant on phones */
  .sky{display:none}
  .adpop__box{max-width:300px}
  /* footer */
  .site-footer{padding-bottom:16px}
  /* the front page (DECISIONS #153): compact section tabs, a light section head, one-line band navs */
  /* the section tabs on one row: a plain scrolling row, edge to edge — no snap, no mask, no drag module */
  .akt__tabs,.news-sections{display:flex;flex-wrap:nowrap;gap:8px;margin:0 -16px 14px;padding:2px 16px 4px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;touch-action:pan-x;scroll-snap-type:none;mask-image:none;-webkit-mask-image:none;scrollbar-width:none}
  .akt__tabs::-webkit-scrollbar,.news-sections::-webkit-scrollbar{display:none}
  .akt__tabs>*,.news-sections>*{flex:0 0 auto;scroll-snap-align:none}
  .akt__tabs .day-btn,.news-sections .day-btn{padding:8px 12px;min-height:36px;gap:0;touch-action:manipulation}
  .akt__tabs .day-btn .dow,.news-sections .day-btn .dow{font-size:12px}
  .news-sections{margin-top:12px;margin-bottom:0}
  .akt__tabs .day-btn .dow{font-size:12.5px;letter-spacing:.04em}
  .akt__railhead .sh{min-height:0;margin:22px 0 10px}
  .akt .akt__lead{margin-bottom:12px}
  .hero-band .sh{flex-wrap:wrap;gap:10px 14px}
  .hero-band .sw-nav__frac{display:none}
  .hero-band .sw-nav__btn{display:grid;width:34px;height:34px}
  .hero-band .sw-nav__all{margin-left:0}
  .band--bleed{padding-block:26px 28px}
  .band.band--bleed.epg{padding-block:26px 28px}
  .hero-thumbs{margin-top:10px}
  /* the anchor ad is a strip, not a block: the 320×50 creative and no label */
  .anchor-ad{padding:3px 0}
  .anchor-ad .ad__tag{display:none}
  .anchor-ad .ad img{max-height:50px;width:auto}
}
/* ===== Phones (≤767px): the tab bar is the bottom of the screen — the page, the docked player and the
   anchor ad (ads.css) all sit on top of it. The first block's now/next strip lives in live.css. ===== */
@media (max-width:767.98px){
  body{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
}
/* standalone (installed) mode: no browser chrome, so give the top a little more air */
@media (display-mode:standalone){
  .topbar{padding-top:env(safe-area-inset-top)}
}

@media (max-width:991.98px){
  .page-head{padding-top:16px}
}

/* phones (#213): the lead card stands tall, the guide row reads time · flag · name, the pull-to-refresh arrow */
@media (max-width:767.98px){
  .lead{aspect-ratio:4/5}
  .lead__t{font-size:27px;line-height:1.1}
  .lead__cap{padding:20px 18px 22px}
  .lead__x{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .tl-block .tb-tm{order:0}
  .tl-block .tb-flag{order:1;margin-left:0}
  .tl-block .tb-nm{order:2}
  .tl-block .tb-foot{display:none} /* the minutes-left ran off the right edge of the row; the card above carries the progress */
  .tl-block.is-more{display:none}
  .tl-more{margin-top:2px}
  .ptr{position:fixed;left:50%;top:calc(var(--topbar-h,60px) + 8px);z-index:90;display:flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;border-radius:var(--r-pill);background:var(--c-card);color:var(--c-muted);box-shadow:var(--c-shadow-lg);font:600 12.5px/1 var(--ff-ui);pointer-events:none;opacity:0;transform:translate(-50%,-60px);transition:opacity .15s,transform .15s}
  .ptr.is-on{opacity:1;transform:translate(-50%,calc(var(--d,0px) - 60px))}
  .ptr.is-armed{color:var(--c-primary)}
  .ptr__ring{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;transform:rotate(calc(var(--d,0px) * 2.5deg))}
  .ptr.is-busy .ptr__ring{animation:ptr-spin .8s linear infinite}
  @keyframes ptr-spin{to{transform:rotate(360deg)}}
}