/*
 * Additive mobile fix for the /app topbar.
 *
 * THE BUG
 *   #topbar is a nowrap flex row with three children, but .tb-center is
 *   position:absolute and centred with a translate. Being out of flow, flexbox
 *   reserves NO space for it, so it simply draws on top of whatever is beside
 *   it once the bar gets narrow. Measured at 541px wide:
 *
 *     .tb-left    x=12  w=112   (brand)
 *     .tb-center  x=185 w=160   (Upload, Crop)   <- absolute, ends at 345
 *     .tb-right   x=293 w=225   (Recipes, Export, menu)
 *
 *   .tb-center ends at 345 and .tb-right starts at 293: a 52px overlap, which
 *   is why "Crop" and "Recipes" print on top of each other. Solving for the
 *   general case, they collide whenever the bar is narrower than ~634px.
 *   Nothing wraps or scrolls out of the way because the row is nowrap and the
 *   offending element is not in the flow at all.
 *
 * THE FIX
 *   Below the collision width, put .tb-center back in the flow. Once it is a
 *   real flex item the row can lay all three clusters out side by side and an
 *   overlap becomes impossible by construction, rather than being avoided by
 *   hand-tuned widths that break again at the next size.
 *
 *   Recipes is then dropped on phones. With Upload, Crop, Export and the menu
 *   all competing, it is the one action that already lives inside the menu, so
 *   it costs nothing to hide and buys the others room to breathe.
 *
 * Additive only: no existing rule is removed, and desktop is untouched.
 */

@media (max-width: 768px) {
  /* Rejoin the flow. This single change is what removes the overlap. */
  #topbar .tb-center {
    position: static;
    transform: none;
    flex: 0 1 auto;
    min-width: 0;
    /* Sit with Export, not with the logo. Once .tb-center is a real flex item
       the auto margin absorbs all the free space to its left, pushing Upload
       and Crop across to butt against .tb-right. The actions then read as one
       group on the right, and the brand keeps the left to itself. */
    margin-left: auto;
  }

  #topbar {
    gap: 6px;
    padding-left: 10px;
    padding-right: 10px;
    /* space-between fights the auto margin below. The margin resolves first
       and absorbs most of the free space, then space-between redistributes
       what is left into an equal gap on the OTHER side, so the actions ended
       up floating mid-row instead of grouped with Export. flex-start hands
       placement entirely to the auto margin. */
    justify-content: flex-start;
  }

  /* The brand may shrink; the actions may not. */
  #topbar .tb-left {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
  }
  #topbar .tb-right {
    flex: 0 0 auto;
    min-width: auto;
    /* .tb-right carries its own margin-left:auto. Two auto margins SHARE the
       free space equally, which is why the actions kept landing mid-row with
       an identical gap on each side (measured 141px / 141px at 640px) even
       after justify-content stopped competing. Zeroing this one leaves a
       single auto margin -- on .tb-center -- so all the slack pools to its
       left and Upload/Crop sit hard against Export. */
    margin-left: 0;
  }

  /* Already reachable from the menu, so it is the cheapest thing to drop. */
  #topbar #recipe-share-btn {
    display: none;
  }

  /* Keep the remaining controls tappable rather than merely narrow:
     44px is the minimum comfortable touch target. */
  #topbar .btn,
  #topbar #menu-btn {
    min-height: 40px;
  }
  #topbar #btn-upload {
    padding-left: 10px;
    padding-right: 10px;
  }

  /* Crop goes icon-only. Its label is a BARE TEXT NODE ("<svg/>Crop"), not an
     element, so there is nothing to select and hide. font-size:0 collapses the
     text node instead; the SVG carries explicit width/height attributes so it
     is unaffected. The word stays in the DOM, so screen readers still announce
     "Crop" -- it is visually hidden, not removed. */
  #topbar #btn-crop-top {
    font-size: 0;
    width: 40px;
    padding: 0;
    justify-content: center;
    gap: 0;
  }
  #topbar #btn-crop-top svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
  }
}

/* The whole wordmark stays readable on phones. Cropping it to the sparkle
   mark saved room but cost the brand, so it is scaled down proportionally
   instead: height drives it, width follows, nothing is cut off.
   At 18px tall the 236px-wide asset lands near 101px, which together with an
   icon-only Crop leaves the row comfortably inside a 390px viewport. */
@media (max-width: 768px) {
  #topbar .tb-brand-logo {
    height: 18px;
    width: auto;
    max-width: none;
    object-fit: contain;
  }
}

/*
 * The backgrounds.supply credit, on phones.
 *
 * .bg-attribution-static is absolutely positioned so it can sit quietly under
 * the canvas on desktop. Being out of flow, it reserves no space, so on a
 * narrow screen the Inspire / Restyle buttons lay out straight over the top of
 * it and the two render on top of each other.
 *
 * Hidden below the same breakpoint as the topbar fix. The attribution is not
 * lost: the toast variant (.bg-attribution-toast) still credits the source
 * when a background is applied, and the credit remains in the DOM and in the
 * footer, so nothing about the attribution obligation changes -- only this one
 * always-on overlay stops competing for space it never claimed.
 */
@media (max-width: 768px) {
  #bg-attribution-static,
  .bg-attribution-static {
    display: none !important;
  }
}