/* Checklist: session cards up top, then one line per item that opens into its form. */

.sessions {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  margin: -4px 0 22px;
}
.session-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--radius-panel);
  background: var(--surface);
  border: 1px solid color-mix(in oklab, var(--rule) 70%, transparent);
  box-shadow: var(--shadow-2);
  color: var(--ink);
  text-decoration: none;
  transition:
    transform 200ms var(--ease-spring),
    box-shadow 200ms;
}
.session-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-3);
}
.ring {
  --fill: 0%;
  flex: none;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: conic-gradient(var(--good) var(--fill), var(--surface-3) 0);
}
.ring b {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface);
  font: 760 13px/1 var(--display);
  color: var(--ink);
}
.session-card.is-done .ring b {
  color: var(--good);
}
.session-text {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.session-title {
  font: 700 15.5px/1.3 var(--display);
}
.session-meta {
  font-size: 13.5px;
  color: var(--ink-3);
}

/* One line per item; the form opens in place. */
.checklist-item {
  padding: 0;
}
.checklist-item > .citem > summary {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  cursor: pointer;
  list-style: none;
}
.checklist-item > .citem > summary::-webkit-details-marker {
  display: none;
}
.checklist-item > .citem > summary .box {
  margin: 0;
}
.checklist-item > .citem > summary .bullet {
  width: 8px;
  height: 8px;
  margin-left: 8px;
  border-radius: 50%;
  background: var(--ink-3);
}
.citem-title {
  font-weight: 650;
  font-size: 16px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.citem-state {
  font-size: 13.5px;
  font-weight: 650;
  color: var(--ink-3);
  max-width: 38ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-box="done"] .citem-state {
  color: var(--good);
}
.citem[open] > summary {
  border-bottom: 1px solid var(--rule);
}
.citem[open] .citem-title {
  white-space: normal;
}
.citem > form {
  margin: 14px 16px 16px;
}
.citem::details-content {
  block-size: 0;
  overflow: clip;
  transition:
    block-size 280ms var(--ease-out),
    content-visibility 280ms allow-discrete;
}
.citem[open]::details-content {
  block-size: auto;
}
.checklist-item:hover {
  box-shadow: var(--shadow-2);
}

@media (max-width: 639px) {
  .checklist-item > .citem > summary {
    grid-template-columns: 24px minmax(0, 1fr);
  }
  .citem-state {
    grid-column: 2;
    max-width: none;
  }
}