/* Instagram-style mobile layer: slim top bar, icon tab bar, one story row, edge-to-edge posts,
   profile header with stats and a tight grid, booth as a business profile with highlights. Loaded last. */
.ig-search, .ig-highlights { display: none; }
html[data-theme="dark"] .ring > .avatar { border-color: var(--bg); }
.nav-search { min-width: 0; }
.nav-search .input { width: 100%; min-width: 0; }

@media (max-width: 960px) {
  .ig-m-hide { display: none !important; }

  /* Top bar: logo, notifications, messages, menu */
  .site-header { box-shadow: none; border-bottom: 1px solid var(--line); }
  .site-header .nav-actions .icon-btn { border: 0; background: none; width: 40px; height: 40px; color: var(--ink); }
  .site-header .nav-actions .icon-btn svg { width: 24px; height: 24px; }


  /* Hub: one story row, composer opens from +, flat feed */
  .hub { padding-block: 0 1rem; gap: 0; }
  .hub-main { gap: .9rem; }
  .ig-stories { display: flex; gap: .8rem; overflow-x: auto; scrollbar-width: none; margin-inline: -1.25rem; padding: .7rem 1.25rem .8rem; border-bottom: 1px solid var(--line); scroll-snap-type: x proximity; }
  .ig-stories::-webkit-scrollbar { display: none; }
  .ig-stories > .story-rail, .ig-stories > .reel-rail { display: contents; }
  .ig-stories .reel-bubble { width: 72px; scroll-snap-align: start; }
  .ig-stories .avatar { --s: 58px !important; }
  .ig-stories .ring { width: 64px; height: 64px; box-sizing: border-box; padding: 3px; }
  .ig-stories .ring > .avatar { border-width: 2px; }
  .ig-stories .caption { font-size: .72rem; color: var(--ink); }
  .ig-stories .reel-rail .ring { padding: 3px; border-radius: 50%; background: conic-gradient(from 200deg, #1565d8, #22c1c3, #f4b942, #1565d8); }
  .hub-composer { display: none; }
  .hub-composer:target { display: block; scroll-margin-top: 80px; animation: fadeUp .25s ease both; }
  .hub-main [data-feed-tabs] { border: 0; gap: .4rem; margin: 0; scrollbar-width: none; }
  .hub-main [data-feed-tabs] a { padding: .45rem .85rem; border: 1px solid var(--line); border-radius: 999px; margin: 0; font-size: .84rem; }
  .hub-main [data-feed-tabs] a.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  .hub-main .post.card { margin-inline: -1.25rem; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
  .hub-main .post.card:hover { box-shadow: none; transform: none; }
  .post-head { padding: .55rem .85rem; }
  .post-head .avatar { --s: 34px !important; }
  .post-name { font-size: .92rem; }
  .post-head .caption { font-size: .75rem; }
  .post-why { padding: .4rem .85rem 0; font-size: .75rem; }
  .post-media img, .post-media video { max-height: none; }
  .post-body { padding: .45rem .85rem .6rem; gap: .25rem; }
  .post-actions { gap: 1rem; }
  .post-actions svg { width: 26px; height: 26px; }
  .post-cap { font-size: .9rem; }

  /* Profile: avatar beside the counts, bio, full-width buttons, icon tabs, tight grid */
  .profile { padding-block: .9rem 1.5rem; }
  .prof-cover { display: none; }
  .prof-head { grid-template-columns: 84px minmax(0, 1fr); grid-template-areas: "av user" "av stats" "about about" "btns btns"; gap: .55rem 1.2rem; align-items: center; justify-items: stretch; text-align: start; padding-inline: 0; margin-bottom: .9rem; }
  .prof-info, .prof-head .prof-info > .row { display: contents; }
  .prof-avatar { grid-area: av; }
  .prof-avatar .ring { padding: 3px; box-shadow: none; background: conic-gradient(from 200deg, #f59e0b, #e11d48, #7c3aed, #f59e0b); }
  .prof-avatar .ring > .avatar { border: 3px solid var(--bg); }
  .prof-head .avatar { --s: 78px !important; font-size: 1.6rem; }
  .prof-user { grid-area: user; font: 700 1.1rem/1.2 var(--f-display); overflow: hidden; text-overflow: ellipsis; }
  .prof-stats { grid-area: stats; display: grid; grid-template-columns: repeat(3, 1fr); gap: .2rem; width: auto; margin: 0; padding: 0; background: none; font-size: .78rem; }
  .prof-stats li { display: grid; text-align: center; line-height: 1.3; color: var(--ink-2); }
  .prof-stats strong { font-size: 1.05rem; font-weight: 700; color: var(--ink); }
  .prof-about { grid-area: about; display: grid; gap: .15rem; font-size: .9rem; }
  .prof-about .prof-name { font-size: .95rem; }
  .prof-about .chip { justify-self: start; }
  .prof-btns { grid-area: btns; display: flex; flex-wrap: wrap; gap: .4rem; }
  .prof-btns > * { flex: 1 1 28%; min-width: 0; }
  .prof-btns .btn { width: 100%; justify-content: center; white-space: nowrap; overflow: hidden; min-height: 34px; padding: .4rem .6rem; border-radius: 10px; font-size: .84rem; }
  .prof-btns .btn-ghost, .prof-btns .btn-dark { background: var(--bg-2); border-color: transparent; color: var(--ink); }
  .prof-composer { display: none; }
  .prof-composer:target { display: block; }
  .prof-tabs { margin: 0 -1.25rem 2px; border-top: 1px solid var(--line); justify-content: space-around; }
  .prof-tabs a { flex: 1; flex-direction: column; align-items: center; justify-content: center; padding: .55rem 0; font-size: .74rem; gap: .15rem; color: var(--muted); border-top: 0; text-transform: none; letter-spacing: 0; }
  .prof-tabs a svg { width: 22px; height: 22px; }
  .prof-tabs a.active { color: var(--ink); box-shadow: inset 0 -1.5px 0 var(--ink); }
  .prof-grid { margin-inline: -1.25rem; gap: 2px; }
  .prof-grid .tile { aspect-ratio: 3 / 4; border-radius: 0; }
  .prof-grid.reels-grid .tile { aspect-ratio: 9 / 16; }

  /* Booth: business profile with highlights */
  .booth-cover { height: 150px; }
  .booth-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem 1rem; align-items: end; margin-top: -40px; padding: 0 0 .8rem; background: none; border: 0; border-radius: 0; box-shadow: none; }
  .booth-head .booth-logo { margin-top: 0; --s: 84px !important; border: 4px solid var(--bg); font-size: 1.8rem; }
  .booth-id { grid-column: 1 / -1; min-width: 0; }
  .booth-id h1 { font-size: 1.3rem !important; }
  .booth-id .chip { font-size: .74rem; padding: .2rem .55rem; }
  .booth-id .s-meta { font-size: .85rem; }
  .booth-grid { margin-top: 1rem; }
  .booth-grid [id] { scroll-margin-top: 80px; }
  #posts .mini-grid { gap: 2px; margin-inline: -1.25rem; }
  #posts .hub-tile.sq { border-radius: 0; }

  /* Explore: search bar on top like the Instagram search tab */
  .ig-search { display: flex; align-items: center; gap: .6rem; width: 100%; margin-bottom: 1rem; padding: .7rem 1rem; border: 0; border-radius: 12px; background: var(--bg-2); color: var(--muted); font: inherit; font-size: .95rem; cursor: pointer; text-align: start; }
  .explore { padding-top: .9rem !important; }
  .explore .hub-title, .m-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* hidden, still the page heading */
}