/* The task card sits in the right margin outside the page's column, so it
   needs a wide screen: the column is 1080px wide, or 1200px in units 02 and 04. */
.task-card { display: none; }
@media (min-width: 1712px) {
  body:not(.lesson-frame) .task-card { --half-column: 580px; }
  body:not(.lesson-frame) .task-card.is-shown { display: block; }
}
@media (min-width: 1832px) {
  .lesson-frame .task-card { --half-column: 640px; }
  .lesson-frame .task-card.is-shown { display: block; }
}
.task-card {
  position: fixed;
  top: 96px;
  left: calc(50% + var(--half-column, 580px) + 28px);
  width: min(300px, calc(50% - var(--half-column, 580px) - 56px));
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding: 2px 0 2px 16px;
  border-left: 2px solid var(--blue, #2357a4);
  background: #fff;
  color: var(--ink, #20242b);
  font: var(--type-note)/1.55 var(--font-ui);
  z-index: 15;
}
.task-card .task-card-title {
  margin: 0 0 8px;
  color: var(--muted, #59636e);
  font-size: var(--type-label);
  font-weight: 600;
}
.task-card .task-card-list { margin: 0; }
.task-card .task-card-list > div { display: block; margin: 0 0 10px; padding: 0; border: 0; }
.task-card .task-card-list dt { margin: 0; font-size: var(--type-note); font-weight: 600; color: var(--ink, #20242b); }
.task-card .task-card-list dd { margin: 0; font-size: var(--type-note); line-height: 1.55; }
.task-card-try { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line, #dce1e6); }
.task-card-try code { display: block; overflow-wrap: anywhere; font-family: var(--font-code); font-size: var(--type-note); line-height: 1.5; }
.task-card-try a { display: inline-flex; align-items: center; min-height: 44px; }
@media print { .task-card { display: none !important; } }