/* © 2026 Amir Abdel Baki. All rights reserved. Coursework helper page. Uses the site's theme variables from sd-page.css. */
body.cw { --cw-warn: color-mix(in srgb, #C0392B 72%, var(--ink)); --cw-ok: color-mix(in srgb, #2E7D4F 70%, var(--ink)); }
body.cw .wrap { max-width: 980px; }
body.cw main { padding-bottom: 72px; }
.cw-skip { position: absolute; left: -9999px; top: 8px; background: var(--accent); color: var(--on-accent); padding: 6px 12px; z-index: 60; }
.cw-skip:focus { left: 12px; }
.cw-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cw-disclaimer { font-size: .98rem; }
body.cw h1 { margin-bottom: 10px; }
body.cw h3 { color: var(--accent); font-size: 1.12rem; margin: 22px 0 6px; font-weight: 600; }
body.cw :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* component picker */
.cw-picker { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 10px 24px; margin: 22px 0 6px; }
.cw-group-h { margin: 0 0 6px; color: var(--muted); font-variant: small-caps; letter-spacing: .08em; font-size: .95rem; }
.cw-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cw-chip { font: inherit; font-size: .95rem; border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 999px; padding: 4px 14px; cursor: pointer; min-height: 36px; }
.cw-chip:hover { border-color: var(--accent); }
.cw-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.cw-chip .cw-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); margin-left: 7px; vertical-align: middle; }

/* component area */
.cw-area { margin-top: 18px; outline: none; }
.cw-area > h2 { margin-top: 10px; }
.cw-guide { color: var(--muted); margin: 0 0 12px; font-size: .98rem; }
.cw-projbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; background: var(--wash); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; margin: 10px 0 14px; }
.cw-projbar label { display: flex; flex-direction: column; font-size: .88rem; color: var(--muted); gap: 2px; min-width: 0; }
.cw-projbar .cw-field { min-width: 0; width: 220px; max-width: 100%; }
.cw-save { margin-left: auto; color: var(--muted); font-size: .88rem; align-self: center; }

/* tabs */
.cw-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: thin; margin-bottom: 16px; }
.cw-tab { font: inherit; font-size: 1rem; background: none; border: 0; border-bottom: 3px solid transparent; color: var(--muted); padding: 8px 12px 6px; cursor: pointer; white-space: nowrap; min-height: 40px; }
.cw-tab:hover { color: var(--ink); }
.cw-tab[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.cw-panel { min-height: 200px; }

/* shared bits */
.cw-card { background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 16px 18px; margin: 12px 0; }
.cw-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 18px; margin: 0; }
.cw-facts dt { font-weight: 600; color: var(--gold-text); }
.cw-facts dd { margin: 0; }
.cw-muted { color: var(--muted); }
.cw-small { font-size: .9rem; }
.cw-btn { font: inherit; font-size: .98rem; background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent); border-radius: 3px; padding: 7px 16px; cursor: pointer; min-height: 40px; }
.cw-btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.cw-btn.ghost { background: transparent; color: var(--accent); border-color: var(--line); }
.cw-btn.ghost:hover { border-color: var(--accent); background: var(--wash); }
.cw-btn.danger { color: var(--cw-warn); }
.cw-btn[disabled] { opacity: .5; cursor: not-allowed; }
.cw-btn.small { font-size: .9rem; padding: 4px 10px; min-height: 34px; }
.cw-field { font: inherit; font-size: 1rem; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: 6px 9px; min-height: 40px; max-width: 100%; }
.cw-field:focus { border-color: var(--accent); }
select.cw-field { padding-right: 6px; }
textarea.cw-field { width: 100%; resize: vertical; line-height: 1.55; }
.cw-label { display: block; font-weight: 600; margin: 14px 0 4px; }
.cw-hint { display: block; font-weight: 400; color: var(--muted); font-size: .9rem; }
.cw-row { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.cw-row > label { flex: 1 1 200px; min-width: 0; }
.cw-row .cw-field { width: 100%; }
.cw-empty { text-align: center; padding: 28px 18px; }
.cw-empty p { margin: 0 0 12px; }

/* requirements */
.cw-crit { list-style: none; padding: 0; margin: 8px 0; border-top: 1px solid var(--line); }
.cw-crit li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; padding: 10px 0; border-bottom: 1px solid var(--line); margin: 0; }
.cw-crit .cw-cn { font-weight: 600; }
.cw-crit .cw-cm { color: var(--gold-text); font-weight: 600; white-space: nowrap; font-variant-numeric: lining-nums; }
.cw-crit .cw-cd { grid-column: 1 / -1; color: var(--ink); }
.cw-crit li.cw-total { font-weight: 600; border-bottom: 0; }
.cw-q { font-style: italic; }

/* planner */
.cw-next { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.cw-ms { list-style: none; padding: 0; margin: 10px 0; }
.cw-ms li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 6px 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); margin: 6px 0; }
.cw-ms li.is-done { opacity: .72; }
.cw-ms li.is-done .cw-ms-label { text-decoration: line-through; }
.cw-ms li.is-over { border-color: var(--cw-warn); box-shadow: inset 4px 0 0 var(--cw-warn); }
.cw-ms li.is-next { border-color: var(--accent); box-shadow: inset 4px 0 0 var(--accent); }
.cw-ms input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--accent); margin: 0; }
.cw-ms .cw-ms-label { width: 100%; border-color: transparent; background: transparent; }
.cw-ms .cw-ms-label:hover, .cw-ms .cw-ms-label:focus { border-color: var(--line); background: var(--paper); }
.cw-ms .cw-ms-date { width: 160px; }
.cw-ms .cw-ms-meta { grid-column: 2 / -1; font-size: .88rem; color: var(--muted); margin-top: -4px; }
.cw-badge { display: inline-block; font-size: .8rem; font-variant: small-caps; letter-spacing: .06em; border: 1px solid currentColor; border-radius: 999px; padding: 0 8px; margin-right: 6px; }
.cw-badge.over { color: var(--cw-warn); }
.cw-badge.next { color: var(--accent); }
.cw-badge.done { color: var(--cw-ok); }
.cw-x { font: inherit; background: none; border: 1px solid transparent; color: var(--muted); border-radius: 3px; width: 36px; height: 36px; cursor: pointer; font-size: 1.1rem; }
.cw-x:hover { color: var(--cw-warn); border-color: var(--line); }

/* draft */
.cw-parts { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 4px; }
.cw-draft { min-height: 48vh; font-size: 1.02rem; }
.cw-count { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 8px 0 2px; font-variant-numeric: lining-nums tabular-nums; }
.cw-count strong { font-size: 1.05rem; }
.cw-bar { flex: 1 1 160px; height: 8px; background: var(--wash); border: 1px solid var(--line); border-radius: 99px; overflow: hidden; min-width: 120px; }
.cw-bar span { display: block; height: 100%; background: var(--gold); width: 0; transition: width .2s; }
.cw-bar.near span { background: var(--accent); }
.cw-bar.over span { background: var(--cw-warn); }
.cw-status { color: var(--muted); font-size: .92rem; }
.cw-status.over { color: var(--cw-warn); font-weight: 600; }
.cw-checks { list-style: none; padding: 0; margin: 6px 0; }
.cw-checks li { margin: 4px 0; padding-left: 1.6em; text-indent: -1.6em; }
.cw-checks .ok::before { content: "✓ "; color: var(--cw-ok); font-weight: 700; }
.cw-checks .warn::before { content: "! "; color: var(--cw-warn); font-weight: 700; }
.cw-checks .todo::before { content: "○ "; color: var(--muted); }
details.cw-more { margin: 12px 0; background: var(--wash); border-radius: 4px; padding: 8px 12px; }
details.cw-more summary { cursor: pointer; font-weight: 600; color: var(--accent); }
details.cw-more p { margin: 8px 0 4px; }
.cw-docs { list-style: none; padding: 0; margin: 6px 0; }
.cw-docs li { display: grid; grid-template-columns: minmax(0, 1fr) 160px auto; gap: 6px; margin: 6px 0; }
.cw-docs .cw-field { width: 100%; }

/* feedback */
.cw-fb { border-left: 3px solid var(--gold); }
.cw-fb h3 { margin-top: 0; }
.cw-fb ul { margin: 6px 0 10px; }
.cw-ack { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; }
.cw-ack input { width: 22px; height: 22px; margin-top: 3px; flex: none; accent-color: var(--accent); }
.cw-radio { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0; }
.cw-radio input { margin-top: 6px; accent-color: var(--accent); }
.cw-msg { margin: 10px 0 0; font-weight: 600; }
.cw-msg:empty { display: none; }
.cw-msg.warn { color: var(--cw-warn); }
.cw-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* self-check */
.cw-sc { border: 1px solid var(--line); border-radius: 6px; background: var(--paper); padding: 10px 16px 12px; margin: 12px 0; min-width: 0; }
.cw-sc legend { font-weight: 600; color: var(--accent); padding: 0 6px; }
.cw-sc .cw-sc-d { margin: 0 0 6px; color: var(--muted); font-size: .95rem; }
.cw-sc label { display: flex; gap: 10px; align-items: flex-start; margin: 6px 0; cursor: pointer; }
.cw-sc input { width: 20px; height: 20px; margin-top: 4px; flex: none; accent-color: var(--accent); }
.cw-sc .cw-sc-n { float: right; font-size: .88rem; color: var(--muted); font-weight: 400; }

/* guidance */
.cw-guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cw-guide-grid .cw-card { margin: 0; }
.cw-guide-grid h3 { margin-top: 0; }
.cw-guide-grid ul { margin: 0; }

.cw-sources { margin-top: 36px; font-size: .92rem; color: var(--muted); }
.cw-sources summary { cursor: pointer; color: var(--accent); }
.cw-sources a { word-break: break-word; }

@media (max-width: 720px) {
  .cw-picker { grid-template-columns: minmax(0, 1fr); }
  .cw-guide-grid { grid-template-columns: minmax(0, 1fr); }
  .cw-facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cw-facts dd { margin-bottom: 8px; }
  .cw-ms li { grid-template-columns: auto minmax(0, 1fr) auto; }
  .cw-ms .cw-ms-date { grid-column: 2 / 3; width: 100%; }
  .cw-ms .cw-x { grid-column: 3; grid-row: 1; }
  .cw-docs li { grid-template-columns: minmax(0, 1fr) auto; }
  .cw-docs li .cw-doc-date { grid-column: 1; }
  .cw-docs li .cw-x { grid-column: 2; grid-row: 1; }
  .cw-save { margin-left: 0; width: 100%; }
  .cw-card { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) { .cw-bar span { transition: none; } }
.cw-chip[aria-pressed="true"] .cw-muted { color: inherit; opacity: .85; }
@media (max-width: 430px) { .cw-tab { font-size: .9rem; padding: 8px 6px 6px; } .cw-tabs { gap: 0; } }