/* Narrower screens. Loaded after every page file. Between 640 and 1100
   the rail drops under the feed and the headline drops to 44 px; at 960
   and below the top bar's links give way to a floating tab bar; at 640
   and below the page becomes the phone layout: a search pill, sideways
   tiles and two line rows on the feed and the deployers. */

@media (max-width: 1100px) {
  .frame-grid { grid-template-columns: minmax(0, 1fr); }
  .rail, .sheet-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }
  .sheet-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-h, .page-h { font-size: 44px; line-height: 46px; letter-spacing: -0.95px; }
}
@media (max-width: 960px) {
  body { padding-bottom: calc(var(--bar-h) + 16px); }
  .nav { display: none; }
  .topbar .pill { margin-left: auto; }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* The floating tab bar takes over from the top bar's links */
  .tabbar {
    position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 30;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 480px; height: var(--bar-h);
    margin-inline: auto; padding: 5px;
    background: var(--tabbar-fill);
    border-radius: var(--r-pill); box-shadow: var(--ring-pop);
  }
  .tabbar-link {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    border-radius: var(--r-pill); color: var(--ink-muted); font-size: 12px; line-height: 14px; font-weight: var(--w-heading);
    transition: color var(--quick) var(--ease), background-color var(--quick) var(--ease);
  }
  .tabbar-link[aria-current="page"] { color: var(--ink); background: var(--ghost-fill); }
  .live { bottom: calc(var(--bar-h) + 24px); }
}

@media (max-width: 640px) {
  :root { --gutter: 24px; }

  /* Top bar: the mark and a search pill */
  .topbar { gap: 10px; height: 56px; padding-inline: 12px; }
  .brand-name, .topbar .pill, .kbd { display: none; }
  form.search { flex: 1; height: 40px; margin-left: 0; border-radius: var(--r-pill); }

  /* Hero: the frame's top edge at 43% of the glow, less the 56 px top bar and 16 px margin */
  .hero { width: auto; min-height: calc(0.43 * var(--glow-h) - 72px); padding: 20px 12px 0; }
  .hero-h, .page-h { font-size: 32px; line-height: 34px; letter-spacing: -0.7px; }
  .paste { margin-top: 16px; padding-left: 18px; }
  .paste-input { font-size: 16px; }
  .status-line { align-items: flex-start; margin-top: 12px; }
  .status-line .live-dot { margin-top: 6px; }

  /* Frame: tiles scroll sideways, the feed box runs edge to edge */
  .frame { width: 100%; margin-top: 16px; padding: 0 12px; }
  .frame-grid > .feed-card { margin: 0 -12px; border-radius: var(--r-frame) var(--r-frame) 0 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15); }
  .stats {
    display: flex; gap: 8px; margin: 0 -12px; padding: 0 12px; overflow-x: auto;
    scroll-snap-type: x mandatory; scroll-padding-inline: 12px; scrollbar-width: none;
  }
  .stats::-webkit-scrollbar, .tabs::-webkit-scrollbar { display: none; }
  .stat { flex: 0 0 auto; min-width: 148px; scroll-snap-align: start; }

  /* Feed tools, a row each: the tabs and the chains as sideways pills, then the filter box */
  .feed-tools { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 8px; padding: 0 0 8px; }
  .tabs, .chains { gap: 6px; max-width: none; margin: 0 -12px; padding: 0 12px; overflow-x: auto; scrollbar-width: none; }
  .tabs { background: none; border-radius: 0; }
  .chains::-webkit-scrollbar { display: none; }
  .filter input, .filter input:focus { width: 100%; height: 40px; font-size: 16px; }
  .tab { height: 32px; border-radius: var(--r-pill); box-shadow: var(--ring-tile); }
  .tab[aria-current="page"] { box-shadow: none; }

  /* Feed rows: rank, logo, ticker over MC; score over 24h at the right */
  .feed { display: block; }
  .feed caption, .feed thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .feed tbody { display: block; }
  .feed tbody tr {
    display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; grid-template-rows: 20px 20px;
    grid-template-areas: "rank tok score" "rank mc change";
    column-gap: 8px; row-gap: 2px; align-items: center; padding: 5px 2px; border-bottom: 1px solid var(--divider);
  }
  .feed tbody tr:last-child { border-bottom: 0; }
  .feed td, .feed td[data-p] { display: none; height: auto; padding: 0; border: 0; }
  .feed td.c-rank { display: block; grid-area: rank; font-size: 14px; }
  .feed td.c-token { display: flex; grid-area: 1 / 2 / 3 / 3; align-self: stretch; min-width: 0; }
  .feed td.c-token .tok { align-items: center; width: 100%; }
  .feed td.c-token .tok-text { align-self: flex-start; max-width: none; }
  .feed .tok-name, .feed .c-token .chain-chip, .feed .c-token .chip-boost { display: none; }
  .feed td.c-mc { display: block; grid-area: mc; padding-left: 42px; text-align: left; color: var(--ink-muted); }
  .feed td.c-score { display: block; grid-area: score; justify-self: end; }
  .feed td.c-change { display: block; grid-area: change; justify-self: end; }
  .more { padding: 12px 0 4px; }

  /* /deployers: the same two line rows, the wallet over its latest token, the score over the count */
  .deployers-card .table-wrap { overflow-x: visible; }
  .deployers, .deployers tbody { display: block; }
  .deployers thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .deployers tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "wallet top" "latest tokens";
    column-gap: 8px; row-gap: 4px; align-items: center; padding: 8px 2px; border-bottom: 1px solid var(--divider);
  }
  .deployers tbody tr:last-child { border-bottom: 0; }
  .deployers tbody th, .deployers td { height: auto; padding: 0; border: 0; }
  .deployers .c-wallet { grid-area: wallet; }
  .deployers .c-top { grid-area: top; justify-self: end; }
  .deployers .c-latest { grid-area: latest; display: flex; align-items: center; gap: 8px; min-width: 0; }
  .deployers .c-latest .tok, .deployers .c-latest .tok-sym { min-width: 0; }
  .deployers .c-latest .took { flex: none; margin-left: 0; }
  .deployers .c-tokens { grid-area: tokens; justify-self: end; color: var(--ink-muted); }
  .deployers .unit { display: inline; }

  /* The live panel spans the screen above the tab bar */
  .live { left: 12px; right: 12px; width: auto; }

  /* Other pages */
  .page-head { padding: 24px 0 20px; }
  .page-h code { font-size: 20px; line-height: 26px; letter-spacing: -0.2px; }
  .main > .card { padding: 16px 12px; }
  .main > .feed-card { padding: 2px 8px 4px; }
  .site-foot { flex-direction: column; margin-top: 32px; padding: 20px 12px 24px; }
  .how-grid { grid-template-columns: minmax(0, 1fr); }

  /* Sheet */
  .sheet-grid { gap: 16px; padding-top: 16px; }
  .head-top { flex-wrap: wrap; gap: 12px 16px; }
  .head-title { flex: 1 1 calc(100% - 64px); }
  .head-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
  .head-meta > div { flex-direction: column; align-items: flex-start; gap: 2px; }
  .head-meta > div:first-child { grid-column: 1 / -1; }
  .head-meta dd { flex-wrap: wrap; }
  .head-h { font-size: 28px; line-height: 32px; letter-spacing: -0.6px; }
  .head-h.is-long { font-size: 22px; line-height: 26px; letter-spacing: -0.4px; }
  /* An address shows its start and end. The middle is hidden the way .vh hides
     text, so a copy and a screen reader still get the whole one (font-size 0
     leaves the text wide in WebKit, and a 0px clip drops it from a copy). */
  .ad { white-space: nowrap; }
  .ad-m {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
  }
  .ad-h::after { content: "\2026"; content: "\2026" / ""; }
  .score-card, .chart-card, .cards .card, .sheet-foot { padding: 16px; }
  .found { padding: 14px 16px 6px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .src-sum { padding: 14px 16px; }
  .src-list { padding: 0 16px 12px; }
  .foot-stamp { flex-direction: column; align-items: flex-start; padding: 12px 14px; }
  .foot-end { flex-direction: column; align-items: flex-start; }
}