/* Opgavebank components; shell, prose, tables and buttons use the shared system. */
.assignment-filters { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); align-items:end; gap:18px 14px; padding:24px; margin-block:32px; border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-primary-soft); }
.assignment-filters label,.assignment-view-controls label { display:grid; gap:7px; min-width:0; font-size:15px; font-weight:650; }
.assignment-search { grid-column:1 / -1; }
.assignment-filters > button { grid-column:1 / -1; justify-self:end; }
.assignment-filters :is(input,select),.assignment-view-controls select { box-sizing:border-box; width:100%; min-height:44px; padding:9px 12px; border:1px solid var(--color-border); border-radius:var(--radius-sm); color:var(--color-text); background:var(--color-surface); font:400 16px/1.4 var(--font-body,inherit); }
.assignment-filters :is(input,select):focus-visible,.assignment-view-controls select:focus-visible { outline:2px solid var(--color-primary); outline-offset:3px; }
.assignment-cards { display:grid; gap:20px; }
.assignment-card { min-width:0; padding:28px 0; border-top:1px solid var(--color-border); }
.assignment-card h3 { margin:0; font-size:22px; line-height:1.3; }
.assignment-card h3 a { color:var(--color-primary); text-decoration:none; }
.assignment-card h3 a:hover { text-decoration:underline; }
.assignment-card > p { font-size:16px; line-height:1.55; margin:0 0 16px; }
.assignment-card-meta { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px 24px; margin:0 0 24px; font-size:14px; line-height:1.5; }
.assignment-card-meta div { min-width:0; }
.assignment-card-meta dt { color:var(--color-muted); font-size:13px; margin-bottom:4px; }
.assignment-card-meta dd { margin:0; }
.assignment-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.assignment-reader-actions { justify-content:space-between; margin-bottom:24px; }
.assignment-view-controls { display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:16px; margin-block:24px 32px; }
.assignment-view-controls label { min-width:200px; }
.assignment-step-status { color:var(--color-muted); font-size:15px; }
.assignment-step-navigation { display:flex; justify-content:space-between; gap:16px; margin-top:28px; }
.assignment-step-navigation[hidden],[data-assignment-step][hidden] { display:none; }
.assignment-step-navigation button:disabled { cursor:default; opacity:.5; }
.assignment-visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.assignment-menu-coming { cursor:default; opacity:.7; }
.assignment-figure { margin:28px auto 52px; max-width:800px; }
.assignment-figure img,.assignment-graph { display:block; width:100%; height:auto; }
.assignment-graph { font:15px var(--font-body); color:var(--color-text); }
.assignment-figure figcaption { margin-top:12px; font-size:15px; line-height:1.6; }
.assignment-figure figcaption strong { font-size:16px; font-weight:650; }
.assignment-hint { margin-block:12px; padding:12px 16px; border-left:3px solid var(--color-primary); background:var(--color-primary-soft); }
.assignment-hint summary { cursor:pointer; font-size:16px; font-weight:650; line-height:1.5; }
.assignment-hint p { margin:12px 0 0; font-size:16px; line-height:1.7; }
.assignment-hint summary:focus-visible,.assignment-card a:focus-visible,.assignment-reader a:focus-visible { outline:2px solid var(--color-primary); outline-offset:3px; }
.assignment-reader .assignment-sources { padding-block:20px; border-top:1px solid var(--color-border); }
.assignment-reader .assignment-sources li { font-size:14px; line-height:1.65; }
.assignment-question:focus { outline:2px solid var(--color-primary); outline-offset:6px; }
.assignment-card-header { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:10px 24px; margin-bottom:14px; }
.assignment-upload-date { display:block; color:var(--color-muted); font-size:13px; line-height:1.6; font-weight:400; }
.assignment-reader .assignment-upload-date { margin-bottom:18px; }
body.subject-page #main-content .assignment-bank .assignment-bank-note { padding-left:18px; border-left:2px solid var(--color-border); font-size:16px; line-height:1.7; }
/* Cards are compact UI; keep all their text aligned instead of centring each child. */
body.subject-page #main-content .assignment-card > :is(p,dl) { width:100%; max-width:none; margin-inline:0; }
body.subject-page #main-content .assignment-card > p { margin-block:0 20px; font-size:16px; line-height:1.65; }
body.subject-page #main-content .assignment-card .assignment-card-header h3 { margin:0; }
@media (min-width:641px) and (max-width:1180px) {
  .assignment-filters { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:640px) {
  .assignment-filters { grid-template-columns:repeat(2,minmax(0,1fr)); padding:16px; gap:16px 12px; }
  .assignment-search { grid-column:1 / -1; }
  .assignment-filters > button { grid-column:auto; justify-self:stretch; padding-inline:8px; }
  .assignment-card-header { flex-direction:column; gap:6px; }
  .assignment-card-meta div:nth-child(2) { grid-column:1 / -1; }
  .assignment-card-meta { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .assignment-reader-actions { align-items:flex-start; flex-direction:column; }
}