/* ============================================================================
   mobile.css — the phone site.

   CJ, 2026-08-18: "all pages on PC not to change ... but we seriously need to
   optimise the mobile side ... same look and feel as Instagram, Facebook,
   SoundCloud, YouTube Music."

   Every rule in this file lives inside a max-width media query, and this file
   is loaded last. That is deliberate and it is the whole architecture: the
   desktop site cannot be changed from here, by me or by anyone after me, so
   the promise "the PC site does not move" is enforced by the file rather than
   remembered. scripts/desktop-guard.mjs measures 24 desktop page layouts before
   and after and proves it.

   What actually separates an app-feeling phone site from a shrunk desktop one,
   in the order it matters:

     1. Navigation that is always visible and under the thumb, not folded into
        a hamburger. Five tabs, labelled, permanent.
     2. Chrome that gets out of the way. A 78px header with a 212px logo is a
        desktop header; a phone gives that space to content.
     3. Content that uses the full width. 24px of gutter plus 20px of card
        padding on a 390px screen leaves 302px for the thing you came to read.
     4. Type big enough to read at arm's length, and targets big enough to hit.
     5. Respect for the hardware: the notch, the home indicator, and the fact
        that iOS zooms any field under 16px and never zooms back.
   ============================================================================ */

/* The one rule in this file outside a media query, and it has to be: the tab
   bar is built into every page's DOM by js/ws-app.js, so without this it would
   render as a list of links at the bottom of the desktop site. Hiding it here
   rather than in a shared stylesheet keeps everything about the phone site in
   one place — and it can only ever remove a mobile-only element from desktop,
   never change desktop's own layout. desktop-guard.mjs caught it appearing on
   15 pages before this line existed. */
.tabbar { display: none; }

@media (max-width: 820px) {

  :root {
    --tabbar-h: 58px;
    /* A phone header carries a logo and one action. Nothing else fits, and
       nothing else earns the height. */
    --header-h: 56px;
  }

  /* ---------------------------------------------------------------- the tabs
     The one change that does most of the work. Instagram, SoundCloud and
     YouTube Music all put their destinations here for the same reason: the
     bottom third of a phone is the only part a thumb reaches without the hand
     moving, and a permanent bar answers "where am I" and "what else is there"
     without a tap.

     Built by js/ws-app.js from the same list the desktop nav uses. */
  .tabbar {
    display: grid;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1200;                       /* above the mini player's 1000 */
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--bg-deepest) 88%, transparent);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-top: 1px solid var(--border-subtle);
  }
  /* Without blur, 88% opacity is just murky. Go solid instead. */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .tabbar { background: var(--bg-deepest); }
  }
  .tabbar__tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    text-decoration: none;
    color: var(--text-muted);
    -webkit-tap-highlight-color: transparent;
    transition: color .14s ease;
  }
  .tabbar__tab svg { width: 23px; height: 23px; }
  .tabbar__tab span {
    font-family: var(--f-body);
    white-space: nowrap;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
  }
  .tabbar__tab.is-on { color: var(--teal-primary); }
  .tabbar__tab:active { color: var(--text-primary); }
  /* The unread badge ws-app.js hangs on any link to messages.html. */
  .tabbar__tab .nav-badge {
    position: absolute;
    transform: translate(13px, -12px);
  }

  /* Room to scroll past the bar, and past the home indicator under it. */
  body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }

  /* The mini player rides above the tabs rather than under them — the stack
     every music app uses. Expanded, it takes the screen and the tabs go with
     the rest of the page. */
  .ws-player[data-state="collapsed"] .ws-player__panel {
    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  }
  .ws-player[data-state="expanded"] { z-index: 1300; }

  /* -------------------------------------------------------------- the header
     56px instead of 78, and a logo sized for a phone. The header is a way back
     to the top and a place for one action; the tabs are the navigation now, so
     the hamburger goes with them on pages whose menu only repeated the tabs.
     index.html keeps its burger: that menu lists the home page's own sections,
     which is a different job. */
  .site-header { height: var(--header-h); }
  .nav-container { height: var(--header-h); gap: 12px; padding-inline: 14px; }
  .logo-img { height: 40px; }
  .site-header[data-nav="pages"] .hamburger { display: none; }
  .nav-actions { gap: 8px; margin-left: auto; }
  .nav-actions .btn { padding: 8px 13px; font-size: 12px; }

  /* --------------------------------------------------------------- the width
     24px of page gutter and 20px of card padding spends 88px of a 390px screen
     on nothing. 14 and 14 leaves the content 50px more room, which on a phone
     is the difference between two words on a line and three. */
  .page-wrap { padding: 0 14px calc(28px + var(--tabbar-h)); }
  .page-band { padding: 18px 16px 14px; }
  .panel { padding: 14px; }
  .panel + .panel { margin-top: 12px; }
  .layout { gap: 16px; margin-top: 16px; }

  /* The composer cannot fit tools, a counter and Post on one line at this
     width, so it takes two on purpose: what you can add on the left, what you
     do with it on the right. Wrapping without deciding where left "Post"
     stranded at the far left of its own line, which reads like a mistake. */
  .composer-box__actions { justify-content: flex-end; }
  .composer-box__tools { margin-right: auto; }
  .composer-box__actions .composer-count { margin-left: 0; }

  /* The profile header's three buttons sit in one row that cannot shrink, and
     as a grid item that row set the column's minimum width: 415px of content
     inside a 362px page. Chrome answers that by widening the layout viewport
     rather than scrolling, so the whole account page rendered zoomed out at
     437px — every measurement said "fits" while a person saw shrunken text and
     a cut-off "Edit profile". Let the row wrap and the column can be narrow. */
  .profile-head { grid-template-columns: minmax(0, 1fr); }
  .profile-head__actions { flex-wrap: wrap; }
  .profile-head__info { min-width: 0; }

  /* The band is a title, not a landing page. Two lines and a sentence. */
  .page-band__title { font-size: clamp(26px, 8vw, 34px); line-height: 1.08; }
  .page-band__eyebrow { font-size: 10px; }
  .page-band__sub { font-size: 14.5px; line-height: 1.45; margin-top: 8px; }

  /* Four tabs at desktop padding measure 494px and scroll out of sight with no
     hint that they do. Tightened, they all fit inside 362px and the page stops
     hiding a quarter of itself. */
  .tabs { margin-inline: 0; }
  .tab { padding: 12px 10px; font-size: 13.5px; letter-spacing: 0.01em; }

  /* Signing up is the first thing a new person does, and on a phone it should
     start under the header rather than floating in the middle of a screen it
     is taller than anyway. 48px of lead-in becomes 20px, and the form is
     visible without a scroll. */
  .auth-wrap {
    place-items: start center;
    padding: calc(var(--header-h) + 20px) 14px 40px;
    min-height: 0;
  }
  .auth-card { padding: 22px 18px; }

  /* ----------------------------------------------------------------- reading
     16px is the floor for body copy on a phone, and the floor for any field:
     iOS Safari zooms the page on focus below it and does not zoom back. */
  .post__body, .dm-msg__text { font-size: 16px; line-height: 1.55; }
  input, select, textarea { font-size: 16px; }

  /* -------------------------------------------------------------- messages
     A chat is the one screen that should not scroll the page at all: the inbox
     or the conversation fills the space between the header and the tabs, and
     scrolls inside itself.

     dvh, not vh. On iOS Safari 100vh is the height the page WOULD have with
     the URL bar hidden, so a pane sized in vh puts its last message and the box
     you type into underneath the browser's own chrome. It is the single most
     common way a mobile chat feels broken, and dvh is the fix. The vh line
     stays first as the fallback for anything that has not caught up. */
  .dm {
    height: calc(100vh - var(--header-h) - var(--tabbar-h));
    height: calc(100dvh - var(--header-h) - var(--tabbar-h) - env(safe-area-inset-bottom));
    min-height: 0;
  }

  /* The pane could not be narrower than its own contents. `1fr` floors at
     min-content, and the thread's header row — back, avatar, name, Mute, Leave,
     Block — refuses to shrink, so the pane laid out at about 520px inside a
     390px phone and `.dm { overflow: hidden }` quietly cut the rest off. Every
     message ran off the right edge mid-sentence and the Send button was a
     sliver: CJ, 2026-08-18, "on the messaging page on cell you can't see
     everything." minmax(0,1fr) lets the column be as narrow as the screen, and
     min-width:0 lets the panes inside it agree. */
  .dm { grid-template-columns: minmax(0, 1fr); }
  .dm-list, .dm-thread { min-width: 0; }
  .dm-thread__head { padding: 10px 12px; gap: 10px; }
  .dm-thread__tools { flex-shrink: 0; gap: 4px; }
  .dm-thread__tools .btn-sm { padding: 8px 9px; font-size: 12px; }
  .dm-compose { min-width: 0; }
  .dm-compose textarea { min-width: 0; }
  .dm-compose .btn { flex-shrink: 0; padding: 10px 16px; }

  /* A chat screen is the whole screen. The site footer sitting under a
     fixed-height pane made the page 1547px tall — 700px of legal links below a
     conversation, and a page that slid around under the thumb while trying to
     scroll the messages. No app does that. */
  body.page-dm { padding-bottom: 0; overflow: hidden; }
  body.page-dm .site-footer { display: none; }

  /* The placeholder is longer than the field and the button cannot shrink, so
     "Search artists, track:" is all anyone reads. Let the field own the row. */
  .search-bar { gap: 8px; }
  .search-input { min-width: 0; }
  .search-input::placeholder { font-size: 15px; }

  /* ---------------------------------------------------------- post actions
     Like, Comment and Share are flex items that shrink, and their labels were
     allowed to break, so at 360px — which is what most Android phones report —
     the row squeezed them until the words snapped in half: "Lik / e",
     "Comme / nt", "Shar / e". Measured on the live site at 360px, each button
     was 56px tall because every label had gone to two lines.

     A label never breaks now; if the row runs out of room a whole button drops
     to the next line instead, which is legible at any font size the reader has
     set. Tighter padding means it does not have to. */
  .post__actions { flex-wrap: wrap; gap: 4px; row-gap: 4px; }
  .post-action {
    flex: 0 0 auto;
    white-space: nowrap;
    gap: 6px;
    padding: 9px 8px;
  }

  /* The pencil and the bin on your own posts are 32px squares. Same treatment
     as the play buttons: the drawing stays, the area that answers a tap grows
     to 44px past it. Two destructive-ish controls 4px apart is how a thumb
     deletes the wrong thing. */
  .post__edit, .post__delete { position: relative; }
  .post__edit::after, .post__delete::after { content: ""; position: absolute; inset: -6px; }
  .post__owner-actions { gap: 10px; }
  /* The "add a reaction" smiley, same again — 28px drawn, 44px to hit. */
  .reaction-add { position: relative; }
  .reaction-add::after { content: ""; position: absolute; inset: -8px; }

  /* ------------------------------------------------------------- link cards
     The card is as wide as the picture it previews — a portrait gig poster
     makes a 240px card — and inside that, a 107px platform chip beside the
     title left the title 85px and three lines to say "Jazzcatz Capetown on
     Reels" in. The title is the point of a preview, so it gets the width and
     the source sits under it. */
  .embed-card__body,
  .embed-card--link .embed-card__body {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .embed-card__meta,
  .embed-card--link .embed-card__meta { flex: none; width: 100%; }
  .embed-plat,
  .embed-card--link .embed-plat { margin-left: 0; }

  /* ------------------------------------------------------------ side-scrolls
     A row that scrolls sideways should stop where a card starts, not halfway
     through one. Snap makes a drag feel decided instead of loose. */
  .artist-row, .video-grid, .studio-row, .ev-scroller {
    scroll-snap-type: x mandatory;
    scroll-padding-left: 14px;
    -webkit-overflow-scrolling: touch;
  }
  .artist-row > *, .studio-row > * { scroll-snap-align: start; }
}

/* ------------------------------------------------------------- edge to edge
   Below 560px the feed is the page, so it gets all of it: the cards lose their
   side borders and corners and run to both edges, with a hairline between them.
   This is what a phone feed looks like everywhere it is done well, and it buys
   back the last 28px of line length. Panels that are lists rather than reading
   keep their card shape so the page still has structure. */
@media (max-width: 560px) {
  .col-center > .panel,
  #feed > .panel,
  #feedEmpty {
    margin-left: -14px;
    margin-right: -14px;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    padding-left: 16px;
    padding-right: 16px;
  }
  #feed > .panel + .panel { margin-top: 8px; }
}