@import url("../../vendor/web-computer-modern/fonts.css?v=20260905a");
@import url("../tokens/folio.css?v=20260911-scale2");

/* Framework-agnostic Folio component foundation. */
.folio-ui,
.folio-ui * {
  box-sizing: border-box;
}

.folio-ui {
  --folio-layout-frame-gutter: var(--folio-component-workspace-gutterDesktop);
  --folio-layout-profile-rail-inset: max(
    0px,
    calc(
      var(--folio-layout-frame-gutter)
      - var(--folio-component-profileTab-paddingInline)
    )
  );
  --folio-layout-workspace-columns: var(--folio-component-workspace-leftRail) minmax(0, var(--folio-component-workspace-readingMaxWidth)) var(--folio-component-workspace-rightRail);
  background: var(--folio-semantic-color-background-canvas);
  color: var(--folio-semantic-color-text-primary);
  font-family: var(--folio-semantic-typography-readerFamily);
  font-size: var(--folio-semantic-typography-baseSize);
  font-weight: var(--folio-semantic-typography-bookWeight);
  min-width: 0;
  overflow-x: clip;
}

.folio-page-header,
.folio-workspace,
.folio-homework-workspace,
.folio-homework-detail-workspace,
.folio-review-workspace,
.folio-system-slot {
  margin-inline: auto;
  max-width: var(--folio-component-workspace-maxWidth);
  padding-inline: var(--folio-layout-frame-gutter);
  width: min(100%, var(--folio-component-workspace-maxWidth));
}

.folio-workspace,
.folio-homework-workspace,
.folio-homework-detail-workspace {
  grid-template-columns: var(--folio-layout-workspace-columns);
}

.folio-ui :where(button, input) {
  font: inherit;
}

.folio-ui :where(button) {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: inherit;
  margin: 0;
  min-inline-size: 0;
  padding: 0;
  text-align: inherit;
}

.folio-ui :where(button, a, input):focus-visible {
  outline: var(--folio-semantic-focus-width) solid var(--folio-semantic-color-interaction-focus);
  outline-offset: var(--folio-semantic-focus-offset);
}

.folio-profile-tabs {
  align-items: end;
  background: var(--folio-component-profileTabs-background);
  color: var(--folio-component-profileTabs-inactiveText);
  display: flex;
  font-family: var(--folio-semantic-typography-interfaceFamily);
  min-height: var(--folio-component-profileTabs-minHeight);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding-inline: max(var(--folio-primitive-space-12), calc((100vw - var(--folio-component-workspace-maxWidth)) / 2));
  position: sticky;
  scrollbar-width: none;
  top: 0;
  z-index: 30;
}

.folio-profile-tabs::-webkit-scrollbar {
  display: none;
}

.folio-profile-tab-shell {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  min-height: var(--folio-component-profileTab-height);
}

.folio-profile-tab-shell:has(.folio-profile-tab[aria-selected="true"]) {
  background: var(--folio-component-profileTab-activeBackground);
  border-radius: var(--folio-component-profileTab-radiusTop) var(--folio-component-profileTab-radiusTop) 0 0;
  color: var(--folio-semantic-color-text-primary);
}

.folio-profile-tab,
.folio-profile-tab-close,
.folio-profile-tab-add {
  align-items: center;
  background: transparent;
  border: 0;
  color: inherit;
  display: inline-flex;
  gap: var(--folio-component-profileTab-gap);
  min-height: var(--folio-component-profileTab-height);
  white-space: nowrap;
}

.folio-profile-tab {
  font-size: var(--folio-component-profileTab-labelSize);
}

.folio-profile-tab-close svg,
.folio-profile-tab-add svg {
  display: block;
  height: var(--folio-primitive-size-icon-sm);
  stroke-width: 1.65;
  width: var(--folio-primitive-size-icon-sm);
}

.folio-profile-tab {
  padding: var(--folio-primitive-space-8) var(--folio-component-profileTab-paddingInline);
}

.folio-profile-tab-shell:has(.folio-profile-tab-close) .folio-profile-tab {
  padding-inline: var(--folio-component-profileTab-closablePaddingInline);
}

.folio-profile-tab-close {
  justify-content: center;
  padding: 0;
  width: var(--folio-primitive-space-32);
}

.folio-profile-tab-add {
  flex: 0 0 auto;
  justify-content: center;
  margin-inline: var(--folio-primitive-space-4);
  width: var(--folio-primitive-space-40);
}

.folio-profile-tab[aria-selected="true"] {
  background: var(--folio-component-profileTab-activeBackground);
  border-radius: var(--folio-component-profileTab-radiusTop) var(--folio-component-profileTab-radiusTop) 0 0;
  color: var(--folio-semantic-color-text-primary);
}

.folio-profile-tab:not([aria-selected="true"]):hover {
  color: var(--folio-component-profileTabs-inactiveHoverText);
}

.folio-profile-tab:focus-visible,
.folio-profile-tab-close:focus-visible,
.folio-profile-tab-add:focus-visible {
  box-shadow: inset 0 -2px var(--folio-semantic-color-interaction-focus);
  outline: none;
}

.folio-page-header {
  align-items: center;
  border-bottom: var(--folio-primitive-border-thin) solid var(--folio-semantic-color-border-subtle);
  display: grid;
  gap: var(--folio-primitive-space-24);
  grid-template-columns: auto minmax(260px, var(--folio-component-search-maxWidth));
  justify-content: space-between;
  min-height: var(--folio-component-pageNavigation-headerHeight);
}

.folio-page-navigation {
  align-items: center;
  display: flex;
  font-family: var(--folio-semantic-typography-interfaceFamily);
  gap: var(--folio-component-pageNavigation-gap);
  min-height: var(--folio-component-pageNavigation-headerHeight);
}

.folio-page-navigation a {
  color: var(--folio-semantic-color-text-secondary);
  padding-block: var(--folio-primitive-space-8);
  position: relative;
  text-decoration: none;
}

.folio-page-navigation a[aria-current="page"] {
  color: var(--folio-semantic-color-text-primary);
}

.folio-page-navigation a:focus-visible {
  color: var(--folio-semantic-color-interaction-focus);
  outline: none;
}

.folio-page-navigation a[aria-current="page"]::after {
  background: currentColor;
  bottom: calc(var(--folio-component-pageNavigation-activeRuleOffset) * -1);
  content: "";
  height: var(--folio-component-pageNavigation-activeRuleWidth);
  inset-inline: 0;
  position: absolute;
}

.folio-search {
  align-items: center;
  border-bottom: var(--folio-component-search-ruleWidth) solid transparent;
  display: grid;
  gap: var(--folio-component-search-gap);
  grid-template-columns: var(--folio-component-search-iconSize) minmax(0, 1fr);
  padding-block: var(--folio-primitive-space-8);
}

/* The glyph carries its own size like every other icon in the system. Left to the grid
   track alone, an SVG with no width or height falls back to its default box in engines
   that do not stretch a replaced element into the track, and the magnifier swallows the
   field. */
.folio-search > svg {
  display: block;
  height: var(--folio-component-search-iconSize);
  width: var(--folio-component-search-iconSize);
}

.folio-search input {
  background: transparent;
  border: 0;
  color: inherit;
  min-width: 0;
  outline: 0;
  width: 100%;
}

.folio-search:focus-within {
  border-bottom-color: var(--folio-semantic-color-border-strong);
}

.folio-search input:focus-visible {
  outline: none;
}

.folio-search input::placeholder {
  color: var(--folio-semantic-color-text-secondary);
}

.folio-search input::-webkit-search-cancel-button {
  filter: grayscale(1);
  opacity: 0.58;
}

.folio-workspace {
  align-items: start;
  display: grid;
  justify-content: center;
  padding-block: 0 var(--folio-component-workspace-bottomInset);
}

.folio-filter-rail,
.folio-homework-rail {
  font-family: var(--folio-semantic-typography-interfaceFamily);
  min-width: 0;
  padding-top: var(--folio-component-filterRail-paddingTop);
}

.folio-filter-rail {
  align-self: start;
  padding-right: var(--folio-component-filterRail-paddingRight);
  position: sticky;
  top: calc(var(--folio-profile-tabs-bottom, var(--folio-component-profileTabs-minHeight)) + var(--folio-primitive-space-16));
}

/* A filter panel taller than the screen cannot be read if it stays pinned to the
   top: its last groups sit below the fold for as long as the page is scrolled.
   When it is that tall it keeps its place under the tabs and scrolls within
   itself instead, so every group is reachable without leaving the tasks. The
   browser does that scrolling, so it cannot fall behind; the track stays hidden,
   as it does in the profile tabs and the modals. A panel that fits does not
   scroll at all. */
.folio-filter-rail[data-tall],
.folio-homework-list[data-tall] {
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    black var(--folio-filter-rail-fade-top, 0px),
    black calc(100% - var(--folio-filter-rail-fade-bottom, 0px)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    black var(--folio-filter-rail-fade-top, 0px),
    black calc(100% - var(--folio-filter-rail-fade-bottom, 0px)),
    transparent 100%
  );
  max-height: var(--folio-filter-rail-visible-height, 100vh);
  overflow-y: auto;
  scrollbar-width: none;
}

.folio-filter-rail[data-tall]::-webkit-scrollbar,
.folio-homework-list[data-tall]::-webkit-scrollbar {
  display: none;
}


.folio-homework-filter-rail {
  display: none;
}

.folio-ui[data-profile="teacher"] .folio-homework-filter-rail {
  display: block;
}

.folio-filter-title {
  color: var(--folio-semantic-color-text-secondary);
  display: block;
  font-size: 0.78em;
  letter-spacing: 0.08em;
  margin-bottom: var(--folio-primitive-space-16);
  text-transform: uppercase;
}

.folio-filter-toggle {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--folio-semantic-color-text-primary);
  display: none;
  justify-content: space-between;
  padding: var(--folio-primitive-space-12) 0;
  text-align: start;
  width: 100%;
}

.folio-filter-control {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--folio-semantic-color-text-primary);
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--folio-primitive-size-icon-sm);
  padding: 0;
  text-align: start;
  width: 100%;
}

.folio-filter-control:focus-visible,
.folio-filter-toggle:focus-visible,
.folio-filter-reset:focus-visible {
  color: var(--folio-semantic-color-interaction-focus);
  outline: none;
}

.folio-filter-reset {
  background: transparent;
  border: 0;
  color: var(--folio-semantic-color-text-secondary);
  display: block;
  font-size: 0.86em;
  margin-top: var(--folio-component-filterRail-itemGap);
  padding: var(--folio-primitive-space-12) 0;
  text-align: start;
  width: 100%;
}

.folio-filter-reset:hover {
  color: var(--folio-semantic-color-text-primary);
}

.folio-filter-reset:disabled {
  color: var(--folio-semantic-color-text-secondary);
  opacity: 0.42;
}

.folio-filter-control > span:first-child {
  font-size: 0.86em;
  font-weight: var(--folio-semantic-typography-bookWeight);
}

.folio-filter-control .workflow-meta {
  font-size: 0.95em;
}

.folio-filter-group + .folio-filter-control,
.folio-filter-control + .folio-filter-control,
.folio-filter-group + .folio-filter-group {
  margin-top: var(--folio-component-filterRail-itemGap);
}

.folio-empty-state {
  align-items: center;
  display: flex;
  flex-direction: column;
  font-family: var(--folio-semantic-typography-interfaceFamily);
  gap: var(--folio-primitive-space-12);
  justify-content: center;
  min-height: 240px;
  padding: var(--folio-primitive-space-24);
  text-align: center;
}

.folio-empty-state p {
  margin: 0;
}

.folio-filter-options {
  border-left: var(--folio-primitive-border-thin) solid var(--folio-semantic-color-border-subtle);
  margin: var(--folio-primitive-space-8) 0 var(--folio-component-filterRail-itemGap);
  padding-left: var(--folio-primitive-space-16);
}

.folio-filter-option {
  align-items: start;
  display: grid;
  gap: var(--folio-primitive-space-8);
  grid-template-columns: var(--folio-primitive-size-icon-sm) minmax(0, 1fr);
  padding-block: var(--folio-primitive-space-4);
}

.folio-filter-option input {
  accent-color: var(--folio-semantic-color-interaction-focus);
  block-size: var(--folio-primitive-size-icon-sm);
  inline-size: var(--folio-primitive-size-icon-sm);
  margin: 0;
}

.folio-task-feed {
  align-self: start;
  background: var(--folio-component-taskFeed-background);
  box-shadow: var(--folio-component-taskFeed-shadow);
  container-name: task-list;
  container-type: inline-size;
  min-width: 0;
  width: 100%;
}

.folio-task-row {
  border-bottom: var(--folio-primitive-border-thin) solid var(--folio-component-taskRow-borderColor);
  column-gap: var(--folio-component-taskRow-gapDesktop);
  display: grid;
  grid-template-columns: var(--folio-component-taskRow-statusColumn) var(--folio-component-taskRow-numberColumn) minmax(0, 1fr) var(--folio-component-taskRow-actionsColumn);
  min-width: 0;
  padding-block: var(--folio-component-taskRow-paddingTop) var(--folio-component-taskRow-paddingBottom);
  padding-inline: var(--folio-component-taskRow-paddingInlineDesktop);
}

.folio-task-status,
.folio-task-action {
  align-items: center;
  align-self: start;
  background: transparent;
  border: 0;
  color: var(--folio-semantic-color-icon-statusEmpty);
  display: inline-flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  position: relative;
  width: var(--folio-component-taskStatus-targetSize);
}

.folio-task-status::before,
.folio-task-action::before {
  content: "";
  inset: calc(var(--folio-primitive-space-4) * -1);
  position: absolute;
}

.folio-task-status:focus-visible,
.folio-task-action:focus-visible,
.folio-dialog-close:visited {
  color: var(--folio-semantic-color-text-secondary);
}

.folio-dialog-close:focus-visible {
  color: var(--folio-semantic-color-interaction-focus);
  outline: none;
}

.folio-task-status {
  height: var(--folio-component-taskStatus-alignmentHeight);
}

.folio-task-action {
  height: var(--folio-component-taskAction-targetSize);
}

.folio-task-status-marker {
  border: var(--folio-component-taskStatus-outlineWidth) solid currentColor;
  border-radius: var(--folio-primitive-radius-round);
  display: block;
  height: var(--folio-component-taskStatus-markerSize);
  width: var(--folio-component-taskStatus-markerSize);
}

.folio-task-status[data-status="green"] .folio-task-status-marker {
  background: var(--folio-semantic-color-status-green);
  border-color: var(--folio-semantic-color-status-green);
}

.folio-task-status[data-status="yellow"] .folio-task-status-marker {
  background: var(--folio-semantic-color-status-yellow);
  border-color: var(--folio-semantic-color-status-yellow);
}

.folio-task-status[data-status="red"] .folio-task-status-marker {
  background: var(--folio-semantic-color-status-red);
  border-color: var(--folio-semantic-color-status-red);
}

.folio-task-number {
  align-self: start;
  background: transparent;
  border: 0;
  color: var(--folio-semantic-color-text-number);
  font-family: inherit;
  font-size: var(--folio-component-taskRow-numberSize);
  font-weight: bold;
  font-variant-numeric: tabular-nums;
  justify-self: end;
  line-height: var(--folio-semantic-typography-readerLineHeight);
  margin: 0;
  padding: 0;
  position: relative;
  text-align: end;
  top: var(--folio-component-taskRow-numberOffset);
  white-space: nowrap;
}

.folio-task-body {
  font-size: var(--folio-component-taskRow-readerSize);
  /* Ragged right, with explicit source-level Russian soft hyphens. The pinned
     dictionary is applied offline; line breaks do not depend on the browser OS. */
  hyphens: manual;
  line-height: var(--folio-semantic-typography-readerLineHeight);
  min-width: 0;
  overflow-wrap: anywhere;
}

.folio-math-run {
  /* Keep MathJax on the prose baseline; the legacy inline-math class centers
     its inline-block box and must not be reused for this punctuation group. */
  white-space: nowrap;
  hyphens: none;
}

.folio-task-body p,
.folio-disclosure-content p,
.folio-task-detail-section p {
  margin: 0;
}

.folio-task-body::after,
.folio-disclosure-content::after,
.folio-task-detail-section > div::after {
  clear: both;
  content: "";
  display: table;
}

.folio-task-actions {
  align-content: start;
  display: grid;
  gap: var(--folio-component-taskAction-columnGap);
}

.folio-task-action {
  color: var(--folio-component-taskAction-defaultColor);
  height: var(--folio-component-taskAction-targetSize);
  width: var(--folio-component-taskAction-targetSize);
}

.folio-task-action svg {
  display: block;
  fill: none;
  height: var(--folio-component-taskAction-glyphSize);
  stroke: currentColor;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-width: var(--folio-component-taskAction-glyphStroke);
  width: var(--folio-component-taskAction-glyphSize);
}

.folio-task-action[data-kind="favorite"][aria-pressed="true"] {
  color: var(--folio-component-taskAction-favoriteActive);
}

.folio-task-action[data-kind="homework"][aria-pressed="true"] {
  color: var(--folio-component-taskAction-homeworkActive);
}

.folio-task-action[aria-pressed="true"] svg {
  fill: currentColor;
}

.folio-task-asset {
  --folio-task-asset-max-block-size: var(--folio-component-taskAsset-desktopHeight);
  --folio-task-asset-max-inline-size: var(--folio-component-taskAsset-desktopWidth);
  align-items: center;
  display: flex;
  height: var(--folio-task-asset-render-block-size, var(--folio-task-asset-max-block-size));
  justify-content: center;
  max-width: 100%;
  overflow: hidden;
  width: min(100%, var(--folio-task-asset-render-inline-size, var(--folio-task-asset-max-inline-size)));
}

.folio-task-asset--inline {
  float: right;
  margin: 0 0 var(--folio-primitive-space-12) var(--folio-primitive-space-20);
}

.folio-task-asset--block {
  clear: both;
  float: none;
  margin: var(--folio-primitive-space-16) auto 0;
}

.folio-task-asset img {
  display: block;
  filter: var(--folio-component-taskAsset-filter);
  height: 100%;
  mix-blend-mode: var(--folio-component-taskAsset-blendMode);
  object-fit: contain;
  width: 100%;
}

.folio-figure-panel {
  clear: both;
  display: flex;
  flex-wrap: wrap;
  gap: var(--folio-primitive-space-12);
  justify-content: center;
  margin-block: var(--folio-primitive-space-16);
}

.folio-figure-panel > .folio-task-asset,
.folio-task-asset[data-asset-fixed] {
  clear: none;
  float: none;
  margin: 0;
}

.folio-choice-list {
  display: grid;
  gap: var(--folio-primitive-space-12);
}

.folio-choice-list--workspace {
  gap: 0;
}

.folio-choice-list--workspace .folio-choice-item > p {
  margin: 0;
}

.folio-choice-item > p {
  margin-block: 0 var(--folio-primitive-space-8);
}

.folio-choice-label {
  white-space: nowrap;
}

.folio-choice-list[data-figure-only="true"] {
  align-items: start;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.folio-choice-list[data-figure-only="true"] .folio-choice-item {
  align-items: start;
  column-gap: var(--folio-primitive-space-8);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  min-width: 0;
}

.folio-choice-list[data-figure-only="true"] .folio-choice-item > p {
  margin: 0;
}

.folio-choice-list[data-figure-only="true"] .folio-task-asset {
  grid-column: 2;
  grid-row: 1;
  float: none;
  margin: 0 auto;
  max-width: 100%;
}

@media (max-width: 360px) {
  .folio-choice-list[data-figure-only="true"] {
    grid-template-columns: minmax(0, 1fr);
  }
}

.folio-task-asset:has(figcaption) {
  flex-direction: column;
  height: auto;
}

.folio-task-asset:has(figcaption) img {
  height: var(--folio-task-asset-render-block-size, var(--folio-task-asset-max-block-size));
}

.folio-task-asset figcaption {
  margin-top: var(--folio-primitive-space-4);
  font-size: var(--folio-component-disclosure-labelSize);
}

.folio-matching-table {
  inline-size: 100%;
  min-inline-size: 0;
}

.folio-matching-table .folio-matching-item + .folio-matching-item {
  margin-top: var(--folio-primitive-space-12);
}

.folio-matching-item > p {
  margin: 0 0 var(--folio-primitive-space-8);
}

.folio-matching-columns {
  display: grid;
  gap: var(--folio-primitive-space-24);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-block: var(--folio-primitive-space-16);
}

.folio-matching-column,
.folio-matching-body {
  min-width: 0;
}

.folio-matching-columns .folio-matching-heading {
  font-family: var(--folio-semantic-typography-readerFamily);
  font-weight: var(--folio-semantic-typography-bookWeight);
  margin: 0 0 var(--folio-primitive-space-16);
  text-align: center;
}

.folio-matching-column--figures .folio-matching-heading {
  inline-size: min(100%, var(--folio-component-taskAsset-desktopWidth));
}

.folio-matching-items {
  display: grid;
  gap: var(--folio-primitive-space-8);
}

.folio-matching-column--figures .folio-matching-item {
  max-inline-size: calc(var(--folio-component-taskAsset-desktopWidth) + var(--folio-primitive-space-40));
}

.folio-matching-columns .folio-matching-item {
  align-items: start;
  column-gap: var(--folio-primitive-space-8);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  min-width: 0;
}

.folio-matching-label {
  white-space: nowrap;
}

.folio-matching-body > p {
  margin: 0;
}

.folio-matching-body > .folio-task-asset {
  float: none;
  margin: 0;
  max-width: 100%;
}

.folio-matching-answer {
  margin-block: var(--folio-primitive-space-16) 0;
}

.folio-matching-answer-table {
  border-collapse: collapse;
  font-family: var(--folio-semantic-typography-readerFamily);
  font-size: var(--folio-component-disclosure-labelSize);
  inline-size: max-content;
  line-height: var(--folio-semantic-typography-readerLineHeight);
}

.folio-matching-answer-table :is(th, td) {
  border: var(--folio-primitive-border-thin) solid var(--folio-semantic-color-border-subtle);
  min-inline-size: var(--folio-primitive-space-32);
  padding: var(--folio-primitive-space-4) var(--folio-primitive-space-8);
  text-align: center;
  vertical-align: middle;
}

.folio-matching-answer-table th {
  font-weight: var(--folio-semantic-typography-bookWeight);
}

@media (max-width: 760px) {
  .folio-matching-columns {
    grid-template-columns: minmax(0, 1fr);
  }
}

.folio-homework-rail {
  padding-left: var(--folio-component-homeworkRail-paddingLeft);
}

.folio-floating-homework {
  align-items: center;
  background: var(--folio-component-floatingHomework-background);
  border: 0;
  border-radius: var(--folio-primitive-radius-round);
  bottom: var(--folio-component-floatingHomework-inset);
  color: var(--folio-component-floatingHomework-foreground);
  display: none;
  height: var(--folio-component-floatingHomework-targetSize);
  justify-content: center;
  position: fixed;
  right: var(--folio-component-floatingHomework-inset);
  width: var(--folio-component-floatingHomework-targetSize);
  z-index: 20;
}

.folio-floating-homework > svg {
  fill: none;
  height: var(--folio-primitive-size-icon-md);
  stroke: currentColor;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-width: var(--folio-component-taskAction-glyphStroke);
  width: var(--folio-primitive-size-icon-md);
}

.folio-floating-homework-count {
  align-items: center;
  background: var(--folio-semantic-color-interaction-homework);
  border: 2px solid var(--folio-semantic-color-background-content);
  border-radius: var(--folio-primitive-radius-round);
  color: var(--folio-semantic-color-text-inverse);
  display: flex;
  font-family: var(--folio-semantic-typography-interfaceFamily);
  height: var(--folio-primitive-space-20);
  justify-content: center;
  line-height: 1;
  position: absolute;
  right: calc(var(--folio-primitive-space-4) * -1);
  top: -4px;
  width: var(--folio-primitive-space-20);
}

.folio-dialog {
  background: var(--folio-semantic-color-background-content);
  border: var(--folio-primitive-border-thin) solid var(--folio-semantic-color-border-subtle);
  box-shadow: var(--folio-component-dialog-shadow);
  color: var(--folio-semantic-color-text-primary);
  height: fit-content;
  inset: calc(var(--folio-profile-tabs-bottom, var(--folio-component-profileTabs-minHeight)) + var(--folio-primitive-space-8)) var(--folio-component-dialog-viewportInset) var(--folio-component-dialog-viewportInset);
  margin: auto;
  max-height: calc(100dvh - var(--folio-profile-tabs-bottom, var(--folio-component-profileTabs-minHeight)) - var(--folio-primitive-space-20));
  max-width: min(var(--folio-component-dialog-detailMaxWidth), calc(100% - var(--folio-primitive-space-24)));
  overscroll-behavior: contain;
  overflow: auto;
  padding: 0;
  position: fixed;
  scrollbar-width: none;
  width: 100%;
  z-index: 25;
}

.folio-dialog::-webkit-scrollbar {
  display: none;
}

.folio-dialog[data-kind="assignment"] {
  max-width: min(var(--folio-component-dialog-assignmentMaxWidth), calc(100% - var(--folio-primitive-space-24)));
}

.folio-dialog-head {
  align-items: center;
  background: var(--folio-semantic-color-background-canvas);
  box-shadow: var(--folio-primitive-size-control-compact) 0 0 var(--folio-semantic-color-background-canvas);
  display: grid;
  gap: var(--folio-primitive-space-8);
  grid-template-columns: minmax(0, 1fr) auto;
  padding: var(--folio-component-dialog-headerPaddingBlock) var(--folio-component-dialog-headerPaddingInline);
  position: sticky;
  top: 0;
  z-index: 2;
}

.folio-dialog-identity {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: var(--folio-primitive-space-8) var(--folio-primitive-space-12);
  min-width: 0;
}

.folio-dialog-toolbar {
  align-items: center;
  display: flex;
  gap: var(--folio-primitive-space-4);
}

.folio-dialog-toolbar .folio-task-actions {
  align-items: center;
  display: flex;
  gap: 0;
  transform: none;
}

.folio-dialog-toolbar :is(.folio-task-status, .folio-task-action, .folio-dialog-close) {
  align-self: center;
  height: var(--folio-primitive-size-control-compact);
  width: var(--folio-primitive-size-control-compact);
}

.folio-dialog-close {
  align-items: center;
  background: transparent;
  border: 0;
  /* The cross is drawn in currentColor. Where the control is a link rather than a
     button, an unset colour makes the browser paint it as a visited link — a
     violet cross. It takes the same quiet grey as the controls beside it. */
  color: var(--folio-semantic-color-text-secondary);
  display: inline-flex;
  font-size: 0;
  height: var(--folio-primitive-size-control-compact);
  justify-content: center;
  position: relative;
  width: var(--folio-primitive-size-control-compact);
}

.folio-dialog-close::before,
.folio-dialog-close::after {
  background: currentColor;
  content: "";
  height: var(--folio-primitive-border-thin);
  left: 50%;
  position: absolute;
  top: 50%;
  width: var(--folio-primitive-size-icon-sm);
}

.folio-dialog-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.folio-dialog-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.folio-dialog-body {
  container-name: dialog-body;
  container-type: inline-size;
  padding: var(--folio-component-dialog-bodyPadding);
}

.folio-submission-photo {
  background: var(--folio-semantic-color-background-content);
  border: 0;
  cursor: zoom-in;
  display: block;
  margin-top: var(--folio-primitive-space-12);
  overflow: hidden;
  padding: 0;
  width: 100%;
}

.folio-submission .folio-submission-photo > :is(img, canvas) {
  display: block;
  height: auto;
  margin: 0;
  width: 100%;
}

.folio-photo-viewer {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--folio-semantic-color-text-inverse);
  height: calc(100dvh - var(--folio-profile-tabs-bottom, var(--folio-component-profileTabs-minHeight)) - var(--folio-primitive-space-24));
  max-width: calc(100% - var(--folio-primitive-space-24));
  overflow: hidden;
  pointer-events: none;
}

.folio-photo-viewer[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.folio-photo-viewer > .folio-dialog-head {
  background: transparent;
  box-shadow: none;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  pointer-events: auto;
}

.folio-photo-viewer h2 {
  font-family: var(--folio-semantic-typography-interfaceFamily);
  font-size: var(--folio-semantic-typography-baseSize);
  font-weight: var(--folio-semantic-typography-bookWeight);
  margin: 0;
}

.folio-photo-viewer .folio-dialog-toolbar {
  grid-column: 3;
  justify-content: end;
}

.folio-photo-viewer .folio-dialog-close {
  color: var(--folio-semantic-color-text-inverse);
  height: var(--folio-primitive-size-control-touch);
  width: var(--folio-primitive-size-control-touch);
}

.folio-photo-control {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--folio-semantic-color-text-inverse);
  display: inline-flex;
  height: var(--folio-primitive-size-control-touch);
  justify-content: center;
  padding: 0;
  width: var(--folio-primitive-size-control-touch);
}

.folio-photo-control svg {
  fill: none;
  height: var(--folio-primitive-size-icon-md);
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--folio-primitive-border-thin);
  width: var(--folio-primitive-size-icon-md);
}

.folio-photo-control:hover:not(:disabled) { color: var(--folio-primitive-color-graphite-100); }
.folio-photo-control:disabled { color: var(--folio-primitive-color-graphite-500); cursor: default; }
.folio-photo-control[data-photo-rotate] svg { stroke-width: var(--folio-primitive-border-active); }

:is(.folio-submission-photo, .folio-photo-control, .folio-photo-thumbnail):focus-visible {
  outline: var(--folio-semantic-focus-width) solid var(--folio-semantic-color-interaction-focus);
  outline-offset: var(--folio-semantic-focus-offset);
}

.folio-photo-viewer :is(button, [tabindex]):focus-visible {
  outline: var(--folio-semantic-focus-width) solid var(--folio-semantic-color-text-inverse);
  outline-offset: var(--folio-semantic-focus-offset);
}

.folio-photo-pagination {
  align-items: center;
  display: flex;
  gap: var(--folio-primitive-space-8);
}

.folio-photo-pagination output {
  font-family: var(--folio-semantic-typography-interfaceFamily);
  min-width: var(--folio-primitive-space-24);
  text-align: center;
}

.folio-photo-stage {
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  padding: var(--folio-component-dialog-bodyPadding);
  position: relative;
}

.folio-photo-stage > img {
  height: var(--photo-height);
  left: 50%;
  max-width: none;
  pointer-events: auto;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) rotate(var(--photo-angle, 0deg));
  width: var(--photo-width);
}

.folio-photo-thumbnails {
  align-items: center;
  background: transparent;
  display: flex;
  gap: var(--folio-primitive-space-8);
  justify-content: safe center;
  overflow-x: auto;
  padding: var(--folio-primitive-space-12) var(--folio-component-dialog-headerPaddingInline);
  pointer-events: auto;
}

.folio-photo-thumbnail {
  background: transparent;
  border: var(--folio-primitive-border-active) solid transparent;
  flex: 0 0 auto;
  height: var(--folio-primitive-space-68);
  padding: var(--folio-primitive-space-4);
  width: var(--folio-primitive-space-68);
}

.folio-photo-thumbnail[aria-current="true"] { border-bottom-color: var(--folio-semantic-color-text-inverse); }
.folio-photo-thumbnail canvas { height: 100%; object-fit: contain; width: 100%; }

.folio-photo-error {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
}

.folio-photo-error [data-photo-retry] {
  border-color: currentColor;
  color: inherit;
  pointer-events: auto;
}

.folio-photo-loading {
  color: var(--folio-semantic-color-text-inverse);
  display: grid;
  font-family: var(--folio-semantic-typography-interfaceFamily);
  inset: var(--folio-component-dialog-bodyPadding);
  place-items: center;
  position: absolute;
}

@media (max-width: 560px) {
  .folio-photo-viewer > .folio-dialog-head { grid-template-columns: minmax(0, 1fr) auto; }
  .folio-photo-viewer h2 { grid-column: 1 / -1; }
  .folio-photo-viewer .folio-dialog-toolbar { grid-column: 2; }
}

.folio-assignment-grid {
  align-items: start;
  display: grid;
  gap: var(--folio-primitive-space-16);
  grid-template-columns: minmax(0, 1fr) var(--folio-component-summary-assignmentWidth);
}

.folio-assignment-tasks,
.folio-review-tasks {
  min-width: 0;
  width: 100%;
}

.folio-summary,
.folio-submission,
.folio-review-summary {
  background: var(--folio-component-summary-background);
  display: grid;
  gap: var(--folio-component-summary-gap);
  padding: var(--folio-component-summary-padding);
}

.folio-assignment-grid > .folio-summary {
  position: sticky;
  top: var(--folio-assignment-summary-top, var(--folio-primitive-space-12));
}

.folio-summary h2,
.folio-submission h2,
.folio-review-summary h2 {
  font-family: var(--folio-semantic-typography-interfaceFamily);
  font-size: 1em;
  font-weight: var(--folio-semantic-typography-bookWeight);
  margin: 0;
}

.folio-summary-grid {
  display: grid;
  gap: var(--folio-component-summary-gap);
}

.folio-summary-field {
  display: grid;
  gap: var(--folio-primitive-space-2);
}

/* A refusal is answered where it happened, in the window the reader is looking
   at, in the same voice as the rest of the interface. */
.folio-refusal {
  color: var(--folio-semantic-color-statusBorder-red);
  font-family: var(--folio-semantic-typography-interfaceFamily);
  font-size: var(--folio-component-disclosure-labelSize);
  line-height: var(--folio-semantic-typography-readerLineHeight);
  margin: var(--folio-primitive-space-12) 0 0;
  text-align: right;
}

.folio-summary-field > span:first-child {
  color: var(--folio-semantic-color-text-secondary);
  font-family: var(--folio-semantic-typography-interfaceFamily);
  font-size: var(--folio-component-disclosure-labelSize);
}

.folio-summary input {
  background: var(--folio-semantic-color-background-content);
  border: var(--folio-primitive-border-thin) solid var(--folio-semantic-color-border-subtle);
  color: inherit;
  padding: var(--folio-primitive-space-8);
  width: 100%;
}

.folio-deadline-picker {
  position: relative;
}

.folio-deadline-trigger {
  align-items: center;
  background: var(--folio-semantic-color-background-content);
  border: var(--folio-primitive-border-thin) solid var(--folio-semantic-color-border-subtle);
  color: inherit;
  display: flex;
  justify-content: space-between;
  padding: var(--folio-primitive-space-8);
  text-align: start;
  width: 100%;
}

.folio-deadline-trigger svg,
.folio-deadline-navigation svg {
  display: block;
  fill: none;
  height: var(--folio-primitive-size-icon-md);
  stroke: currentColor;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-width: var(--folio-primitive-border-icon);
  width: var(--folio-primitive-size-icon-md);
}

.folio-deadline-trigger[aria-expanded="true"] {
  border-color: var(--folio-semantic-color-border-strong);
}

.folio-deadline-popover {
  background: var(--folio-semantic-color-background-content);
  border: var(--folio-primitive-border-thin) solid var(--folio-semantic-color-border-subtle);
  box-shadow: var(--folio-component-taskFeed-shadow);
  margin-top: var(--folio-primitive-space-8);
  max-height: calc(100dvh - var(--folio-profile-tabs-bottom, var(--folio-component-profileTabs-minHeight)) - var(--folio-primitive-space-40));
  overscroll-behavior: contain;
  overflow-y: auto;
  padding: var(--folio-primitive-space-16);
  position: static;
  width: 100%;
  z-index: 4;
}

.folio-deadline-head,
.folio-deadline-navigation,
.folio-deadline-time {
  align-items: center;
  display: flex;
}

.folio-deadline-head {
  justify-content: space-between;
  margin-bottom: var(--folio-primitive-space-12);
}

.folio-deadline-head > strong {
  font-family: var(--folio-semantic-typography-interfaceFamily);
  font-size: var(--folio-component-disclosure-labelSize);
  font-weight: var(--folio-semantic-typography-bookWeight);
}

.folio-deadline-navigation {
  gap: var(--folio-primitive-space-4);
}

.folio-deadline-navigation button,
.folio-deadline-days button {
  align-items: center;
  background: transparent;
  border: var(--folio-primitive-border-thin) solid transparent;
  color: inherit;
  display: inline-flex;
  justify-content: center;
  padding: 0;
  position: relative;
}

.folio-deadline-navigation button {
  height: var(--folio-primitive-size-control-compact);
  width: var(--folio-primitive-size-control-compact);
}

.folio-deadline-weekdays,
.folio-deadline-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  justify-items: center;
}

.folio-deadline-weekdays {
  color: var(--folio-semantic-color-text-secondary);
  font-family: var(--folio-semantic-typography-interfaceFamily);
  font-size: var(--folio-component-disclosure-labelSize);
  margin-bottom: var(--folio-primitive-space-4);
}

.folio-deadline-days button,
.folio-deadline-days > span {
  height: var(--folio-component-deadlinePicker-daySize);
  max-width: var(--folio-component-deadlinePicker-daySize);
  width: 100%;
}

.folio-deadline-days button:hover {
  border-color: var(--folio-semantic-color-border-strong);
}

.folio-deadline-navigation button:disabled,
.folio-deadline-days button:disabled {
  color: var(--folio-semantic-color-text-secondary);
  cursor: default;
  opacity: 0.55;
}

.folio-deadline-days button:disabled:hover {
  border-color: transparent;
}

.folio-deadline-days button[aria-current="date"]::after {
  background: currentColor;
  bottom: var(--folio-primitive-space-2);
  content: "";
  height: var(--folio-primitive-space-4);
  position: absolute;
  width: var(--folio-primitive-space-4);
}

.folio-deadline-days button[aria-selected="true"] {
  background: var(--folio-semantic-color-background-inverse);
  color: var(--folio-semantic-color-text-inverse);
}

.folio-deadline-time {
  border-top: var(--folio-primitive-border-thin) solid var(--folio-semantic-color-border-subtle);
  gap: var(--folio-primitive-space-8);
  justify-content: center;
  margin-top: var(--folio-primitive-space-12);
  padding-top: var(--folio-primitive-space-12);
}

.folio-deadline-time label {
  display: grid;
  gap: var(--folio-primitive-space-2);
}

.folio-deadline-time label > span {
  color: var(--folio-semantic-color-text-secondary);
  font-family: var(--folio-semantic-typography-interfaceFamily);
  font-size: var(--folio-component-disclosure-labelSize);
}

.folio-summary .folio-deadline-time input {
  font-variant-numeric: tabular-nums;
  height: var(--folio-component-deadlinePicker-timeControlHeight);
  line-height: 1;
  padding: 0 var(--folio-primitive-space-8);
  text-align: center;
  width: var(--folio-component-deadlinePicker-timeInputWidth);
}

.folio-deadline-time-separator {
  align-items: center;
  align-self: end;
  display: inline-flex;
  height: var(--folio-component-deadlinePicker-timeControlHeight);
  justify-content: center;
  line-height: 1;
}

.folio-button-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--folio-primitive-space-8);
  justify-content: flex-end;
}

.folio-button {
  align-items: center;
  background: transparent;
  border: var(--folio-primitive-border-thin) solid var(--folio-semantic-color-border-strong);
  color: inherit;
  display: inline-flex;
  justify-content: center;
  line-height: var(--folio-component-actionButton-lineHeight);
  min-height: var(--folio-component-actionButton-minHeight);
  padding: calc(var(--folio-component-actionButton-paddingBlock) - var(--folio-primitive-space-2)) var(--folio-component-actionButton-paddingInline) calc(var(--folio-component-actionButton-paddingBlock) + var(--folio-primitive-space-2));
  text-align: center;
}

.folio-button:focus-visible {
  border-color: var(--folio-semantic-color-interaction-focus);
  box-shadow: inset 0 -2px var(--folio-semantic-color-interaction-focus);
  outline: none;
}

.folio-button[data-variant="primary"] {
  background: var(--folio-component-actionButton-backgroundPrimary);
  color: var(--folio-component-actionButton-textPrimary);
}

.folio-button:disabled {
  cursor: default;
  opacity: 0.55;
}

.folio-delivery-state {
  align-content: center;
  display: grid;
  gap: var(--folio-primitive-space-12);
  justify-items: center;
  min-height: clamp(240px, 42vh, 380px);
  text-align: center;
}

.folio-delivery-state h2,
.folio-delivery-state p {
  margin: 0;
}

.folio-disclosure {
  border-top: var(--folio-primitive-border-thin) solid var(--folio-semantic-color-border-subtle);
  display: grid;
  gap: var(--folio-component-disclosure-gap);
  padding-top: var(--folio-component-disclosure-paddingTop);
}

.folio-task-sections {
  display: grid;
  gap: var(--folio-component-disclosure-sectionGap);
  grid-column: 3;
  margin-top: var(--folio-component-disclosure-sectionGap);
  min-width: 0;
}

.folio-disclosure-toggle {
  align-items: center;
  background: transparent;
  border: 0;
  color: inherit;
  display: grid;
  font-family: var(--folio-semantic-typography-interfaceFamily);
  font-size: var(--folio-component-disclosure-labelSize);
  font-weight: var(--folio-semantic-typography-bookWeight);
  gap: var(--folio-component-disclosure-gap);
  grid-template-columns: minmax(0, 1fr) var(--folio-component-disclosure-iconSize);
  padding: 0;
  text-align: start;
  width: 100%;
}

.folio-chevron {
  display: block;
  fill: none;
  height: var(--folio-component-disclosure-iconSize);
  justify-self: center;
  stroke: currentColor;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-width: var(--folio-primitive-border-thin);
  transform-origin: center;
  width: var(--folio-component-disclosure-iconSize);
}

:is(.folio-filter-toggle, .folio-filter-control, .folio-disclosure-toggle, .folio-reviewed-toggle)[aria-expanded="true"] > .folio-chevron {
  transform: rotate(180deg);
}

.folio-disclosure-content[hidden] {
  display: none;
}

.folio-disclosure-content,
.folio-disclosure > span {
  font-family: var(--folio-semantic-typography-readerFamily);
  font-size: var(--folio-component-disclosure-contentSize);
  line-height: var(--folio-semantic-typography-readerLineHeight);
}

.folio-disclosure-content {
  min-width: 0;
  overflow-wrap: anywhere;
}

:is(.folio-display-math, .folio-inline-math) {
  max-width: 100%;
}

.folio-inline-math {
  display: inline-block;
  vertical-align: middle;
}

.folio-display-math,
.folio-content-table-scroll {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
}

.folio-display-math:focus-visible,
.folio-content-table-scroll:focus-visible {
  outline: var(--folio-semantic-focus-width) solid var(--folio-semantic-color-interaction-focus);
  outline-offset: var(--folio-semantic-focus-offset);
}

.folio-display-math-track {
  inline-size: max-content;
  min-inline-size: 100%;
}

.folio-content-table-scroll {
  margin-block: var(--folio-primitive-space-12);
}

.folio-content-table {
  border-collapse: collapse;
  font-family: var(--folio-semantic-typography-interfaceFamily);
  font-size: var(--folio-component-disclosure-labelSize);
  inline-size: max-content;
  line-height: var(--folio-semantic-typography-readerLineHeight);
  min-inline-size: 100%;
}

.folio-content-table :is(th, td) {
  border: var(--folio-primitive-border-thin) solid var(--folio-semantic-color-border-subtle);
  max-inline-size: 24ch;
  padding: var(--folio-primitive-space-8) var(--folio-primitive-space-12);
  text-align: start;
  vertical-align: top;
}

.folio-content-table th {
  font-weight: var(--folio-semantic-typography-bookWeight);
}

.folio-content-table--workspace {
  font-family: var(--folio-semantic-typography-readerFamily);
  margin-inline: auto;
  min-inline-size: 0;
}

.folio-content-table--workspace td {
  text-align: center;
}

.folio-content-table--workspace-vertical :is(th, td) {
  text-align: center;
}

.folio-content-table--workspace-centered :is(th, td) {
  text-align: center;
}

/* A measurement series reads across: the first cell of a row names the quantity
   and the rest are its readings. The name starts where the reader's eye starts;
   every reading sits on its own centre so the columns line up down the table.
   Detected from the content, in `presentation._is_series`, never from the author. */
.folio-content-table--series :is(th, td) {
  text-align: center;
}

.folio-content-table--series :is(th, td):first-child {
  text-align: start;
}

.folio-content-table--workspace :is(th, td) {
  padding: var(--folio-primitive-space-2) var(--folio-primitive-space-6);
}

:is(.folio-task-body, .folio-disclosure-content, .folio-task-detail-section > div) mjx-container[display="true"],
:is(.folio-task-body, .folio-disclosure-content, .folio-task-detail-section > div) > table {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
}

:is(.folio-task-body, .folio-disclosure-content, .folio-task-detail-section > div) > table {
  display: block;
}

.folio-task-detail-section {
  border-top: var(--folio-primitive-border-thin) solid var(--folio-semantic-color-border-subtle);
  display: grid;
  gap: var(--folio-component-disclosure-gap);
  margin-top: var(--folio-component-disclosure-sectionGap);
  min-width: 0;
  padding-top: var(--folio-component-disclosure-paddingTop);
}

.folio-task-detail-section > div {
  min-width: 0;
}

.folio-task-detail-section > strong,
.folio-disclosure > strong {
  font-family: var(--folio-semantic-typography-interfaceFamily);
  font-size: var(--folio-component-disclosure-labelSize);
  font-weight: var(--folio-semantic-typography-bookWeight);
}

.folio-homework-workspace,
.folio-homework-detail-workspace {
  display: grid;
  justify-content: center;
  padding-block: 0 var(--folio-component-workspace-bottomInset);
}

.folio-homework-workspace > .folio-homework-filter-rail,
.folio-homework-detail-workspace > .workflow-rail-spacer:first-child {
  grid-column: 1;
}

.folio-homework-workspace > .folio-homework-list-frame,
.folio-homework-detail-workspace > main {
  grid-column: 2;
}

.folio-homework-workspace > .workflow-rail-spacer,
.folio-homework-detail-workspace > .workflow-rail-spacer:last-child {
  grid-column: 3;
}

.workflow-heading.workflow-homework-detail-head {
  align-items: center;
  container-name: homework-context;
  container-type: inline-size;
  display: grid;
  grid-template-columns: var(--folio-primitive-size-control-touch) minmax(0, 1fr);
  justify-content: start;
  margin-bottom: 0;
}

.workflow-homework-detail-head > .workflow-back {
  justify-content: flex-start;
}

.workflow-homework-detail-identity {
  align-items: center;
  column-gap: var(--folio-component-homeworkList-columnGap);
  display: grid;
  font-family: var(--folio-semantic-typography-interfaceFamily);
  grid-template-columns: var(--folio-component-homeworkList-dateColumn) var(--folio-component-homeworkList-studentColumn) var(--folio-component-homeworkList-stateColumn) var(--folio-component-homeworkList-resultColumn);
  line-height: var(--folio-primitive-font-lineHeight-compact);
  min-width: 0;
  width: 100%;
}

.workflow-heading.workflow-homework-detail-head.workflow-review-context-head {
  align-items: center;
  grid-column: 2;
  grid-row: 1;
}

.workflow-homework-detail-identity h1 {
  grid-column: 1;
  margin: 0;
  text-align: start;
}

.folio-homework-open-meta {
  display: contents;
  text-align: start;
}

.folio-homework-open-meta > [data-homework-context-student] { grid-column: 2; }
.folio-homework-open-meta > [data-homework-context-state] { grid-column: 3; }
.folio-homework-open-meta > [data-homework-context-result] {
  grid-column: 4;
  justify-self: end;
  text-align: end;
}

.folio-ui:not([data-profile="teacher"]) [data-homework-context-student] {
  display: none;
}

.folio-ui:not([data-profile="teacher"]) .workflow-homework-detail-identity {
  grid-template-columns: var(--folio-component-homeworkList-dateColumn) var(--folio-component-homeworkList-stateColumn) var(--folio-component-homeworkList-resultColumn);
}

.folio-ui:not([data-profile="teacher"]) .folio-homework-open-meta > [data-homework-context-state] {
  grid-column: 2;
}

.folio-ui:not([data-profile="teacher"]) .folio-homework-open-meta > [data-homework-context-result] {
  grid-column: 3;
}

.folio-homework-task-list {
  background: var(--folio-semantic-color-background-content);
  box-shadow: var(--folio-component-taskFeed-shadow);
}

.folio-homework-task {
  border-bottom: var(--folio-primitive-border-thin) solid var(--folio-semantic-color-border-subtle);
  column-gap: var(--folio-component-taskRow-gapDesktop);
  display: grid;
  grid-template-columns: var(--folio-component-taskRow-numberColumn) minmax(0, 1fr);
  padding-block: var(--folio-component-taskRow-paddingTop) var(--folio-component-taskRow-paddingBottom);
  padding-inline: var(--folio-component-taskRow-paddingInlineDesktop);
}

.folio-homework-task:last-child {
  border-bottom: 0;
}

.folio-homework-task .folio-task-number {
  grid-column: 1;
}

.folio-homework-task .folio-task-body {
  grid-column: 2;
}

.folio-homework-task .folio-task-sections {
  grid-column: 2;
}

.workflow-cart {
  align-self: start;
  padding: var(--folio-primitive-space-24) 0 0 var(--folio-component-homeworkRail-paddingLeft);
  position: sticky;
  top: calc(var(--folio-profile-tabs-bottom, var(--folio-component-profileTabs-minHeight)) + var(--folio-primitive-space-16));
}

.workflow-cart-head {
  border-bottom: var(--folio-primitive-border-thin) solid var(--folio-semantic-color-border-subtle);
  padding-bottom: var(--folio-primitive-space-12);
}

.workflow-cart-head > strong {
  font-weight: var(--folio-semantic-typography-bookWeight);
}

.workflow-cart-list {
  margin: 0 0 var(--folio-primitive-space-16);
}

.workflow-cart-row {
  align-items: start;
  border-bottom: var(--folio-primitive-border-thin) solid var(--folio-semantic-color-border-subtle);
  display: flex;
  gap: var(--folio-primitive-space-8);
  justify-content: space-between;
  padding-block: var(--folio-primitive-space-12);
}

.workflow-cart-task {
  display: grid;
  flex: 1;
  gap: var(--folio-primitive-space-2);
  min-width: 0;
}

.workflow-cart-number {
  white-space: nowrap;
}

.workflow-cart-preview {
  color: var(--folio-semantic-color-text-secondary);
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.workflow-cart-row .folio-dialog-close {
  flex: none;
}

.folio-ui[data-profile="teacher"] .workflow-cart,
.folio-ui[data-profile="teacher"] .folio-floating-homework {
  display: none !important;
}

.folio-ui[data-profile="teacher"] [data-kind="homework"] {
  visibility: hidden;
}

.folio-homework-list {
  align-self: start;
  background: var(--folio-semantic-color-background-content);
  border: var(--folio-primitive-border-thin) solid var(--folio-semantic-color-border-subtle);
  column-gap: var(--folio-component-homeworkList-columnGap);
  display: grid;
  grid-template-columns: var(--folio-component-homeworkList-dateColumn) minmax(0, 1fr) var(--folio-component-homeworkList-resultColumn);
  min-width: 0;
  width: 100%;
}

.folio-homework-list-frame {
  align-self: start;
  container-name: homework-list;
  container-type: inline-size;
  min-width: 0;
}

.folio-homework-detail-workspace > main,
.folio-review-body > main {
  container-name: homework-context;
  container-type: inline-size;
  min-width: 0;
}

.folio-ui[data-profile="teacher"] .folio-homework-list {
  grid-template-columns: var(--folio-component-homeworkList-dateColumn) var(--folio-component-homeworkList-studentColumn) var(--folio-component-homeworkList-stateColumn) var(--folio-component-homeworkList-resultColumn);
}

.folio-homework-row {
  align-items: start;
  background: transparent;
  border: 0;
  color: inherit;
  display: grid;
  column-gap: inherit;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  padding: var(--folio-component-homeworkList-rowPaddingBlock) var(--folio-component-homeworkList-rowPaddingInline);
  row-gap: var(--folio-component-homeworkList-columnGap);
  text-align: start;
  width: 100%;
}

.folio-homework-row:focus-visible,
.folio-reviewed-toggle:focus-visible,
.folio-disclosure-toggle:focus-visible {
  box-shadow: inset 2px 0 var(--folio-semantic-color-interaction-focus);
  outline: none;
}

.folio-homework-row + .folio-homework-row {
  border-top: var(--folio-primitive-border-thin) solid var(--folio-semantic-color-border-subtle);
}

.folio-homework-date,
.folio-homework-result {
  font-variant-numeric: tabular-nums;
}

.folio-homework-date { grid-column: 1; }

.folio-homework-student {
  display: none;
}

.folio-homework-state { grid-column: 2; }
.folio-homework-result { grid-column: 3; }

.folio-ui[data-profile="teacher"] .folio-homework-student {
  display: block;
  grid-column: 2;
}

.folio-ui[data-profile="teacher"] .folio-homework-state { grid-column: 3; }
.folio-ui[data-profile="teacher"] .folio-homework-result { grid-column: 4; }

.folio-homework-state span:last-child {
  color: var(--folio-semantic-color-text-secondary);
  display: block;
  margin-top: var(--folio-primitive-space-2);
}

.folio-homework-result {
  justify-self: end;
  text-align: end;
}

.folio-review-workspace {
  column-gap: 0;
  display: grid;
  grid-template-columns: var(--folio-layout-workspace-columns);
  align-items: start;
  justify-content: center;
  padding-block: 0 var(--folio-component-workspace-bottomInset);
  row-gap: 0;
}

.folio-review-body {
  display: contents;
}

.folio-review-body > .folio-review-rail,
.folio-review-body > .workflow-rail-spacer:first-child {
  grid-column: 1;
  grid-row: 1;
}

.folio-review-body > main {
  grid-column: 2;
  grid-row: 1;
}

.folio-review-body > .folio-review-summary,
.folio-review-body > .workflow-rail-spacer:last-child {
  grid-column: 3;
  grid-row: 1;
}

.folio-review-summary {
  align-self: start;
  align-content: start;
}

.folio-review-rail {
  align-self: start;
  position: sticky;
  top: calc(var(--folio-profile-tabs-bottom, var(--folio-component-profileTabs-minHeight)) + var(--folio-primitive-space-16));
}

.folio-review-rail.folio-submission {
  background: transparent;
  display: block;
  font-family: var(--folio-semantic-typography-interfaceFamily);
  padding: var(--folio-component-filterRail-paddingTop) var(--folio-component-filterRail-paddingRight) 0 0;
}

.folio-submission > .folio-filter-title {
  font-size: 0.78em;
  letter-spacing: 0.08em;
  margin: 0 0 var(--folio-primitive-space-16);
}

.folio-submission > .workflow-meta,
.folio-submission > p {
  font-size: 0.86em;
}

.folio-submission > .workflow-meta {
  display: block;
}

.folio-submission > p,
.folio-submission > .folio-submission-files {
  margin: var(--folio-component-filterRail-itemGap) 0 0;
}

.folio-submission-files {
  display: grid;
  gap: var(--folio-primitive-space-8);
  grid-template-columns: 1fr 1fr;
}

.folio-submission-file {
  align-items: center;
  border: var(--folio-primitive-border-thin) solid var(--folio-semantic-color-border-subtle);
  display: flex;
  justify-content: center;
  min-height: var(--folio-primitive-size-control-touch);
}

.folio-review-statuses {
  align-content: start;
  display: grid;
  gap: var(--folio-primitive-space-8);
}

.folio-task-row.workflow-review-task {
  grid-template-columns: var(--folio-component-taskRow-numberColumn) minmax(0, 1fr) var(--folio-component-taskRow-actionsColumn);
}

.folio-task-row.workflow-review-task > .folio-task-number {
  grid-column: 1;
}

.folio-task-row.workflow-review-task > .folio-task-body {
  grid-column: 2;
}

.folio-task-row.workflow-review-task > .folio-review-statuses {
  grid-column: 3;
  grid-row: 1 / span 2;
}

.folio-task-row.workflow-review-task > .folio-task-sections {
  grid-column: 2;
}

.folio-review-status {
  align-items: center;
  background: transparent;
  border: 0;
  display: inline-flex;
  height: var(--folio-component-taskAction-targetSize);
  justify-content: center;
  margin: 0;
  padding: 0;
  position: relative;
  width: var(--folio-component-taskAction-targetSize);
}

.folio-review-status::before {
  content: "";
  inset: calc(var(--folio-primitive-space-4) * -1);
  position: absolute;
}

.folio-review-status[data-status="green"] { color: var(--folio-semantic-color-statusBorder-green); }
.folio-review-status[data-status="yellow"] { color: var(--folio-semantic-color-statusBorder-yellow); }
.folio-review-status[data-status="red"] { color: var(--folio-semantic-color-statusBorder-red); }
.folio-review-status[data-status="green"][aria-pressed="true"] { color: var(--folio-semantic-color-status-green); }
.folio-review-status[data-status="yellow"][aria-pressed="true"] { color: var(--folio-semantic-color-status-yellow); }
.folio-review-status[data-status="red"][aria-pressed="true"] { color: var(--folio-semantic-color-status-red); }
.folio-review-status[aria-pressed="true"] .folio-task-status-marker { background: currentColor; }

.folio-reviewed-row {
  border-bottom: var(--folio-primitive-border-thin) solid var(--folio-semantic-color-border-subtle);
}

:is(.folio-reviewed-toggle, .folio-reviewed-summary) {
  align-items: start;
  background: transparent;
  border: 0;
  color: inherit;
  display: grid;
  gap: var(--folio-component-taskRow-gapDesktop);
  grid-template-columns: var(--folio-component-taskRow-statusColumn) var(--folio-component-taskRow-numberColumn) minmax(0, 1fr) var(--folio-component-taskRow-actionsColumn);
  padding: var(--folio-component-homeworkList-rowPaddingBlock) var(--folio-component-homeworkList-rowPaddingInline);
  text-align: start;
  width: 100%;
}

.folio-reviewed-statement {
  display: block;
  min-width: 0;
}

/* Keep structured content outside the button, on the same shared task-row grid. */
.folio-reviewed-summary > .folio-reviewed-toggle {
  grid-column: 1 / -1;
  grid-row: 1;
  grid-template-columns: subgrid;
  padding: 0;
}

.folio-reviewed-summary > .folio-reviewed-toggle > .folio-chevron {
  grid-column: 4;
}

.folio-reviewed-summary > .folio-reviewed-statement {
  grid-column: 3;
  grid-row: 1;
  position: relative;
}

.folio-reviewed-summary:has(> [aria-expanded="false"]) > .folio-reviewed-statement > p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.folio-reviewed-summary:has(> [aria-expanded="false"]) > .folio-reviewed-statement > p:not(:first-of-type) {
  display: none;
}

.folio-reviewed-statement > .folio-task-asset {
  align-items: start;
  position: relative;
}

.folio-reviewed-statement > .folio-task-asset img {
  height: var(--folio-task-asset-render-block-size, var(--folio-task-asset-max-block-size));
}

.folio-reviewed-summary:has(> [aria-expanded="false"]) :is(.folio-task-asset, .folio-content-table-scroll) {
  max-height: var(--folio-component-disclosure-collapsedAssetHeight);
  overflow-y: hidden;
  position: relative;
}

.folio-reviewed-summary:has(> [aria-expanded="false"]) .folio-task-asset::after {
  background: linear-gradient(to bottom, transparent, var(--folio-semantic-color-background-content));
  bottom: 0;
  content: "";
  height: var(--folio-component-disclosure-fadeHeight);
  inset-inline: 0;
  pointer-events: none;
  position: absolute;
}

.folio-reviewed-text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.folio-reviewed-toggle[aria-expanded="true"] .folio-reviewed-text {
  display: block;
  overflow: visible;
}

.folio-reviewed-full {
  display: grid;
  gap: var(--folio-component-disclosure-sectionGap);
  padding: 0 var(--folio-component-taskRow-paddingInlineDesktop) var(--folio-component-taskRow-paddingBottom) calc(var(--folio-component-taskRow-paddingInlineDesktop) + var(--folio-component-taskRow-statusColumn) + var(--folio-component-taskRow-numberColumn) + var(--folio-component-taskRow-gapDesktop) * 2);
}

.folio-collapsed-asset {
  display: block;
  height: var(--folio-component-disclosure-collapsedAssetHeight);
  margin-top: var(--folio-primitive-space-8);
  max-width: 220px;
  overflow: hidden;
  position: relative;
}

.folio-collapsed-asset img {
  display: block;
  filter: var(--folio-component-taskAsset-filter);
  height: auto;
  mix-blend-mode: var(--folio-component-taskAsset-blendMode);
  width: 100%;
}

.folio-collapsed-asset::after {
  background: linear-gradient(to bottom, transparent, var(--folio-semantic-color-background-content));
  bottom: 0;
  content: "";
  height: var(--folio-component-disclosure-fadeHeight);
  inset-inline: 0;
  pointer-events: none;
  position: absolute;
}

.folio-reviewed-toggle[aria-expanded="true"] .folio-collapsed-asset {
  height: auto;
}

.folio-reviewed-toggle[aria-expanded="true"] .folio-collapsed-asset::after {
  display: none;
}

.folio-system-indicator {
  align-items: center;
  background: var(--folio-component-systemIndicator-background);
  color: var(--folio-component-systemIndicator-foreground);
  display: inline-flex;
  font-family: var(--folio-semantic-typography-interfaceFamily);
  gap: var(--folio-primitive-space-8);
  padding: var(--folio-component-systemIndicator-paddingBlock) var(--folio-component-systemIndicator-paddingInline);
}

.folio-system-slot {
  display: flex;
  justify-content: flex-end;
  padding-block: var(--folio-primitive-space-8);
}

.folio-system-slot:empty {
  display: none;
}

.folio-live-region {
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  clip-path: inset(50%);
}

.folio-sr-only {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

@media (max-width: 920px) {
  .folio-ui {
    --folio-layout-frame-gutter: var(--folio-component-taskRow-paddingInlineTablet);
    --folio-layout-workspace-columns: 150px minmax(0, var(--folio-component-workspace-readingMaxWidth));
  }

  .folio-profile-tabs {
    padding-inline: 0;
  }

  .folio-page-header {
    gap: var(--folio-primitive-space-12);
  }

  .folio-filter-rail {
    position: static;
  }

  .folio-homework-rail {
    display: none;
  }

  .folio-floating-homework {
    display: inline-flex;
  }

  .folio-review-body > .folio-review-summary {
    grid-column: 2;
    grid-row: 2;
  }

  .folio-review-body > .workflow-rail-spacer:last-child {
    display: none;
  }

  .folio-review-rail {
    position: static;
  }

  .folio-homework-workspace > .workflow-rail-spacer:last-child,
  .folio-homework-detail-workspace > .workflow-rail-spacer:last-child {
    display: none;
  }

  .folio-homework-row {
    grid-template-columns: subgrid;
  }

  .folio-task-row {
    column-gap: var(--folio-component-taskRow-gapTablet);
    padding-block: var(--folio-component-taskRow-paddingTop) var(--folio-component-taskRow-paddingBottom);
    padding-inline: var(--folio-component-taskRow-paddingInlineTablet);
  }

  .folio-homework-task {
    column-gap: var(--folio-component-taskRow-gapTablet);
    padding-block: var(--folio-component-taskRow-paddingTop) var(--folio-component-taskRow-paddingBottom);
    padding-inline: var(--folio-component-taskRow-paddingInlineTablet);
  }

}

/* 340px summary + 16px gap + 432px minimum compact task region. */
@container dialog-body (max-width: 788px) {
  .folio-assignment-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .folio-assignment-grid > .folio-summary {
    order: 2;
    position: static;
  }
}

/*
 * Below this content-fit boundary the persistent service columns would leave less
 * than 400px for reading. Keep the same DOM/focus order and move only the statement
 * to a full-width row.
 */
@container task-list (max-width: 548px) {
  .folio-task-row {
    grid-template-columns: var(--folio-component-taskRow-statusColumn) var(--folio-component-taskRow-numberColumn) minmax(0, 1fr) auto;
    row-gap: var(--folio-primitive-space-12);
  }

  .folio-task-row > .folio-task-status {
    grid-column: 1;
    grid-row: 1;
  }

  .folio-task-row > .folio-task-number {
    grid-column: 2;
    grid-row: 1;
  }

  .folio-task-row > .folio-task-body {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .folio-task-row > .folio-task-actions {
    display: flex;
    grid-column: 4;
    grid-row: 1;
  }

  .folio-task-row > .folio-task-sections {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: var(--folio-primitive-space-4);
  }

  .folio-assignment-tasks .folio-task-row > :first-child {
    grid-column: 1;
    grid-row: 1;
  }

  .folio-assignment-tasks .folio-task-row > .folio-dialog-close {
    grid-column: 4;
    grid-row: 1;
  }

  .folio-task-row.workflow-review-task {
    grid-template-columns: var(--folio-component-taskRow-numberColumn) minmax(0, 1fr) auto;
  }

  .folio-task-row.workflow-review-task > .folio-task-number {
    grid-column: 1;
  }

  .folio-task-row.workflow-review-task > .folio-task-body {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .folio-task-row.workflow-review-task > .folio-review-statuses {
    display: flex;
    grid-column: 3;
    grid-row: 1;
  }

  .folio-task-row.workflow-review-task > .folio-task-sections {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  :is(.folio-reviewed-toggle, .folio-reviewed-summary) {
    grid-template-columns: var(--folio-component-taskRow-statusColumn) var(--folio-component-taskRow-numberColumn) minmax(0, 1fr) var(--folio-component-disclosure-iconSize);
    row-gap: var(--folio-primitive-space-12);
  }

  .folio-reviewed-toggle > .folio-task-status-marker {
    grid-column: 1;
    grid-row: 1;
  }

  .folio-reviewed-toggle > .folio-task-number {
    grid-column: 2;
    grid-row: 1;
  }

  .folio-reviewed-toggle > .folio-reviewed-statement {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .folio-reviewed-summary > .folio-reviewed-statement {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .folio-reviewed-toggle > .folio-chevron {
    grid-column: 4;
    grid-row: 1;
  }

  .folio-reviewed-full {
    padding-inline: var(--folio-component-taskRow-paddingInlineMobile);
  }
}

@media (max-width: 560px) {
  .folio-page-header {
    gap: var(--folio-primitive-space-12);
  }

  .folio-workspace {
    display: block;
    padding-inline: 0;
  }

  .folio-homework-workspace,
  .folio-homework-detail-workspace {
    display: block;
    padding: 0 0 var(--folio-component-workspace-bottomInset);
  }

  .folio-review-workspace {
    display: block;
    padding: 0 0 var(--folio-component-workspace-bottomInset);
  }

  .folio-filter-rail {
    padding: 0 var(--folio-primitive-space-16);
  }

  .folio-review-rail.folio-submission {
    padding: 0 var(--folio-primitive-space-16) var(--folio-primitive-space-16);
  }

  .folio-system-slot {
    justify-content: flex-start;
  }

  .folio-filter-title {
    display: none;
  }

  .folio-submission > .folio-filter-title {
    display: block;
  }

  .folio-filter-toggle {
    display: flex;
    min-height: 48px;
    padding: 0;
  }

  .folio-filter-rail[data-expanded="false"] .folio-filter-list {
    display: none;
  }

  .folio-filter-list {
    padding: var(--folio-primitive-space-4) 0 var(--folio-primitive-space-16);
  }

  .folio-filter-list > .folio-filter-group,
  .folio-filter-list > .folio-filter-control {
    margin: 0;
    padding: var(--folio-primitive-space-12) 0;
  }

  /* In the single-column flow the rail reads as a list of sections, so sorting takes
     the same shape as the filters below it: a heading in reading type over the same
     48px row, and options on the same twelve-pixel rhythm. Sorting has two options and
     no group to unfold, so its heading is not a toggle and its options stay open.
     The rail is named so these win over the desktop caption rule, which the workspace
     sheet states at the same weight and loads later. */
  /* The two options belong to their heading, so they sit closer to it than the next
     heading sits to them: twelve pixels above, twenty-eight below. Without that the
     rail is six rows at one spacing and nothing tells sorting from filtering. */
  .folio-filter-rail .workspace-sort {
    gap: 0;
    margin-bottom: var(--folio-primitive-space-16);
  }

  .folio-filter-rail .workspace-sort .folio-filter-title {
    align-items: center;
    color: var(--folio-semantic-color-text-primary);
    display: flex;
    font-size: 1em;
    letter-spacing: normal;
    margin-bottom: 0;
    min-height: 48px;
    text-transform: none;
  }

  .folio-filter-rail .workspace-sort .folio-filter-control {
    padding: var(--folio-primitive-space-12) 0;
  }

  .folio-delivery-state {
    min-height: auto;
    padding-block: var(--folio-primitive-space-32);
  }

  .folio-dialog,
  .folio-dialog[data-kind="assignment"] {
    max-width: calc(100% - var(--folio-primitive-space-16));
  }

  .folio-button-row {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .folio-button {
    width: 100%;
  }

  :is(.folio-reviewed-toggle, .folio-reviewed-summary) {
    gap: var(--folio-component-taskRow-gapTablet);
    padding: var(--folio-component-homeworkList-rowPaddingBlock) var(--folio-component-homeworkList-rowPaddingInline);
  }

}

@container homework-list (max-width: 592px) {
  .folio-ui[data-profile="teacher"] .folio-homework-list {
    grid-template-columns: minmax(112px, 0.45fr) minmax(180px, 1fr);
  }

  .folio-ui[data-profile="teacher"] .folio-homework-date { grid-column: 1; grid-row: 1; }
  .folio-ui[data-profile="teacher"] .folio-homework-student {
    grid-column: 1;
    grid-row: 2;
  }

  .folio-ui[data-profile="teacher"] .folio-homework-state {
    grid-column: 2;
    grid-row: 1;
  }

  .folio-ui[data-profile="teacher"] .folio-homework-result {
    grid-column: 2;
    grid-row: 2;
  }
}

@container homework-list (max-width: 456px) {
  .folio-ui:not([data-profile="teacher"]) .folio-homework-list {
    grid-template-columns: minmax(112px, 0.45fr) minmax(180px, 1fr);
  }

  .folio-ui:not([data-profile="teacher"]) .folio-homework-date { grid-column: 1; grid-row: 1; }
  .folio-ui:not([data-profile="teacher"]) .folio-homework-state { grid-column: 2; grid-row: 1; }
  .folio-ui:not([data-profile="teacher"]) .folio-homework-result {
    grid-column: 2;
    grid-row: 2;
  }
}

@container homework-list (max-width: 400px) {
  .folio-homework-list,
  .folio-ui[data-profile="teacher"] .folio-homework-list {
    align-items: start;
    grid-template-columns: minmax(0, 1fr);
  }

  .folio-homework-date { grid-column: 1; grid-row: 1; }
  .folio-homework-state { grid-column: 1; grid-row: 2; }
  .folio-homework-result {
    grid-column: 1;
    grid-row: 3;
    justify-self: start;
    text-align: start;
  }

  .folio-ui[data-profile="teacher"] .folio-homework-student {
    grid-column: 1;
    grid-row: 2;
  }

  .folio-ui[data-profile="teacher"] .folio-homework-state {
    grid-column: 1;
    grid-row: 3;
  }

  .folio-ui[data-profile="teacher"] .folio-homework-result {
    grid-column: 1;
    grid-row: 4;
  }
}

@container homework-context (max-width: 640px) {
  .folio-ui[data-profile="teacher"] .workflow-homework-detail-identity {
    grid-template-columns: minmax(112px, 0.45fr) minmax(180px, 1fr);
    row-gap: var(--folio-primitive-space-2);
  }

  .folio-ui[data-profile="teacher"] .workflow-homework-detail-identity h1 { grid-column: 1; grid-row: 1; }
  .folio-ui[data-profile="teacher"] .folio-homework-open-meta > [data-homework-context-student] { grid-column: 1; grid-row: 2; }
  .folio-ui[data-profile="teacher"] .folio-homework-open-meta > [data-homework-context-state] { grid-column: 2; grid-row: 1; }
  .folio-ui[data-profile="teacher"] .folio-homework-open-meta > [data-homework-context-result] { grid-column: 2; grid-row: 2; }
}

@container homework-context (width < 520px) {
  .folio-ui:not([data-profile="teacher"]) .workflow-homework-detail-identity {
    grid-template-columns: minmax(112px, 0.45fr) minmax(180px, 1fr);
    row-gap: var(--folio-primitive-space-2);
  }

  .folio-ui:not([data-profile="teacher"]) .workflow-homework-detail-identity h1 { grid-column: 1; grid-row: 1; }
  .folio-ui:not([data-profile="teacher"]) .folio-homework-open-meta > [data-homework-context-state] { grid-column: 2; grid-row: 1; }
  .folio-ui:not([data-profile="teacher"]) .folio-homework-open-meta > [data-homework-context-result] { grid-column: 2; grid-row: 2; }
}

@container homework-context (max-width: 400px) {
  .workflow-homework-detail-identity,
  .folio-ui:not([data-profile="teacher"]) .workflow-homework-detail-identity {
    grid-template-columns: minmax(0, 1fr);
  }

  .workflow-homework-detail-identity h1 { grid-column: 1; grid-row: 1; }
  .folio-homework-open-meta > [data-homework-context-student] { grid-column: 1; grid-row: 2; }
  .folio-homework-open-meta > [data-homework-context-state],
  .folio-ui:not([data-profile="teacher"]) .folio-homework-open-meta > [data-homework-context-state] { grid-column: 1; grid-row: 3; }
  .folio-homework-open-meta > [data-homework-context-result],
  .folio-ui:not([data-profile="teacher"]) .folio-homework-open-meta > [data-homework-context-result] {
    grid-column: 1;
    grid-row: 4;
    justify-self: start;
    text-align: start;
  }
}

@media (max-width: 420px) {
  .folio-page-header {
    border-bottom: 0;
    grid-template-columns: 1fr;
    row-gap: 0;
  }

}

@media (prefers-reduced-motion: no-preference) {
  .folio-ui :where(button, a) {
    transition: color var(--folio-semantic-motion-duration) var(--folio-semantic-motion-easing), background-color var(--folio-semantic-motion-duration) var(--folio-semantic-motion-easing);
  }
}

.folio-feed-more {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--folio-semantic-color-text-secondary);
  display: flex;
  font-family: var(--folio-semantic-typography-interfaceFamily);
  justify-content: center;
  padding: var(--folio-primitive-space-24) 0;
  width: 100%;
}

/* The next window is fetched long before the reader arrives, so with the script
   running this sentinel is normally an empty gap. Only a reader who outruns the
   fetch sees anything, and then only three dots. The same button permits an
   explicit request without navigating away from the current workspace. */
.folio-feed-more[data-enhanced] .folio-feed-more-label {
  display: none;
}

/* Idle, the sentinel leaves no gap: it is only a tripwire for the observer. */
.folio-feed-more[data-enhanced] {
  min-height: 1px;
  padding: 0;
}

.folio-feed-more[data-enhanced][data-loading] {
  padding: var(--folio-primitive-space-24) 0;
}

.folio-feed-dots {
  display: none;
  gap: var(--folio-primitive-space-8);
}

.folio-feed-more[data-enhanced][data-loading] .folio-feed-dots {
  display: inline-flex;
}

.folio-feed-dots span {
  animation: folio-feed-pulse 1.2s ease-in-out infinite;
  background: currentColor;
  border-radius: 50%;
  height: 6px;
  opacity: 0.25;
  width: 6px;
}

.folio-feed-dots span:nth-child(2) {
  animation-delay: 0.16s;
}

.folio-feed-dots span:nth-child(3) {
  animation-delay: 0.32s;
}

@keyframes folio-feed-pulse {
  0%, 80%, 100% {
    opacity: 0.25;
  }
  40% {
    opacity: 0.9;
  }
}

@media (prefers-reduced-motion: reduce) {
  .folio-feed-dots span {
    animation: none;
    opacity: 0.55;
  }
}

/* The skill tree is the approved hierarchy: section, group, then skill. Depth is
   shown by indentation alone, so the rail stays a list of checkboxes. */
.folio-skill-tree {
  max-height: 60vh;
  overflow-y: auto;
}

.folio-skill-branch > span {
  font-family: var(--folio-semantic-typography-interfaceFamily);
}

.folio-skill-section > .folio-skill-groups {
  padding-inline-start: var(--folio-primitive-space-16);
}

.folio-skill-group > .folio-skill-leaves {
  padding-inline-start: var(--folio-primitive-space-16);
}

.folio-skill-section {
  margin-top: var(--folio-primitive-space-8);
}

/* Icons inside links inherit currentColor, which the browser recolours once the
   destination has been visited. Every workspace control keeps its own colour. */
.folio-ui a:visited {
  color: inherit;
}