/* ---------- phone-width topbar overrides ----------
   Deliberately placed at the end of the file: several rules here (brand
   size, .search-chips, .user-greeting) override earlier unconditional rules
   of equal specificity (e.g. .brand-star, .brand-mark), and CSS resolves
   equal-specificity ties by source order, not by whether a media query
   matches. Putting them here guarantees they win regardless of where their
   unconditional counterparts are defined elsewhere in the file. */
@media (max-width: 480px) {
  .topbar { gap: 8px; padding: 10px 12px 14px; flex-wrap: nowrap; }
  /* icon-only logo (no wordmark) so the brand cluster takes minimal width --
     search is the dominant element in the row and gets whatever width is
     left over (.search-wrap is already flex:1 in the base rules). The star
     is still the home tap target. */
  .brand { flex: 0 0 auto; }
  .brand-star { width: 30px; height: 30px; }
  [data-theme="shoko"] .brand-critter { width: 30px; height: 30px; }
  .brand-text { display: none; }
  .search-chips { display: none; } /* would overflow under a squeezed bar */
  /* Filters collapses to icon-only (funnel glyph), dropping its text label
     and the chevron, so search keeps the width. */
  .filters-btn { padding: 0 8px; gap: 0; }
  .filters-label, .filters-btn .chev { display: none; }
  .filters-icon { display: block; }
  /* Browse and Add photos drop their text label for a compact icon button,
     matching People/Review's circular treatment -- .nav-more-icon-label is
     visually hidden but stays for screen readers. */
  .nav-more-icon { display: block; }
  .nav-more-icon-label {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }
  #topBrowseBtn, #addBtn {
    width: 38px; height: 38px; padding: 0; border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
  }
  .user-greeting { display: none; } /* keep just the logout icon visible */

  /* ---- row grouping inside the open panel: People+Theme+Add photos on one
     row, Review+Admin on the next, dev-role pinned to the bottom. Every tile
     (People/Theme/Add/Review/Admin) renders as the same small icon-only
     square, matching People/Review's existing circular-icon size rather than
     stretching to fill its grid column. ---- */
  .nav-more-shell.open .nav-more-wrap {
    display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; align-items: flex-start;
  }
  #peopleBtn { order: 1; }
  .theme-wrap { order: 2; }
  #addBtn { order: 3; }
  #reviewBtn { order: 4; }
  .admin-wrap { order: 5; }
  #devRoleSwitcher { order: 9; width: 100%; }

  /* One consistent tile look for all five controls (People/Theme/Add/Review/
     Admin): light surface fill, no border, coral on hover AND while its
     submenu/accordion is open (aria-expanded="true" or .nav-accordion-open)
     -- overrides each control's own base style (.btn-icon's --surface fill +
     border, .btn-ghost's transparent + border, Theme/Admin's borderless
     transparent) so none of them look like a different, "stuck" state. */
  #peopleBtn, #addBtn, #reviewBtn, .theme-wrap, .admin-wrap {
    width: 56px; height: 56px; border-radius: 12px; flex: 0 0 auto;
  }
  /* the panel itself is --surface-2, so tiles need a visibly lighter fill
     to actually read as a button rather than blending into the panel bg */
  #peopleBtn, #reviewBtn, #addBtn, .theme-btn, #adminBtn {
    background: color-mix(in srgb, var(--text) 8%, var(--surface-2)); border: none; color: var(--lavender);
  }
  /* :hover scoped to real-hover devices (a mouse/trackpad) via
     (hover: hover) -- touch devices have no real "hover", so browsers fake
     it after a tap and typically only clear it on the NEXT tap elsewhere,
     which made the coral color look stuck after collapsing the accordion.
     Phones never match (hover: hover), so they only ever get the
     aria-expanded/nav-accordion-open coloring below, which app.js clears
     immediately and reliably on close. */
  @media (hover: hover) {
    #peopleBtn:hover, #reviewBtn:hover, #addBtn:hover, .theme-btn:hover, #adminBtn:hover {
      color: var(--coral); background: color-mix(in srgb, var(--coral) 16%, var(--surface-2));
    }
  }
  #peopleBtn[aria-expanded="true"], #reviewBtn[aria-expanded="true"],
  .theme-btn[aria-expanded="true"], #adminBtn[aria-expanded="true"],
  .theme-wrap.nav-accordion-open .theme-btn, .admin-wrap.nav-accordion-open #adminBtn {
    color: var(--coral); background: color-mix(in srgb, var(--coral) 16%, var(--surface-2));
  }
  #peopleBtn svg, #reviewBtn svg, .theme-btn svg, #adminBtn svg, #addBtn svg {
    width: 24px; height: 24px;
  }
  .theme-wrap, .admin-wrap { display: block; } /* plain block -- the trigger button fills it, no menu nested visually inside anymore (see .nav-accordion-panel) */
  .theme-btn, #adminBtn {
    width: 100%; height: 100%; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    padding: 0;
  }
  /* icon-only to match People/Review -- the trigger's text label is dropped
     visually (title/aria-label cover accessibility); the accordion panel
     below states what's what once expanded. */
  .theme-btn::after, #adminBtn::after { display: none; }
  /* Theme/Admin tiles stay fixed small icon buttons at all times -- they
     never resize or move. When expanded, app.js temporarily relocates the
     .theme-menu/.admin-menu element itself (see app.js) to be a direct child
     of .nav-more-wrap, immediately after the icon row, tagged
     .nav-accordion-panel -- as a plain flex sibling with width:100% it wraps
     onto its own full-width line directly below without disturbing the tile
     row at all. Moved back on close/collapse. */
  .nav-accordion-panel {
    /* order:6 (after the highest tile order:5) so it always sorts below the
       whole icon row regardless of which tile it belongs to or DOM position
       from being appendChild'd -- flex's default order:0 would otherwise
       sort it BEFORE every tile, since they all have explicit order 1-5. */
    order: 6; width: 100%; flex: 1 1 100%; position: static !important; margin: 0; box-shadow: none; min-width: 0;
  }
}