/*
 * The homepage: the app's own tokens, used louder. Big type, room to breathe,
 * and a demo built from the same rows as the app, a touch more compact.
 */
@layer pages {
  .home-body {
    display: grid;
    grid-template-rows: auto 1fr;
    background:
      radial-gradient(60vw 50vw at 88% 58%, var(--leaf-soft), transparent 70%),
      radial-gradient(40vw 34vw at 62% 6%, var(--peach-soft), transparent 70%),
      var(--cream);
    background-attachment: fixed;
  }

  .home-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    width: 100%;
    max-width: 1480px;
    margin-inline: auto;
    padding: var(--space-5) var(--space-7) 0;
  }
  .home-bar .wordmark { font-size: var(--text-xl); }
  .home-bar .wordmark img { width: 40px; }
  .home-bar__actions { display: flex; align-items: center; gap: var(--space-2); }
  .home-bar__login {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch);
    padding-inline: var(--space-4);
    border-radius: var(--radius-pill);
    color: var(--ink);
    font-weight: 800;
    text-decoration: none;
  }
  .home-bar__login:hover { background: var(--surface); }

  .home {
    display: grid;
    grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
    align-items: center;
    gap: clamp(var(--space-6), 3.5vw, 4rem);
    width: 100%;
    max-width: 1480px;
    margin-inline: auto;
    padding: var(--space-6) var(--space-7) var(--space-7);
  }

  /* Hero copy */
  .home__headline {
    font-size: clamp(3rem, 4.9vw, 5.25rem);
    font-weight: 800;
    line-height: 0.98;
    letter-spacing: -0.035em;
  }
  .home__headline em { display: block; color: var(--leaf); font-style: normal; }

  .home__lede {
    max-width: 30rem;
    margin-top: var(--space-5);
    color: var(--muted);
    font-size: clamp(var(--text-md), 1.45vw, var(--text-lg));
    line-height: 1.5;
  }

  .home__cta {
    min-height: 60px;
    margin-top: var(--space-6);
    padding-inline: var(--space-6);
    font-size: var(--text-lg);
    box-shadow: var(--shadow-float);
  }

  .home__invite {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    margin-top: var(--space-6);
    color: var(--muted);
    font-weight: 700;
  }
  .home__invite-pill {
    display: inline-flex;
    align-items: center;
    min-height: 52px;
    padding-inline: var(--space-5);
    border: 2px solid var(--line-strong);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--leaf-strong);
    font-size: var(--text-lg);
    font-weight: 800;
  }

  .home__benefits {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
    margin-top: var(--space-6);
    padding: 0;
    list-style: none;
    font-weight: 800;
  }
  .home__benefits li { display: flex; align-items: center; gap: var(--space-2); }
  .home__benefit-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--leaf);
  }
  .home__benefit-icon svg { width: 20px; height: 20px; }
  .home__benefit-icon--leaf { background: var(--leaf-soft); }
  .home__benefit-icon--peach { background: var(--peach-soft); color: var(--danger); }
  .home__benefit-icon--sunny { background: var(--sunny-soft); color: var(--leaf-strong); }

  /* The demo window */
  .demo { position: relative; }

  .demo__window {
    position: relative;
    padding: var(--space-5) var(--space-5) var(--space-5);
    border: 1px solid var(--line);
    border-radius: 28px;
    background: color-mix(in srgb, var(--surface) 82%, var(--cream));
    box-shadow: 0 1px 0 rgb(43 42 39 / 0.04), 0 40px 80px -40px rgb(35 79 62 / 0.45), 0 12px 30px -18px rgb(43 42 39 / 0.18);
  }

  .demo__bar { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-1) var(--space-1) var(--space-4); }
  .demo__wordmark { font-size: var(--text-md); }
  .demo__wordmark img { width: 24px; }
  .demo__tabs { display: flex; gap: var(--space-1); }
  .demo__tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px var(--space-3);
    border-radius: var(--radius-pill);
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 800;
  }
  .demo__tab svg { width: 15px; height: 15px; }
  .demo__tab--current { background: var(--leaf); color: var(--cream); }

  .demo__panels {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
  }
  .demo__panel {
    padding: var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
  }
  .demo__title { font-size: var(--text-lg); }
  .demo__hint { margin-top: 2px; color: var(--muted); font-size: var(--text-sm); font-weight: 600; }

  .demo__groups { display: grid; gap: var(--space-1); margin-top: var(--space-3); padding: 0; list-style: none; }

  .demo-group {
    border: 1.5px solid transparent;
    border-radius: var(--radius-md);
    transition: background-color 240ms ease, border-color 240ms ease;
  }
  .demo-group:not(.is-selected):hover { background: var(--cream); }
  .demo-group.is-selected { border-color: var(--mint); background: var(--mint-soft); }

  .demo-group__pick {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-height: 68px;
    padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2);
    border: 0;
    border-radius: inherit;
    background: none;
    text-align: left;
  }
  .demo-group__badge {
    display: grid;
    flex: none;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--cream);
    font-size: 1.3rem;
    line-height: 1;
  }
  .demo-group.is-selected .demo-group__badge { background: var(--surface); }
  .demo-group__text { display: grid; flex: 1; min-width: 0; }
  .demo-group__name { font-size: var(--text-sm); font-weight: 800; line-height: 1.3; }
  .demo-group__items {
    overflow: hidden;
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .demo-group__count {
    flex: none;
    padding: 2px var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--cream);
    font-size: var(--text-xs);
    font-weight: 800;
  }
  .demo-group.is-selected .demo-group__count { background: var(--surface); }

  /* Only the selected group shows Add; the row opens by one line. */
  .demo-group__add { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 280ms ease; }
  .demo-group__add > div { overflow: hidden; padding-left: calc(40px + var(--space-2) + var(--space-3)); }
  .demo-group.is-selected .demo-group__add { grid-template-rows: 1fr; }
  .demo-group.is-selected .demo-group__add > div { padding-bottom: var(--space-3); }

  .demo-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 0 var(--space-4);
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--leaf);
    color: var(--cream);
    font-size: var(--text-sm);
    font-weight: 800;
    transition: background-color 140ms ease, transform 180ms var(--ease-pop), box-shadow 180ms ease;
  }
  .demo-add svg { width: 16px; height: 16px; stroke-width: 3; }
  .demo-add:hover { background: var(--leaf-strong); }
  .demo-add.is-pressed { background: var(--leaf-strong); box-shadow: 0 0 0 6px rgb(46 102 81 / 0.16); transform: scale(0.94); }

  /* The list the group fills */
  .demo-list__source {
    margin-top: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    background: var(--leaf-soft);
    color: var(--leaf-strong);
    font-size: var(--text-xs);
    font-weight: 800;
    line-height: 1.3;
    opacity: 0.35;
    transition: opacity 240ms ease;
  }
  .demo.is-added .demo-list__source { opacity: 1; }

  .demo-list {
    padding: 0 var(--space-3);
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    list-style: none;
  }
  .demo-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 48px;
  }
  .demo-item + .demo-item { border-top: 1px solid var(--line); }
  .demo-item .check__mark { flex: none; width: 22px; height: 22px; border-color: var(--line); transition: border-color 200ms ease; }
  .demo-item__name {
    font-size: var(--text-sm);
    font-weight: 700;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 160ms ease, transform 160ms ease;
  }
  /* An empty slot is a faint bar where the name will be. */
  .demo-item::after {
    content: "";
    position: absolute;
    left: calc(22px + var(--space-3));
    width: 42%;
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--line);
    opacity: 0.7;
    transition: opacity 160ms ease;
  }
  .demo-item.is-filled .check__mark { border-color: var(--field-border); transition-delay: calc(var(--i) * 90ms); }
  .demo-item.is-filled .demo-item__name {
    opacity: 1;
    transform: none;
    transition: opacity 320ms ease calc(var(--i) * 90ms), transform 320ms var(--ease-pop) calc(var(--i) * 90ms);
  }
  .demo-item.is-filled::after { opacity: 0; transition-delay: calc(var(--i) * 90ms); }

  /* The connector and the label */
  .demo__arrow {
    position: absolute;
    top: 72px;
    left: calc(59% - 44px);
    z-index: 1;
    width: 92px;
    fill: none;
    stroke: var(--leaf);
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
  }
  .demo__arrow path { stroke-dasharray: 140; stroke-dashoffset: 140; transition: stroke-dashoffset 420ms ease; }
  .demo.is-added .demo__arrow path { stroke-dashoffset: 0; }
  .demo.is-added .demo__arrow path + path { transition-delay: 300ms; }

  .demo__bubble {
    position: absolute;
    top: -52px;
    right: 3%;
    z-index: 2;
    padding: var(--space-3) var(--space-5);
    border-radius: 22px 22px 22px 6px;
    background: var(--leaf);
    color: var(--cream);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: 1.15;
    box-shadow: var(--shadow-float);
    transform: rotate(-3deg);
  }
  .demo.is-added .demo__bubble { animation: demo-bubble 520ms var(--ease-pop); }

  @keyframes demo-bubble {
    0% { transform: rotate(-3deg) scale(0.92); }
    100% { transform: rotate(-3deg) scale(1); }
  }

  /* Narrower screens: copy above the demo. */
  @media (max-width: 960px) {
    .home { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); padding-top: var(--space-6); }
    .home__hero { max-width: 36rem; }
    .demo { max-width: 680px; }
  }

  /* Phones: one column inside the demo too, with just the essentials. */
  @media (max-width: 640px) {
    .home-bar { padding: var(--space-4) var(--space-4) 0; }
    .home-bar .wordmark { font-size: var(--text-lg); }
    .home-bar .wordmark img { width: 32px; }
    .home-bar .button { padding-inline: var(--space-4); }
    .home { padding: var(--space-5) var(--space-4) var(--space-7); gap: var(--space-7); }
    .home__headline { font-size: clamp(2.6rem, 12.5vw, 3.5rem); }
    .home__cta { width: 100%; }
    .home__benefits { gap: var(--space-2) var(--space-3); font-size: var(--text-xs); }
    .home__benefits li { gap: 6px; }
    .home__benefit-icon { width: 30px; height: 30px; }
    .home__benefit-icon svg { width: 16px; height: 16px; }

    .demo__window { padding: var(--space-3); border-radius: var(--radius-lg); }
    .demo__bar { padding: var(--space-1) var(--space-1) var(--space-3); }
    .demo__tabs { display: none; }
    .demo__panels { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
    .demo__panel { padding: var(--space-3); }
    .demo__hint, .demo__arrow { display: none; }
    .demo-group__items { display: none; }
    .demo-group__pick { min-height: 52px; }
    .demo__bubble { top: -20px; right: var(--space-3); padding: var(--space-2) var(--space-4); font-size: var(--text-md); }
  }
}