/* Phone layout. Loaded last so these rules win over the page stylesheets.
   Goal: the first screen shows content, not controls. The shell mode on <body>
   (see MobileShellHelper) decides which fixed bars a page keeps:
   tabs  – browsing screens keep the tab bar;
   bar   – the page replaces the tab bar with its own actions;
   focus – tasks (composers, sign-in, confirmations) drop the tab bar;
   app   – a full-height screen (a conversation) also drops the header and footer. */

@media (max-width: 63.99rem) {
  /* Shell: a compact header that scrolls away, and a 56px bar. */
  .mobile-shell--focus, .mobile-shell--app { --mobile-nav-height: 0px; }
  .site-header { position: relative; }
  .site-header__inner { min-height: 56px; padding-block: .35rem; gap: .5rem; }
  body:has(.listing-detail) .site-header__inner { min-height: 56px; }
  .site-header .chat-widget { display: none; }
  .account-menu > summary { gap: 0; min-height: 44px; padding: .2rem; border-color: transparent; border-radius: 50%; }
  .account-menu > summary > svg:first-child:not(:only-child) { display: none; }
  .account-menu > summary > svg:only-child, .account-menu > summary > svg:last-child { width: 2.25rem; height: 2.25rem; padding: .45rem; border: 1px solid var(--color-border); border-radius: 50%; }

  .mobile-nav { padding: .25rem .35rem calc(.25rem + env(safe-area-inset-bottom)); }
  .nav-link--mobile { min-height: 48px; padding: .3rem .1rem; gap: .15rem; font-size: .7rem; }
  .nav-link--mobile .nav-link__icon { width: 1.25rem; height: 1.25rem; }
  .nav-link--mobile.nav-link--emphasis { margin-inline: .5rem; }
  .mobile-nav--bar { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .75rem; padding-inline: var(--gutter); }
  .mobile-nav--bar .listing-dock__back { display: flex; align-items: center; justify-content: center; gap: .4rem; min-height: 48px; padding: .5rem; font-size: .85rem; text-decoration: none; }
  .mobile-nav--bar .listing-dock__contact { margin: 0; border-radius: var(--radius-sm); }
  /* The dock slides away while the contact card it points to is visible. */
  .mobile-nav--listing { transition: transform var(--motion-short), visibility 0s; }
  .listing-contact-in-view .mobile-nav--listing { transform: translateY(100%); visibility: hidden; transition: transform var(--motion-short), visibility 0s var(--motion-short); }
  .mobile-shell--focus .site-footer, .mobile-shell--bar .site-footer { padding-bottom: calc(var(--mobile-nav-height, 4rem) + env(safe-area-inset-bottom)); }

  /* The keyboard needs the room while a field is focused. */
  .mobile-typing .mobile-nav:not(.mobile-nav--bar), .mobile-typing .cookie-notice { display: none; }

  /* Cookie notice: one slim strip above the bar instead of a card over the content. */
  .cookie-notice { left: 0; right: 0; bottom: var(--mobile-nav-height, 4rem); width: auto; max-height: none; display: flex; align-items: center; gap: .5rem 1rem; padding: .5rem var(--gutter); border-width: 1px 0 0; border-radius: 0; box-shadow: 0 -6px 18px -14px rgb(0 0 0 / .35); }
  .cookie-notice h2 { flex: 1; min-width: 0; margin: 0; font: 650 .8rem/1.35 var(--font-body); letter-spacing: 0; }
  .cookie-notice p { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .cookie-notice__actions { flex: none; gap: .75rem; }
  .cookie-notice__actions a { font-size: .78rem; }
  .cookie-notice .button { min-height: 40px; margin: 0; padding: .4rem .9rem; font-size: .85rem; }
  .mobile-shell--focus .cookie-notice, .mobile-shell--app .cookie-notice { display: none; }

  /* Page intros: the title stays, the kicker and the paragraph under it go. */
  .page-shell { padding-top: 1.25rem; }
  .page-shell .page-intro > .eyebrow, .page-shell .page-heading .eyebrow { display: none; }
  .page-shell .page-intro > .lead, .page-shell .page-heading .lead { margin-top: .4rem; font-size: .92rem; line-height: 1.5; }
  .page-shell :is(.page-intro, .page-heading) h1 { font-size: clamp(1.7rem, 7vw, 2.2rem); }

  /* Conversation: a chat screen. Header strip, messages that scroll, composer at the bottom. */
  .mobile-shell--app .site-header, .mobile-shell--app .site-footer { display: none; }
  .mobile-shell--app main { min-height: 0; }
  .mobile-shell--app .page-shell--inbox-thread { padding: 0; gap: 0; }
  .mobile-shell--app .inbox-layout--thread { height: calc(100dvh - var(--inbox-layout-top, 0px)); }
  .mobile-shell--app .inbox-thread { height: 100%; min-height: 0; border: 0; border-radius: 0; }
  .mobile-shell--app .inbox-thread__scroller { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .inbox-thread__header { gap: .4rem; padding: .35rem .75rem .5rem .25rem; padding-top: calc(.35rem + env(safe-area-inset-top)); }
  .inbox-thread__bar { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "back peer actions" ". listing listing"; gap: .25rem .5rem; }
  .inbox-thread__back { grid-area: back; }
  .inbox-thread__back-link { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--color-text); }
  .inbox-thread__back-link:hover { background: var(--color-surface-subtle); }
  .inbox-thread__back-link > span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .inbox-peer { gap: .5rem; }
  .inbox-peer__avatar { width: 2.25rem; height: 2.25rem; font-size: .85rem; }
  .inbox-peer__identity { flex-wrap: nowrap; gap: .45rem; }
  .inbox-peer__name { display: inline-flex; align-items: center; min-height: 32px; font-size: 1rem; }
  .inbox-peer__role { display: none; }
  .inbox-peer .inbox-live-status { font-size: .72rem; line-height: 1.3; }
  .inbox-thread__actions { gap: .25rem; }
  .inbox-action { width: 40px; min-height: 40px; }
  .inbox-context-card { gap: .6rem; padding: .35rem .5rem; background: var(--color-surface-subtle); border-radius: var(--radius-sm); }
  .inbox-context-card__media { width: 2.25rem; height: 2.25rem; }
  .inbox-context-card__title { font-size: .88rem; }
  .inbox-context-card__meta { font-size: .75rem; }
  .inbox-context-card__link { display: inline-flex; align-items: center; min-height: 32px; }
  .inbox-thread__header .inbox-honesty { padding: .4rem .7rem; font-size: .8rem; }
  .inbox-thread__footer { position: static; padding: .5rem .75rem calc(.5rem + env(safe-area-inset-bottom)); border-radius: 0; }
  .inbox-composer { gap: .25rem .5rem; }
  .inbox-composer__actions .button { min-height: 44px; padding-inline: 1rem; }
  .inbox-composer .form-field__control textarea { min-height: 44px; padding-block: .55rem; }
  .inbox-composer__status:empty, .inbox-composer .form-field__hint { display: none; }

  /* Composers: no tab bar, one sticky action bar, the first field near the top. */
  .page-shell--composer { gap: 1rem; padding-top: .75rem; }
  .page-shell--composer > .back-link, .composer-toolbar .back-link { min-height: 40px; font-size: .85rem; }
  .page-shell--composer .page-intro .lead, .page-shell--quick .page-intro .lead { display: none; }
  .page-shell--quick .page-intro { padding-top: 0; }
  .page-shell--quick .page-intro .eyebrow { display: none; }
  .page-shell--quick .page-intro h1, .page-shell--composer .page-intro h1 { font-size: 1.75rem; }
  .composer-steps { display: none; }
  .composer-actions { bottom: 0; margin-inline: calc(-1 * clamp(1.25rem, 3vw, 2.5rem)); padding: .6rem clamp(1.25rem, 3vw, 2.5rem) calc(.6rem + env(safe-area-inset-bottom)); flex-wrap: nowrap; }
  .composer-actions .button--secondary { padding-inline: .5rem; border-color: transparent; background: transparent; font-size: .85rem; }
  .composer-actions .button--primary { flex: 1; }
  .composer-progress { gap: .6rem; padding: .5rem .75rem; }
  .composer-progress__count { flex-basis: 32px; width: 32px; height: 32px; font-size: .72rem; }
  .composer-quick-actions { position: sticky; bottom: 0; z-index: 3; gap: .4rem; margin-inline: calc(-1 * var(--gutter)); padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom)); background: var(--color-background); border-top: 1px solid var(--color-border); }
  .composer-quick-actions { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .composer-quick-actions > p, .composer-quick-actions .composer-save-button { display: none; }
  .composer-quick-actions > .button--primary { width: 100%; min-height: 48px; }
  .composer-quick-secondary { gap: 1rem; flex-wrap: nowrap; }
  .composer-quick-secondary .text-link { min-height: 36px; }
  .account-banner--inline { margin: 0; padding: .75rem 1rem; font-size: .88rem; }
  .account-banner--inline p { margin-bottom: .35rem; }

  /* Questions: search and the list, not a hero. */
  .community-discovery { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .75rem .5rem; padding: 1rem; }
  .community-discovery__intro { grid-column: 1 / -1; }
  .community-discovery .eyebrow, .community-discovery__lead, .community-discovery__ask p { display: none; }
  .community-discovery h1 { font-size: 1.35rem; }
  .community-discovery__ask { grid-column: 2; grid-row: 2; display: block; }
  .community-discovery__ask-button { display: grid; place-items: center; width: 52px; min-height: 52px; padding: 0; }
  .community-discovery__ask-button svg { width: 1.35rem; height: 1.35rem; }
  .community-discovery__ask-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .community-search { grid-column: 1; grid-row: 2; }
  .community-search input { min-height: 44px; }
  .community-index .community-toolbar { padding-bottom: .75rem; }
  .community-results { gap: 1rem; }
  .community-index .community-results__head { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: .75rem; }
  .community-index .community-results__head > div { min-width: 0; }
  .community-index .community-results__head h2 { font-size: 1.1rem; }
  .community-results__count { margin: .15rem 0 0; font-size: .75rem; }
  .community-index .community-toolbar__form { flex: 0 1 12rem; min-width: 0; }
  .community-index .community-select select { min-height: 44px; font-size: .9rem; }
  .community-chip { min-height: 36px; }

  /* Account: the first form right under the title. */
  .account-page { gap: 1.25rem; }
  .account-page > .page-heading { flex-direction: row; align-items: center; flex-wrap: wrap; gap: .25rem 1rem; }
  .account-page > .page-heading .lead { display: none; }
  .account-layout { grid-template-columns: minmax(0, 1fr); }
  .account-sidebar { display: block; min-width: 0; }
  .account-identity { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; gap: 0 .75rem; padding: .75rem 1rem; text-align: left; }
  .account-identity > .avatar { grid-row: span 3; width: 3rem; height: 3rem; font-size: 1.1rem; }
  .account-identity > strong { margin: 0; font-size: 1rem; }
  .account-identity > .status-badge { justify-self: start; }
  .account-nav { display: flex; flex-wrap: nowrap; gap: .4rem; margin: .75rem calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter) .25rem; overflow-x: auto; scrollbar-width: none; }
  .account-nav a { flex: none; min-height: 40px; padding: .4rem .8rem; font-size: .8rem; white-space: nowrap; border: 1px solid var(--color-border); border-radius: 999px; }
  .account-nav a svg { display: none; }
  .account-panel { padding: 1.1rem; scroll-margin-top: 1rem; }
  .account-panel > header { margin-bottom: 1rem; }
  .account-panel h2 { font-size: 1.2rem; }
  .account-panel header p { margin-top: .35rem; font-size: .85rem; }

  /* My listings: tabs in one scrolling row, and the list right after. */
  .page-shell--inventory-workspace { gap: 1rem; }
  .inventory-header { flex-direction: row; align-items: center; flex-wrap: nowrap; }
  .inventory-header .page-intro { flex: 1; min-width: 0; }
  .inventory-header__actions { flex: none; flex-wrap: nowrap; gap: .5rem; }
  .inventory-header__actions .button { min-height: 44px; margin: 0; padding: .45rem .75rem; font-size: .85rem; }
  .inventory-header__actions .button--primary { display: none; }
  .inventory-workspace { gap: 1rem; }
  .inventory-tabs__list { display: flex; gap: .4rem; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) .25rem; overflow-x: auto; scrollbar-width: none; }
  .inventory-tabs__list > li { flex: none; }
  .inventory-tabs__link { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .35rem .5rem .35rem .85rem; border-radius: 999px; }
  .inventory-tabs__icon { display: none; }
  .inventory-tabs__label { font-size: .88rem; white-space: nowrap; }
  .inventory-tabs__count { min-width: 1.6rem; font-size: .78rem; }
  .inventory-panel__header { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .inventory-item__link { display: inline; padding-block: .6rem; }

  /* Help and policy pages: one scrolling row of page links. */
  .information-layout { gap: 1.25rem; }
  .information-nav { flex-wrap: nowrap; gap: .4rem; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) .25rem; overflow-x: auto; scrollbar-width: none; }
  .information-nav a { flex: none; min-height: 40px; padding: .4rem .85rem; white-space: nowrap; }
  .information-page > header { margin-bottom: 1.5rem; }
  .information-page > header .eyebrow { display: none; }
  .information-page h1 { font-size: 2rem; }

  /* Inbox list: title and conversations. */
  .page-shell--inbox-list .page-intro .lead { display: none; }
  .page-shell--inbox-list { gap: 1rem; }

  /* Saved and market details. */
  .saved-page { gap: 1.25rem; }
  .market-wanted-hook { display: flex; justify-content: center; }
  /* Owners edit from the bottom bar, so the same buttons in the page would repeat it. */
  body:has(.mobile-nav--bar:not(.mobile-nav--listing)) .listing-actions > a.button { display: none; }
}

@media (max-width: 47.99rem) {
  /* Returning visitors: search, the category sonar, then fresh listings and the rest. */
  .landing--returning { display: flex; flex-direction: column; }
  .landing--returning .landing-hero { display: contents; }
  .landing--returning .landing-hero__copy { order: 1; padding: 1.25rem var(--gutter) .5rem; }
  .landing--returning .landing-hero__copy .eyebrow, .landing--returning .landing-hero__lead { display: none; }
  .landing--returning .landing-hero h1 { margin-bottom: 1rem; font-size: 1.9rem; }
  .landing--returning .landing-sonar { order: 2; padding-inline: var(--gutter); }
  .landing--returning .landing-fresh { order: 3; }
  .landing--returning > :not(.landing-hero, .landing-fresh) { order: 4; }
  .landing-sonar__field { width: min(100%, 20rem); }
}

@media (max-width: 63.99rem) and (max-height: 30rem) {
  .mobile-shell--app .inbox-layout--thread { height: auto; }
  .mobile-shell--app .inbox-thread__scroller { overflow: visible; }
}