/* Weekly check-in (/checkin) and its home card. Tokens from DESIGN.md only: gold on the primary button and the
   selected state alone, labels 10px uppercase muted, pills 44px, no shadows or gradients. */
.ci { max-width: 820px; display: grid; gap: 24px; padding-top: 40px; }
.ci-head { display: grid; gap: 10px; }
.ci-head .muted { max-width: 60ch; }
.ci-stage { display: grid; gap: 12px; }
.ci-card { display: grid; gap: 12px; padding: 24px; border-radius: var(--r-tile); background: var(--card); min-width: 0; }
.ci-card .title { font-size: 22px; }
.ci-actions { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.ci-caption { font: 400 clamp(20px, 3vw, 26px)/1.35 var(--font); letter-spacing: -0.015em; min-height: 2.7em; text-wrap: pretty; }
.ci-note { font-size: 14px; }
.ci-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.ci-controls:empty { display: none; }
.ci-controls .btn[aria-pressed="true"] { border-color: var(--foreground); }
.ci-answer { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.ci-answer textarea { min-height: 120px; font-size: 15px; }
.ci-answer-row { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.ci-mic-msg:empty { display: none; }
.ci-answer .err:empty { display: none; }
.ci-skip { min-height: 44px; padding: 0 4px; border: 0; background: none; cursor: pointer; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; font-size: 14px; }
.ci-skip:hover { color: var(--foreground); }
.ci-told { padding-top: 12px; border-top: 1px solid var(--border); font-size: 15px; }
.ci-writing { display: grid; gap: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.ci-summary { display: grid; gap: 12px; }
.ci-live .ci-summary { padding-top: 12px; border-top: 1px solid var(--border); }
.ci-summary .group-h { margin-bottom: 0; }
.ci-sum-text { font-size: 17px; line-height: 1.55; max-width: 64ch; }
.label[data-tone="change"] { color: var(--change); }
.err:empty { min-height: 0; }

/* loading: card-shaped blocks */
.skel.ci-skel-line { aspect-ratio: auto; height: 12px; width: 140px; border-radius: 6px; }
.skel.ci-skel-title { aspect-ratio: auto; height: 44px; width: min(420px, 80%); border-radius: 10px; }
.skel.ci-skel-card { aspect-ratio: auto; height: 220px; }
.skel.ci-skel-card.short { height: 120px; }

/* bed picker (ported from library/voices/checkin/picker.html) */
.ci-music, .ci-past { display: grid; gap: 12px; padding-top: 24px; border-top: 1px solid var(--border); }
.ci-music .group-h, .ci-past .group-h { margin-bottom: 0; }
.bed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--gap); }
.bed { display: grid; gap: 6px; align-content: start; min-width: 0; padding: 16px; border-radius: var(--r-tile); background: var(--card); cursor: pointer; outline: 1px solid transparent; outline-offset: -1px; }
.bed:hover { outline-color: var(--border); }
.bed[aria-checked="true"] { outline: 1px solid var(--foreground); }
.bed:focus-visible { outline: 2px solid var(--foreground); outline-offset: 2px; }
.bed-name { font-size: 17px; letter-spacing: -0.01em; }
.bed .muted { font-size: 14px; }
.bed-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 13px; }
.bed .btn { justify-self: start; margin-top: 6px; }
.bars { display: none; gap: 2px; align-items: end; height: 12px; }
.bars i { width: 2px; background: var(--foreground); height: 4px; }
.bed.playing .bars { display: inline-flex; }
.bed.playing .bars i { animation: ci-b .9s ease-in-out infinite; }
.bed.playing .bars i:nth-child(2) { animation-delay: .15s; }
.bed.playing .bars i:nth-child(3) { animation-delay: .3s; }
@keyframes ci-b { 50% { height: 12px; } }
@media (prefers-reduced-motion: reduce) { .bed.playing .bars i { animation: none; height: 12px; } }
.bed-foot { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* past check-ins */
.ci-past .rows li { padding: 14px 0; display: grid; gap: 6px; }
.ci-past-h { display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.ci-past-row p { font-size: 15px; max-width: 70ch; }

/* home card */
.ci-home .need .btn { white-space: nowrap; }

@media (max-width: 600px) {
  .ci { padding-top: 24px; gap: 20px; }
  .ci-card { padding: 18px 16px; }
  .bed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ci-home .need { grid-template-columns: minmax(0, 1fr); }
  .ci-home .need .btn { justify-self: start; }
}