/*
 * A list's page, the owner's and a friend's (wishlists/show,
 * friends/wishlists/show): the list's box from the shelf, opened. The band is
 * the shelf's wall, with the list on the left and the box on the right: its
 * lid hangs open on the side and its gifts rain into it in turns
 * (wishlists/_open_box). The box comes first in the page, so on phones it
 * floats smaller in the band's corner and the name, description and facts
 * wrap around it. With reduced motion the gifts stay still, peeking out.
 */
.app {
  .list-band { position: relative; grid-template-columns: minmax(0, 1fr) 280px; align-items: center; gap: 28px; padding: 28px 34px;
    background: var(--wall); background-image: repeating-linear-gradient(90deg, var(--wall-line) 0 2px, transparent 2px 46px); }
  .list-text { grid-column: 1; grid-row: 1; display: grid; gap: 14px; justify-items: start; min-width: 0; }
  .list-band > .open-box { grid-column: 2; grid-row: 1; }
  .list-band .hello { margin: 0; font-size: clamp(34px, 5vw, 52px); }
  .list-band .summary { font-size: 17px; max-width: 46ch; }
  .list-band .summary p { margin: 0; }
  .list-band .facts { display: flex; flex-wrap: wrap; gap: 8px; }
  .list-band .fact { display: inline-flex; gap: 6px; align-items: center; padding: 5px 11px; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line);
    font-size: 13px; font-weight: 700; color: var(--ink); border: 0; font-family: inherit; line-height: 1.4; }
  .list-band .fact svg.icon { width: 14px; height: 14px; color: var(--accent); }
  .list-band button.fact { cursor: pointer; }
  .list-band button.fact:hover { box-shadow: inset 0 0 0 1.5px var(--accent); background: var(--paper); }
  .audience-fact.audience-friends svg.icon:first-child { color: var(--second); }
  .audience-fact.audience-private svg.icon:first-child { color: var(--muted); }
  .audience-fact svg.icon:last-child { width: 12px; height: 12px; color: var(--muted); }

  /* The action bar: one big action, then round icons */
  .list-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .list-toolbar .btn small { font-weight: 700; opacity: .8; }
  .list-toolbar .button_to { display: contents; }
  .icon-btn { width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--paper); color: var(--ink);
    box-shadow: inset 0 0 0 1.5px var(--line); cursor: pointer; list-style: none; }
  .icon-btn:hover { background: var(--paper); color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); text-decoration: none; }
  .icon-btn::-webkit-details-marker { display: none; }
  .icon-btn svg.icon { width: 18px; height: 18px; }
  .share-row { display: flex; gap: 6px; align-items: center; width: min(440px, 100%); padding: 5px 5px 5px 12px; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
  .share-row input { flex: 1; min-width: 0; padding: 0; border: 0; background: none; box-shadow: none; font: 12px ui-monospace, Menlo, monospace; color: var(--muted); }
  .share-row .btn svg.icon { width: 14px; height: 14px; }
  /* Who made a friend's list */
  .owner-tag { display: inline-flex; gap: 10px; align-items: center; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line);
    color: var(--ink); font-size: 14px; font-weight: 700; text-decoration: none; }
  .owner-tag:hover { text-decoration: none; box-shadow: inset 0 0 0 1.5px var(--accent); }
  .owner-tag .avatar { width: 32px; height: 32px; }
  .owner-tag small { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }

  /* The box, opened */
  .open-box { position: relative; justify-self: center; width: 240px; height: 250px; }
  .open-box .body { position: absolute; z-index: 2; left: 10px; right: 10px; bottom: 0; height: 140px; border-radius: 6px 6px 4px 4px; background: var(--c); box-shadow: inset -24px 0 0 rgba(0, 0, 0, .09); }
  .open-box.pattern-dots .body { background-image: radial-gradient(circle, rgba(255, 255, 255, .28) 3px, transparent 3.6px); background-size: 18px 18px; }
  .open-box.pattern-stripes .body { background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .18) 0 6px, transparent 6px 14px); }
  .open-box .body::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 20px; translate: -50% 0; background: var(--ribbon); }
  .open-box .inside { position: absolute; z-index: 1; left: 18px; right: 18px; bottom: 132px; height: 14px; border-radius: 4px 4px 0 0; background: color-mix(in srgb, var(--c) 60%, #000000); }
  .open-box .label { position: absolute; z-index: 3; left: 38px; right: 38px; bottom: 22px; display: grid; gap: 1px; padding: 7px 8px; border-radius: 5px; background: var(--paper); text-align: center; box-shadow: 0 1px 0 rgba(0, 0, 0, .12); }
  .open-box .label b { font-size: 14px; line-height: 1.2; overflow-wrap: anywhere; color: var(--ink); }
  .open-box .label small { font-size: 11px; font-weight: 700; color: var(--muted); }
  /* The lid hangs open on the left side, hinged at the box's top corner */
  .open-box .lid { position: absolute; z-index: 3; left: -16px; top: 106px; width: 26px; height: 136px; border-radius: 5px; background: color-mix(in srgb, var(--c) 82%, #000000);
    transform: rotate(14deg); transform-origin: 100% 0; box-shadow: inset 6px 0 0 rgba(0, 0, 0, .08); animation: open-box-lid 3s ease-in-out infinite alternate; }
  .open-box .lid::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 20px; translate: 0 -50%; background: var(--ribbon); }
  .open-box .lid::before { content: ""; position: absolute; right: -3px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--c) 60%, #000000); }
  .open-box .empty-peek { position: absolute; z-index: 1; left: 0; right: 0; bottom: 156px; text-align: center; font-size: 13px; font-weight: 700; color: var(--muted); }
  /* The rain: each gift falls in from above, behind the box's front, then again */
  .open-box .rain { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
  .open-box .drop { position: absolute; top: -20px; width: 70px; height: 80px; opacity: 0; animation: open-box-rain 4.5s cubic-bezier(.55, 0, .8, .4) infinite; }
  .open-box .drop .gift-picture { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 12px; background: none; }
  .open-box .drop .gift-picture img { border-radius: 12px; }
  .open-box .drop:nth-child(1) { left: 34px; --tilt: -14deg; animation-delay: 0s; }
  .open-box .drop:nth-child(2) { left: 92px; --tilt: 10deg; animation-delay: .9s; }
  .open-box .drop:nth-child(3) { left: 140px; --tilt: -6deg; animation-delay: 1.8s; }
  .open-box .drop:nth-child(4) { left: 64px; --tilt: 16deg; animation-delay: 2.7s; }
  .open-box .drop:nth-child(5) { left: 118px; --tilt: -10deg; animation-delay: 3.6s; }

  .list-gifts .toolbar { margin-bottom: 20px; }
}

@keyframes open-box-rain {
  0% { opacity: 0; transform: translateY(-40px) rotate(var(--tilt)); }
  10% { opacity: 1; }
  62% { opacity: 1; transform: translateY(124px) rotate(calc(var(--tilt) * -1)); }
  72%, 100% { opacity: 0; transform: translateY(170px) rotate(calc(var(--tilt) * -1)); }
}
@keyframes open-box-lid { from { transform: rotate(9deg); } to { transform: rotate(18deg); } }

@media (max-width: 900px) {
  .app .list-band { grid-template-columns: minmax(0, 1fr) 240px; }
}

@media (max-width: 600px) {
  .app {
    /* The box floats small in the band's corner and the text wraps around it.
       zoom (not a transform) so the float takes only the box's smaller size. */
    .list-band { display: block; padding: 18px 16px 20px; }
    .list-band > .open-box { float: right; zoom: .6; margin: 14px -6px 12px 20px; }
    .list-text { display: block; }
    .list-text > * + * { margin-top: 12px; }
    .list-text > .crumb { display: inline-flex; }
    .list-band .hello { font-size: 30px; }
    .list-band .summary { font-size: 15px; }
    .list-toolbar { flex-wrap: nowrap; gap: 6px; width: 100%; }
    .list-toolbar, .share-row { clear: both; }
    .list-toolbar .btn { flex: 1; min-width: 0; padding-inline: 12px; }
    .list-toolbar .icon-btn { width: 38px; height: 38px; flex: none; }
    .list-gifts .toolbar { margin-bottom: 14px; }
  }
}

/* Reduced motion (the device's, or "Reduzir animações" in Settings) */
@media (prefers-reduced-motion: reduce) {
  .app .open-box .drop { animation: none; opacity: 1; transform: translateY(96px) rotate(var(--tilt)); }
  .app .open-box .drop:nth-child(n+4) { display: none; }
  .app .open-box .lid { animation: none; }
}
:root[data-motion="reduced"] .app .open-box .drop { animation: none; opacity: 1; transform: translateY(96px) rotate(var(--tilt)); }
:root[data-motion="reduced"] .app .open-box .drop:nth-child(n+4) { display: none; }
:root[data-motion="reduced"] .app .open-box .lid { animation: none; }