/* =====================================================================
   KIPWICK'S CARD on home (assets/kipwick-hello.js, WO-051): Kipwick and
   the 📖 book on the left; what Kipwick says and today's pick on the
   right. And the Scout Handbook's book card at the top of COLLECT.

   Its own file so arcade.css (shared by every page, and often edited)
   stays out of it. Builds on the .kw-hello base rules in arcade.css.
   ===================================================================== */

/* While the pick is being worked out, the slot keeps the card's room,
   so nothing below it jumps when it arrives. */
.kw-hello-slot.is-loading{ display:block; min-height:150px; }

.kw-card{ align-items:flex-start; }
.kw-card__side{ flex:none; display:flex; flex-direction:column; align-items:center; gap:8px; }
.kw-card__main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:12px; }
.kw-card .kw-hello__say::before{ top:38px; }

/* 📖: icon and word, a 56px target. */
.kw-book{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0;
  min-width:64px; min-height:56px; padding:4px 6px; border-radius:14px; text-decoration:none;
  background:var(--ac-panel); color:var(--ac-edge); border:3px solid var(--ac-edge); box-shadow:0 4px 0 var(--ac-edge);
  font-weight:800; }
.kw-book__icon{ font-size:24px; line-height:1.1; }
.kw-book__word{ font-size:12px; letter-spacing:.5px; }
.kw-book:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--ac-edge); }
.kw-book:focus-visible, .kw-pick:focus-visible, .kw-bookcard:focus-visible{ outline:4px solid var(--ac-blue); outline-offset:3px; }

/* ⭐ TODAY'S PICK: one big link. */
.kw-pick{ display:flex; align-items:center; gap:12px; min-height:68px; padding:10px 12px; border-radius:18px;
  text-decoration:none; color:var(--ac-edge); background:var(--ac-yellow);
  border:3px solid var(--ac-edge); box-shadow:0 6px 0 var(--ac-edge);
  transition:transform .08s ease, box-shadow .08s ease; }
.kw-pick:active{ transform:translateY(5px); box-shadow:0 1px 0 var(--ac-edge); }
.kw-pick__pic{ flex:none; width:52px; height:52px; display:grid; place-items:center; font-size:34px;
  background:#FFF4DA; border-radius:14px; border:2px solid var(--ac-edge); }
.kw-pick__text{ display:flex; flex-direction:column; min-width:0; line-height:1.2; }
.kw-pick__kicker{ font-size:11px; font-weight:800; letter-spacing:1.2px; white-space:nowrap; }
.kw-pick__name{ font-size:19px; font-weight:800; overflow-wrap:anywhere; }
.kw-pick__where{ font-size:13px; font-weight:700; opacity:.85; }
.kw-pick__go{ margin-left:auto; flex:none; padding:6px 10px; border-radius:999px; white-space:nowrap;
  background:var(--ac-panel); border:2px solid var(--ac-edge); font-size:14px; font-weight:800; }
.kw-pick.is-done{ background:var(--ac-tint-green); }
@media (max-width:480px){
  .kw-card .kw-hello__say{ font-size:16px; padding:8px 12px; }
  .kw-card .kw-hello__kip{ width:64px; height:64px; }
  .kw-card .kw-hello__say::before{ top:30px; }
  .kw-pick{ gap:8px; padding:8px 10px; }
  .kw-pick__pic{ width:44px; height:44px; font-size:28px; }
  .kw-pick__name{ font-size:17px; }
  .kw-pick__go{ font-size:13px; padding:5px 8px; }
}

/* 📖 THE BOOK CARD, at the top of COLLECT: Kipwick pointing at the book. */
.kw-bookcard{ display:flex; align-items:center; gap:14px; max-width:640px; margin:0 auto 16px; padding:12px 16px;
  border-radius:20px; text-decoration:none; color:var(--ac-edge); text-align:left;
  background:linear-gradient(135deg, #FFF4DA, #FFE3B0); border:3px solid var(--ac-edge); box-shadow:0 6px 0 var(--ac-edge); }
.kw-bookcard:active{ transform:translateY(5px); box-shadow:0 1px 0 var(--ac-edge); }
.kw-bookcard__kip{ flex:none; width:88px; height:88px; border-radius:50%; object-fit:cover;
  background:#FFE3B0; border:3px solid var(--ac-edge); }
.kw-bookcard__text{ display:flex; flex-direction:column; gap:2px; min-width:0; line-height:1.25; }
.kw-bookcard__kicker{ font-size:11px; font-weight:800; letter-spacing:1.2px; color:#8A5A00; }
.kw-bookcard__title{ font-size:19px; font-weight:800; }
.kw-bookcard__blurb{ font-size:14px; font-weight:700; color:var(--ac-text-dim); }
.kw-bookcard__go{ margin-left:auto; flex:none; padding:8px 14px; border-radius:999px; white-space:nowrap;
  background:var(--ac-yellow); border:3px solid var(--ac-edge); font-weight:800; font-size:15px; }
@media (max-width:480px){
  .kw-bookcard{ gap:10px; padding:10px 12px; }
  .kw-bookcard__kip{ width:64px; height:64px; }
  .kw-bookcard__title{ font-size:17px; }
  .kw-bookcard__go{ display:none; }
}