@media (max-width: 600px) {
  .lk-add { grid-template-columns: 1fr auto; }
  .lk-bm { display: none; } /* phones share links through the share menu instead */
  .tk-add { grid-template-columns: 1fr 1fr; }
  .tk-add #task-title { grid-column: 1 / -1; }
  .tk-add button { grid-column: 1 / -1; }
  .hb-add { grid-template-columns: 60px 1fr; }
  .hb-add #hb-target, .hb-add button { grid-column: span 1; }
  .hb-grid { grid-template-columns: minmax(0, 1fr); }
  .pm-add, .pm-add.asset, .pm-add.sub { grid-template-columns: 1fr 1fr; }
  .pm-add > :first-child, .pm-add button { grid-column: 1 / -1; }
  .en-add { grid-template-columns: 1fr 1fr; }
  .en-add button { grid-column: 1 / -1; }
  .gr-form { grid-template-columns: 1fr; gap: 2px; }
  .gr-form span:nth-child(even) { margin-bottom: 8px; }
  .en-grades { grid-template-columns: repeat(2, 1fr); }
  .pm-add.one > :first-child { grid-column: auto; }
  .pm-add.one button { grid-column: auto; }
  .pm-cat { grid-template-columns: 96px 1fr auto; }
  .pm-cat .pct { display: none; }
  .lk-add #link-tags { grid-column: 1 / -1; grid-row: 2; }
  .lk-item { grid-template-columns: 84px 1fr; gap: 10px; }
  .lk-thumb { width: 84px; font-size: 22px; }
  .lk-actions { grid-column: 1 / -1; justify-content: flex-end; margin-top: -4px; }
}
@media (max-width: 480px) {
  .td-card > h2 .meta { display: none; }
}

@media (max-width: 720px) {
  .f1-hero { grid-template-columns: 1fr; }
  .f1-circuit { width: 140px; justify-self: center; order: -1; }
  .f1-hero h2 { font-size: 19px; }
  .f1-sess { grid-template-columns: 1fr auto auto; }
  .f1-sess > :last-child { grid-column: 1 / -1; text-align: left; }
  .f1-row { grid-template-columns: 30px 40px 1fr auto; gap: 10px; }
  .f1-photo { width: 40px; height: 40px; }
  .f1-cal { grid-template-columns: 24px 28px 1fr; }
  .f1-cal-right { grid-column: 3; justify-items: start; text-align: left; }
  .pod-photo { width: 64px; height: 64px; } .pod.p1 .pod-photo { width: 76px; height: 76px; }
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .book-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px; }
  .rail { grid-auto-columns: 112px; gap: 10px; }
  .rail.cast { grid-auto-columns: 84px; }
  .mv-hero .in { grid-template-columns: 96px 1fr; gap: 12px; padding: 14px; min-height: 0; }
  .mv-hero h3 { font-size: 19px; }
  .ep-row { grid-template-columns: 110px 1fr; }
  .ep-next.static { grid-template-columns: 80px 1fr; }
  .ep-next.static .f1-cal-right { grid-column: 2; justify-items: start; text-align: left; }
  .prov-row .meta { min-width: 100%; }
  .nf-link { grid-template-columns: 96px 1fr; }
  .nf-img { min-height: 96px; max-height: none; }
  .nf-body { padding: 10px 12px 30px; }
  .nf-item h3 { font-size: 14px; }
  .nf-add { grid-template-columns: 1fr auto; }
  .nf-add #news-url { grid-column: 1 / -1; }
  .nf-src-row { grid-template-columns: 20px 1fr; }
  .nf-src-tools, .nf-src-row > .chip, .nf-src-row > .meta:last-child { grid-column: 2; justify-self: start; }
  .book-head { grid-template-columns: 110px 1fr; gap: 12px; }
  .book-head h3 { font-size: 18px; }
  .rating-box { grid-template-columns: 1fr; gap: 8px; }
}

@media (max-width: 480px) {
  .bar { gap: 8px; }
}

@media (max-width: 720px) {
  .bar { flex-wrap: wrap; } /* the search box takes its own row below */
  body[data-search] .search-wrap + .bar-actions { margin-left: auto; }
  .formats div { grid-template-columns: 1fr; gap: 2px; }
  .event-head h3 { font-size: 17px; }
  .search-wrap { order: 10; max-width: none; flex-basis: 100%; }
  .kbd { display: none; }
  .row { grid-template-columns: 56px 1fr; }
  .side { grid-column: 2; justify-items: start; grid-auto-flow: column; justify-content: start; gap: 8px; }
  .hero-score { font-size: 34px; }
  .logo-lg { width: 48px; height: 48px; }
  .radar-wrap { grid-template-columns: 1fr; }
  .rank-row { grid-template-columns: 36px 36px 1fr; }
  .rank-row .avatars { display: none; }
  .players-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mini-match { grid-template-columns: 1fr auto 1fr; }
  .mini-match .d { grid-column: 1 / -1; }
}