/* ---------- phone chrome (<=480px) ----------
   A real phone layout per the design's mobile screens, not a squeeze of the
   desktop bar: the utility row becomes a 32px moderator strip carrying only
   identity + the pending count, nav moves to a bottom tab bar, "add photos"
   becomes a floating action, and the utility overflow becomes a bottom sheet.

   Everything here is display:none above 480px. The three phone-only elements
   (.tabbar, .fab-add, .mod-sheet) live as SIBLINGS of <header> in
   partials/topbar.html -- .topbar has backdrop-filter, which creates a
   containing block for fixed-position descendants, so nesting them would
   anchor them to the header instead of the viewport. */

.tabbar, .fab-add, .mod-sheet, .sheet-backdrop { display: none; }

@media (max-width: 480px) {

  /* ---- moderator strip ----
     32px, flat, no wrapping. Identity on the left, the pending-review count
     and the sheet toggle on the right. Everything else in the utility row
     (People, Admin tools, Add photos) is hidden here and moves into the sheet.

     Per the design this strip SCROLLS AWAY with the header -- only the tab bar
     and the FAB stay pinned -- so .topbar drops out of sticky at this width.
     That also buys back the ~110px of a 667px viewport the old sticky
     double-row header was holding. */
  .topbar { position: static; }

  .topbar-utility-inner {
    height: 32px; padding: 0 12px; gap: 8px;
  }
  .util-identity {
    font-size: 9px; gap: 6px; margin-right: 0;
    flex: 1; min-width: 0; overflow: hidden;
  }
  .util-identity-dot { width: 5px; height: 5px; }

  /* Only identity, Review and the sheet toggle survive in the strip itself.
     !important is required: .admin-only/.trusted-only in admin.css set
     `display: revert !important` for admins/trusted users, which otherwise
     beats a plain display:none regardless of specificity or source order --
     the same role-visibility-vs-responsive-collapse clash documented for
     .trusted-only elsewhere in this codebase. */
  .topbar-utility-inner > :not(.util-identity):not(#reviewBtn):not(.util-more-btn) {
    display: none !important;
  }
  /* Review reduces to a bare label + count -- no border, no icon; the count is
     the only thing a mod actually reads at this size (design: "the count is
     the point"). */
  #reviewBtn {
    border-color: transparent; background: none; padding: 0 2px;
    color: var(--text); gap: 5px; flex: 0 0 auto;
  }
  #reviewBtn svg { display: none; }
  #reviewBtn .util-btn-label { display: inline; }
  /* Inline, not the corner-pinned .auto-badge -- there's no button box to pin
     to once the border and padding are gone. */
  #reviewBtn #reviewCountBadge {
    position: static; top: auto; right: auto;
    min-width: 16px; height: 14px; line-height: 14px;
  }
  .util-more-btn {
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: var(--radius-pill); border: none;
    background: none; color: var(--text); cursor: pointer; position: relative;
    flex: 0 0 auto; font-size: 15px; line-height: 1;
  }
  /* While the sheet is up the strip goes accent, so there's no doubt you're in
     mod mode (design's screen 2). */
  .topbar-utility.sheet-open { background: var(--coral); }
  .topbar-utility.sheet-open .util-identity,
  .topbar-utility.sheet-open .util-identity-name,
  .topbar-utility.sheet-open .util-identity-role,
  .topbar-utility.sheet-open #reviewBtn,
  .topbar-utility.sheet-open .util-more-btn { color: var(--ink); }
  .topbar-utility.sheet-open .util-identity-dot { background: var(--ink); }
  .topbar-utility.sheet-open .util-identity-sep { color: color-mix(in srgb, var(--ink) 45%, transparent); }
  .topbar-utility.sheet-open #reviewCountBadge { background: var(--ink); color: var(--coral); }

  /* ---- header row ----
     The wordmark STAYS on phone (the design keeps it; it was previously
     display:none here), just smaller. */
  .topbar-primary {
    gap: 10px; padding: 10px 14px 12px; flex-wrap: wrap;
  }
  .brand { gap: 8px; }
  .brand-star { width: 26px; height: 26px; }
  [data-theme="shoko"] .brand-critter { width: 26px; height: 26px; }
  .brand-text { display: flex; }
  .brand-mark { font-size: 19px; }
  .brand-sub { display: none; }   /* the tagline is the one thing that doesn't fit */

  /* Nav links move to the tab bar; the desktop row would be redundant. */
  .nav-links { display: none; }

  /* Search takes its own full-width line below the brand. */
  .search-wrap { flex: 1 0 100%; order: 5; }
  .filters-btn { padding: 0 10px; gap: 0; }
  .filters-label, .filters-btn .chev { display: none; }
  .filters-icon { display: block; }

  .user-greeting { display: none; }   /* keep just the logout icon */
  /* Theme + sign-in sit at the RIGHT end of the brand's line. The brand takes
     the slack so they're pushed over rather than crowding the wordmark; search
     stays order:5 so it still drops to its own line underneath them. */
  .brand { margin-right: auto; }
  .theme-wrap, .user-nav, .dev-role-switcher, .preview-login-link {
    flex: 0 0 auto; order: 4;
  }
  .topbar-primary .theme-menu {
    right: -8px; left: auto; min-width: 0;
    width: calc(100vw - 28px); max-width: 260px;
  }

  /* The "try:" suggestion chips share a line with the Browse-tags toggle on
     desktop; at this width that line has no room left, and a clipped-to-zero
     chip row is just an invisible gap. Hide them outright -- the landing hero
     still offers the same suggestions, and the design's phone screen puts
     filter chips here rather than these. */
  .search-chips { display: none; }

  /* ---- bottom tab bar ----
     Two columns because there are two real destinations. When Fun zone / My
     shelf land, this number is the only thing that changes. */
  .tabbar {
    display: grid; grid-template-columns: repeat(2, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--topbar-bg); backdrop-filter: blur(14px);
    border-top: var(--bw) solid var(--border);
    padding: 8px 6px calc(10px + env(safe-area-inset-bottom));
  }
  .tabbar-btn {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    background: none; border: none; cursor: pointer; padding: 2px 0;
    color: var(--muted); font-family: var(--mono-font); font-size: 9px;
    letter-spacing: 0.1em; text-transform: uppercase;
  }
  .tabbar-btn.is-active { color: var(--coral); }

  /* ---- floating add ---- */
  .fab-add {
    display: inline-flex; align-items: center; gap: 6px;
    position: fixed; right: 14px; z-index: 31;
    bottom: calc(74px + env(safe-area-inset-bottom));
    padding: 11px 16px; border: none; border-radius: var(--radius-pill);
    background: var(--coral); color: var(--ink); cursor: pointer;
    font-family: var(--mono-font); font-size: 10px;
    letter-spacing: var(--btn-ls); text-transform: var(--btn-tt);
    box-shadow: var(--shadow-pop);
  }
  /* body.is-preview .preview-hide already forces display:none (admin.css); the
     rule above would otherwise re-show it at this width. */
  body.is-preview .fab-add { display: none; }

  /* Clear the fixed tab bar so the last row of any grid isn't sitting under
     it. Applied to the views themselves rather than <body>, which is a flex
     column whose footer would otherwise inherit the gap oddly. */
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }

  /* ---- moderator sheet ---- */
  .sheet-backdrop {
    display: block; position: fixed; inset: 0; z-index: 40;
    background: color-mix(in srgb, var(--ink) 62%, transparent);
  }
  .sheet-backdrop.hidden, .mod-sheet.hidden { display: none; }
  .mod-sheet {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 41;
    background: var(--surface); border-top: var(--bw) solid var(--border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 10px 10px calc(22px + env(safe-area-inset-bottom));
    box-shadow: var(--shadow-pop);
    max-height: 72vh; overflow-y: auto;
  }
  .mod-sheet-grab {
    width: 44px; height: 4px; border-radius: 99px;
    background: var(--border); margin: 2px auto 12px;
  }
  .mod-sheet-body { display: grid; gap: 2px; }
  /* The rows are the REAL .util-btn / .admin-item elements, moved in by
     nav-mobile.js -- so they keep their handlers and their tier gating. Give
     them a full-width 44px touch-target row shape while they're in here. */
  /* body-scoped so this outweighs admin.css's `body.is-trusted .trusted-only
     { display: revert !important }` (0,2,1). Two !important declarations tie
     on origin, so the CASCADE falls through to specificity -- a plain
     `.mod-sheet-body .util-btn` (0,2,0) loses, and #peopleBtn rendered as a
     block, centering its label while every other row started at the left. */
  body .mod-sheet-body .util-btn,
  body .mod-sheet-body .admin-item,
  body .mod-sheet-body .admin-wrap > .util-btn {
    display: flex !important; align-items: center;
    justify-content: flex-start !important;
    width: 100%; min-height: 44px; padding: 11px 14px; gap: 11px;
    border-color: transparent; background: none;
    font-family: inherit; font-size: 15px;
    letter-spacing: 0; text-transform: none; color: var(--text);
  }
  /* .util-btn centers its icon+label as a pill on desktop; in a sheet row the
     label has to start at the same x as every other row's. */
  .mod-sheet-body .util-btn .util-btn-label { flex: 1; text-align: left; }
  .mod-sheet-body .util-btn svg { width: 17px; height: 17px; }
  .mod-sheet-body .util-btn .util-btn-label { display: inline; }
  .mod-sheet-body .util-btn:hover,
  .mod-sheet-body .admin-item:hover { background: var(--surface-2); }
  /* Add photos keeps its accent fill but as a full-width row, not a pill.
     Must come AFTER the generic row rule above (which sets background:none)
     and match its specificity, or the fill is reset away. */
  body .mod-sheet-body .util-btn-lead {
    margin-left: 0; background: var(--coral); color: var(--ink);
    border-color: var(--coral);
  }
  /* The admin submenu can't be a popover inside a scrolling sheet -- let it
     sit inline under its trigger. */
  .mod-sheet-body .admin-wrap { width: 100%; }
  .mod-sheet-body .admin-menu {
    position: static; margin: 2px 0 4px; box-shadow: none;
    background: var(--surface-2); width: 100%;
  }
  /* The badge pins to a bordered pill on desktop; in a flat row it reads
     better inline at the trailing edge. */
  .mod-sheet-body .auto-badge {
    position: static; margin-left: auto;
  }
}