/* CS 401 — Computer Algorithms I
   Extracted from the Claude Design canvas in design-source/ (home variant 6a,
   inner-page variant 7a). The design was authored as inline styles on a fixed
   1060px card; this file is that same design as a stylesheet, plus the
   responsive rules a real page needs. */

@import url(https://fonts.googleapis.com/css2?family=Public+Sans:wght@300;400;500;600;700&display=swap);

:root {
    /* surfaces */
    --canvas: #e9e8e6;
    --paper: #f6f5f2;
    --card: #fffefc;
    --rail: #faf9f6;

    /* text */
    --ink: #232120;
    --body: #514a43;
    --muted: #7a736b;
    --faint: #b3aca3;
    --fainter: #c2bab0;
    --dim: #8d867d;

    /* accent */
    --navy: #1c3f6e;
    --navy-tint: #eaf0f7;
    --navy-edge: #d3e0ee;
    --navy-soft: #7b93b0;

    /* hairlines, heaviest to lightest */
    --line: #e7e4dd;
    --line-2: #eeebe4;
    --line-3: #f4f2ec;
    --line-rule: #ddd8cf;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background: var(--canvas);
    font-family: 'Public Sans', Helvetica, sans-serif;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--navy);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* The sheet of paper the whole site sits on. */
.page {
    max-width: 1060px;
    margin: 0 auto;
    background: var(--paper);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 12px 40px rgba(0, 0, 0, 0.06);
}


/* ---------------------------------------------------------------- nav --- */

.site-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 60px;
    border-bottom: 1px solid var(--line);
}

.site-nav .brand {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--ink);
}

.site-nav ul {
    display: flex;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
}

.site-nav a:not(.brand) {
    display: block;
    padding: 6px 14px;
    border-radius: 6px;
    color: var(--muted);
    font-weight: 500;
}

.site-nav a[aria-current="page"] {
    background: var(--navy);
    color: #fff;
}


/* --------------------------------------------------------------- hero --- */

.hero {
    padding: 80px 60px 52px;
    max-width: 840px;
}

.hero--inner {
    padding: 72px 60px 40px;
    max-width: 800px;
}

.eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--navy);
    margin-bottom: 18px;
}

.hero h1 {
    margin: 0 0 10px;
    font-size: 46px;
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.hero--inner h1 {
    font-size: 42px;
}

.hero .lead {
    margin: 0;
    font-size: 17px;
    line-height: 1.7;
    color: var(--body);
    text-wrap: pretty;
}


/* ------------------------------------------------------ pill dropdown --- */

/* A reusable inline disclosure: the <summary> renders as a small navy pill that
   sits at the end of a sentence, and opening it reveals whatever is in
   .disclosure-body. The design drove this with onClick/introOpen state through
   support.js; <details> gives the same behaviour with no JavaScript at all.

   Copy-paste, plain body:

       <details class="disclosure">
           <summary>Label</summary>
           <div class="disclosure-body"> ... </div>
       </details>

   Add `open` to start expanded. Add the .disclosure--card modifier for the
   heavier treatment used by the course introduction on the schedule page.

   Drop it at the end of a sentence inside a block container (a div, dd, li -
   not inside a <p>, since the body is a div and a <p> cannot contain one). */

.disclosure {
    display: inline;
}

.disclosure > summary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    vertical-align: baseline;
    padding: 4px 11px 4px 13px;
    margin-left: 2px;
    border-radius: 999px;
    background: var(--navy-tint);
    border: 1px solid var(--navy-edge);
    /* Scales with the prose it is dropped into - 13px in the 17px hero lead,
       12px in 15px syllabus body - with a floor so it never gets tiny. */
    font-size: max(12px, 0.765em);
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--navy);
    cursor: pointer;
    list-style: none;
}

.disclosure > summary::-webkit-details-marker,
.disclosure > summary::marker {
    display: none;
    content: '';
}

.disclosure > summary:hover {
    background: #dfe9f4;
    border-color: #c3d5e8;
}

.disclosure > summary:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 3px;
}

/* The label stays put; only the caret flips. */
.disclosure > summary::after {
    content: '\25BC';                       /* the design's {{ introCaret }} */
    font-size: 10px;
    line-height: 1;
    transition: transform 0.15s ease;
}

.disclosure[open] > summary::after {
    transform: rotate(180deg);
}

/* Default body: no chrome, just content flowing below at the size of the text
   around it. */
.disclosure-body {
    margin-top: 10px;
    line-height: 1.7;
    color: var(--body);
}

.disclosure-body > p {
    margin: 0 0 12px;
    text-wrap: pretty;
}

.disclosure-body > p:last-child {
    margin-bottom: 0;
}

.disclosure-body ul,
.disclosure-body ol {
    margin: 0;
    padding-left: 22px;
    line-height: 1.7;
}

.disclosure-body li {
    margin-bottom: 3px;
}

/* Card body: the course-introduction treatment - paper panel with a navy spine. */
.disclosure--card > .disclosure-body {
    margin-top: 26px;
    background: var(--card);
    border: 1px solid var(--line);
    border-left: 3px solid var(--navy);
    border-radius: 0 6px 6px 0;
    padding: 30px 34px 32px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    font-size: 16px;
    line-height: 1.72;
    color: var(--body);
}

/* the flex gap above does the paragraph spacing here */
.disclosure--card > .disclosure-body > p {
    margin: 0;
}

.disclosure--card > .disclosure-body strong {
    font-weight: 600;
    color: var(--ink);
}


/* -------------------------------------------------------- quick links --- */

.quick-links {
    display: flex;
    gap: 10px;
    margin-top: 32px;
    flex-wrap: wrap;
}

.quick-links a {
    padding: 10px 18px;
    border-radius: 6px;
    background: var(--card);
    border: 1px solid var(--line);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}

.quick-links a:hover {
    text-decoration: none;
    border-color: var(--navy-edge);
    background: var(--navy-tint);
}


/* ----------------------------------------------------------- schedule --- */

.schedule {
    padding: 0 60px 80px;
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.unit {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
}

/* The midterm week is a headless unit block sunk one step darker than the
   cards around it, so the break between Unit 3 and Unit 4 reads at a glance.
   The rail and homework overrides stop those columns sitting lighter than the
   body they belong to. */
.unit--accent {
    background: var(--paper);
    border-color: var(--line-rule);
}

.unit--accent .week-rail,
.unit--accent .hw-col {
    background: #f1efea;
}

/* Three columns carry the whole schedule: week rail, lectures, homework. */
.unit-head,
.week {
    display: grid;
    grid-template-columns: 160px 1fr 236px;
}

.unit-head {
    border-bottom: 1px solid var(--line-2);
    align-items: end;
}

.unit-head .rail-cell {
    padding: 26px 18px 18px 24px;
}

.unit-head .unit-title {
    padding: 26px 0 18px 24px;
}

.unit-head .unit-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--navy);
    margin-bottom: 8px;
}

.unit-head .unit-name {
    font-size: 24px;
    font-weight: 400;
    letter-spacing: -0.02em;
}

.unit-head .hw-head {
    padding: 26px 22px 20px;
    border-left: 1px solid var(--line-2);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--faint);
}

.week {
    border-bottom: 1px solid var(--line-3);
}

.unit .week:last-child {
    border-bottom: none;
}

.week-rail {
    padding: 18px 18px 18px 24px;
    background: var(--rail);
    border-right: 1px solid var(--line-2);
    text-align: right;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink);
}

.week-rows {
    padding: 12px 0 12px 24px;
}

/* Every row — lecture, exam, break — shares this grid so dates line up. */
.row {
    display: grid;
    grid-template-columns: 44px 118px 1fr;
    align-items: baseline;
}

.row-lecture {
    padding: 7px 20px 7px 0;
}

.row .no {
    font-size: 12px;
    color: var(--fainter);
    font-variant-numeric: tabular-nums;
}

.row .date {
    font-size: 13px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.row .topic {
    font-size: 15px;
    line-height: 1.42;
}

.row .readings {
    font-size: 12px;
    color: var(--faint);
    margin-top: 2px;
}

/* 6a's signature: exams and breaks are tinted insets with an accent edge,
   pulled left past the row padding so the edge reads as a margin marker. */
.row-exam,
.row-holiday {
    margin: 4px 20px 4px -17px;
    padding: 10px 14px;
    border-radius: 0 4px 4px 0;
}

.row-exam {
    background: var(--navy-tint);
    border-left: 3px solid var(--navy);
}

.row-exam .date {
    color: var(--navy);
    font-weight: 600;
}

.row-exam .topic {
    font-weight: 700;
    color: var(--navy);
    letter-spacing: -0.005em;
}

.row-holiday {
    background: #f2f1ed;
    border-left: 3px solid #cfc8be;
}

.row-holiday .date {
    color: var(--dim);
}

.row-holiday .topic {
    font-weight: 500;
    color: var(--dim);
}

.hw-col {
    border-left: 1px solid var(--line-2);
    background: var(--rail);
    padding: 18px 22px;
}

.hw-col .hw-name {
    font-size: 16px;
    font-weight: 600;
    display: block;
}

.hw-col .hw-due {
    font-size: 13px;
    color: var(--muted);
    margin-top: 4px;
}

.hw-col .hw-none {
    font-size: 14px;
    color: #c9c2b8;
}


/* -------------------------------------------------------- final block --- */

.final {
    display: grid;
    grid-template-columns: 160px 1fr 236px;
    background: var(--card);
    border: 1px solid var(--line);
    border-left: 3px solid var(--navy);
    border-radius: 0 6px 6px 0;
    overflow: hidden;
}

.final .final-rail {
    padding: 24px 18px 24px 22px;
    background: var(--navy-tint);
    border-right: 1px solid #dde5ee;
    text-align: right;
}

.final .final-rail .label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--navy);
}

.final .final-rail .span {
    font-size: 12px;
    color: var(--navy-soft);
    margin-top: 4px;
}

.final .final-body {
    padding: 24px 0 24px 24px;
}

.final .final-body .title {
    font-size: 20px;
    font-weight: 700;
    color: var(--navy);
    letter-spacing: -0.015em;
}

.final .final-body .when {
    font-size: 14px;
    color: var(--muted);
    margin-top: 6px;
}

.final .final-body .scope {
    font-size: 13px;
    color: var(--faint);
    margin-top: 3px;
}

.final .final-hw {
    border-left: 1px solid #dde5ee;
    background: var(--navy-tint);
    padding: 24px 22px;
    font-size: 14px;
    color: var(--navy-soft);
}


/* ------------------------------------------------------------ syllabus --- */

.sheet {
    padding: 0 60px 80px;
}

.sections {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
}

.section {
    display: grid;
    grid-template-columns: 200px 1fr;
    border-bottom: 1px solid var(--line-2);
}

.sections .section:last-child {
    border-bottom: none;
}

.section > h2 {
    margin: 0;
    padding: 28px 20px 30px 24px;
    background: var(--rail);
    border-right: 1px solid var(--line-2);
    text-align: right;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.section-body {
    padding: 30px 32px 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.section-body > p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--body);
    text-wrap: pretty;
}

.section-body strong {
    font-weight: 600;
}

/* label / value pairs in the staff block */
.field {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 16px;
    align-items: baseline;
}

.field > dt {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}

.field > dd {
    margin: 0;
    font-size: 15px;
    color: var(--ink);
}

.field .name {
    font-size: 16px;
    font-weight: 600;
}

.field .email {
    font-weight: 400;
    color: var(--muted);
    font-size: 14px;
}

.field .hours {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 8px;
    font-size: 14px;
    color: var(--body);
}

.field .sub {
    color: var(--muted);
    margin-top: 2px;
}

.aside {
    font-size: 14px;
    line-height: 1.65;
    color: var(--muted);
}

.entry .entry-name {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
}

.entry p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--body);
    text-wrap: pretty;
}

.tag {
    font-size: 12px;
    font-weight: 500;
    color: var(--navy);
    background: var(--navy-tint);
    padding: 2px 8px;
    border-radius: 3px;
    letter-spacing: 0.04em;
    margin-left: 6px;
}

.task .task-name {
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 7px;
}

.task p {
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--body);
    text-wrap: pretty;
}

.task p:last-child {
    margin-bottom: 0;
}

/* A required subsection that can be folded away. Same <details> mechanics as
   the .intro pill on the schedule page - no JavaScript - but styled to sit
   quietly among the .entry and .task blocks around it.

   Collapsed by default; add the `open` attribute to start it expanded.
   (Named .subsection, not .sub: .field .sub is already the muted sub-text
   under a staff/course-detail field.) */

.subsection > summary {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--line-3);
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
}

.subsection > summary::-webkit-details-marker,
.subsection > summary::marker {
    display: none;
    content: '';
}

.subsection > summary:hover {
    color: var(--navy);
}

/* The whole row is the control, so it needs a visible keyboard focus ring. */
.subsection > summary:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 3px;
}

/* The label lives in the pseudo-element rather than the markup, so the
   <details> block stays copy-pasteable as-is. <details> already exposes its
   open/closed state to assistive tech, so this text is visual reinforcement
   only and should not be announced a second time. */
.subsection > summary::after {
    content: 'Show \00a0\25BE';
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    color: var(--navy);
    white-space: nowrap;
}

.subsection[open] > summary::after {
    content: 'Hide \00a0\25B4';
}

.subsection > summary:hover::after {
    text-decoration: underline;
}

.subsection-body {
    padding-top: 14px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--body);
}

.subsection-body p {
    margin: 0 0 12px;
    text-wrap: pretty;
}

.subsection-body p:last-child {
    margin-bottom: 0;
}

/* Attribution for borrowed policy text, muted and trailing the summary title.
   Same treatment as .grade-row .qualifier. The title and this span must share
   a wrapper element in the markup: .subsection > summary is a space-between
   flexbox whose ::after is the Show/Hide label, so an unwrapped credit would
   be pushed to the far edge. */
.subsection > summary .credit {
    font-weight: 400;
    font-size: 13px;
    color: var(--muted);
    margin-left: 5px;
}

/* Nested one level inside a grade row, the summary should match the plain
   .task-name headings it sits among rather than outranking them. */
.grade-detail .subsection > summary {
    font-size: 15px;
}

/* .subsection-body has no list rules of its own - only .disclosure-body does -
   so the long borrowed policy text brings its own, scoped to .integrity to
   leave the folded subsections in section II alone. */
.integrity ul {
    margin: 0 0 12px;
    padding-left: 22px;
    line-height: 1.7;
}

.integrity li {
    margin-bottom: 5px;
}

/* nested "generative AI" clauses under Use Your Own Words */
.integrity li > ul {
    margin: 5px 0 0;
}

/* The borrowed text runs long, so its headings need more air above them than
   a .task-name gets on its own. */
.integrity .task-name {
    margin-top: 22px;
}

/* what-happened / is-it-a-violation table. Borrows the borders and padding of
   .policy, but that block's 120px label column is far too narrow here, so the
   two columns share the width instead. */
.scenarios {
    width: 100%;
    margin: 0 0 12px;
    border: 1px solid var(--line-2);
    border-radius: 5px;
    border-collapse: collapse;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.6;
    text-align: left;
}

.scenarios th {
    padding: 11px 16px;
    background: var(--rail);
    border-bottom: 1px solid var(--line-2);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}

.scenarios td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--line-2);
    color: var(--body);
    vertical-align: top;
}

.scenarios tr:last-child td {
    border-bottom: none;
}

.scenarios th + th,
.scenarios td + td {
    border-left: 1px solid var(--line-2);
    width: 42%;
}

.scenarios td strong {
    display: block;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 3px;
}
/* numbered requirements under Resubmissions */
.steps-head {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 9px;
}

.steps {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 15px;
    line-height: 1.65;
    color: var(--body);
    counter-reset: step;
}

.steps li {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 6px;
    counter-increment: step;
}

.steps li::before {
    content: counter(step) ".";
    color: var(--faint);
}

.note {
    font-size: 13px;
    line-height: 1.6;
    color: var(--muted);
    margin-top: 12px;
}

/* the one-day / four-day / longer table */
.policy {
    border: 1px solid var(--line-2);
    border-radius: 5px;
    overflow: hidden;
}

.policy > div {
    display: grid;
    grid-template-columns: 120px 1fr;
    border-bottom: 1px solid var(--line-2);
}

.policy > div:last-child {
    border-bottom: none;
}

.policy dt {
    padding: 13px 16px;
    background: var(--rail);
    border-right: 1px solid var(--line-2);
    font-size: 13px;
    font-weight: 600;
}

.policy dd {
    margin: 0;
    padding: 13px 18px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--body);
}

/* textbook and grade rows share a name / right-aligned-value shape */
.booklist {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.book {
    display: grid;
    grid-template-columns: 1fr 92px;
    gap: 16px;
    align-items: baseline;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line-3);
}

.booklist .book:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.book .book-title {
    font-size: 15px;
    font-weight: 600;
}

.book .book-author {
    font-weight: 400;
    color: var(--muted);
}

.book .book-why {
    font-size: 13px;
    color: var(--faint);
    margin-top: 3px;
}

.book a {
    font-size: 13px;
    font-weight: 500;
    text-align: right;
}

.qa .q {
    font-size: 16px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 7px;
}

.qa p {
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--body);
    text-wrap: pretty;
}

.qa p:last-child {
    margin-bottom: 0;
}

/* DO / IFFY / DON'T guidance rows */
.verdicts {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 0;
    padding: 0;
}

.verdicts > div {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 14px;
    align-items: baseline;
}

.verdicts dt {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 3px 0;
    border-radius: 3px;
    text-align: center;
}

.verdicts dd {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--body);
}

.verdicts .do {
    color: var(--navy);
    background: var(--navy-tint);
}

.verdicts .iffy {
    color: var(--dim);
    background: #f2f1ed;
}

.verdicts .dont {
    color: #8a3a2f;
    background: #f7ecea;
}

/* Each bucket in the grade breakdown is a disclosure: the row itself is the
   control, and opening it reveals the policies that govern that bucket. Same
   <details> mechanics as .disclosure and .subsection above - no JavaScript.

       <div class="grades">
           <details class="grade-item">
               <summary class="grade-row">
                   <div><strong>Name</strong><span class="qualifier">&mdash;teaser</span></div>
                   <div class="pct">28%</div>
               </summary>
               <div class="grade-detail"> ...task blocks... </div>
           </details>
       </div>

   The rows are independent - no `name` attribute - so more than one can be
   open at a time. Add `open` to start one expanded. */

.grades {
    margin: 0 0 18px;
}

/* The hairline lives on the wrapper, not the row, so an open row's body sits
   above the rule instead of below it. */
.grades > .grade-item {
    border-bottom: 1px solid var(--line-3);
}

.grades > .grade-item:last-child {
    border-bottom: none;
}

.grade-row {
    display: grid;
    grid-template-columns: 1fr 90px;
    gap: 16px;
    align-items: baseline;
    /* The horizontal padding is bled back out with a negative margin so the
       hover tint reads as a full-width band rather than hugging the text. */
    margin: 0 -12px;
    padding: 14px 12px;
    border-radius: 4px;
    font-size: 15px;
}

.grade-item > summary.grade-row {
    cursor: pointer;
    list-style: none;
}

.grade-item > summary::-webkit-details-marker,
.grade-item > summary::marker {
    display: none;
    content: '';
}

.grade-item > summary:hover {
    background: var(--navy-tint);
}

/* The whole row is the control, so it needs a visible keyboard focus ring. */
.grade-item > summary:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 3px;
}

/* Caret rides directly after the bucket name, ahead of the qualifier, so the
   affordance sits on the label rather than floating at the row's edge.
   <details> already exposes open/closed state to assistive tech, so this is
   visual reinforcement only. */
.grade-item > summary strong::after {
    content: '\00a0\00a0\25BC';
    font-size: 9px;
    font-weight: 600;
    color: var(--navy);
}

.grade-item[open] > summary strong::after {
    content: '\00a0\00a0\25B2';
}

.grade-row .qualifier {
    color: var(--muted);
}

.grade-row .pct {
    font-size: 16px;
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Indented behind a spine so the policies read as belonging to the row above
   them rather than as a new top-level block. */
.grade-detail {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 2px 0 18px;
    padding: 4px 0 0 18px;
    border-left: 2px solid var(--line-3);
}

.grade-detail .grade-lead {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--body);
    text-wrap: pretty;
}

/* A sub-policy heading should not outweigh the row it lives under. */
.grade-detail .task-name {
    font-size: 15px;
}

/* Accessibility sits outside the bordered stack, as in the design. */
.coda {
    margin-top: 30px;
    padding-top: 22px;
    border-top: 1px solid var(--line-rule);
}

.coda h2 {
    margin: 0 0 9px;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: #6f6963;
}

.coda p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--body);
    text-wrap: pretty;
}


/* ------------------------------------------------------------- footer --- */

.sheet-foot,
.schedule-foot {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 24px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--dim);
}

.schedule-foot {
    margin-top: 8px;
    padding-top: 20px;
    border-top: 1px solid var(--line-rule);
}

.sheet-foot {
    margin-top: 26px;
}

.updated {
    font-variant-numeric: tabular-nums;
}


/* --------------------------------------------------------- responsive --- */

/* The design is a fixed 1060px canvas card. Below that, tighten the gutters;
   below 820px the three- and two-column grids stack, since a 236px homework
   column and a 200px section rail stop being readable. */

@media (max-width: 1000px) {

    .site-nav,
    .hero,
    .hero--inner {
        padding-left: 36px;
        padding-right: 36px;
    }

    .schedule,
    .sheet {
        padding-left: 36px;
        padding-right: 36px;
    }
}

@media (max-width: 820px) {

    .site-nav {
        flex-wrap: wrap;
        gap: 12px;
    }

    .hero,
    .hero--inner {
        padding-top: 48px;
    }

    .hero h1,
    .hero--inner h1 {
        font-size: 34px;
    }

    .unit-head,
    .week,
    .final {
        grid-template-columns: 1fr;
    }

    .unit-head .rail-cell {
        display: none;
    }

    .unit-head .unit-title,
    .unit-head .hw-head {
        padding: 22px 22px 14px;
        border-left: none;
    }

    .unit-head .hw-head {
        display: none;
    }

    /* The rail becomes a full-width band above its week's rows. */
    .week-rail {
        padding: 12px 22px;
        border-right: none;
        border-bottom: 1px solid var(--line-2);
        text-align: left;
        font-size: 13px;
    }

    .week-rows {
        padding: 10px 22px;
    }

    .row {
        grid-template-columns: 34px 1fr;
    }

    .row .date {
        grid-column: 2;
    }

    .row .topic-cell {
        grid-column: 2;
    }

    /* Exams and breaks have an empty first cell for the lecture number. With
       only two columns left that pushes the topic into the 34px gutter, so
       stack them instead and drop the spacer. */
    .row-exam,
    .row-holiday {
        grid-template-columns: 1fr;
        margin: 6px 0;
        padding: 10px 14px;
        border-radius: 4px;
    }

    .row-exam > div:first-child,
    .row-holiday > div:first-child {
        display: none;
    }

    .row-exam .date,
    .row-holiday .date,
    .row-exam .topic,
    .row-holiday .topic {
        grid-column: 1;
    }

    .hw-col {
        border-left: none;
        border-top: 1px solid var(--line-2);
        padding: 14px 22px;
    }

    /* A week with no homework would otherwise leave an empty bordered band. */
    .hw-col:has(.hw-none) {
        display: none;
    }

    .hw-col .hw-none {
        display: none;
    }

    .final .final-rail,
    .final .final-hw {
        border-right: none;
        border-left: none;
        text-align: left;
        padding: 16px 22px;
    }

    .final .final-body {
        padding: 18px 22px;
    }

    .section {
        grid-template-columns: 1fr;
    }

    .section > h2 {
        padding: 20px 24px 16px;
        border-right: none;
        border-bottom: 1px solid var(--line-2);
        text-align: left;
    }

    .section-body {
        padding: 24px 24px 28px;
    }

    .field,
    .policy > div,
    .book,
    .grade-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .policy dt {
        border-right: none;
        border-bottom: 1px solid var(--line-2);
    }

    .book a,
    .grade-row .pct {
        text-align: left;
    }
}