/* ================================
   Assignment pages — extends site.css
   Class colors come from the body accent-* class
   ================================ */

.sr-only {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}

.assignment { padding-bottom: 64px; }

.assignment-hero {
    padding: 44px 0 32px;
    border-bottom: 1px solid var(--hairline);
}

.assignment-hero h1 {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: clamp(2.25rem, 5.5vw, 3.25rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.assignment-hero__sub {
    margin-top: 14px;
    font-size: 1.0625rem;
    color: var(--ink-secondary);
    max-width: 70ch;
}

/* Jump links */
.jump {
    margin-top: 24px;
    display: flex;
    align-items: baseline;
    gap: 8px 16px;
    flex-wrap: wrap;
}

.jump__label {
    font-size: 0.9375rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 700;
}

.jump ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.jump a {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid var(--accent);
    color: var(--accent);
    font-size: 1rem;
    font-weight: 600;
}

.jump a:hover,
.jump a:focus-visible { background: var(--accent); color: #FFFFFF; }

/* Essay question callout */
.question {
    margin-top: 36px;
    background: var(--accent-pale);
    border-left: 8px solid var(--accent);
    padding: 28px 32px 32px;
}

.question__eyebrow {
    font-size: 0.9375rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 700;
}

.question__text {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3.4vw, 2.125rem);
    line-height: 1.3;
    color: var(--ink);
    margin-top: 10px;
    max-width: 44ch;
    text-wrap: pretty;
}

.question__after {
    margin-top: 16px;
    font-size: 1.1875rem;
    color: var(--ink-secondary);
    max-width: 62ch;
}

/* Content blocks */
.block { margin-top: 48px; }

.block h2 {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: clamp(1.625rem, 3.5vw, 2.125rem);
    line-height: 1.15;
    color: var(--ink);
    padding-bottom: 10px;
    border-bottom: 3px solid var(--accent);
    margin-bottom: 18px;
}

.block h3 {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 1.375rem;
    color: var(--ink);
    margin: 28px 0 8px;
}

.block p,
.block li {
    font-size: 1.125rem;
    line-height: 1.65;
    color: var(--ink-secondary);
}

.block ul { padding-left: 1.25rem; max-width: 70ch; }
.block li { margin-bottom: 8px; }
.block li::marker { color: var(--accent); }

.block strong { color: var(--ink); font-weight: 600; }

/* Process steps */
.steps {
    list-style: none;
    counter-reset: step;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 0;
    max-width: none;
}

.step {
    counter-increment: step;
    border: 1px solid var(--hairline);
    border-top: 8px solid var(--accent);
    padding: 20px 22px 24px;
    margin: 0;
}

.step::before {
    content: counter(step);
    display: block;
    font-family: var(--font-heading);
    font-size: 2.25rem;
    line-height: 1;
    color: var(--accent);
    margin-bottom: 8px;
}

.step__title { display: block; font-size: 1.1875rem; margin-bottom: 6px; }
.step__body { display: block; }

/* Tips for parents */
.parents {
    background: var(--accent-pale);
    border-left: 8px solid var(--accent);
    padding: 4px 32px 20px;
}

.parents h2 { border-bottom-color: var(--accent-tint); }

/* Desk: allowed / not allowed */
.desk {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.desk__col {
    border: 1px solid var(--hairline);
    padding: 4px 24px 18px;
}

.desk__col--yes { border-top: 8px solid var(--accent); }
.desk__col--no { border-top: 8px solid var(--ink-secondary); background: #F6F5F1; }

/* Rubric */
.criterion { margin-top: 36px; }
.criterion h3 { margin-top: 0; }

.strands { margin-bottom: 14px; max-width: 80ch; }

.table-wrap { overflow-x: auto; }

.criterion table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--hairline);
}

.criterion th,
.criterion td {
    border: 1px solid var(--hairline);
    padding: 12px 16px;
    text-align: left;
    vertical-align: top;
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--ink-secondary);
}

.criterion thead th {
    background: var(--accent);
    color: #FFFFFF;
    font-weight: 600;
}

.criterion tbody th {
    width: 5.5rem;
    background: var(--accent-pale);
    color: var(--ink);
    font-weight: 700;
    white-space: nowrap;
}

.criterion td strong { color: var(--ink); }

/* Narrow screens */
@media (max-width: 860px) {
    .steps { grid-template-columns: 1fr; }
    .desk { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .assignment-hero { padding-top: 32px; }
    .question { padding: 22px 20px 26px; }
    .parents { padding: 4px 20px 16px; }
    .block { margin-top: 40px; }
    .criterion th,
    .criterion td { padding: 10px 12px; font-size: 1rem; }
    .criterion tbody th { width: 4rem; }
}

/* Print */
@media print {
    @page { margin: 16mm; }
    .site-header,
    .site-footer,
    .jump { display: none; }
    body { color: #000; background: #fff; font-size: 11pt; }
    .wrap { max-width: none; padding-left: 0; padding-right: 0; }
    .assignment { padding-bottom: 0; }
    .question,
    .parents,
    .desk__col--no { background: #fff; }
    .parents { border: 1px solid #000; border-left-width: 8px; break-inside: avoid; }
    .question { border: 2px solid #000; border-left-width: 8px; }
    .question__eyebrow,
    .step::before { color: #000; }
    .block h2 { border-bottom-color: #000; color: #000; }
    .block p, .block li, .criterion th, .criterion td, .question__after,
    .assignment-hero__sub, .block strong, .criterion td strong { color: #000; }
    .step, .desk__col, .criterion { break-inside: avoid; }
    .steps, .desk { grid-template-columns: 1fr 1fr 1fr; }
    .desk { grid-template-columns: 1fr 1fr; }
    .step, .desk__col { border-color: #000; border-top-color: #000; }
    .criterion table, .criterion th, .criterion td { border-color: #000; }
    .criterion thead th, .criterion tbody th { background: #fff; color: #000; }
    .criterion thead th { border-bottom: 2px solid #000; }
    .table-wrap { overflow: visible; }
    .block { margin-top: 28px; }
}