/* A dated agenda and a grade ledger, within the same student workspace.
   Corners, gaps and type sizes come from the scales in tokens.css. */
.cp-planning-heading { margin: 0 0 var(--sp-24); }
.cp-planning-heading h2 { margin: 0 0 var(--sp-8); font: 700 1.35rem/1.3 var(--font-play); letter-spacing: -.015em; }
.cp-planning-heading p, .cp-planning-notice { margin: 0; color: var(--fg-muted); font-size: var(--fs-14); line-height: 1.6; }
.cp-planning-notice { margin-bottom: var(--sp-16); }
.cp-planning-empty { padding: var(--sp-48) var(--sp-24); border: 1px solid var(--border); border-radius: var(--r-card); background: var(--card); text-align: center; }
.cp-planning-empty svg { width: 44px; height: 44px; fill: none; stroke: var(--c-accent-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cp-planning-empty.is-unavailable svg { stroke: var(--c-alert); }
/* The "all done" badge, on both the Schedule and Activities tabs. The disc is
   the svg's own background, so the check is centred by the viewBox rather
   than by nudging two shapes into line. Named with both parents so it wins
   over each tab's general "svg" rule regardless of file order. */
.cp-planning-empty svg.done-badge,
.cp-empty-welcome svg.done-badge {
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--accent-soft);
  fill: none;
  stroke: var(--c-accent-ink);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cp-planning-empty h2 { margin: var(--sp-16) 0 var(--sp-8); font: 700 var(--fs-24)/1.3 var(--font-play); }
.cp-planning-empty p { max-width: 46ch; margin: 0 auto; color: var(--fg-muted); font-size: var(--fs-14); line-height: 1.7; }
.cp-schedule-day + .cp-schedule-day { margin-top: var(--sp-32); }
.cp-schedule-day-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-4) var(--sp-8); padding-bottom: var(--sp-8); border-bottom: 1px solid var(--border); }
.cp-schedule-day-heading h3 { margin: 0; font: 650 var(--fs-16)/1.4 var(--font-play); }
.cp-schedule-day-count { font-size: var(--fs-13); color: var(--fg-muted); }
.cp-schedule-day-date { margin-left: auto; color: var(--fg-muted); font-size: var(--fs-13); }
.cp-schedule-day.is-overdue .cp-schedule-day-heading h3 { color: var(--c-overdue); }
.cp-schedule-list, .cp-grade-list { list-style: none; margin: 0; padding: 0; }
.cp-schedule-list { margin-top: var(--sp-8); }
/* A row is one button, so its small side inset is the control's own (--sp-4). */
.cp-schedule-item, .cp-grade-row { width: 100%; display: grid; grid-template-columns: 40px minmax(0,1fr) minmax(95px, auto) 16px; gap: var(--sp-16); align-items: center; min-height: 94px; padding: var(--sp-16) var(--sp-4); background: transparent; color: var(--fg); text-align: left; border: 0; border-radius: var(--r-sm); font-family: var(--font-body); }
.cp-schedule-item { cursor: pointer; }
.cp-schedule-list > li + li, .cp-grade-item + .cp-grade-item { border-top: 1px solid var(--border); }
.cp-schedule-item:hover, button.cp-grade-row:hover { background: var(--surface-hover); }
.cp-schedule-item:focus-visible, .cp-grade-row:focus-visible, .cp-earlier-grades summary:focus-visible { outline: var(--ring-w) solid var(--ring); outline-offset: 3px; }
.cp-planning-emoji { display: grid; place-items: center; width: 40px; height: 44px; background: var(--bg-soft); border-radius: var(--r-sm); color: var(--c-accent-ink); }
.cp-planning-emoji svg { width: 22px; height: 22px; }
.cp-schedule-copy, .cp-grade-copy { display: grid; gap: var(--sp-4); min-width: 0; }
.cp-planning-name { font: 650 1.04rem/1.35 var(--font-play); overflow-wrap: anywhere; }
.cp-planning-meta { color: var(--fg-muted); font-size: var(--fs-13); line-height: 1.5; }
.cp-schedule-end { display: grid; justify-items: end; gap: var(--sp-8); max-width: 215px; text-align: right; }
.cp-schedule-time { font-size: var(--fs-13); line-height: 1.5; font-weight: 600; }
.cp-schedule-item.is-overdue .cp-schedule-time { color: var(--c-overdue); }
.cp-schedule-action { font-size: var(--fs-13); line-height: 1.5; color: var(--c-accent-ink); }
.cp-planning-chevron { width: 16px; height: 16px; fill: none; stroke: var(--fg-muted); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* The column labels sit over the row's columns: past the row's inset, the 40px
   icon and a gap on the left, and the 16px chevron and a gap on the right. */
.cp-grade-columns { display: flex; justify-content: space-between; padding: 0 calc(16px + var(--sp-16) + var(--sp-4)) var(--sp-8) calc(40px + var(--sp-16) + var(--sp-4)); border-bottom: 1px solid var(--border); color: var(--fg-muted); font-size: var(--fs-13); }
.cp-grade-row { padding-block: var(--sp-16); }
button.cp-grade-row { cursor: pointer; }
.cp-grade-reviewed { color: var(--fg-muted); font-size: var(--fs-13); line-height: 1.5; }
.cp-grade-score { display: grid; gap: var(--sp-4); max-width: 155px; text-align: right; }
.cp-grade-score strong { color: var(--fg); font: 700 1.5rem/1.2 var(--font-play); font-variant-numeric: tabular-nums; }
.cp-grade-score > span { color: var(--fg-muted); font-size: var(--fs-13); line-height: 1.5; }
.cp-grade-explainer { margin: var(--sp-16) 0 0; padding: var(--sp-16) 0; border-top: 1px solid var(--border); color: var(--fg-muted); font-size: var(--fs-13); line-height: 1.7; max-width: 65ch; }
.cp-earlier-grades { margin: 0 0 var(--sp-16) calc(40px + var(--sp-16) + var(--sp-4)); }
.cp-earlier-grades summary { width: fit-content; padding: var(--sp-8) 0; min-height: 44px; color: var(--c-accent-ink); cursor: pointer; font-size: var(--fs-13); }
.cp-earlier-grades ul { list-style: none; padding: 0; margin: 0; }
.cp-earlier-grades li { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--sp-8) var(--sp-16); padding: var(--sp-16) 0; border-top: 1px solid var(--border); font-size: var(--fs-13); line-height: 1.6; }
.cp-earlier-grades li > span { overflow-wrap: anywhere; }
.cp-earlier-grades li > p { grid-column: 1/-1; margin: 0; color: var(--fg-muted); }
.cp-grade-back { display: inline-flex; align-items: center; gap: var(--sp-8); min-height: 44px; margin: -.5rem 0 var(--sp-8); padding: var(--sp-8) var(--sp-4); border: 0; background: transparent; color: var(--c-accent-ink); font: 600 var(--fs-14) var(--font-body); cursor: pointer; }
.cp-grade-back svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cp-grade-back:focus-visible { outline: var(--ring-w) solid var(--ring); outline-offset: 3px; border-radius: var(--r-xs); }
.cp-grade-detail-label { margin: 0 0 var(--sp-4); color: var(--fg-muted); font-size: var(--fs-13); }
.cp-grade-detail-head h2 { margin: 0; font: 700 1.65rem/1.3 var(--font-play); overflow-wrap: anywhere; }
.cp-grade-detail-head h2:focus { outline: none; }
.cp-grade-result { display: grid; grid-template-columns: minmax(140px,auto) minmax(0,1fr); align-items: center; gap: var(--sp-24); margin: var(--sp-16) 0 var(--sp-24); padding: var(--sp-24); border: 1px solid var(--border); border-radius: var(--r-card); background: var(--card); }
.cp-grade-result strong { display: block; font: 700 2.3rem/1.2 var(--font-play); font-variant-numeric: tabular-nums; }
.cp-grade-result span { display: block; margin-top: var(--sp-4); font-size: var(--fs-13); color: var(--fg-muted); }
.cp-grade-result p { margin: 0; font-size: var(--fs-13); line-height: 1.6; }
.cp-grade-result p + p { margin-top: var(--sp-8); color: var(--fg-muted); font-size: var(--fs-13); }
.cp-grade-breakdown { list-style: none; padding: 0; margin: 0; }
.cp-grade-breakdown > li { padding: var(--sp-24) 0; border-top: 1px solid var(--border); }
.cp-grade-question-head { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--sp-16); align-items: start; }
.cp-grade-question-head h3 { margin: 0; font: 650 1.05rem/1.5 var(--font-play); overflow-wrap: anywhere; }
.cp-grade-question-number { margin: 0 0 var(--sp-4); font-size: var(--fs-13); color: var(--fg-muted); }
.cp-grade-question-score { text-align: right; max-width: 115px; }
.cp-grade-question-score strong { display: block; font: 650 var(--fs-18)/1.5 var(--font-play); white-space: nowrap; }
.cp-grade-question-score span { display: block; font-size: var(--fs-13); line-height: 1.5; color: var(--fg-muted); }
.cp-grade-feedback-label { margin: var(--sp-16) 0 var(--sp-8); color: var(--fg-muted); font-size: var(--fs-13); }
.cp-grade-comment { margin: 0; padding-left: var(--sp-16); border-left: 3px solid var(--c-teal); font-size: var(--fs-14); line-height: 1.7; overflow-wrap: anywhere; }
.cp-grade-pending { margin: var(--sp-16) 0 0; font-size: var(--fs-13); line-height: 1.6; color: var(--fg-muted); }
.cp-grade-response { margin-top: var(--sp-8); font-size: var(--fs-13); line-height: 1.7; }
.cp-grade-response button { min-height: 44px; padding: var(--sp-8) 0; background: transparent; border: 0; color: var(--c-accent-ink); font: 600 var(--fs-13)/1.6 var(--font-body); text-align: left; cursor: pointer; }
.cp-grade-response button svg { display: inline-block; vertical-align: middle; width: 14px; height: 14px; margin-right: var(--sp-8); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cp-grade-response button[aria-expanded="true"] svg { transform: rotate(90deg); }
.cp-grade-response p { margin: var(--sp-8) 0; color: var(--fg-muted); overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .cp-planning-heading { margin-bottom: var(--sp-16); }
  .cp-planning-heading h2 { font-size: 1.2rem; }
  .cp-planning-heading p { font-size: var(--fs-13); }
  .cp-schedule-item { grid-template-columns: 36px minmax(0,1fr) 14px; gap: var(--sp-4) var(--sp-8); padding: var(--sp-16) 0; }
  .cp-planning-emoji { width: 36px; height: 40px; }
  .cp-planning-emoji svg { width: 20px; height: 20px; }
  .cp-schedule-item .cp-planning-emoji { grid-row: 1/3; align-self: start; }
  .cp-schedule-item .cp-planning-chevron { grid-column: 3; grid-row: 1/3; }
  .cp-schedule-end { grid-column: 2; justify-items: start; text-align: left; gap: var(--sp-4); max-width: none; margin-top: var(--sp-4); }
  .cp-schedule-time { font-size: var(--fs-13); }
  .cp-schedule-day-date { margin-left: 0; flex-basis: 100%; }
  .cp-grade-row { grid-template-columns: 36px minmax(0,1fr) 90px 12px; gap: var(--sp-8); padding-block: var(--sp-16); }
  .cp-grade-row .cp-planning-name { font-size: var(--fs-16); }
  .cp-grade-row .cp-planning-meta, .cp-grade-reviewed { font-size: var(--fs-13); }
  .cp-grade-score strong { font-size: 1.3rem; }
  .cp-grade-score > span { font-size: var(--fs-13); }
  /* The same alignment with the phone's narrower columns: 36px icon, 12px chevron. */
  .cp-grade-columns { padding-left: calc(36px + var(--sp-8) + var(--sp-4)); padding-right: calc(12px + var(--sp-8) + var(--sp-4)); font-size: var(--fs-13); }
  .cp-earlier-grades { margin-left: calc(36px + var(--sp-8) + var(--sp-4)); }
  .cp-grade-result { grid-template-columns: minmax(0,1fr); gap: var(--sp-16); padding: var(--sp-16); }
  .cp-grade-detail-head h2 { font-size: 1.4rem; }
  .cp-grade-question-head { gap: var(--sp-8); }
  .cp-grade-question-head h3 { font-size: var(--fs-16); }
  .cp-grade-question-score { max-width: 85px; }
}