/*
 * Mobile layer. Loaded after each page's own <style>, so these rules win on phones.
 * Pure layout refactor: no markup, data or behaviour changes. Everything is scoped to <= 720px.
 */
@media (max-width: 720px) {
  html, body { max-width: 100%; overflow-x: clip; }
  body { width: 100%; padding-left: 14px; padding-right: 14px; padding-bottom: 28px; }
  img, svg, iframe, video { max-width: 100%; }
  main, main#root, main > *, main#root > *, .sec, .sechead, .controls, .tablewrap, .appbar, .ap-hero, .ap-bar, .ap-panel { min-width: 0; max-width: 100%; }

  /* ---------- shared chrome ---------- */
  /* Farcaster has a narrow embedded viewport. Keep its top row focused on
     discovery and the primary action; the normal web mobile nav is unchanged. */
  .topbar .nav a.cta { display: none; }
  html.farcaster-miniapp .topbar .nav a[href="/about"],
  html.farcaster-miniapp .topbar .nav a[href="/embed"] { display: none; }
  html.farcaster-miniapp .topbar .nav a.cta,
  html.farcaster-miniapp .topbar .nav .farcaster-notification-action { display: inline-flex; align-items: center; justify-content: center; white-space: normal; line-height: 1.05; overflow-wrap: normal; }
  html.farcaster-miniapp .topbar .nav a.cta { font-size: 11px; letter-spacing: .04em; padding-left: 10px; padding-right: 10px; }
  html.farcaster-miniapp .topbar .nav .farcaster-notification-action { font-size: 0; padding-left: 2px; padding-right: 2px; }
  html.farcaster-miniapp .topbar .nav .farcaster-notification-action::after { content: 'Alerts'; font-size: 11px; }
  html.farcaster-miniapp .topbar .nav .farcaster-notification-action[data-enabled="true"]::after { content: 'Alerts on'; }
  .hero-actions { width: 100%; }
  .hero-actions > .btn { justify-content: center; }
  /* topbar: links keep their natural width and wrap onto a second row when there are six of them
     (the Farcaster pages), so no label is squeezed out of its box */
  .topbar .nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 4px; }
  .topbar .nav a { font-size: 10px; flex: 0 0 auto; white-space: nowrap; }
  .ticker { margin: 0 -14px; }
  .ticker .lead { padding: 0 11px; font-size: 11px; gap: 6px; }
  .ticker .ev { padding: 8px 16px; font-size: 11px; }
  .panel-head { padding: 8px 12px; font-size: 10px; }
  .btn { min-height: 42px; }
  .btn.big { padding: 12px 16px; }
  .seg button { padding: 9px 14px; }
  footer { margin-top: 36px; gap: 14px; }
  .toast { max-width: calc(100vw - 28px); font-size: 12px; }
  #toasts { bottom: 16px; }

  /* ---------- home ---------- */
  .toputility { margin: 0 -14px; padding: 5px 14px; font-size: 10px; }
  main { gap: 30px; padding-top: 22px; }
  /* The desktop dashboard intentionally pulls Recently viewed closer to the
     picks panel. In a Farcaster mini-app the picks become a taller stacked
     list, so that negative margin makes the chips render underneath it. */
  .recent { margin-top: 0; }
  html.farcaster-miniapp .recent { margin-top: 0; }
  html.farcaster-miniapp section.daily { margin-bottom: 4px; }
  .hero { gap: 16px; align-items: stretch; }
  .hero .herotext { gap: 12px; }
  h1 { font-size: clamp(38px, 12.5vw, 54px); letter-spacing: -.04em; }
  h1 mark { box-shadow: 3px 3px 0 var(--ink); border-width: 2px; }
  .sub { font-size: 12px; line-height: 1.55; }
  .sharewrap { width: 100%; }
  .sharewrap > .btn { width: 100%; justify-content: center; }
  .sharewrap .menu { left: 0; right: 0; min-width: 0; }

  .strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cell { padding: 14px 9px 15px; }
  .cell + .cell { border-left: 3px dashed var(--ink); border-top: 0; }
  .cell span { font-size: 8.5px; letter-spacing: .05em; display: block; min-height: 22px; line-height: 1.25; }
  .cell b { margin-top: 6px; font-size: clamp(15px, 5.2vw, 22px); letter-spacing: -.03em; word-break: keep-all; white-space: nowrap; }
  .coverage-note { margin-top: 12px; padding: 9px 11px; font-size: 10px; line-height: 1.45; max-height: 56px; overflow: hidden; cursor: pointer; position: relative; }
  .coverage-note::after { content: '▾'; margin-left: auto; align-self: flex-start; font-size: 12px; }
  .coverage-note.open { max-height: none; }
  .coverage-note.open::after { content: '▴'; }

  .claim { padding: 14px 16px; }
  .claim summary { gap: 10px; }
  .claim summary p { font-size: 12px; line-height: 1.45; }
  .claimmenu { gap: 8px; }
  .claimmenu .btn { flex: 1 1 100%; justify-content: center; }

  .sec { gap: 16px; }
  .sechead { gap: 12px; }
  .sechead h2, .sec > h2, .sec h2 { font-size: 15px; gap: 10px; }

  /* podium: all three cards remain visible and predictable; champion comes first */
  .podium { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; overflow: visible; margin: 0; padding: 0; align-items: stretch; }
  .pod { width: 100%; min-width: 0; }
  .pod.p1, .pod.p2, .pod.p3 { min-height: 0; }
  .pod.p1 { order: -1; }
  .pod .panel-head { min-height: 46px; gap: 6px; }
  .pod .panel-head > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pod .panel-head > span:nth-child(2) { margin-left: auto; white-space: nowrap; }
  .pod .body, .pod.p1 .body { padding: 14px 14px 17px; gap: 7px; }
  .pod .medal { min-width: 36px; height: 36px; font-size: 18px; }
  .pod .pod-identity { margin-top: 0; }
  .pod .pod-logo { width: 36px; height: 36px; flex-basis: 36px; }
  .pod .nm { font-size: 18px; margin-top: 0; }
  .pod .big, .pod.p1 .big, .pod.p2 .big, .pod.p3 .big { font-size: 30px; }
  .pod .muted { line-height: 1.45; }
  .pod-socials a { min-height: 36px; padding: 7px 9px; }
  .pod-share { width: 38px; height: 38px; }
  .pod-share-wrap > .pod-share-menu { min-width: min(210px, calc(100vw - 56px)); }

  /* controls: search on top, window full width, chips side by side */
  .controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; }
  .controls > *, .controls select { min-width: 0; max-width: 100%; }
  .controls select { width: 100%; }
  .searchbox { grid-column: 1 / -1; width: 100%; order: -1; }
  .controls .seg { grid-column: 1 / -1; width: 100%; }
  .controls .seg button { flex: 1; }
  .controls .chip { justify-content: center; text-align: center; min-height: 40px; }

  /* leaderboard table becomes a stack of compact cards */
  .tablewrap { overflow: visible; background: transparent; border: 0; box-shadow: none; }
  table, tbody { display: block; min-width: 0; width: 100%; }
  thead { display: block; margin-bottom: 12px; }
  thead tr { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
  thead th { display: none; }
  thead th.sort { display: inline-block; padding: 8px 12px; border: 2px solid var(--ink); background: #fff; color: var(--ink); font-size: 10px; box-shadow: 2px 2px 0 var(--ink); }
  thead th.sort.active { background: var(--ink); color: #fff; }
  thead th.sort.hide-sm { display: inline-block; }
  thead th.sort::after { content: none; }
  thead th.sort.active::after { content: ' ▼'; color: var(--yellow); }
  tbody { display: grid; gap: 12px; }
  tbody tr { display: grid; grid-template-columns: 38px repeat(4, minmax(0, 1fr)) 42px; grid-template-areas: "rk app app app app act" ". users tx views reviews ."; column-gap: 7px; row-gap: 12px; align-items: center; padding: 12px; overflow: visible; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); background: var(--cream); }
  tbody tr:nth-child(even) { background: #fff; }
  tbody td { padding: 0; border: 0; display: block; }
  tbody td:nth-child(1) { grid-area: rk; align-self: start; width: auto; font-size: 13px; padding-top: 3px; }
  tbody td:nth-child(2) { grid-area: app; min-width: 0; }
  tbody td:nth-child(3), tbody td:nth-child(4), tbody td:nth-child(5), tbody td:nth-child(6) { min-width: 0; padding-top: 8px; border-top: 1.5px dashed rgba(11,13,26,.28); text-align: left; font: 700 12px var(--mono); color: var(--ink); }
  tbody td:nth-child(3) { grid-area: users; }
  tbody td:nth-child(3)::before { content: 'Users'; display: block; margin-bottom: 4px; color: var(--muted); font-size: 8px; letter-spacing: .06em; text-transform: uppercase; }
  tbody td:nth-child(4) { grid-area: tx; display: block; }
  tbody td:nth-child(4)::before { content: 'Tx'; display: block; margin-bottom: 4px; color: var(--muted); font-size: 8px; letter-spacing: .06em; text-transform: uppercase; }
  tbody td:nth-child(5) { grid-area: views; display: block; white-space: nowrap; }
  tbody td:nth-child(5)::before { content: 'Views'; display: block; margin-bottom: 4px; color: var(--muted); font-size: 8px; letter-spacing: .06em; text-transform: uppercase; }
  tbody td:nth-child(5) .eye-icon { display: none; }
  tbody td:nth-child(5) .view-value { margin-left: 0; }
  tbody td:nth-child(6) { grid-area: reviews; display: block; white-space: nowrap; }
  tbody td:nth-child(6)::before { content: 'Reviews'; display: block; margin-bottom: 4px; color: var(--muted); font-size: 8px; letter-spacing: .06em; text-transform: uppercase; }
  tbody td:nth-child(7) { grid-area: act; align-self: center; width: auto; text-align: right; }
  tbody td.act .actionset, tbody td.act .sharebtn, tbody tr td .sharebtn { opacity: 1; }
  tbody td.act .actionset { display: grid; gap: 7px; }
  tbody td.act .sharebtn, tbody td.act .reportbtn { width: 38px; height: 38px; }
  tbody td.act .sharepop-menu { right: 0; min-width: min(205px, calc(100vw - 56px)); }
  /* keep the icon, title, tags and social links aligned inside every card */
  tbody td.appcell { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; padding-left: 0; align-items: start; }
  tbody td.appcell .app-logo, tbody td.appcell .app-logo-slot { position: static; grid-column: 1; grid-row: 1; width: 30px; height: 30px; margin-top: 1px; transform: none; }
  tbody td.appcell .appinfo { grid-column: 2; min-width: 0; }
  .app-title > a { font-size: 15px; }
  .appcell .appmeta { margin-top: 5px; gap: 5px; font-size: 9px; align-items: stretch; }
  .appcell .meta-link { min-height: 25px; max-width: 100%; padding: 4px 6px; font-size: 9px !important; letter-spacing: .01em; }
  .appcell .meta-link .meta-value { max-width: 150px; }
  .appcell .meta-by { align-self: center; font-size: 9px; letter-spacing: .01em; }
  .appcell .tick { margin-left: 0; }
  .appcell small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  tbody tr .mv { display: block; margin: 2px 0 0; }
  .pagination { gap: 10px; }
  .pagination button { padding: 12px 14px; min-height: 44px; }
  #pageInfo { font-size: 11px; text-align: center; }
  .metadata-disclaimer, #verifiedDisclaimer { font-size: 10px; line-height: 1.5; }
  footer { flex-direction: column; align-items: flex-start; }

  footer .support { flex-wrap: wrap; gap: 8px; }
  footer .wallet { max-width: 100%; word-break: break-all; white-space: normal; }
  footer.site-footer { display: grid; grid-template-columns: 1fr; gap: 22px; margin-top: 42px; padding-top: 22px; }
  .site-footer-links { grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: 18px 12px; }
  .site-footer-col a { font-size: 10px; line-height: 1.35; }
  .site-footer-bottom { display: grid; gap: 5px; }

  /* ---------- app profile: layout lives in app.html (its own responsive block) ---------- */
  svg.chart { height: 150px; }
  .rankhist { height: 110px; }

  /* ---------- movers ---------- */
  .tools { width: 100%; display: grid; grid-template-columns: 1fr; gap: 10px; }
  .tools .seg { width: 100%; } .tools .seg button { flex: 1; }
  .tools .sharewrap .btn { width: 100%; justify-content: center; }
  .mv { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; padding: 12px 14px; }
  .mv .t b { font-size: 15px; }
  .chg { font-size: 15px; padding: 3px 8px; }
  .cols { gap: 28px; }
  img.preview { box-shadow: 3px 3px 0 var(--ink); }

  /* ---------- embed gallery ---------- */
  main, .sec, .grid, .item, .item .body { min-width: 0; }
  .grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .controls .codein { width: 100%; }
  .item .body { padding: 12px; gap: 12px; }
  .stage { padding: 8px; min-height: 0; overflow: auto; }
  pre { max-height: 84px; overflow: auto; font-size: 11px; padding: 10px; }
  .row .note { display: none; }
  .api a { grid-template-columns: 1fr; gap: 4px; padding: 12px; word-break: break-all; }

  /* ---------- verify ---------- */
  .verifybar { gap: 8px; }
  .intro { padding: 20px 16px; gap: 14px; }
  .intro h1 { font-size: clamp(34px, 11vw, 44px); }
  .intro p { font-size: 13px; }
  .steps { padding: 12px 14px; }
  .steps p { font-size: 12px; margin: 8px 0 0; }
  .layout { gap: 18px; }
  form { gap: 14px; }
  input, textarea, select { font-size: 16px; } /* prevents iOS zoom on focus */
  .submitrow { flex-direction: column; align-items: stretch; }
  .submitrow button { width: 100%; }

  /* ---------- about ---------- */
  .doc .inner { padding: 4px 16px 20px; }
  pre { white-space: pre-wrap; }
}

@media (max-width: 360px) {
  .cell b { font-size: 14px; }
  /* Keep the six grid areas (rank, app, four metrics, action) in sync. */
  tbody tr { grid-template-columns: 32px repeat(4, minmax(0, 1fr)) 40px; padding: 10px; column-gap: 5px; }
}

@media (max-width: 720px) {
}

@media (max-width: 720px) {
  /* widget previews keep their real width and pan sideways instead of squeezing into a broken layout */
  .stage { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .stage iframe { max-width: none; display: block; margin: 0 auto; }
  .stage img { display: block; margin: 0 auto; }
}

@media (max-width: 720px) {
  .empty { padding: 20px 14px; }
}

/* ---------- app profile hardening ----------
 * The profile tab bar used to stay on one horizontal line on phones. That
 * made the last tab look cut off and also made the sticky bar easy to swipe
 * accidentally while scrolling the page. Keep the complete navigation in
 * the viewport and let the content below remain the only scroll surface.
 */
@media (max-width: 640px) {
  .ap-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 8px;
    width: 100%;
    overflow: visible;
  }

  .ap-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    flex: none;
    width: 100%;
    max-width: 100%;
    gap: 6px;
    overflow: visible;
    overscroll-behavior: auto;
    scroll-snap-type: none;
  }

  .ap-tab {
    width: 100%;
    min-width: 0;
    padding: 9px 6px;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* An odd last tab gets a full row instead of a lonely half-width button. */
  .ap-tab:last-child:nth-child(odd) { grid-column: 1 / -1; }

  .ap-id,
  .ap-rank,
  .ap-panel,
  .ap-card,
  .ap-body,
  .ap-grid2,
  .ap-share,
  .ap-sharehead,
  .ap-preview,
  .ap-kpis,
  .ap-traffic,
  .ap-mini-token,
  .ap-sum,
  .review-summary,
  .review-head,
  .review-body,
  .tokenbody,
  .tokenstats {
    min-width: 0;
    max-width: 100%;
  }

  .ap-title,
  .ap-sharehead,
  .tokenidentity,
  .review-item-top,
  .review-form-footer,
  .review-item-actions,
  .external-links-head {
    min-width: 0;
  }

  .ap-title h1,
  .ap-desc,
  .ap-by,
  .ap-sharehead h2,
  .tokenidentity h2,
  .token-source,
  .review-head h2,
  .review-head p {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .ap-code,
  .ap-link,
  .ap-menuwrap,
  .ap-actions .btn,
  .ap-actions .ap-menuwrap > .btn {
    max-width: 100%;
  }

  .ap-link { overflow-wrap: anywhere; }
  .ap-code small { flex: 0 0 auto; }

  .ap-row {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 6px 12px;
  }

  .ap-row > span { flex: 0 0 auto; }
  .ap-row > div {
    flex: 1 1 150px;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .ap-preview { padding: 10px; }
  .ap-preview img { max-width: 100%; height: auto; }
  .ap-post { max-width: 100%; }
  .ap-label { align-items: flex-start; flex-wrap: wrap; }

  .review-summary-actions,
  .review-controls,
  .review-pagination,
  .review-form-footer,
  .token-actions,
  .tokenlinks,
  .ctl-row {
    min-width: 0;
    max-width: 100%;
  }

  .review-sort,
  .review-filter,
  .review-filter select,
  .review-choice,
  .review-rating-selection {
    max-width: 100%;
  }

  .review-choice { flex-wrap: wrap; margin-left: 0; }
  .review-rating-selection { margin-left: 0; }
  .review-success-backdrop,
  .external-links-backdrop { padding: 10px; }
  .review-success-card,
  .external-links-card { max-width: 100%; padding: 18px; }
  .review-success-rating { min-width: 0; flex-wrap: wrap; }
  .review-success-rating .review-item-meta { margin-left: 0; max-width: 100%; }
  .external-destination { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 8px; padding: 9px 10px; }
  .external-destination-copy b,
  .external-destination-copy small { white-space: normal; overflow-wrap: anywhere; }

  .tokenchart,
  .chartwrap,
  .tokenplot { min-width: 0; max-width: 100%; }
  .token-tip,
  .tip { max-width: calc(100vw - 48px); white-space: normal; overflow-wrap: anywhere; }
}

/* Keep the narrowest phones comfortable without making controls microscopic. */
@media (max-width: 360px) {
  .ap-tab { font-size: 10px; letter-spacing: .04em; padding-inline: 4px; }
  .ap-id { padding-inline: 12px; }
  .ap-rank { padding-inline: 12px; }
  .ap-body,
  .tokenbody { padding-inline: 12px; }
}

/* Page-specific rules load before this shared layer. Keep their intended
 * phone layouts intact when a generic selector would otherwise override them. */
@media (max-width: 720px) {
  .strip { grid-template-columns: 1fr; }
  .cell + .cell { border-left: 0; border-top: 3px dashed var(--ink); }
  #explore thead th.sort.hide-sm { display: none; }
  .appnav { min-width: 0; max-width: 100%; gap: 8px 12px; flex-wrap: wrap; }
  .appnav a { min-width: 0; }
}

@media (max-width: 640px) {
  .wait strong { white-space: normal; }
  .ap-win-m .seg { min-width: 0; }
  .ap-win-m .seg button { min-width: 0; padding-inline: 8px; }
}

/*
 * Farcaster mini app: the Farcaster app directory is the main screen and BuildBoard (Builder Codes) the
 * second tab. ui.js adds .fc-mini-tabs only while the host class is on <html>, so none of this applies on the web.
 */
.fc-mini-tabs { display: none; grid-template-columns: 1.3fr 1fr; margin: 12px 0 2px; border: 3px solid var(--ink); background: #fff; box-shadow: var(--sh-s); }
.fc-mini-tabs a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 48px; padding: 8px 6px; color: var(--ink); text-align: center; text-decoration: none; font: 800 13px/1.15 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.fc-mini-tabs a + a { border-left: 3px solid var(--ink); }
.fc-mini-tabs a small { color: var(--muted); font: 700 11px/1.2 var(--mono); letter-spacing: .03em; }
.fc-mini-tabs a[aria-current="page"] { background: var(--yellow); }
.fc-mini-tabs a:focus-visible { outline: 3px solid var(--blue); outline-offset: -5px; }
/* the tabs replace the long link row: Farcaster apps shows no secondary links, BuildBoard keeps its few */
html.farcaster-miniapp.fc-section-farcaster .topbar .nav a[href="/movers"],
html.farcaster-miniapp.fc-section-farcaster .topbar .nav a[href="/stats"] { display: none; }
html.farcaster-miniapp .topbar .nav a[href="/farcaster"],
html.farcaster-miniapp .topbar .nav a[href^="https://x.com"],
html.farcaster-miniapp .topbar .nav a[href^="https://farcaster.xyz"] { display: none; }

/* Farcaster mini app navigation: tabs replace the Discover link, links are readable and easy to hit */
html.farcaster-miniapp .topbar .nav a[href="/"] { display: none; }
html.farcaster-miniapp .topbar .nav a { min-height: 40px; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
html.farcaster-miniapp .topbar .nav .farcaster-notification-action { min-height: 40px; font-size: 0; }
html.farcaster-miniapp .appbar .back,
html.farcaster-miniapp .appnav a[href="/about"],
html.farcaster-miniapp .appnav a[href*="duckfacts"] { display: none; }
html.farcaster-miniapp .appbar { gap: 8px; }
@media (max-width: 720px) {
  .indexer-status { font-size: 11px; }
  .brand-dashboard { display: inline-flex; align-items: center; min-height: 40px; }
  .ap-chip { font-size: 11px; }
  .site-footer-col a, .site-footer-title { display: inline-block; padding: 8px 0; }
}

/* Phone touch targets and the smallest labels (cards, tags, share menus, action buttons) */
@media (max-width: 720px) {
  .install-action { min-height: 44px; display: inline-flex; align-items: center; }
  .sharepop-menu button, .pod-share-option { min-height: 44px; font-size: 11px; }
  .category-tag, .rating-tag, .pick-category, .pick-users, .podium-note, .pod-review, #tWtuLabel { font-size: 11px; }
  .ap-link { min-height: 44px; display: inline-flex; align-items: center; }
  .ap-docs-link { display: inline-block; padding: 12px 0; font-size: 11px; }
  .ap-chip-link { min-height: 40px; display: inline-flex; align-items: center; }
  .ap-tab, .ap-win-m .seg button { min-height: 44px; }
  .brand-duckfacts { display: inline-block; padding: 10px 0; }
}
@media (max-width: 720px) {
  small, label, .panel-head, .ap-sum label, .ap-eyebrow, .ap-view-label, .metadata-disclaimer, .save-hint, .review-count, .site-footer-col h2 { font-size: 11px; }
}

/* Farcaster mini app chrome: the host already shows the app name, so the page header is only a slim row of links
   and the two tabs stay pinned at the top while the page scrolls. */
html.farcaster-miniapp .topbar { padding-top: 8px; padding-bottom: 8px; gap: 8px; }
html.farcaster-miniapp .topbar .brand { display: none; }
html.farcaster-miniapp .topbar .nav { flex-wrap: nowrap; justify-content: flex-start; gap: 8px; width: 100%; overflow-x: auto; scrollbar-width: none; }
html.farcaster-miniapp .topbar .nav::-webkit-scrollbar { display: none; }
html.farcaster-miniapp .topbar .nav > * { flex: 0 0 auto; }
.fc-mini-tabs { position: sticky; top: 6px; z-index: 30; }
html.farcaster-miniapp .fc-mini-tabs { margin-top: 10px; }

/* The tabs are always in the markup (the server adds them); they only take space inside the Farcaster mini app. */
html.farcaster-miniapp .fc-mini-tabs { display: grid; }

/* Moving between the two tabs fades instead of flashing, and the tab bar itself stays put while the page changes. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .fc-mini-tabs { view-transition-name: fc-tabs; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .14s; }
}

/* BuildBoard pages inside the mini app use the same compact rhythm as the Farcaster directory,
   so the two tabs feel like one app instead of a website behind a tab bar. */
html.farcaster-miniapp main { gap: 14px; padding-top: 14px; }
html.farcaster-miniapp h1 { font-size: 30px; line-height: 1; letter-spacing: -.045em; }
html.farcaster-miniapp .ticker { display: none; }
html.farcaster-miniapp .hero .hero-actions { display: none; }
html.farcaster-miniapp .hero { gap: 10px; }

/* On the BuildBoard tab the app list comes first. The picks, recent chips and the podium are filled in after the data
   arrives (they pushed the list down by ~300px) and repeat what the list and the Farcaster tab already show. */
html.farcaster-miniapp section[aria-label="Top 3"],
html.farcaster-miniapp section[aria-label="Fast movers"] { display: none !important; }

/* The three network totals stay in one row inside the mini app instead of three stacked tiles. */
html.farcaster-miniapp .strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html.farcaster-miniapp .cell { padding: 10px 8px 11px; }
html.farcaster-miniapp .cell + .cell { border-left: 3px dashed var(--ink); border-top: 0; }
html.farcaster-miniapp .cell span { min-height: 0; font-size: 11px; letter-spacing: .02em; line-height: 1.2; }
html.farcaster-miniapp .cell b { margin-top: 6px; font-size: clamp(15px, 4.4vw, 20px); }

/* The tab bar is pinned at the top of the mini app, so anything scrolled into view stops below it. */
html.farcaster-miniapp #explore, html.farcaster-miniapp .tablewrap { scroll-margin-top: 84px; }

/* Mini app header: a light row of chips that lines up with the cards, instead of a full-width blue bar. */
html.farcaster-miniapp .topbar { position: static; margin: 10px 0 0; padding: 0; background: transparent; border: 0; box-shadow: none; }
html.farcaster-miniapp .topbar .nav { padding: 0; border-top: 0; gap: 8px; }
html.farcaster-miniapp .topbar .nav a { color: var(--ink); background: #fff; border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); padding: 6px 14px; }
html.farcaster-miniapp .topbar .nav a:hover { background: var(--yellow); }
/* The Farcaster tab has no links of its own: the header is only the alerts switch. Its place is held until the state is known, and gone once alerts are on. */
html.farcaster-miniapp.fc-section-farcaster .topbar { min-height: 44px; }
html.farcaster-miniapp.fc-section-farcaster.fc-alerts-on .topbar { display: none; }
/* Alerts that are already on need no button, and claiming or submitting an app is not something to do inside Farcaster. */
html.farcaster-miniapp .farcaster-notification-action[data-enabled="true"],
html.fc-alerts-on .farcaster-notification-action { display: none !important; }
html.farcaster-miniapp a[href="/verify"], html.farcaster-miniapp .submit-line, html.farcaster-miniapp .ap-claim,
html.farcaster-miniapp .app-claim, html.farcaster-miniapp .claim, html.farcaster-miniapp .metadata-disclaimer { display: none !important; }
html.farcaster-miniapp .indexer-status-standalone { display: none; }

/* Today's picks and recently opened apps stay in the mini app: the picks are one swipeable row, so the list is still close to the top. */
html.farcaster-miniapp section.daily { grid-template-columns: 1fr auto; gap: 8px; padding: 10px 12px; }
html.farcaster-miniapp .daily .daily-picks { grid-column: 1 / -1; display: flex; gap: 8px; margin: 0 -2px; padding: 0 2px 4px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
html.farcaster-miniapp .daily .daily-picks::-webkit-scrollbar { display: none; }
html.farcaster-miniapp .daily .pick { flex: 0 0 78%; scroll-snap-align: start; }
html.farcaster-miniapp .daily .daily-label b { font-size: 13px; }
html.farcaster-miniapp .recent { margin-top: 0; }
html.farcaster-miniapp .daily .daily-label { grid-row: 1; grid-column: 1; }
html.farcaster-miniapp .daily .daily-tools { grid-row: 1; grid-column: 2; align-self: start; }
html.farcaster-miniapp .daily .daily-picks { grid-row: 2; }
html.farcaster-miniapp .daily .daily-tools button { min-height: 40px; }
/* BuildBoard fills the picks after its data arrives; keep their place so the list below does not jump. */
html.farcaster-miniapp:not(.fc-section-farcaster) #daily[hidden]:not([data-skip]) { display: grid; visibility: hidden; min-height: 128px; }

/* Picks panel in the mini app: the swipe row runs to the panel edge so the next card is cut by the border, tools line up with the title. */
html.farcaster-miniapp section.daily { padding: 12px; overflow: hidden; align-items: center; }
html.farcaster-miniapp .daily .daily-picks { margin: 0 -12px; padding: 2px 12px 8px; scroll-padding-left: 12px; }
html.farcaster-miniapp .daily .daily-tools { align-self: center; gap: 6px; }
html.farcaster-miniapp .daily .daily-tools button { min-height: 36px; padding: 6px 10px; }
html.farcaster-miniapp .daily .daily-tabs { margin-top: 0; margin-bottom: 4px; }
html.farcaster-miniapp .daily .daily-tabs button { min-height: 34px; padding: 6px 12px; font-size: 11px; }
html.farcaster-miniapp .recent { flex-wrap: nowrap; overflow-x: auto; margin-left: -14px; margin-right: -14px; padding: 0 14px 6px; scrollbar-width: none; }
html.farcaster-miniapp .recent::-webkit-scrollbar { display: none; }
html.farcaster-miniapp .recent > * { flex: 0 0 auto; }

/* Swipe rows: flat cards (a thick shadow turned into a dark bar where the row is cut) and a soft fade at the edge as the hint. */
html.farcaster-miniapp .daily .pick { box-shadow: none; background: var(--cream, #fffbea); }
html.farcaster-miniapp .daily .pick:hover { transform: none; }
html.farcaster-miniapp .daily .daily-picks { padding-bottom: 2px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent); }
html.farcaster-miniapp .recent { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent); }
/* the alerts button stays out of sight until the host has said whether alerts are on */
html.farcaster-miniapp .topbar .nav .farcaster-notification-action[hidden] { display: none !important; }

/* Farcaster can inject a dark-theme button foreground into the embedded page.
   Keep light controls readable without changing the selected dark states. */
html.farcaster-miniapp .daily .daily-tabs button:not([aria-pressed="true"]),
html.farcaster-miniapp .daily .daily-tools button,
html.farcaster-miniapp .seg button:not([aria-pressed="true"]),
html.farcaster-miniapp .chip:not([aria-pressed="true"]),
html.farcaster-miniapp .catalog-pagination .chip,
body[data-farcaster-public="true"] .daily .daily-tabs button:not([aria-pressed="true"]),
body[data-farcaster-public="true"] .daily .daily-tools button,
body[data-farcaster-public="true"] .seg button:not([aria-pressed="true"]),
body[data-farcaster-public="true"] .chip:not([aria-pressed="true"]),
body[data-farcaster-public="true"] .catalog-pagination .chip,
body[data-public-mode="true"] .daily .daily-tabs button:not([aria-pressed="true"]),
body[data-public-mode="true"] .daily .daily-tools button,
body[data-public-mode="true"] .seg button:not([aria-pressed="true"]),
body[data-public-mode="true"] .chip:not([aria-pressed="true"]),
body[data-public-mode="true"] .catalog-pagination .chip {
  background: #fff;
  color: var(--ink) !important;
}
html.farcaster-miniapp .daily .daily-tabs button[aria-pressed="true"],
body[data-farcaster-public="true"] .daily .daily-tabs button[aria-pressed="true"],
body[data-public-mode="true"] .daily .daily-tabs button[aria-pressed="true"] {
  background: var(--ink);
  color: #fff !important;
}
html.farcaster-miniapp .seg button[aria-pressed="true"],
body[data-farcaster-public="true"] .seg button[aria-pressed="true"],
body[data-public-mode="true"] .seg button[aria-pressed="true"] {
  background: var(--blue) !important;
  color: #fff !important;
}
html.farcaster-miniapp .btn:not(.accent),
body[data-farcaster-public="true"] .btn:not(.accent),
body[data-public-mode="true"] .btn:not(.accent) { color: var(--ink); }
html.farcaster-miniapp .btn.accent,
body[data-farcaster-public="true"] .btn.accent,
body[data-public-mode="true"] .btn.accent { color: #fff; }

/* On narrow phones, a clipped second pick looks like a broken layout rather
   than an intentional carousel. Keep every recommendation inside the card. */
@media (max-width: 560px) {
  html.farcaster-miniapp section.daily { grid-template-columns: minmax(0, 1fr) auto; min-width: 0; }
  html.farcaster-miniapp .daily .daily-picks {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin: 0;
    padding: 2px 0 4px;
    overflow: visible;
    scroll-snap-type: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
  html.farcaster-miniapp .daily .pick { width: 100%; min-width: 0; flex: none; }
  html.farcaster-miniapp .daily .pick .pick-text { min-width: 0; }
  html.farcaster-miniapp .daily .daily-tools { min-width: 0; }
  html.farcaster-miniapp .daily .daily-tools button { padding-inline: 8px; white-space: nowrap; }
}

/* Farcaster's public mobile surface is a directory, not a desktop dashboard
   squeezed into a phone. Keep the navigation, recommendations, podium and
   rows dense while preserving every action and the full desktop layout. */
.fc-mobile-menu,
.filter-panel-toggle,
.open-short { display: none; }
.filter-more { display: contents; }
.fc-footer .site-footer-col > summary { display: none; }

@media (max-width: 720px) {
  body[data-farcaster-public="true"] .topbar,
  body[data-public-mode="true"] .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 56px;
    padding-block: 9px;
    gap: 10px;
  }
  body[data-farcaster-public="true"] .topbar > .nav,
  body[data-public-mode="true"] .topbar > .nav { display: none; }
  body[data-farcaster-public="true"] .topbar .brand-by,
  body[data-public-mode="true"] .topbar .brand-by { display: none; }
  body[data-farcaster-public="true"] .topbar .brand,
  body[data-public-mode="true"] .topbar .brand { font-size: 11px; }
  body[data-farcaster-public="true"] .fc-mobile-menu,
  body[data-public-mode="true"] .fc-mobile-menu { position: relative; display: block; justify-self: end; }
  .fc-mobile-menu > summary {
    list-style: none;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 11px;
    color: var(--ink);
    background: var(--yellow);
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
    cursor: pointer;
    font: 700 10px var(--mono);
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  .fc-mobile-menu > summary::-webkit-details-marker { display: none; }
  .fc-mobile-menu > nav {
    position: absolute;
    z-index: 80;
    top: calc(100% + 8px);
    right: 0;
    width: min(230px, calc(100vw - 28px));
    display: grid;
    padding: 6px;
    color: var(--ink);
    background: #fff;
    border: 2px solid var(--ink);
    box-shadow: 5px 5px 0 var(--ink);
  }
  .fc-mobile-menu > nav a {
    min-height: 42px;
    display: flex;
    align-items: center;
    padding: 9px 11px;
    color: var(--ink);
    border-bottom: 1px dashed rgba(11,13,26,.28);
    font: 700 11px var(--mono);
    text-decoration: none;
    text-transform: uppercase;
  }
  .fc-mobile-menu > nav a:last-child { border-bottom: 0; }
  .fc-mobile-menu > nav a[aria-current="page"] { background: var(--sky); }

  body[data-farcaster-public="true"] main { gap: 20px; padding-top: 18px; }
  body[data-farcaster-public="true"] .hero { gap: 12px; }
  body[data-farcaster-public="true"] .hero .herotext { gap: 10px; }
  body[data-farcaster-public="true"] .hero h1 { font-size: clamp(36px, 11.5vw, 48px); }
  body[data-farcaster-public="true"] .hero .sub { font-size: 13px; line-height: 1.45; }
  body[data-farcaster-public="true"] .hero-actions { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
  body[data-farcaster-public="true"] .hero-actions > .btn { min-height: 42px; padding: 10px 12px; font-size: 10px; }
  body[data-farcaster-public="true"] .hero-actions > #exploreBtn { grid-column: auto; }

  body[data-farcaster-public="true"] section.daily { grid-template-columns: minmax(0, 1fr) auto; padding: 11px; }
  body[data-farcaster-public="true"] .daily .daily-label { grid-column: 1; grid-row: 1; }
  body[data-farcaster-public="true"] .daily .daily-tools { grid-column: 2; grid-row: 1; align-self: start; }
  body[data-farcaster-public="true"] .daily .daily-tools button { min-height: 36px; padding: 6px 9px; }
  body[data-farcaster-public="true"] .daily .daily-picks { grid-column: 1 / -1; grid-row: 2; grid-template-columns: minmax(0, 1fr); }
  body[data-farcaster-public="true"] .daily .pick { min-height: 54px; padding: 8px 9px; box-shadow: 2px 2px 0 var(--ink); }
  body[data-farcaster-public="true"] .recent { display: none !important; }

  body[data-farcaster-public="true"] section[aria-label="Top 3"],
  body[data-farcaster-public="true"] section[aria-label="Fast movers"] { gap: 10px; }
  body[data-farcaster-public="true"] section[aria-label="Top 3"] .sechead,
  body[data-farcaster-public="true"] section[aria-label="Fast movers"] .sechead { margin-bottom: 0; }
  body[data-farcaster-public="true"] .podium-tools { margin: 0; }
  body[data-farcaster-public="true"] .podium-note { margin: 0; line-height: 1.35; }
  body[data-farcaster-public="true"] .podium { gap: 8px; }
  body[data-farcaster-public="true"] .podium .pod {
    position: relative;
    min-height: 0;
    overflow: visible;
  }
  body[data-farcaster-public="true"] .pod .panel-head {
    position: absolute;
    z-index: 3;
    top: 8px;
    right: 8px;
    min-height: 36px;
    padding: 0;
    background: transparent;
    border: 0;
  }
  body[data-farcaster-public="true"] .pod .panel-head > span { display: none; }
  body[data-farcaster-public="true"] .pod .body,
  body[data-farcaster-public="true"] .pod.p1 .body {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 5px 9px;
    min-height: 0;
    padding: 10px 52px 10px 10px;
  }
  body[data-farcaster-public="true"] .pod .medal { grid-row: 1 / span 3; width: 38px; min-width: 38px; height: 38px; padding: 0; font-size: 15px; }
  body[data-farcaster-public="true"] .pod .pod-identity { grid-column: 2; gap: 7px; }
  body[data-farcaster-public="true"] .pod .pod-logo { width: 30px; height: 30px; flex-basis: 30px; box-shadow: none; }
  body[data-farcaster-public="true"] .pod .nm { font-size: 15px; }
  body[data-farcaster-public="true"] .pod .fc-pod-desc { grid-column: 2; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; line-height: 1.3; }
  body[data-farcaster-public="true"] .pod .pod-review { display: none; }
  body[data-farcaster-public="true"] .pod-socials { grid-column: 2; margin: 1px 0 0; }
  body[data-farcaster-public="true"] .pod-socials a { min-height: 28px; padding: 4px 6px; }
  body[data-farcaster-public="true"] .pod-socials a + a { display: none; }
  body[data-farcaster-public="true"] .pod-share { width: 36px; height: 36px; background: #fff; color: var(--ink); border: 2px solid var(--ink); }

  body[data-farcaster-public="true"] main > section[aria-label="Totals"] .strip { display: none; }
  body[data-farcaster-public="true"] main > section[aria-label="Totals"] .coverage-info { margin-top: 0; }
  body[data-farcaster-public="true"] main > section[aria-label="Totals"] .coverage-info summary { min-height: 40px; display: inline-flex; align-items: center; }

  body[data-farcaster-public="true"] #explore { gap: 12px; }
  body[data-farcaster-public="true"] #explore .sechead { gap: 8px; }
  body[data-farcaster-public="true"] #explore .controls { gap: 8px; }
  body[data-farcaster-public="true"] #explore .controls .seg button { min-height: 38px; padding: 8px 6px; }
  body[data-farcaster-public="true"] #explore .filter-panel-toggle { grid-column: 1 / -1; display: flex; justify-content: center; width: 100%; }
  body[data-farcaster-public="true"] #explore .filter-more { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 8px; }
  body[data-farcaster-public="true"] #explore .filter-more:not(.open) { display: none; }
  body[data-farcaster-public="true"] #explore .filter-more .filtertoggle,
  body[data-farcaster-public="true"] #explore .filter-more .filtertoggle .chip,
  body[data-farcaster-public="true"] #explore .filter-more .categoryfilter { width: 100%; min-height: 42px; }

  body[data-farcaster-public="true"] #explore thead { margin-bottom: 8px; }
  body[data-farcaster-public="true"] #explore thead th.sort { padding: 7px 10px; }
  body[data-farcaster-public="true"] #explore tbody { gap: 8px; }
  body[data-farcaster-public="true"] #explore tbody tr {
    grid-template-columns: 30px minmax(0, 1fr) 40px 40px;
    grid-template-areas: "rk app open act";
    gap: 8px;
    min-height: 78px;
    padding: 9px;
    align-items: center;
    box-shadow: 2px 2px 0 var(--ink);
  }
  body[data-farcaster-public="true"] #explore tbody td:nth-child(1) { align-self: center; padding: 0; font-size: 12px; }
  body[data-farcaster-public="true"] #explore tbody td:nth-child(3) { display: none; }
  body[data-farcaster-public="true"] #explore tbody td:nth-child(4) { justify-self: stretch; }
  body[data-farcaster-public="true"] #explore tbody td:nth-child(4) .btn { width: 40px; min-height: 40px; padding: 0; }
  body[data-farcaster-public="true"] #explore tbody td:nth-child(5) { align-self: center; }
  body[data-farcaster-public="true"] #explore tbody td.act .sharebtn { width: 40px; height: 40px; }
  body[data-farcaster-public="true"] #explore tbody td.appcell { grid-template-columns: 28px minmax(0, 1fr); column-gap: 8px; align-items: center; }
  body[data-farcaster-public="true"] #explore tbody td.appcell .app-logo,
  body[data-farcaster-public="true"] #explore tbody td.appcell .app-logo-slot { width: 28px; height: 28px; }
  body[data-farcaster-public="true"] #explore .app-title { gap: 4px; flex-wrap: nowrap; }
  body[data-farcaster-public="true"] #explore .app-title > a { font-size: 14px; }
  body[data-farcaster-public="true"] #explore .app-title .category-tag { flex: 0 0 auto; padding: 3px 4px; font-size: 8px; }
  body[data-farcaster-public="true"] #explore .app-title .category-tag:nth-of-type(n+2),
  body[data-farcaster-public="true"] #explore .app-title .rating-tag { display: none; }
  body[data-farcaster-public="true"] #explore .appinfo .app-desc { max-width: 100%; font-size: 10px; }
  body[data-farcaster-public="true"] #explore .fc-handle { font-size: 9px; }
  body[data-farcaster-public="true"] .open-full { display: none; }
  body[data-farcaster-public="true"] .open-short { display: inline; font-size: 18px; }
  body[data-farcaster-public="true"] .catalog-pagination { display: grid; grid-template-columns: 1fr; gap: 8px; }
  body[data-farcaster-public="true"] .catalog-pagination .page-status { text-align: center; }
  body[data-farcaster-public="true"] .catalog-pagination .page-actions { display: grid; grid-template-columns: 1fr 1fr; }

  .fc-footer { gap: 12px; margin-top: 26px; padding-top: 18px; }
  .fc-footer .site-footer-brand p { display: none; }
  .fc-footer .site-footer-links { grid-template-columns: 1fr; gap: 6px; }
  .fc-footer .site-footer-col { display: block; border-top: 1px dashed rgba(11,13,26,.35); }
  .fc-footer .site-footer-col > summary {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--ink);
    cursor: pointer;
    font: 700 10px var(--mono);
    letter-spacing: .09em;
    list-style: none;
    text-transform: uppercase;
  }
  .fc-footer .site-footer-col > summary::after { content: '+'; font-size: 16px; }
  .fc-footer .site-footer-col[open] > summary::after { content: '−'; }
  .fc-footer .site-footer-col > summary::-webkit-details-marker { display: none; }
  .fc-footer .site-footer-col a { display: block; width: 100%; padding: 7px 0; }
  .fc-footer .site-footer-bottom { padding-top: 9px; }
}