/*
 * The signed-in home (home/show), whose greeting band and gift-tag cards
 * the profile and Settings share (.account-band, account.css): a tinted greeting band (a page may give
 * it its own colours with --band-bg and --band-line) with a hello that
 * comes in word by word and a card beside it (a gift tag with a drawn box),
 * then the lists and friends' news in a wide column and notifications,
 * groups or the friend code in a narrow one. With several cards in the band
 * they take turns (carousel_controller.js), turning over like the friend code
 * card does when a code is made. On phones (under 600px) everything is one
 * column in order of urgency, the actions are a row of tiles, and the lists
 * are rows.
 */
.app {
  /* The home is wider than the other pages. */
  .shell:has(> .page.home) { grid-template-columns: minmax(0, 1200px); }
  .page.home { gap: 36px; }

  /* Greeting band */
  :is(.home-greeting, .account-band) { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 36px; align-items: center; padding: 40px 36px;
    border-radius: var(--radius); background: var(--band-bg, color-mix(in srgb, var(--accent) 7%, var(--paper))); border: 1px solid var(--band-line, var(--line)); }
  @media (max-width: 900px) { :is(.home-greeting, .account-band) { grid-template-columns: 1fr; padding: 28px 20px; gap: 26px; } }
  :is(.home-greeting, .account-band) .kicker { display: inline-block; font-size: 13px; font-weight: 600; color: var(--muted); padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); }
  :is(.home-greeting, .account-band) .hello { font-size: clamp(38px, 5vw, 60px); font-weight: 600; line-height: 1.05; letter-spacing: -.02em; margin: 18px 0 16px; overflow-wrap: anywhere; }
  :is(.home-greeting, .account-band) .summary { font-size: 18px; line-height: 1.6; color: var(--muted); max-width: 50ch; }
  :is(.home-greeting, .account-band) .summary b { color: var(--ink); }
  :is(.home-greeting, .account-band) .quick { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
  :is(.home-greeting, .account-band) .quick .btn { padding: 10px 16px; font-size: 15px; }

  /* The cards in the band and in the side column: a gift tag with a hole and
     a drawn box in its corner. */
  .tag-card { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; display: grid; gap: 16px; align-content: start; min-width: 0; }
  .tag-card::before { content: ""; position: absolute; top: 28px; left: 26px; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line); background: var(--bg); }
  /* At least as tall as the box in the corner, so nothing below runs under it */
  .tag-card .head { padding-right: 104px; display: grid; gap: 8px; min-width: 0; min-height: 76px; align-content: start; }
  .tag-card .eyebrow { padding-left: 22px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); line-height: 1.4; }
  .tag-card .head h2 { font-size: 30px; line-height: 1.15; overflow-wrap: anywhere; }
  .tag-card h2 a { color: var(--ink); }
  .tag-card .where { color: var(--muted); font-size: 15px; line-height: 1.5; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
  .tag-card .facts { font-size: 14px; color: var(--muted); }
  .tag-card .facts b { color: var(--ink); }
  .tag-box { position: absolute; top: 16px; right: 16px; width: 92px; height: 92px; border-radius: var(--radius-sm); animation: home-drop 1s cubic-bezier(.3, 1.4, .5, 1) .3s both; }
  .tag-box .gift-drawing { width: 86%; }
  .inline-form { display: flex !important; flex-wrap: wrap; gap: 8px; }
  .inline-form input { flex: 1 1 180px; width: auto; }

  /* The band's cards: stacked in one cell so the band keeps the tallest
     card's height; the active one turns in. Each bar fills over 8 s. */
  .deck-cards { display: grid; perspective: 1400px; }
  .deck .slide { grid-area: 1 / 1; display: grid; visibility: hidden; }
  .deck .slide.active { visibility: visible; }
  /* data-slide is set on the first change, so the first card doesn't turn on load. */
  .deck[data-slide] .slide.active { animation: home-turn .7s cubic-bezier(.2, .8, .2, 1); }
  /* Every card fills the deck's height (the tallest card's) and keeps its
     buttons (.actions) at the bottom, so short cards don't leave them halfway. */
  .deck .slide > .tag-card { display: flex; flex-direction: column; }
  .deck .tag-card > .actions { margin-top: auto; }
  .tag-card > div.actions:not(.btn-row) { display: grid; gap: 12px; justify-items: start; }
  .deck-controls { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
  .deck .bars { display: flex; gap: 6px; flex: 1; }
  .deck .bar { flex: 1; height: 6px; padding: 0; border: 0; border-radius: 3px; background: color-mix(in srgb, var(--ink) 13%, transparent); position: relative; overflow: hidden; cursor: pointer; box-shadow: none; }
  .deck .bar::before { content: ""; position: absolute; inset: -10px 0; }
  .deck .bar .fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--accent); border-radius: 3px; }
  /* The bar is the card's timer (carousel_controller.js turns the card when it ends): --deck-time, kept by motion.css too */
  .deck { --deck-time: 8s; }
  .deck .bar[aria-current="true"] .fill { animation: home-fill var(--deck-time) linear forwards; }
  /* Paused too while "Ver quem você tirou" is open, so the card stays. */
  .deck.paused .bar .fill, .deck:has(:focus-visible) .bar .fill, .deck:has(details[open]) .bar .fill { animation-play-state: paused; }
  @media (hover: hover) { .deck:hover .bar .fill { animation-play-state: paused; } }
  .deck .round { width: 32px; height: 32px; padding: 0; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink); }
  .deck .round:hover { box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--accent); }
  .deck .round svg { width: 12px; height: 12px; fill: currentColor; }
  .deck .round .play, .deck.paused .round .pause { display: none; }
  .deck.paused .round .play { display: block; }
  .avatar.mini { width: 22px; height: 22px; font-size: 11px; }

  /* Secret friend card: a countdown, and who you drew behind a button (the
     box's lid lifts when it opens). */
  .count-down { display: flex; gap: 10px; }
  .count-down .digit { background: var(--soft-bg); border-radius: var(--radius-sm); padding: 10px 12px 8px; text-align: center; min-width: 66px; }
  .count-down .digit b { display: block; font-family: var(--serif); font-variation-settings: var(--axes); font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; }
  .count-down .digit span { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); font-weight: 600; }
  .draw-reveal-home > summary { list-style: none; cursor: pointer; justify-self: start; }
  .draw-reveal-home > summary::-webkit-details-marker { display: none; }
  .draw-reveal-home:not([open]) .when-open, .draw-reveal-home[open] .when-closed { display: none; }
  .draw-reveal-home .pair { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; margin-top: 12px; padding: 12px 14px; border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--accent) 10%, transparent); animation: home-rise .5s cubic-bezier(.2, .8, .2, 1); }
  .draw-reveal-home .pair > div { display: grid; gap: 2px; flex: 1 1 150px; min-width: 0; }
  .draw-reveal-home .pair b { overflow-wrap: anywhere; }
  .draw-card:has(.draw-reveal-home[open]) .tag-box svg { transform: translateY(-6px) rotate(-6deg); transition: transform .5s cubic-bezier(.3, 1.4, .5, 1); }
  .draw-card .my-list { justify-self: start; }

  /* Birthday cards: confetti drifting over the open box. Each piece's place
     comes from its position here (no inline styles under the CSP). */
  .birthday-card .confetti { position: absolute; top: 8px; right: 10px; width: 120px; height: 110px; pointer-events: none; }
  .birthday-card .confetti i { position: absolute; width: 7px; height: 11px; border-radius: 2px; background: var(--ribbon);
    animation: home-confetti 2.4s ease-in-out infinite alternate; }
  .birthday-card .confetti i:nth-child(3n) { background: var(--second); }
  .birthday-card .confetti i:nth-child(3n+1) { background: var(--accent); }
  .birthday-card .confetti i:nth-child(1) { left: 4px; top: 30px; rotate: 20deg; }
  .birthday-card .confetti i:nth-child(2) { left: 20px; top: 4px; rotate: -30deg; animation-delay: .2s; }
  .birthday-card .confetti i:nth-child(3) { left: 36px; top: 52px; rotate: 50deg; animation-delay: .4s; }
  .birthday-card .confetti i:nth-child(4) { left: 52px; top: 14px; rotate: 10deg; animation-delay: .6s; }
  .birthday-card .confetti i:nth-child(5) { left: 68px; top: 0; rotate: -60deg; animation-delay: .8s; }
  .birthday-card .confetti i:nth-child(6) { left: 84px; top: 44px; rotate: 35deg; animation-delay: 1s; }
  .birthday-card .confetti i:nth-child(7) { left: 100px; top: 10px; rotate: -15deg; animation-delay: 1.2s; }
  .birthday-card .confetti i:nth-child(8) { left: 112px; top: 62px; rotate: 70deg; animation-delay: 1.4s; }
  .birthday-card .confetti i:nth-child(9) { left: 8px; top: 74px; rotate: -45deg; animation-delay: 1.6s; }
  ul.birthday-list li { padding: 8px 0; gap: 10px; flex-wrap: nowrap; }
  ul.birthday-list .name { flex: 1 1 auto; font-weight: 700; color: var(--ink); }
  ul.birthday-list .when { white-space: nowrap; }
  ul.birthday-list li.past { opacity: .6; }

  /* Friends' news */
  .home-news { gap: 16px; }
  ul.news { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; }
  ul.news a { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: center; padding: 14px; border-radius: var(--radius-sm); background: var(--paper); border: 1px solid var(--line); color: var(--ink); }
  ul.news a:hover { text-decoration: none; border-color: var(--accent); }
  ul.news .text { display: grid; gap: 2px; min-width: 0; }
  ul.news b { overflow-wrap: anywhere; line-height: 1.35; }

  /* Lists */
  .home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
  /* One column: both columns' sections in one list, most urgent first. */
  @media (max-width: 1000px) {
    .home-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .home-grid > .home-main, .home-grid > .home-side { display: contents; }
    .first-steps { order: 0; } .home-notifications { order: 1; } .home-lists { order: 2; } .friend-code-frame { order: 3; } .home-news { order: 4; } .home-groups { order: 5; }
  }
  .home-main, .home-side { display: grid; gap: 24px; min-width: 0; align-content: start; }
  .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  .page.home .section-head h2 { font-size: 24px; }
  .section-head a { font-weight: 600; font-size: 14px; }
  .home-lists { gap: 18px; }
  .home-lists .list-card { animation: home-rise .6s cubic-bezier(.2, .8, .2, 1) both; }
  .home-lists .list-card:nth-child(2) { animation-delay: .06s; }
  .home-lists .list-card:nth-child(3) { animation-delay: .12s; }
  .home-lists .list-card:nth-child(n+4) { animation-delay: .18s; }
  .new-list-card a { display: grid; place-content: center; justify-items: center; gap: 8px; height: 100%; min-height: 180px; border: 1.5px dashed var(--line); border-radius: var(--radius);
    color: var(--muted); font-weight: 600; }
  .new-list-card a:hover { text-decoration: none; color: var(--accent); border-color: var(--accent); }
  .new-list-card .plus { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--soft-bg); color: var(--accent); transition: transform .4s cubic-bezier(.3, 1.4, .5, 1); }
  .new-list-card a:hover .plus { transform: rotate(90deg); }

  /* First steps */
  .first-steps { gap: 16px; }
  .page.home .first-steps h2 { font-size: 24px; }
  .steps { list-style: none; padding: 0 !important; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  @media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }
  .step { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: grid; gap: 8px; align-content: start; }
  .step .num { color: var(--accent); font-weight: 600; }
  .step h3 { font-size: 18px; }
  .step h3 a { color: var(--ink); }

  /* Side column */
  .home-side .card { gap: 16px; }
  .home-side .title-row h2 { display: inline-flex; align-items: center; gap: 8px; }
  .friend-code-frame { display: block; perspective: 1400px; }
  .friend-code-card .bottom { display: grid; gap: 10px; justify-items: center; margin-top: 8px; }
  .friend-code-card .friend-code-value { justify-self: stretch; text-align: center; font-size: 26px; }
  .friend-code-card.back { animation: home-turn .8s cubic-bezier(.2, .8, .2, 1) both; }
  .home-side .tag-card { padding: 24px 22px 22px; }
  .home-side .tag-card .head { padding-right: 66px; }
  .home-side .tag-card .head h2 { font-size: 24px; }
  .home-side .tag-box { width: 58px; height: 58px; }

  /* Coming in */
  :is(.home-greeting, .account-band) .rise { animation: home-rise .8s cubic-bezier(.2, .8, .2, 1) both; }
  :is(.home-greeting, .account-band) .summary.rise { animation-delay: .35s; }
  :is(.home-greeting, .account-band) .quick.rise { animation-delay: .5s; }
  :is(.home-greeting, .account-band) .now.rise { animation-delay: .2s; }
  :is(.home-greeting, .account-band) .hello .w { display: inline-block; animation: home-word .8s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--d) * 90ms + 80ms); }

  @media (prefers-reduced-motion: reduce) {
    :is(.home-greeting, .account-band) .rise, :is(.home-greeting, .account-band) .hello .w, .home-lists .list-card, .tag-box, .friend-code-card.back, .deck[data-slide] .slide.active, .draw-reveal-home .pair, .birthday-card .confetti i { animation: none; }
  }
}

:root[data-theme="vinho"] .app {
  :is(.home-greeting, .account-band) { background: var(--band-bg, color-mix(in srgb, var(--fourth) 22%, var(--bg))); }
  :is(.home-greeting, .account-band) .kicker { border: 0; background: none; padding: 0; font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--accent); }
  :is(.home-greeting, .account-band) .hello { font-weight: 500; }
  .tag-card { box-shadow: 0 24px 40px -30px rgba(40, 20, 30, .55); }
  .tag-card h2 { font-weight: 500; }
}

@keyframes home-word { from { opacity: 0; transform: translateY(.45em) rotate(4deg); } }
@keyframes home-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes home-drop { 0% { opacity: 0; transform: translateY(-60px) rotate(-12deg); } 35% { opacity: 1; } }
@keyframes home-turn { from { transform: rotateY(-90deg); opacity: .4; } }
@keyframes home-fill { to { width: 100%; } }
@keyframes home-confetti { from { transform: translateY(-6px); opacity: .5; } to { transform: translateY(8px); opacity: 1; } }

/* Phones */
@media (max-width: 600px) {
  .app {
    .page.home { gap: 24px; }
    :is(.home-greeting, .account-band) { padding: 22px 16px; gap: 20px; }
    :is(.home-greeting, .account-band) .hello { font-size: 32px; margin: 12px 0 10px; }
    :is(.home-greeting, .account-band) .summary { font-size: 16px; }
    /* The actions: one row of equal tiles, icon over a short label */
    :is(.home-greeting, .account-band) .quick { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin-top: 18px; }
    :is(.home-greeting, .account-band) .quick .btn { flex-direction: column; gap: 5px; padding: 10px 6px; font-size: 13px; line-height: 1.2; white-space: normal; text-align: center; min-width: 0; }
    :is(.home-greeting, .account-band) .quick .btn svg.icon { width: 20px; height: 20px; }

    /* The cards: tighter, a smaller box, buttons across the width */
    .tag-card { padding: 20px 18px; gap: 14px; }
    .tag-card::before { top: 23px; left: 18px; }
    .tag-card .eyebrow { padding-left: 20px; font-size: 11px; }
    .tag-card .head { padding-right: 70px; min-height: 48px; }
    .tag-card .head h2 { font-size: 24px; }
    .home-side .tag-card .head { padding-right: 66px; }
    .tag-box, .home-side .tag-box { width: 58px; height: 58px; top: 14px; right: 14px; }
    .birthday-card .confetti { width: 90px; right: 4px; }
    .count-down { gap: 8px; }
    .count-down .digit { flex: 1; min-width: 0; padding: 8px 6px 6px; }
    .count-down .digit b { font-size: 24px; }
    .tag-card > div.actions:not(.btn-row) { justify-items: stretch; }
    .tag-card .btn-row > .btn, .tag-card .btn-row > .button_to { flex: 1 1 auto; }
    .tag-card .btn-row .button_to .btn { width: 100%; }
    .draw-reveal-home > summary { display: flex; }

    /* Quick add stacks; the lists become rows: a small shelf, the name and
       what's in it, a chevron */
    :is(.home-lists, .my-lists, .followed) .list-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    :is(.home-lists, .my-lists, .followed) .list-card { grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-rows: none; align-items: center; column-gap: 12px; padding: 8px 12px 8px 8px; }
    :is(.home-lists, .my-lists, .followed) .list-card::after { content: "›"; font-size: 26px; line-height: 1; color: var(--muted); }
    :is(.home-lists, .my-lists, .followed) .list-card .shelf-area { width: 64px; height: 64px; min-height: 0; padding: 8px 4px 0; border-radius: var(--radius-sm); align-items: flex-end; }
    :is(.home-lists, .my-lists, .followed) .list-card .shelf { gap: 3px; padding: 0 2px 3px; border-bottom-width: 3px; }
    .page :is(.home-lists, .my-lists, .followed) .list-card .shelf .gift-picture { width: 24px; height: 24px; border-radius: 5px; }
    .page :is(.home-lists, .my-lists, .followed) .list-card .shelf .gift-picture:nth-child(n+3), :is(.home-lists, .my-lists, .followed) .list-card .shelf .more { display: none; }
    :is(.home-lists, .my-lists, .followed) .list-card .empty-shelf { font-size: 0; padding: 0; }
    :is(.home-lists, .my-lists, .followed) .list-card .body { padding: 0; gap: 3px; }
    :is(.home-lists, .my-lists, .followed) .list-card .list-description, :is(.home-lists, .my-lists, .followed) .list-card .owner { display: none; }
    :is(.home-lists, .my-lists, .followed) .list-card .title { font-size: 17px; }
    .new-list-card a { min-height: 0; grid-auto-flow: column; padding: 12px; gap: 10px; }
    .new-list-card .plus { width: 32px; height: 32px; }
    ul.news { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    ul.news a { padding: 12px 14px; }
  }
}