/* CS 347 commentary app: a schedule rail beside a manuscript surface. Lives inside the
   Minimal Mistakes course site, so it inherits the site's sans-serif and 12–14px base size. */

.cs347 {
  --ink: #1c1c1c;
  --ink-2: #5f5f5f;
  --ink-3: #8a8a8a;
  --line: #e3e3e3;
  --rail: #f6f6f5;
  --paper: #ffffff;
  --cardinal: #8c1515;
  --cardinal-deep: #6f0f0f;
  --ok: #1f7a3a;   --ok-bg: #e7f3ea;
  --late: #8a5a00; --late-bg: #fff2d6;
  --miss: #6d6d6d; --miss-bg: #ededed;
  --open: #8c1515; --open-bg: #fbeeee;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  color: var(--ink);
  line-height: 1.45;
}
.cs347 *, .cs347 *::before, .cs347 *::after { box-sizing: border-box; }
.cs347 a { color: var(--cardinal); }
.cs347 button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.cs347 button:focus-visible, .cs347 textarea:focus-visible, .cs347 summary:focus-visible, .cs347 input:focus-visible { outline: 2px solid var(--cardinal); outline-offset: 2px; }
.cs347 .cs347-btn { display: inline-block; padding: 0.5em 1em; border-radius: 4px; border: 1px solid #c9c9c9; background: var(--paper); font-weight: 600; font-size: 0.95em; line-height: 1.2; }
.cs347 .cs347-btn:hover { border-color: #9a9a9a; }
.cs347 .cs347-btn.primary { background: var(--cardinal); border-color: var(--cardinal); color: #fff; }
.cs347 .cs347-btn.primary:hover { background: var(--cardinal-deep); border-color: var(--cardinal-deep); }
.cs347 .cs347-btn:disabled { opacity: 0.45; cursor: default; }
.cs347 .linkish { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.cs347 .linkish:hover { color: var(--ink); }

/* identity line */
.cs347 .who { display: flex; justify-content: flex-end; gap: 1em; font-size: 0.85em; color: var(--ink-2); margin: 0 0 1em; }
.cs347 .who b { color: var(--ink); font-weight: 600; }

/* messages */
.cs347 .msg { padding: 0.6em 0.9em; border-radius: 4px; font-size: 0.9em; margin: 0 0 1em; border: 1px solid transparent; }
.cs347 .msg.err { background: #fdeceb; border-color: #f3b9b4; color: #7a1f14; }
.cs347 .msg.warn { background: var(--late-bg); border-color: #f0d59a; color: #5b3b00; }
.cs347 .msg.ok { background: var(--ok-bg); border-color: #b9dcc3; color: #174d29; }

/* signed-out */
.cs347 .gate { display: grid; gap: 0.6em; padding: 1.5em 1.6em; background: var(--rail); border-radius: 6px; max-width: 34em; }
.cs347 .gate p { margin: 0; }
.cs347 .gate .next { color: var(--ink-2); font-size: 0.9em; }
.cs347 .gate .cs347-btn { justify-self: start; margin-top: 0.4em; }

/* One column: the student app is a writing page. Its measure is the manuscript's. */
.cs347--student { max-width: 50em; }

/* focus strip: the lecture in focus, its readings as tabs, and the way to every other reading */
.cs347 .focus { margin: 0 0 1.4em; }
.cs347 .focus-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2em 0.7em; margin-bottom: 0.45em; font-size: 0.9em; color: var(--ink-2); }
.cs347 .focus-label { font-weight: 700; color: var(--cardinal); }
.cs347 .focus-when { color: var(--ink); }
.cs347 .focus-due { margin-left: auto; color: var(--ink-3); white-space: nowrap; }
.cs347 .tabs { display: flex; gap: 0.3em; border-bottom: 1px solid var(--line); }
.cs347 .tab { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 0.5em; padding: 0.6em 0.6em 0.55em; margin-bottom: -1px; border-bottom: 2px solid transparent; text-align: left; color: var(--ink-2); line-height: 1.25; }
.cs347 .tab:hover { color: var(--ink); background: var(--rail); }
.cs347 .tab.selected { color: var(--cardinal); border-bottom-color: var(--cardinal); font-weight: 700; }
.cs347 .tab .st { flex: none; margin-top: 0; }
.cs347 .tab-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 600px) { .cs347 .tabs { flex-direction: column; } .cs347 .tab { flex: none; } .cs347 .tab-title { white-space: normal; } }
.cs347 details.all { margin-top: 0.6em; font-size: 0.9em; }
.cs347 details.all summary { cursor: pointer; color: var(--ink-3); list-style: none; }
.cs347 details.all summary::-webkit-details-marker { display: none; }
.cs347 details.all summary::before { content: "▸ "; }
.cs347 details.all[open] summary::before { content: "▾ "; }
.cs347 details.all summary:hover { color: var(--ink); }
.cs347 .all-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(17em, 1fr)); gap: 0.4em 2em; margin-top: 0.7em; padding: 0.9em 1.1em 0.5em; background: var(--rail); border-radius: 4px; }
.cs347 .all-body h4 { margin: 0.2em 0 0.5em; font-size: 0.95em; }
.cs347 .all-body .rail-empty { color: var(--ink-3); }

/* a lecture and its readings inside "All readings" */
.cs347 .lec { border-left: 2px solid var(--line); padding: 0 0 0.9em 0.9em; margin: 0; }
.cs347 .lec.next { border-left-color: var(--cardinal); }
.cs347 .lec-when { display: flex; justify-content: space-between; gap: 0.6em; align-items: baseline; }
.cs347 .lec-date { font-weight: 700; }
.cs347 .lec-due { color: var(--ink-3); font-size: 0.85em; white-space: nowrap; }
.cs347 .lec-title { color: var(--ink-2); font-size: 0.85em; margin: 0.05em 0 0.45em; }

.cs347 .rd { display: grid; grid-template-columns: 1.4em minmax(0, 1fr); gap: 0.2em 0.35em; width: 100%; text-align: left; padding: 0.4em 0.5em 0.4em 0.35em; margin: 0 0 0.15em -0.35em; border-radius: 4px; line-height: 1.3; }
.cs347 .rd:hover { background: #fff; }
.cs347 .rd.selected { background: var(--open-bg); }
.cs347 .rd.selected .rd-title { color: var(--cardinal); font-weight: 700; }
.cs347 .rd-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cs347 .rd-auth { grid-column: 2; color: var(--ink-3); font-size: 0.85em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs347 .st { display: inline-flex; align-items: center; justify-content: center; width: 1.25em; height: 1.25em; border-radius: 50%; font-size: 0.8em; margin-top: 0.15em; }
.cs347 .st-open { border: 1.5px solid #bdbdbd; }
.cs347 .st-on_time { background: var(--ok); color: #fff; }
.cs347 .st-late { background: var(--late); color: #fff; }
.cs347 .st-missing { background: #c8c8c8; color: #fff; }

/* chips used in headers and history */
.cs347 .chip { display: inline-block; padding: 0.1em 0.55em; border-radius: 999px; font-size: 0.8em; font-weight: 600; vertical-align: middle; white-space: nowrap; }
.cs347 .chip.on_time { background: var(--ok-bg); color: var(--ok); }
.cs347 .chip.late { background: var(--late-bg); color: var(--late); }
.cs347 .chip.missing { background: var(--miss-bg); color: var(--miss); }
.cs347 .chip.open { background: var(--open-bg); color: var(--open); }

/* manuscript */
.cs347 .ms-head h3 { margin: 0 0 0.15em; font-size: 1.35em; line-height: 1.25; }
.cs347 .ms-head h3 a { color: var(--ink); text-decoration: none; }
.cs347 .ms-head h3 a:hover { color: var(--cardinal); }
.cs347 .ms-by { margin: 0; color: var(--ink-2); font-size: 0.92em; }
.cs347 .ms-status { margin: 0.4em 0 0; font-size: 0.92em; }
.cs347 .ms-sub { color: var(--ink-3); }
.cs347 .ms-prompt { margin: 1em 0; font-size: 0.92em; }
.cs347 .ms-prompt summary { cursor: pointer; color: var(--ink-2); list-style: none; }
.cs347 .ms-prompt summary::-webkit-details-marker { display: none; }
.cs347 .ms-prompt summary::before { content: "▸ "; color: var(--ink-3); }
.cs347 .ms-prompt[open] summary::before { content: "▾ "; }
.cs347 .ms-prompt .body { margin: 0.5em 0 0 1.1em; padding-left: 0.9em; border-left: 2px solid var(--line); color: var(--ink-2); }

.cs347 .ms-guide { margin: 0.8em 0 0; font-size: 0.92em; }
.cs347 .ms-guide summary { cursor: pointer; color: var(--ink-2); list-style: none; }
.cs347 .ms-guide summary::-webkit-details-marker { display: none; }
.cs347 .ms-guide summary::before { content: "▸ "; color: var(--ink-3); }
.cs347 .ms-guide[open] summary::before { content: "▾ "; }
.cs347 .ms-guide .body { margin: 0.5em 0 0 1.1em; padding: 0.6em 0.9em; background: var(--rail); border-radius: 4px; color: var(--ink); }
.cs347 .ms-guide .body p { margin: 0 0 0.5em; }
.cs347 .ms-guide .body p:last-child { margin-bottom: 0; }
.cs347 .ms-guide .body ol { margin: 0 0 0.5em 1.2em; padding: 0; }
.cs347 .ms-guide .body li { margin: 0.2em 0; }

.cs347 textarea { display: block; width: 100%; min-height: 24em; margin-top: 1em; padding: 1em 1.1em; font-family: var(--serif); font-size: 1.15em; line-height: 1.65; color: var(--ink); background: var(--paper); border: 1px solid #cfcfcf; border-radius: 4px; resize: vertical; }
.cs347 textarea::placeholder { color: #a9a9a9; font-style: italic; }
.cs347 textarea:disabled { background: #fafafa; }
.cs347 .ms-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7em; margin-top: 0.8em; }
.cs347 .ms-actions .count { color: var(--ink-3); font-size: 0.9em; margin-right: auto; }
.cs347 .ms-actions .count.over { color: var(--late); }

/* gate check: the criteria checklist shown after every submit */
.cs347 .gatepanel { margin-top: 1.2em; padding: 0.9em 1.1em; border-left: 3px solid var(--ok); background: var(--ok-bg); border-radius: 0 4px 4px 0; }
.cs347 .gatepanel.gaps { border-left-color: var(--late); background: var(--late-bg); }
.cs347 .gatepanel.skipped { border-left-color: #cfcfcf; background: var(--rail); }
.cs347 .gatepanel h4 { margin: 0 0 0.3em; font-size: 1em; }
.cs347 .gatepanel.gaps h4 { color: #5b3b00; }
.cs347 .gatepanel p { margin: 0 0 0.6em; font-size: 0.92em; }
.cs347 .gatepanel ul.crits { margin: 0 0 0.6em; padding: 0; list-style: none; font-size: 0.92em; }
.cs347 .gatepanel li.crit { display: grid; grid-template-columns: 1.4em minmax(0, 1fr); gap: 0.4em; padding: 0.3em 0; border-top: 1px solid rgba(0,0,0,0.06); }
.cs347 .gatepanel li.crit:first-child { border-top: 0; }
.cs347 .gatepanel .mark { font-weight: 700; text-align: center; }
.cs347 .gatepanel li.pass .mark { color: var(--ok); }
.cs347 .gatepanel li.fail .mark { color: var(--late); }
.cs347 .gatepanel li.pass .crit-label { color: var(--ink-2); }
.cs347 .gatepanel li.fail .crit-label { font-weight: 700; }
.cs347 .gatepanel .crit-note { display: block; margin-top: 0.1em; color: var(--ink); }
.cs347 .gatepanel .ms-actions { margin-top: 0.2em; }
.cs347 .gatepanel .fine { margin: 0.7em 0 0; color: var(--ink-3); font-size: 0.82em; }

/* empty state */
.cs347 .upnext { max-width: 34em; }
.cs347 .upnext h3 { margin: 0 0 0.2em; font-size: 1.2em; }
.cs347 .upnext p { margin: 0 0 0.8em; color: var(--ink-2); }
.cs347 .upnext .rd { margin-left: 0; padding-left: 0.5em; }
.cs347 .upnext .all-done { color: var(--ink-2); }

.cs347 .busy::after { content: ""; display: inline-block; width: 0.8em; height: 0.8em; margin-left: 0.5em; border: 2px solid rgba(255,255,255,0.5); border-top-color: #fff; border-radius: 50%; animation: cs347spin 0.8s linear infinite; vertical-align: -0.1em; }
.cs347 .cs347-btn:not(.primary).busy::after { border-color: #ddd; border-top-color: var(--cardinal); }
@keyframes cs347spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cs347 .busy::after { animation: none; } }

/* staff dashboard */
.cs347 .summary { display: flex; flex-wrap: wrap; gap: 1.2em; font-size: 0.9em; margin: 0.4em 0 0.8em; color: var(--ink-2); }
.cs347 .summary b { color: var(--ink); }
.cs347 .toolbar { display: flex; flex-wrap: wrap; gap: 0.6em; align-items: center; margin-bottom: 0.8em; }
.cs347 .toolbar input { font: inherit; padding: 0.45em 0.7em; border: 1px solid #c9c9c9; border-radius: 4px; min-width: 18em; }
.cs347 .legend { display: flex; gap: 1em; font-size: 0.82em; color: var(--ink-2); margin-left: auto; }
.cs347 .legend i { display: inline-block; width: 0.9em; height: 0.9em; border-radius: 2px; vertical-align: -0.1em; margin-right: 0.3em; }
.cs347 .matrix-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 4px; }
.cs347 table.matrix { border-collapse: collapse; font-size: 0.8em; white-space: nowrap; }
.cs347 table.matrix th, .cs347 table.matrix td { border: 1px solid #eee; padding: 0.3em 0.45em; text-align: center; }
.cs347 table.matrix th { background: var(--rail); position: sticky; top: 0; font-weight: 600; }
.cs347 table.matrix th.student, .cs347 table.matrix td.student { text-align: left; position: sticky; left: 0; background: var(--paper); }
.cs347 table.matrix th.student { background: var(--rail); z-index: 2; }
.cs347 table.matrix td.cell { cursor: pointer; }
.cs347 table.matrix td.on_time { background: var(--ok-bg); color: var(--ok); }
.cs347 table.matrix td.late { background: var(--late-bg); color: var(--late); }
.cs347 table.matrix td.missing { background: var(--miss-bg); color: var(--miss); }
.cs347 table.matrix td.open { background: var(--paper); color: #cfcfcf; }
.cs347 .viewer { border: 1px solid var(--line); border-radius: 4px; padding: 0.9em 1.1em; margin-top: 1.2em; background: var(--paper); font-size: 0.92em; }
.cs347 .viewer .vhead { display: flex; flex-wrap: wrap; gap: 0.6em; align-items: baseline; margin-bottom: 0.4em; }
.cs347 .viewer .vhead .cs347-btn { margin-left: auto; }
.cs347 .viewer .meta { color: var(--ink-2); font-size: 0.9em; }
.cs347 .viewer pre { white-space: pre-wrap; font-family: var(--serif); font-size: 1.05em; line-height: 1.6; max-width: 70ch; margin: 0.6em 0 0; }

/* ---- Commentary drawer (staff) ---------------------------------------------------------------
   The viewer opens over the page instead of below the grid, modal either way: the scrim dims the
   page and takes the clicks, so the only ways out are Close, Escape, or the scrim itself. Wide: a
   panel sliding in from the right. Narrow: a plain centred modal.
   The panel itself never scrolls; the commentary does, so the heading and Close stay put. */
.cs347-drawer { position: fixed; inset: 0; z-index: 900; }
.cs347-drawer[hidden] { display: none; }
.cs347-drawer .dscrim { position: absolute; inset: 0; background: rgba(28, 28, 28, 0.3); opacity: 0; transition: opacity 200ms ease; }
.cs347-drawer.open .dscrim { opacity: 1; }
.cs347-drawer .dpanel {
  position: absolute; top: 0; right: 0; height: 100%; width: min(34em, 92vw);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--paper); border-left: 1px solid var(--line); box-shadow: -8px 0 24px rgba(0, 0, 0, 0.1);
  transform: translateX(100%); transition: transform 200ms ease;
}
.cs347-drawer.open .dpanel { transform: none; }
/* Reuse the viewer's own type and spacing; drop the standalone card it used to be. */
.cs347-drawer .viewer { display: flex; flex-direction: column; flex: 1; min-height: 0; border: 0; border-radius: 0; margin: 0; padding: 0; }
.cs347-drawer .viewer .vhead { margin: 0; padding: 0.9em 1.2em; border-bottom: 1px solid var(--line); }
.cs347-drawer .viewer > .meta { flex: none; padding: 0.7em 1.2em 0; }
.cs347-drawer .viewer pre { flex: 1; min-height: 0; overflow-y: auto; max-width: none; margin: 0.7em 0 0; padding: 0 1.2em 1.6em; }

@media (max-width: 700px) {
  .cs347-drawer { display: flex; align-items: center; justify-content: center; padding: 1rem; }
  .cs347-drawer .dpanel {
    position: relative; top: auto; right: auto; height: auto; max-height: 85vh; width: 100%; max-width: 34em;
    border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
    transform: translateY(8px); opacity: 0; transition: transform 160ms ease, opacity 160ms ease;
  }
  .cs347-drawer.open .dpanel { transform: none; opacity: 1; }
}
body.cs347-noscroll { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .cs347-drawer .dpanel, .cs347-drawer .dscrim { transition: none; }
}

/* ---- Commentary themes (staff): rail + reading column, present mode -------------------------- */
.cs347--synth { max-width: 68em; }
.cs347 .syn-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6em 1em; margin: 0 0 1em; }
.cs347 .syn-tools select { font: inherit; padding: 0.35em 0.5em; max-width: 34em; }
.cs347 .syn-last { font-size: 0.85em; color: var(--ink-3); }
.cs347 .syn-pub { font-size: 0.85em; color: var(--ink-2); }
.cs347 .syn-progress { font-size: 0.9em; color: var(--ink-2); margin: 0 0 1.2em; }
.cs347 .syn-progress .bar { height: 5px; background: #eee; border-radius: 3px; overflow: hidden; margin-top: 0.35em; }
.cs347 .syn-progress .bar i { display: block; height: 100%; background: var(--cardinal); transition: width 0.4s; }

.cs347 .syn { position: relative; display: grid; grid-template-columns: 19em minmax(0, 44em); gap: 0 2.5em; align-items: start; font-size: 1.05em; }
.cs347 .syn-exit { display: none; }
.cs347 .syn-main { min-width: 0; }
.cs347 .syn-title { font-size: 1.5em; line-height: 1.15; margin: 0.4em 0 0.1em; }
.cs347 .syn-sub { color: var(--ink-3); margin: 0 0 1.2em; }
.cs347 .syn-overview { border-left: 5px solid var(--cardinal); background: #fbeeee; padding: 0.6em 1em; margin: 0 0 1.5em; }

/* Rail: the theme list with reorder and hide, the lens bar, the find box. */
.cs347 .syn-rail { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; overflow-x: hidden; font-size: 0.88em; padding-right: 0.4em; }
.cs347 .syn-rail .syn-toc { list-style: none; margin: 0; padding: 0; }
.cs347 .syn-rail .syn-toc li { display: flex; align-items: flex-start; gap: 0.3em; padding: 0.5em 0.2em 0.5em 0.4em; border-left: 3px solid transparent; border-bottom: 1px solid var(--line); }
.cs347 .syn-rail .syn-toc li.active { border-left-color: var(--cardinal); background: #fcf7f7; }
.cs347 .syn-rail .syn-toc li.active .t { color: var(--cardinal); }
.cs347 .syn-rail .syn-toc a { display: flex; gap: 0.5em; flex: 1; min-width: 0; color: var(--ink); text-decoration: none; }
.cs347 .syn-rail .syn-toc a:hover .t { text-decoration: underline; }
.cs347 .syn-rail .syn-toc .n { color: var(--cardinal); font-weight: 700; min-width: 1.1em; line-height: 1.35; }
.cs347 .syn-rail .syn-toc .body { flex: 1; min-width: 0; }
.cs347 .syn-rail .syn-toc .t { display: block; line-height: 1.35; }
.cs347 .syn-rail .syn-toc .sub { display: flex; align-items: center; gap: 0.4em; margin-top: 0.3em; }
.cs347 .syn-rail .syn-toc .c { color: var(--ink-3); font-size: 0.9em; font-variant-numeric: tabular-nums; margin-left: auto; }
.cs347 .syn-rail .find { margin-top: 1em; padding-top: 0.7em; border-top: 1px solid var(--line); }
.cs347 .syn-rail .find input { box-sizing: border-box; width: 100%; font: inherit; padding: 0.35em 0.5em; border: 1px solid #c9c9c9; border-radius: 4px; } /* the theme styles inputs content-box */

/* Lens chips: the seeded three keep their hues; coined lenses take the next four. */

/* Themes and quotes. */
.cs347 .syn-sec.theme h2 { display: flex; gap: 0.2em; font-size: 1.25em; line-height: 1.25; margin: 1.8em 0 0.3em; padding-top: 0.7em; border-top: 3px solid var(--cardinal); }
.cs347 .syn-sec h2 .n { flex: none; min-width: 1.5em; color: var(--cardinal); }
.cs347 .syn .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em; margin: 0 0 0.6em; font-size: 0.85em; color: var(--ink-3); }
.cs347 .syn .meta .topic { color: var(--ink-2); font-weight: 600; }
.cs347 .syn .meta .count { margin-left: auto; font-variant-numeric: tabular-nums; }
.cs347 .syn .summary { color: var(--ink-2); margin: 0 0 0.6em; }
.cs347 .syn blockquote.q { margin: 0.9em 0; padding: 0 0 0 1em; border-left: 3px solid var(--line); font-family: var(--serif); font-size: 1.06em; line-height: 1.5; color: var(--ink); }
.cs347 .syn blockquote.q p { margin: 0; }
.cs347 .syn blockquote.q mark { background: #fff3a8; color: inherit; padding: 0 0.1em; border-radius: 2px; }
.cs347 .syn blockquote.q footer { display: flex; align-items: center; gap: 0.2em; font-family: inherit; font-size: 0.8em; color: var(--ink-3); margin-top: 0.3em; }
.cs347 .syn blockquote.q footer .by { flex: 1; }
.cs347 .syn blockquote.q footer .ref { margin-left: 0.6em; color: var(--ink-3); }
.cs347 .syn blockquote.q .more { font-family: -apple-system, Helvetica, Arial, sans-serif; font-size: 1.1em; line-height: 1; width: 1.5em; height: 1.5em; border-radius: 50%; border: 1px solid var(--line); color: var(--ink-3); text-align: center; }
.cs347 .syn blockquote.q .more:hover { color: var(--cardinal); border-color: var(--cardinal); }
.cs347 .syn blockquote.q .full { margin: 0.7em 0 0.3em; padding: 0.7em 0.9em; background: var(--rail); border-radius: 4px; font-size: 0.82em; line-height: 1.5; color: var(--ink-2); max-height: 22em; overflow: auto; }
.cs347 .syn blockquote.q .full p { margin: 0 0 0.6em; }
.cs347 .syn blockquote.q .full .hit { background: #fff3a8; }
.cs347 .syn .showall { margin: 0.2em 0 0; font-size: 0.85em; }
.cs347 .syn details { margin: 0.4em 0 0; } .cs347 .syn summary { cursor: pointer; color: var(--ink-3); font-size: 0.85em; }
.cs347 .syn .names { font-size: 0.85em; color: var(--ink-3); }
.cs347 .syn .search h2 { font-size: 1.15em; margin: 1em 0 0.3em; padding-top: 0.6em; border-top: 3px solid var(--ink); }
@media (max-width: 900px) { .cs347 .syn { grid-template-columns: 1fr; } .cs347 .syn-rail { position: static; max-height: none; } }

/* Present mode: the site chrome goes away, the rail stays, the reading column keeps a book measure. */
body.present .sidebar, body.present .masthead, body.present .page__footer, body.present .page__meta,
body.present .page__content > :not(#cs347-app), body.present .cs347 > :not(.syn) { display: none !important; }
body.present .page { float: none; width: 100%; padding-right: 0; }
body.present #main { max-width: none; padding: 0; }
body.present .page__content { max-width: none; }
/* Rail pinned to the left edge; the reading column centered in whatever width remains. */
body.present .cs347--synth { max-width: none; margin: 0; padding: 1.5em 2.5em 12em 2em; font-size: 1.45em; } /* 1.2em, then two browser zoom steps (110% twice) */
body.present .cs347 .syn { grid-template-columns: 18em minmax(0, 1fr); gap: 0 3em; }
body.present .cs347 .syn-main { max-width: 46em; margin: 0 auto; }
body.present .cs347 .syn-exit { display: inline-block; position: fixed; top: 0.6em; right: 0.8em; z-index: 10; font-size: 0.55em; opacity: 0.6; }
body.present .cs347 .syn-exit:hover { opacity: 1; }
@media (max-width: 900px) { body.present .cs347--synth { padding: 1em 1em 8em; } body.present .cs347 .syn { grid-template-columns: 1fr; } body.present .cs347 .syn-rail { position: static; max-height: none; } }

/* ---- Commentary themes (public): a reading's published themes in the staff view's layout, without
   names; and the list of readings that have them, on the themes and commentaries pages. */
.cs347 .syn-lec { margin: 0.4em 0 0; font-size: 0.9em; color: var(--ink-3); }
.cs347 .syn-lec + .syn-title { margin-top: 0.15em; }
.cs347 .syn-title a { color: var(--ink); text-decoration: none; }
.cs347 .syn-title a:hover { color: var(--cardinal); }
.cs347 .syn-by { margin: 0 0 0.3em; font-size: 0.92em; color: var(--ink-2); }
.cs347--themes { max-width: 50em; }
.cs347 .themes-list { list-style: none; margin: 0; padding: 0; }
.cs347 .themes-list li { margin: 0; padding: 0.55em 0; border-top: 1px solid var(--line); }
.cs347 .themes-list li:first-child { border-top: 0; }
.cs347 .themes-list a { font-weight: 700; text-decoration: none; }
.cs347 .themes-list a:hover { text-decoration: underline; }
.cs347 .themes-list .sub { display: block; margin-top: 0.1em; font-size: 0.88em; color: var(--ink-3); }

/* ---- Staff landing page: two large links, nothing else ---------------------------------------- */
.cs347 .staff-links { display: grid; gap: 1em; max-width: 34em; margin: 0.5em 0 2em; }
.cs347 .staff-link { display: block; padding: 1em 1.2em; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); text-decoration: none; }
.cs347 .staff-link:hover { border-color: var(--cardinal); }
.cs347 .staff-link b { display: block; font-size: 1.1em; color: var(--cardinal); margin-bottom: 0.2em; }
.cs347 .staff-link span { color: var(--ink-2); font-size: 0.92em; }

/* ---- Your grades (tutorials page): the signed-in student's row of the grades sheet ------------ */
.cs347--grades { max-width: 34em; margin: 0.8em 0 0; }
.cs347--grades .section { margin: 0 0 0.4em; font-size: 0.9em; color: var(--ink-2); }
.cs347 table.grades { display: table; width: 100%; border-collapse: collapse; margin: 0; font-size: 0.95em; }
.cs347 table.grades th, .cs347 table.grades td { padding: 0.45em 0.2em; border: 0; border-top: 1px solid var(--line); text-align: left; }
.cs347 table.grades tr:first-child th, .cs347 table.grades tr:first-child td { border-top: 0; }
.cs347 table.grades th { font-weight: 600; }
.cs347 table.grades td { text-align: right; font-weight: 700; }
.cs347 table.grades td.g-none { color: var(--ink-3); font-weight: 400; }
.cs347 table.grades td.g-zero, .cs347 table.grades td.g-missing { color: #7a1f14; background: #f8d7d3; }
.cs347 table.grades td.g-zero, .cs347 table.grades td.g-missing { padding-right: 0.6em; }
.cs347 table.grades td.g-missing { font-weight: 400; }
.cs347--grades h3 { margin: 1.2em 0 0.4em; font-size: 1em; }
.cs347--grades h3 .count { font-weight: 400; font-size: 0.85em; color: var(--ink-3); margin-left: 0.4em; }
.cs347--grades .scroll { overflow-x: auto; }
.cs347 table.grades-all { display: table; width: 100%; border-collapse: collapse; margin: 0; font-size: 0.88em; }
.cs347 table.grades-all th, .cs347 table.grades-all td { padding: 0.35em 0.45em; border: 0; border-top: 1px solid var(--line); text-align: center; white-space: nowrap; }
.cs347 table.grades-all thead th { border-top: 0; color: var(--ink-2); font-weight: 600; }
.cs347 table.grades-all th:first-child, .cs347 table.grades-all td.id { text-align: left; }
.cs347 table.grades-all tbody th { font-weight: 600; }
.cs347 table.grades-all td.id { color: var(--ink-2); }
.cs347 table.grades-all td.g-zero, .cs347 table.grades-all td.g-missing { background: #f8d7d3; color: #7a1f14; font-weight: 700; }
.cs347--grades .views { display: flex; flex-wrap: wrap; gap: 0.5em; margin: 0 0 0.6em; }
.cs347--grades .pending { color: var(--late); }
.cs347 .grades-controls { padding: 1em 1.2em; background: var(--rail); border-radius: 6px; margin: 0 0 1em; }
.cs347 .grades-controls .sync-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em 0.9em; margin: 0 0 0.6em; }
.cs347 .grades-controls .status { margin: 0; font-size: 0.9em; color: var(--ink-2); }
.cs347--grades.cs347--staff { max-width: 60em; }
.cs347 .grades-controls .unpublish { margin-left: auto; color: #7a1f14; }
.cs347 .grades-check p { margin: 0 0 0.3em; }
.cs347 .grades-check ul { margin: 0 0 0.6em 1.3em; padding: 0; }
.cs347 .grades-check li { margin: 0.1em 0; }
.cs347 .grades-check .dim { color: inherit; opacity: 0.7; }