/*
 * Lists and gifts: the list cards ("Em cima": a shelf of gifts on a tint,
 * the name below), the owner's Minhas listas and list page (in the home's
 * pattern, the band and gift tag from home.css), and the gift grid shared by
 * the owner's list, a shared list and a friend's list.
 */
.app {
  /* A list's header */
  .list-head { display: grid; gap: 10px; }
  .list-head .title-row, .page-head .title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
  .list-head .owner { color: var(--muted); font-weight: 600; }
  .list-head .description { color: var(--muted); max-width: 70ch; }
  .chip svg.icon { width: 13px; height: 13px; }
  .chip.audience-friends { color: var(--second); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--second) 45%, transparent); }
  .chip.audience-link { color: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }

  .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
  .toolbar h2 { margin-right: auto; }
  .segmented { display: inline-flex; border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px var(--line); padding: 2px; }
  .segmented .button_to { display: inline-flex; }
  .segmented button { border: 0; box-shadow: none; background: transparent; padding: 4px 10px; border-radius: calc(var(--radius-sm) - 2px); font-size: 13px; font-weight: 600; color: var(--muted); }
  .segmented button:hover { background: var(--soft-bg); color: var(--ink); }
  .segmented button:disabled { background: var(--soft-bg); color: var(--ink); cursor: default; opacity: 1; }
  .segmented a { padding: 4px 10px; border-radius: calc(var(--radius-sm) - 2px); font-size: 13px; font-weight: 600; color: var(--muted); }
  .segmented a:hover { background: var(--soft-bg); color: var(--ink); text-decoration: none; }
  .segmented a[aria-current="true"] { background: var(--soft-bg); color: var(--ink); }

  /* The share link (the list page's "Quem vê esta lista") */
  .share-link { display: grid; gap: 6px; padding: 12px; border-radius: var(--radius-sm); background: var(--soft-bg); }
  .copy-row { display: flex; gap: 6px; }
  .copy-row input { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; }

  /* The gift grid */
  .gift-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 20px 14px; }
  @media (max-width: 560px) { .gift-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; } }
  .gift-card { display: grid; gap: 6px; align-content: start; min-width: 0; }
  .gift-card .picture { position: relative; }
  .gift-picture { aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: var(--soft-bg); }
  .gift-picture img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
  .gift-card .over { position: absolute; top: 8px; }
  .gift-card .over.edit { right: 8px; }
  .gift-card .over.handle { left: 8px; display: grid; place-items: center; padding: 4px; border-radius: var(--radius-sm); background: var(--paper); color: var(--muted); cursor: grab; }
  .gift-card .row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .gift-card .name { font-size: 15px; min-width: 0; overflow-wrap: anywhere; }
  .gift-card .priority { color: var(--ribbon); letter-spacing: 1px; white-space: nowrap; }
  /* Wraps at the card's width (long words and links too), up to three lines */
  .gift-card .description { color: var(--muted); font-size: 13px; line-height: 1.45; min-width: 0; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .gift-card .description p { margin: 0; }
  .gift-card .price { font-size: 14px; }
  .gift-card .no-price { font-size: 13px; color: var(--muted); }
  .gift-card .store { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; white-space: nowrap; }
  .gift-card .moves { display: flex; gap: 4px; }
  .gift-card.dragging { opacity: .45; }
  .gift-card.drop-target .gift-picture { box-shadow: 0 0 0 3px var(--accent); }
  .report { text-align: center; font-size: 13px; }
  .report a { color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }

  /* The list cards ("Em cima") */
  .list-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 14px; }
  .list-card { display: grid; grid-template-rows: auto 1fr; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; min-width: 0; position: relative; }
  .list-card:hover { border-color: var(--muted); }
  .list-card .shelf-area { background: color-mix(in srgb, var(--c) 10%, var(--paper)); padding: 18px 14px 0; display: flex; justify-content: center; min-height: 92px; }
  .list-card .shelf { display: flex; gap: 6px; align-items: flex-end; padding: 0 4px 5px; border-bottom: 4px solid color-mix(in srgb, var(--c) 45%, var(--line)); border-radius: 0 0 3px 3px; margin: 0; }
  .list-card .shelf .gift-picture { width: 52px; aspect-ratio: auto; height: 52px; border-radius: 8px; flex: none; }
  .list-card .shelf .gift-picture:nth-child(2) { height: 60px; }
  .list-card .shelf .gift-picture:nth-child(3) { height: 46px; }
  .list-card .shelf .gift-picture:nth-child(4) { height: 56px; }
  .list-card .shelf .gift-drawing { width: 92%; }
  .list-card .shelf .more { width: 52px; height: 52px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--muted); background: var(--soft-bg); }
  .list-card .empty-shelf { align-self: end; padding: 0 12px 10px; }
  .list-card .body { padding: 14px 16px 16px; display: grid; gap: 6px; align-content: start; }
  .list-card .title { font-family: var(--serif); font-variation-settings: var(--axes); font-size: 18px; font-weight: 600; color: var(--ink); }
  .list-card .title::after { content: ""; position: absolute; inset: 0; } /* the whole card is the link */
  .list-card .title:hover { text-decoration: none; }
  .list-card .list-description { color: var(--muted); font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
  .list-card .meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); }
  .list-card .card-actions { position: relative; z-index: 1; display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; } /* above the card link */
  .list-color-accent { --c: var(--accent); }
  .list-color-second { --c: var(--second); }
  .list-color-fifth { --c: var(--fifth); }
  .list-color-fourth { --c: var(--fourth); }
  .list-color-sixth { --c: var(--sixth); }
  .followed { display: grid; gap: 12px; }
}

:root[data-theme="vinho"] .app .list-card .title { font-weight: 500; font-size: 21px; }

/* Minhas listas and the owner's list page */
.app {
  .page.account .section-head { margin-bottom: 4px; }
  .my-lists, .followed, .list-gifts { gap: 16px; }

  /* The list cards: arrows over the shelf change the order */
  .my-lists .list-card .card-actions { position: absolute; top: 10px; right: 10px; margin: 0; opacity: 0; transition: opacity .2s; }
  .my-lists .list-card:hover .card-actions, .my-lists .list-card:focus-within .card-actions { opacity: 1; }
  .mini-btn { width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 0; background: var(--paper); box-shadow: 0 0 0 1px var(--line); display: grid; place-items: center; cursor: pointer; color: var(--ink); }
  .mini-btn:hover { color: var(--accent); box-shadow: 0 0 0 1.5px var(--accent); background: var(--paper); }
  .mini-btn svg.icon { width: 15px; height: 15px; }
  .ideas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
  .chip.idea { cursor: pointer; background: var(--soft-bg); box-shadow: none; color: var(--ink); padding: 4px 11px; font-size: 13px; }
  .chip.idea:hover { color: var(--accent); }
  .page.account .empty .tag-box { position: static; width: 96px; height: 96px; }

  /* "Mais": a small menu with deleting the list */
  .more-menu { position: relative; }
  .more-menu > summary { list-style: none; cursor: pointer; }
  .more-menu > summary::-webkit-details-marker { display: none; }
  .more-menu .panel { position: absolute; left: 0; top: calc(100% + 6px); z-index: 10; min-width: 200px; padding: 6px; border-radius: var(--radius-sm); background: var(--paper);
    box-shadow: 0 0 0 1px var(--line), 0 16px 32px -18px rgba(0, 0, 0, .45); }
  .menu-item { display: flex; gap: 8px; align-items: center; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--radius-sm); background: none; box-shadow: none; font-weight: 700; cursor: pointer; }
  .menu-item.danger { color: var(--danger); }
  .menu-item:hover { background: var(--soft-bg); }

  /* Who sees this list: three big choices; each asks in the dialog, then applies */
  .audiences { display: grid; gap: 8px; }
  .audiences .button_to, .audiences > .link-choice { display: grid; }
  .aud { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: center; width: 100%; padding: 12px; border-radius: var(--radius-sm); border: 0;
    background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line); text-align: left; font: inherit; color: var(--ink); cursor: pointer; transition: transform .3s cubic-bezier(.3, 1.4, .5, 1); }
  :is(button, label).aud:hover { transform: translateX(3px); background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--accent); }
  :is(.aud[aria-current="true"], label.aud:has(:checked)) { box-shadow: inset 0 0 0 2.5px var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--paper)); }
  .aud[aria-current="true"] { cursor: default; }
  label.aud:has(:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
  .aud-icon { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--soft-bg); }
  :is(.aud[aria-current="true"], label.aud:has(:checked)) .aud-icon { background: var(--accent); color: var(--on-accent); }
  .aud b { display: block; font-size: 15px; }
  .aud small, .switch small { display: block; font-size: 13px; color: var(--muted); font-weight: 600; line-height: 1.4; }
  .share-link .button_to { display: block; }
  .switch { display: flex; gap: 10px; align-items: flex-start; width: 100%; border: 0; background: none; box-shadow: none; padding: 4px 0 0; text-align: left; font: inherit; color: var(--ink); cursor: pointer; }
  .switch:hover { background: none; }
  .switch .track { flex: none; width: 38px; height: 22px; margin-top: 1px; border-radius: 999px; background: var(--line); position: relative; transition: background .2s; }
  .switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #FFFFFF; transition: transform .3s cubic-bezier(.3, 1.4, .5, 1); }
  :is(.switch[aria-pressed="true"], .switch:has(:checked)) .track { background: var(--accent); }
  :is(.switch[aria-pressed="true"], .switch:has(:checked)) .track::after { transform: translateX(16px); }
  .switch:has(:focus-visible) .track { outline: 2px solid var(--accent); outline-offset: 2px; }

  /* Who sees a new list (wishlists/_audience_fields): the name switch only
     while the link is chosen */
  .audience-fields { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; min-width: 0; }
  .audience-fields legend { padding: 0; margin-bottom: 8px; font-weight: 600; font-size: 14px; }
  .audience-fields:not(:has(input[value="link"]:checked)) > .switch { display: none; }

  /* Sharing by link from the list page: the question follows the switch */
  .link-dialog:has(input[name="show_owner"]:checked) .question.anonymous,
  .link-dialog:not(:has(input[name="show_owner"]:checked)) .question.named { display: none; }

  /* The gifts: a pill for the order, arrows over each picture in manual order */
  .list-gifts .toolbar h2 { font-size: 24px; }
  .list-gifts .toolbar h2 small { font-family: var(--sans); font-size: 14px; font-weight: 700; color: var(--muted); }
  .list-gifts .segmented { border-radius: 999px; box-shadow: none; background: var(--soft-bg); padding: 3px; }
  .list-gifts .segmented button { border-radius: 999px; padding: 6px 13px; }
  .list-gifts .segmented button:disabled { background: var(--paper); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
  .list-gifts .gift-card .moves { position: absolute; top: 8px; left: 8px; z-index: 1; }
  .list-gifts .gift-card { position: relative; }
  .list-gifts .gift-card .picture .gift-picture { transition: transform .45s cubic-bezier(.3, 1.4, .5, 1); }
  .list-gifts .gift-card:hover .picture .gift-picture { transform: translateY(-4px) rotate(-1.5deg); }
  .list-gifts .gift-card .over.handle { left: auto; right: 48px; }
}

@media (max-width: 600px) {
  .app {
    .more-menu .panel { left: auto; right: 0; }
    .my-lists .list-card .card-actions { position: static; opacity: 1; }
    .list-gifts .segmented { width: 100%; }
    .list-gifts .segmented .button_to { flex: 1; }
    .list-gifts .segmented button { width: 100%; }
  }
}