.prepare-class-button {
  border-color: #d69a1f !important;
  background: #fff7dd !important;
  color: #6c4a00 !important;
}

.prepare-class-button:hover {
  border-color: var(--gold) !important;
  background: var(--gold) !important;
  color: var(--navy) !important;
}

.prepare-class-button.is-ready {
  border-color: #4fa88d !important;
  background: #e3f4ed !important;
  color: #075d49 !important;
}

.command-actions .prepare-class-button {
  border-color: var(--gold) !important;
  background: transparent !important;
  color: var(--gold) !important;
}

.command-actions .prepare-class-button.is-ready {
  border-color: #73d6bd !important;
  background: #173f38 !important;
  color: #9ce9d5 !important;
}

.prep-session-context {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(220px, 1fr);
  gap: 1px;
  padding: 0;
  border-top: 5px solid var(--gold);
  background: var(--line);
}

.prep-session-context > div {
  display: grid;
  gap: 4px;
  padding: 17px 19px;
  background: #f8faf9;
}

.prep-session-context strong {
  font-size: 18px;
}

.prep-session-context span,
.prep-session-context small {
  color: var(--muted);
}

.prep-session-context > div:last-child span {
  color: var(--teal);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.prep-builder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 18px;
  align-items: center;
  padding: 16px 18px;
  border-left: 5px solid var(--teal);
  background: #e8f3f1;
}

.prep-builder strong,
.prep-builder span {
  display: block;
}

.prep-builder > div:first-child span,
#prep-builder-status {
  color: var(--muted);
  font-size: 12px;
}

.prep-builder > div:nth-child(2) {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.prep-builder button {
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--teal);
  background: #fff;
  color: var(--teal);
  font-weight: 850;
}

.prep-builder button:first-child {
  background: var(--teal);
  color: #fff;
}

#prep-builder-status {
  grid-column: 1 / -1;
}

.prep-heading {
  border-left-color: var(--gold);
  background: #fff7df;
}

dialog:has(.prep-session-context) {
  width: min(980px, calc(100vw - 28px));
}

.fields:has(.prep-session-context) {
  max-height: 68vh;
  overflow: auto;
}

.session-date-card {
  display: grid;
  gap: 12px;
  padding: 15px;
  border: 1px solid var(--line);
  background: var(--studio-raised, #fff);
}

.session-date-card.plan-ready {
  border-top: 4px solid var(--gold);
}

.session-date-card.notes-ready {
  background: var(--studio-mint-bg, #f3faf7);
}

.session-date-card > div:first-child span,
.session-date-card > div:first-child small {
  display: block;
}

.session-date-card > div:first-child span {
  color: var(--studio-text, var(--navy));
  font-size: 15px;
  line-height: 1.35;
  font-weight: 900;
}

.session-date-card > div:first-child small {
  margin-top: 3px;
  color: var(--studio-muted, var(--muted));
  font-size: 13px;
  line-height: 1.45;
}

.session-date-card > div:last-child {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.session-date-card button {
  min-height: 40px;
  padding: 8px;
  border: 1px solid var(--line);
  background: var(--studio-panel, #fff);
  color: var(--studio-text, var(--navy));
  font-weight: 800;
}

@media (max-width: 620px) {
  .prep-session-context,
  .prep-builder {
    grid-template-columns: 1fr;
  }

  .prep-builder > div:nth-child(2),
  .prep-builder button {
    width: 100%;
  }
}