/* Section 3: call cards stack on each other as the reader scrolls (sticky siblings in one
   parent), next to the owner's list of the same day: every call answered, and the rows of the
   card on top light up (garage-calls.js). Section 2 is the phone; this is the other side. */
#calls .calls-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,min(560px,50%)); gap:clamp(32px,6vw,96px); align-items:start; margin-top:clamp(28px,4vw,48px)}
#calls .stack{list-style:none; margin:0; padding:0 0 12vh; display:grid; gap:26px}
#calls .stack-card{
  position:sticky; top:calc(104px + var(--i) * 16px);
  display:grid; gap:8px; padding:clamp(22px,2.6vw,32px);
  background:#fff; border:1px solid var(--lav-200); border-radius:var(--radius);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 2px 4px rgba(30,26,51,.04),0 16px 40px -14px rgba(60,30,120,.22);
}
#calls .stack-tag{font-size:.85rem; font-weight:600; color:var(--deep); letter-spacing:.02em}
#calls .stack-card h3{margin:0; font-size:clamp(1.3rem,2vw,1.6rem)}
#calls .stack-card p{margin:0; color:var(--dim); font-size:1.05rem; line-height:1.6}
#calls .stack-card .stack-result{margin-top:6px; padding-top:12px; border-top:1px solid var(--line); color:var(--ink); font-weight:600}
#calls .stack-card .stack-result b{color:#15803D}
#calls .calls-board-wrap{position:sticky; top:96px}
.board{border-radius:18px; overflow:hidden; background:#fff; border:1px solid var(--lav-200);
  box-shadow:0 2px 4px rgba(30,26,51,.05), 0 30px 70px -24px rgba(40,24,90,.35)}
.board-bar{display:flex; align-items:center; gap:14px; padding:12px 18px; background:#f4f2f8; border-bottom:1px solid #e9e6f0}
.board-dots{display:flex; gap:6px; direction:ltr}
.board-dots i{width:10px; height:10px; border-radius:50%; background:#d9d6e2}
.board-title{font-weight:700; font-size:.95rem; color:var(--ink)}
.board-stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:16px 18px 6px}
.board-stats div{display:flex; flex-direction:column; gap:2px; padding:8px 14px; border-radius:12px; background:#f7f4ff}
.board-stats b{font-size:1.6rem; line-height:1.05; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums}
.board-stats span{font-size:.82rem; color:var(--dim)}
.board-stats div:first-child{background:#e7f6ec} .board-stats div:first-child b{color:#15803D}
.board-rows{list-style:none; margin:0; padding:8px 10px 12px; display:grid}
.board-rows li{display:grid; grid-template-columns:48px minmax(0,1fr) auto; align-items:center; gap:12px; padding:7px 10px; border-radius:10px;
  transition:opacity .3s ease-out, background-color .3s ease-out}
.board-rows time{font-size:.82rem; color:var(--dim); font-variant-numeric:tabular-nums}
/* One line per call, so the whole day fits beside the cards. */
.br-main{display:flex; align-items:baseline; gap:8px; min-width:0; white-space:nowrap; overflow:hidden}
.br-main b{font-size:.92rem; font-weight:700; color:var(--ink); flex:none}
.br-main small{font-size:.8rem; color:var(--dim); overflow:hidden; text-overflow:ellipsis}
.chip{font-size:.75rem; font-weight:700; padding:3px 10px; border-radius:999px; white-space:nowrap}
.chip-ok{background:#e7f6ec; color:#15803D}
.chip-book{background:#e8effd; color:#1d4ed8}
.chip-out{background:#fff4e5; color:#b45309}
.chip-you{background:var(--lav-100); color:var(--deep)}
/* The card on top picks its rows; the rest step back. */
.board[data-active] .board-rows li{opacity:.4}
.board[data-active="book"] li[data-kind="book"], .board[data-active="move"] li[data-kind="move"],
.board[data-active="ready"] li[data-kind="ready"], .board[data-active="faq"] li[data-kind="faq"],
.board[data-active="out"] li[data-kind="out"]{opacity:1; background:#f7f4ff}
@media (max-width:900px){
  #calls .calls-grid{grid-template-columns:1fr}
  /* Phones: the list follows the cards as the section's closing picture, not sticky. */
  #calls .calls-board-wrap{position:static; margin-top:8px}
  .board-rows li{grid-template-columns:42px minmax(0,1fr) auto; gap:8px; padding:8px 4px}
  .board-rows li:nth-child(n+7){display:none}
  .br-main{flex-direction:column; align-items:flex-start; gap:0}
  .board-stats{gap:6px; padding:12px 12px 4px}
  .board-stats div{padding:8px 10px}
  .board-stats b{font-size:1.45rem}
  #calls .stack{padding-bottom:6vh}
  #calls .stack-card{top:calc(84px + var(--i) * 12px)}
}
@media (max-height:620px){ #calls .stack-card{position:static} }
@media (prefers-reduced-motion:reduce){ #calls .stack-card{position:static} }
html.a11y-nomotion #calls .stack-card{position:static}