/* A demo instance's sign-in (templates/dev/signin_demo.html), and
   nothing else: loaded by that page alone, and, like the page, only in
   a development build. It is drawn in jam.css's world and on its
   scales — the desk, white sheets lying on it with the card's ring and
   lift, strawberry for the one thing to press — so the page a visitor
   meets first already looks like the app they are about to be in.

   The people are the page. The owner and the admins stand wide, with
   the conversations on their plate listed the way the inbox lists
   them; the members stand narrower beside each other, with the newest
   of theirs. Signing in is choosing one: each stand's button is drawn
   over the whole of it. Email, the mailbox and starting over sit
   under the people on the desk itself, quieter, because they are for
   afterwards. */

.jam-demo { box-sizing: border-box; width: 100%; max-width: var(--jam-frame); margin: 0 auto; padding: var(--jam-sp-2xl) var(--jam-sp-l) var(--jam-sp-5xl); }

/* ── The team ─────────────────────────────────────────────────────── */
.jam-demo__head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--jam-sp-l) var(--jam-sp-3xl); align-items: end; margin-bottom: var(--jam-sp-2xl); }
.jam-demo__intro { max-width: 40rem; }
/* The inbox waiting, on the desk beside the name: a ledger, not a card. */
.jam-demo__waiting { font-size: var(--jam-fs-s); color: var(--rst-text-muted); padding-bottom: var(--jam-sp-3xs); }
.jam-demo__waiting > .jam-demo__count { font-size: var(--jam-fs-s); font-weight: 400; padding-bottom: var(--jam-sp-xs); border-bottom: 1px solid var(--rst-line-strong); }
.jam-demo__title { margin: 0 0 var(--jam-sp-s); font-size: var(--jam-fs-2xl); font-weight: 600; letter-spacing: var(--jam-track-tight); line-height: 1.2; text-wrap: balance; }
.jam-demo__lede { margin: 0 0 var(--jam-sp-m); font-size: var(--jam-fs-l); color: var(--rst-text-muted); text-wrap: pretty; }
.jam-demo__facts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--jam-sp-xs); margin: 0; font-size: var(--jam-fs-s); color: var(--rst-text-muted); }
.jam-demo__facts > i { color: var(--rst-text-faint); }
.jam-demo__facts strong { color: var(--rst-text); font-variant-numeric: tabular-nums; }
.jam-demo__addrs-n { display: none; }
.jam-demo__addr { padding: var(--jam-sp-3xs) var(--jam-sp-xs); border-radius: var(--rst-radius-pill); background: var(--jam-fill-soft); color: var(--rst-text); }

/* ── A person ─────────────────────────────────────────────────────── */
.jam-demo__lead, .jam-demo__members { list-style: none; margin: 0; padding: 0; display: grid; }
.jam-demo__lead { grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); gap: var(--jam-sp-l); }
.jam-demo__members { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: var(--jam-sp-m); }

.jam-demo__person {
  position: relative; display: flex; flex-direction: column; gap: var(--jam-sp-s);
  padding: var(--jam-sp-m); border-radius: var(--jam-radius-lg);
  background: var(--rst-surface); box-shadow: var(--jam-shadow-card);
  transition: box-shadow var(--jam-t-base) ease-out, transform var(--jam-t-base) ease-out;
  animation: jam-demo-rise 480ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
/* The lead's button stands at the top right, beside the name, so a
   stand with nothing on its plate is no taller than its face. */
.jam-demo__person--lead { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: var(--jam-sp-l); row-gap: var(--jam-sp-m); padding: var(--jam-sp-l); }
.jam-demo__person--lead > .jam-demo__plate { grid-column: 1 / -1; }
.jam-demo__person--lead > .jam-demo__go { grid-column: 3; grid-row: 1; align-self: start; margin: 0; }

/* The face, ringed in the colour of the role beside it in words: the
   owner strawberry, an admin blueberry, a member the sheet's own. */
.jam-demo__face.jam-av { --av: 3.5rem; font-size: var(--jam-fs-l); box-shadow: 0 0 0 3px var(--rst-surface), 0 0 0 5px var(--jam-demo-ring, transparent); }
.jam-demo__person--lead .jam-demo__face.jam-av { --av: 5rem; font-size: var(--jam-fs-xl); }
.jam-demo__person--owner { --jam-demo-ring: var(--rst-accent); }
.jam-demo__person--admin { --jam-demo-ring: var(--jam-note-mid); }

.jam-demo__who { min-width: 0; }
.jam-demo__person--lead > .jam-demo__who { align-self: center; }
.jam-demo__name { margin: 0; font-size: var(--jam-fs-l); font-weight: 600; line-height: 1.3; }
.jam-demo__person--lead .jam-demo__name { font-size: var(--jam-fs-xl); letter-spacing: var(--jam-track-tight); }
.jam-demo__job { margin: var(--jam-sp-3xs) 0 0; font-size: var(--jam-fs-s); color: var(--rst-text-muted); }
.jam-demo__role { display: flex; flex-wrap: wrap; align-items: center; gap: var(--jam-sp-xs); margin: var(--jam-sp-xs) 0 0; font-size: var(--jam-fs-xs); color: var(--rst-text-faint); }

/* What is on their plate: a count, and the conversations themselves
   under a dashed rule, as a letter's words sit under its head. */
.jam-demo__plate { margin: 0; padding-top: var(--jam-sp-s); border-top: 1px dashed var(--rst-line); font-size: var(--jam-fs-s); color: var(--rst-text-muted); min-width: 0; }
.jam-demo__count { display: flex; align-items: center; gap: var(--jam-sp-xs); margin: 0; }
.jam-demo__count { margin: 0; }
.jam-demo__count > i { color: var(--rst-text-faint); }
.jam-demo__count strong { color: var(--rst-text); font-variant-numeric: tabular-nums; }
.jam-demo__count--none { color: var(--rst-text-faint); }
.jam-demo__plate > .jam-demo__subject { margin: var(--jam-sp-2xs) 0 0; color: var(--rst-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* The lead's list is the inbox's ledger in small: who, what, when. */
.jam-demo__work { list-style: none; margin: var(--jam-sp-xs) 0 0; padding: 0; }
.jam-demo__work > li { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) auto; align-items: baseline; gap: var(--jam-sp-s); padding: var(--jam-sp-xs) 0; border-top: 1px solid var(--rst-line); }
.jam-demo__work > li:first-child { border-top: 0; }
.jam-demo__from { font-weight: 600; color: var(--rst-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jam-demo__work .jam-demo__subject { color: var(--rst-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jam-demo__when { font-size: var(--jam-fs-xs); color: var(--rst-text-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* The button, and the whole stand as its target. */
.jam-demo__go { margin: auto 0 0; display: flex; justify-content: flex-end; }
.jam-demo__go button {
  display: inline-flex; align-items: center; gap: var(--jam-sp-xs);
  padding: var(--jam-sp-xs) var(--jam-sp-m); border: 0; border-radius: var(--rst-radius-pill);
  background: var(--rst-accent-soft); color: var(--rst-accent-strong);
  font: inherit; font-size: var(--jam-fs-s); font-weight: 600; cursor: pointer;
  transition: background-color var(--jam-t-fast) ease-out, color var(--jam-t-fast) ease-out;
}
.jam-demo__go button::after { content: ""; position: absolute; inset: 0; border-radius: var(--jam-radius-lg); }
.jam-demo__go button > i { transition: transform var(--jam-t-base) ease-out; }
.jam-demo__go button:focus-visible { outline: none; }
.jam-demo__person:has(.jam-demo__go button:focus-visible) { outline: 2px solid var(--rst-accent); outline-offset: 3px; }
@media (hover: hover) {
  .jam-demo__person:not(.jam-demo__person--gone):hover { transform: translateY(-2px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--rst-accent) 35%, transparent), var(--jam-shadow-lift); }
  .jam-demo__person:hover .jam-demo__go button { background: var(--rst-accent); color: var(--rst-on-accent); }
  .jam-demo__person:hover .jam-demo__go button > i { transform: translateX(3px); }
}
.jam-demo__person:active:not(.jam-demo__person--gone) { transform: scale(0.985); }

/* Somebody a visitor removed: still on the team photo, not a door. */
.jam-demo__person--gone { background: transparent; box-shadow: none; outline: 1px dashed var(--rst-line-strong); outline-offset: -1px; color: var(--rst-text-muted); }
.jam-demo__person--gone .jam-demo__face { filter: grayscale(1); opacity: 0.6; }
.jam-demo__person--gone > .jam-demo__plate { color: var(--rst-text-faint); }

/* ── The members ──────────────────────────────────────────────────── */
.jam-demo__team { margin-top: var(--jam-sp-3xl); }
.jam-demo__h2 { margin: 0; font-size: var(--jam-fs-l); font-weight: 600; }
.jam-demo__sub { margin: var(--jam-sp-2xs) 0 var(--jam-sp-m); font-size: var(--jam-fs-s); color: var(--rst-text-muted); }

/* ── Afterwards: on the desk, under the people ───────────────────── */
.jam-demo__else { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--jam-sp-l) var(--jam-sp-xl); margin-top: var(--jam-sp-4xl); padding-top: var(--jam-sp-xl); border-top: 1px solid var(--rst-line); }
.jam-demo__aside { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: var(--jam-sp-xs) var(--jam-sp-s); margin: 0; font-size: var(--jam-fs-s); color: var(--rst-text-muted); }
.jam-demo__aside > i, .jam-demo__aside > summary > i:first-child { display: grid; place-items: center; width: var(--jam-tile-lg); height: var(--jam-tile-lg); border-radius: 50%; background: var(--jam-fill-soft); color: var(--rst-text-muted); }
.jam-demo__aside-head { display: grid; gap: var(--jam-sp-3xs); margin: 0; min-width: 0; }
.jam-demo__aside-head strong { color: var(--rst-text); font-weight: 600; }
.jam-demo__aside > button { grid-column: 2; justify-self: start; }

.jam-demo__invited { display: block; }
.jam-demo__invited > summary { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: var(--jam-sp-s); list-style: none; cursor: pointer; border-radius: var(--jam-radius-xs); }
.jam-demo__invited > summary::-webkit-details-marker { display: none; }
.jam-demo__invited > summary > .fa-chevron-down { align-self: center; color: var(--rst-text-faint); transition: transform var(--jam-t-base) ease-out; }
.jam-demo__invited[open] > summary > .fa-chevron-down { transform: rotate(180deg); }
.jam-demo__invited > summary:hover .jam-demo__aside-head strong { color: var(--rst-accent-strong); }
/* Open, the doors want the whole row and the other two go under it;
   the summary keeps its closed width, so nothing moves under the
   pointer that opened it. */
.jam-demo__invited[open] { grid-column: 1 / -1; }
.jam-demo__invited > summary { max-width: 22rem; }
.jam-demo__doors { max-width: 26rem; margin: var(--jam-sp-m) 0 0 calc(var(--jam-tile-lg) + var(--jam-sp-s)); }
.jam-demo__newcomers { list-style: none; margin: 0 0 var(--jam-sp-m); padding: 0; display: grid; gap: var(--jam-sp-xs); }
.jam-demo__newcomers > li { display: flex; align-items: center; gap: var(--jam-sp-xs); }
.jam-demo__newcomers strong { color: var(--rst-text); margin-right: var(--jam-sp-2xs); }

/* They arrive one after another, the owner first: a sheet's own rise
   (DESIGN.md's Motion), staggered so the team reads as a team. */
.jam-demo__lead > :nth-child(2) { --i: 1; }
.jam-demo__lead > :nth-child(3) { --i: 2; }
.jam-demo__lead > :nth-child(n+4) { --i: 3; }
.jam-demo__members > li { --i: 2; }
.jam-demo__members > :nth-child(2) { --i: 3; }
.jam-demo__members > :nth-child(3) { --i: 4; }
.jam-demo__members > :nth-child(4) { --i: 5; }
.jam-demo__members > :nth-child(5) { --i: 6; }
.jam-demo__members > :nth-child(n+6) { --i: 7; }
@keyframes jam-demo-rise { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  .jam-demo__person { animation: none; transition: none; }
  .jam-demo__person:hover, .jam-demo__person:active { transform: none !important; }
  .jam-demo__go button > i { transition: none; }
}

/* Too narrow for the inbox beside the name: it goes under it. */
@media (max-width: 960px) {
  .jam-demo__head { grid-template-columns: minmax(0, 1fr); }
}

/* ── A phone ──────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  /* Faces first: the inbox waiting goes under the owner and admins,
     and the addresses fold into a count. */
  .jam-demo { display: flex; flex-direction: column; padding: var(--jam-sp-l) var(--jam-sp-m) var(--jam-sp-4xl); }
  .jam-demo__head { display: contents; }
  .jam-demo__intro { margin-bottom: var(--jam-sp-l); }
  .jam-demo__lead { order: 1; }
  .jam-demo__waiting { order: 2; margin-top: var(--jam-sp-2xl); }
  .jam-demo__team { order: 3; }
  .jam-demo__else { order: 4; }
  .jam-demo__addr { display: none; }
  .jam-demo__addrs-n { display: inline; margin-left: calc(-1 * var(--jam-sp-2xs)); color: var(--rst-text); }
  .jam-demo__invited > summary { max-width: none; }
  .jam-demo__lede { font-size: var(--jam-fs-m); }
  .jam-demo__person--lead { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--jam-sp-m); padding: var(--jam-sp-m); }
  .jam-demo__person--lead > .jam-demo__go { grid-column: 1 / -1; grid-row: auto; }
  .jam-demo__person--lead .jam-demo__face.jam-av { --av: 3.5rem; }
  .jam-demo__person--lead .jam-demo__name { font-size: var(--jam-fs-l); }
  .jam-demo__work > li { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0; }
  .jam-demo__work .jam-demo__subject { grid-column: 1 / -1; grid-row: 2; }
  /* A member is a row: face, then who and what, then the button. */
  .jam-demo__members { gap: var(--jam-sp-xs); }
  .jam-demo__members > .jam-demo__person { display: grid; grid-template-columns: auto 1fr; column-gap: var(--jam-sp-s); row-gap: var(--jam-sp-xs); padding: var(--jam-sp-s) var(--jam-sp-m); }
  .jam-demo__members .jam-demo__face.jam-av { --av: 2.5rem; font-size: var(--jam-fs-s); }
  .jam-demo__members > .jam-demo__person { grid-template-columns: auto minmax(0, 1fr) auto; }
  .jam-demo__members > .jam-demo__person > .jam-demo__plate { grid-column: 2 / -1; padding-top: 0; border-top: 0; }
  .jam-demo__members > .jam-demo__person > .jam-demo__go { grid-column: 3; grid-row: 1; align-self: center; margin: 0; }
  .jam-demo__doors { margin-left: 0; }
}