html,
body {
  margin: 0;
  min-height: 100%;
}

/* What the browser paints when the page is pulled past its own edge is the root's
   background, not the body's. Left unpainted it is the browser's white, so a pull to
   refresh flashed white before the dark strip arrived. The root carries the strip's
   colour, and it is written with a literal fallback: the token travels in the import
   inside the component sheet, and until that lands `var()` resolves to nothing and the
   white comes back. */
html {
  background: var(--folio-component-profileTabs-background, #20231f);
}

html.workspace-root {
  overflow: auto;
}

.workspace-root > body {
  overflow-x: clip;
}

.workspace-root .workspace-shell {
  width: 100vw;
}

body {
  background: var(--folio-semantic-color-background-canvas, #f1eee5);
}

[hidden] {
  display: none !important;
}

/* A queue dot never takes room of its own, so a word keeps its width whether or not
   the dot is there, and it is measured in the word's em so it sits the same on any
   size of text. On a tab it hangs past the word's end at cap height. */
.workspace-queue-anchor {
  position: relative;
  display: inline-block;
}

.workspace-queue-dot {
  position: absolute;
  inset-block-start: 0.12em;
  inset-inline-end: -0.6em;
  inline-size: 0.4em;
  block-size: 0.4em;
  border-radius: 50%;
  background: var(--folio-semantic-color-status-red);
  pointer-events: none;
}

/* In the homework list the dots share one column in the row's leading padding, so
   they line up down the list however long the state before them is. */
.folio-homework-row {
  position: relative;
}

.folio-homework-row .workspace-queue-anchor {
  position: static;
}

.folio-homework-row .workspace-queue-dot {
  inset-block-start: calc(var(--folio-component-homeworkList-rowPaddingBlock) + 0.5em);
  inset-block-start: calc(var(--folio-component-homeworkList-rowPaddingBlock) + 0.5lh - 0.225em);
  inset-inline: calc(var(--folio-component-homeworkList-rowPaddingInline) / 2 - 0.225em) auto;
  inline-size: 0.45em;
  block-size: 0.45em;
}

/* In an open homework's header the dot leads the state like a status marker. */
[data-homework-context-state].workspace-queue-anchor {
  align-items: center;
  display: inline-flex;
  gap: 0.4em;
  justify-self: start;
}

[data-homework-context-state] .workspace-queue-dot {
  block-size: 0.45em;
  inline-size: 0.45em;
  order: -1;
  position: static;
}

.workspace-homework-controls,
.workspace-homework-controls form,
.workspace-homework-field,
.workspace-homework-control form {
  display: flex;
  flex-direction: column;
  gap: var(--folio-primitive-space-12);
  min-inline-size: 0;
}

.workspace-homework-field,
.workspace-homework-control summary,
.workspace-homework-controls .workspace-comment,
.workspace-homework-controls .workflow-meta {
  font-family: var(--folio-semantic-typography-interfaceFamily);
}

.workspace-homework-field textarea,
.workspace-homework-field input {
  box-sizing: border-box;
  inline-size: 100%;
  min-inline-size: 0;
  font: inherit;
  color: inherit;
}

.workspace-homework-field textarea {
  padding: var(--folio-primitive-space-8);
  background: var(--folio-semantic-color-background-content);
  border: var(--folio-primitive-border-thin) solid var(--folio-semantic-color-border-subtle);
  resize: vertical;
}

.workspace-homework-control summary,
.workspace-homework-action {
  display: block;
  inline-size: fit-content;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-family: var(--folio-semantic-typography-interfaceFamily);
  text-align: start;
  cursor: pointer;
  padding: var(--folio-primitive-space-8) 0;
  list-style: none;
}

.workspace-homework-control summary::-webkit-details-marker {
  display: none;
}

.workspace-homework-control summary:focus-visible,
.workspace-history-photos > summary:focus-visible,
.workspace-editor-disclosure > summary:focus-visible {
  outline: var(--folio-semantic-focus-width) solid var(--folio-semantic-color-interaction-focus);
  outline-offset: var(--folio-semantic-focus-offset);
}

.workspace-homework-control[open] summary {
  margin-block-end: var(--folio-primitive-space-8);
}

.workspace-comment {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* The two side columns share the open homework header's band: each title sits on
   the header's line, and every column's content starts just below it. */
.folio-review-workspace .folio-review-rail.folio-submission {
  padding-block-start: 0;
}

.folio-review-workspace :is(.folio-submission, .folio-review-summary) > .folio-filter-title {
  align-items: center;
  color: var(--folio-semantic-color-text-secondary);
  display: flex;
  font-family: var(--folio-semantic-typography-interfaceFamily);
  font-size: 0.78em;
  font-weight: var(--folio-semantic-typography-bookWeight);
  letter-spacing: 0.08em;
  margin: 0;
  min-block-size: var(--folio-primitive-size-control-touch);
  text-transform: uppercase;
}

/* The review column reads like the history beside it: the same face, the same
   inset from the tasks, and its actions as one short list. */
.folio-review-workspace .folio-review-summary {
  background: transparent;
  font-family: var(--folio-semantic-typography-interfaceFamily);
  gap: var(--folio-component-filterRail-itemGap);
  padding: 0 0 0 var(--folio-component-filterRail-paddingRight);
}

.folio-review-summary > p {
  margin: 0;
}

.workspace-homework-actions {
  display: flex;
  flex-direction: column;
}

.workspace-homework-actions :is(summary, .workspace-homework-action) {
  padding-block: var(--folio-primitive-space-4);
}

/* A disclosure among the actions says it opens; its chevron turns with the others. */
.workspace-homework-actions summary:has(> .folio-chevron) {
  align-items: center;
  display: flex;
  gap: var(--folio-primitive-space-4);
}

/* The history is a thread: one entry is one message, kept tight inside and set
   apart from the next by a rule. */
.workspace-history {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0 0 var(--folio-component-filterRail-itemGap);
  padding: 0;
}

.workspace-history-entry {
  display: flex;
  flex-direction: column;
  font-size: 0.9em;
  gap: var(--folio-primitive-space-2);
  padding-block: var(--folio-primitive-space-12);
}

.workspace-history-entry:first-child {
  padding-block-start: 0;
}

.workspace-history-entry + .workspace-history-entry {
  border-block-start: var(--folio-primitive-border-thin) solid var(--folio-semantic-color-border-subtle);
}

/* What happened is part of the entry's heading, in the time's colour, so it never
   reads as the student's message or the teacher's comment below it. */
.workspace-history-title {
  color: var(--folio-semantic-color-text-secondary);
}

.workspace-history-entry > .workspace-comment {
  margin-block-start: var(--folio-primitive-space-4);
}

.workspace-history-entry .folio-submission-photo {
  margin-block-start: var(--folio-primitive-space-8);
}

.workspace-history-photos > summary {
  color: var(--folio-semantic-color-text-secondary);
  cursor: pointer;
  inline-size: fit-content;
  list-style: none;
  margin-block-start: var(--folio-primitive-space-4);
}

.workspace-history-photos > summary::-webkit-details-marker {
  display: none;
}

.folio-homework-date > span {
  display: block;
}

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

.workspace-shell {
  min-height: 100vh;
  min-height: 100dvh;
}

/* A slab of the tab strip's own colour hanging above the strip itself, so the band the
   browser paints over the top of the page is ours rather than whatever content is
   passing behind it. It is measured from the strip, not from the page: the strip is
   sticky, so anchored to the page the slab would scroll away and leave that band open
   again the moment the reader moved. 500px outlasts any overscroll, and nothing
   scrolls above the top edge, so the height costs no layout. */
.workspace-top-shade {
  background: var(--folio-component-profileTabs-background);
  height: 500px;
  inset-inline: 0;
  pointer-events: none;
  position: absolute;
  top: -500px;
}

.workspace-view {
  display: contents;
}

.workspace-view > .folio-page-header {
  background: var(--folio-semantic-color-background-canvas);
  position: sticky;
  top: var(--folio-profile-tabs-bottom, var(--folio-component-profileTabs-minHeight));
  transform: none;
  transition: transform var(--folio-semantic-motion-duration) var(--folio-semantic-motion-easing);
  z-index: 20;
}

.workspace-view[data-header-hidden="true"] > .folio-page-header {
  pointer-events: none;
  transform: translateY(-100%);
}

.workspace-view .folio-filter-rail,
.workspace-view .workflow-cart,
.workspace-view .folio-review-rail {
  top: var(--workspace-sticky-top, var(--folio-profile-tabs-bottom));
  transition: top var(--folio-semantic-motion-duration) var(--folio-semantic-motion-easing);
}

/* A homework longer than the screen scrolls inside its own list, between the title
   and the send button, so «Отправить ДЗ» stays on screen however many tasks are
   chosen. Pinned under the tabs, the page could reach the button only at the very
   end of the task feed, which keeps loading as it is scrolled. */
.workspace-view .workflow-cart {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - var(--workspace-sticky-top, var(--folio-profile-tabs-bottom, var(--folio-component-profileTabs-minHeight))) - var(--folio-primitive-space-24));
}

.workspace-view .workflow-cart > .workflow-cart-head,
.workspace-view .workflow-cart > .workflow-cart-list {
  align-self: stretch;
  flex: none;
}

.workspace-view .workflow-cart > .workflow-cart-list {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.workspace-view .workflow-cart > .workflow-cart-list::-webkit-scrollbar {
  display: none;
}

.workspace-shell > [data-sync-slot] {
  position: fixed;
  inset-inline-end: var(--folio-primitive-space-16);
  bottom: var(--folio-primitive-space-16);
  width: auto;
  z-index: 31;
  pointer-events: none;
}

.workspace-main {
  min-height: calc(100dvh - var(--folio-component-profileTabs-minHeight) - var(--folio-component-pageNavigation-headerHeight));
}

.workspace-taskbook {
  min-height: max(calc(100dvh - var(--folio-component-profileTabs-minHeight) - var(--folio-component-pageNavigation-headerHeight)), var(--workspace-filter-scroll-floor, 0px));
  overflow-anchor: none;
}

/* The EGE bank's unboxed filter rhythm, in the teacher's existing typeface.
   A summary always occupies one line, however many options have been selected. */
.workspace-taskbook .folio-filter-rail {
  --folio-discovery-check-gap: var(--folio-primitive-space-8);
  overscroll-behavior: contain;
  overflow-anchor: none;
}
.workspace-taskbook .folio-filter-group + .folio-filter-group {
  margin-top: var(--folio-primitive-space-12);
}
.workspace-taskbook .folio-filter-option {
  font-size: var(--folio-component-disclosure-labelSize);
  min-height: var(--folio-primitive-space-24);
}
.workspace-taskbook .folio-filter-title { margin-bottom: var(--folio-primitive-space-12); }
.workspace-taskbook .folio-filter-toggle {
  font-size: var(--folio-component-disclosure-labelSize);
  min-height: var(--folio-primitive-space-32);
}
.workspace-taskbook .workspace-sort {
  gap: var(--folio-primitive-space-4);
  margin-bottom: var(--folio-primitive-space-12);
}
.workspace-taskbook .workspace-sort .folio-filter-title {
  font-size: var(--folio-component-disclosure-labelSize);
  min-height: 0;
  margin-bottom: var(--folio-primitive-space-4);
}
.workspace-taskbook .workspace-sort .folio-filter-control {
  min-height: var(--folio-primitive-space-24);
  padding-block: var(--folio-primitive-space-4);
}
.workspace-taskbook .folio-filter-control > span:first-child { min-width: 0; }
.workspace-taskbook [data-filter-group] > .folio-filter-control {
  color: var(--folio-semantic-color-text-secondary);
}
.workspace-taskbook [data-filter-group] > .folio-filter-control > span:first-child {
  text-transform: uppercase;
  letter-spacing: .07em;
}
.workspace-taskbook .folio-filter-control .workflow-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.3;
  min-height: 1.3em;
}
.workspace-taskbook .folio-filter-options {
  border: 0;
  margin: var(--folio-primitive-space-6) 0 0;
  padding-inline-start: 0;
}
.workspace-taskbook .folio-filter-reset {
  text-decoration: underline;
  text-underline-offset: var(--folio-primitive-space-2);
}

.workflow-overlay-scrim {
  background: var(--folio-semantic-color-background-overlay);
  inset: var(--folio-profile-tabs-bottom, var(--folio-component-profileTabs-minHeight)) 0 0;
  overscroll-behavior: contain;
  position: fixed;
  touch-action: none;
  z-index: 24;
}

.workflow-overlay-scrim[data-kind="submission"] {
  background: var(--folio-component-photoViewer-backdropColor);
}

.workspace-contents-form,
.folio-profile-tab-shell > form,
.folio-page-navigation > form {
  display: contents;
}

.workspace-sort {
  display: grid;
  gap: var(--folio-primitive-space-12);
  margin-bottom: var(--folio-primitive-space-24);
}

.workspace-sort .folio-filter-title {
  display: block;
  margin-bottom: var(--folio-primitive-space-4);
}

.workspace-sort .folio-filter-control + .folio-filter-control {
  margin-top: 0;
}

.workspace-sort .folio-filter-control[aria-pressed="false"] {
  color: var(--folio-semantic-color-text-secondary);
}

.workspace-sort .folio-filter-control[aria-pressed="true"] > span {
  text-decoration: underline;
  text-decoration-thickness: var(--folio-component-pageNavigation-activeRuleWidth);
  text-underline-offset: var(--folio-component-pageNavigation-activeRuleOffset);
}

.workspace-sort .folio-filter-control:focus-visible {
  color: var(--folio-semantic-color-interaction-focus);
}

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

.folio-page-navigation button[aria-current="page"] {
  color: var(--folio-semantic-color-text-primary);
}
.folio-page-navigation button[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;
}

.workspace-profile-bar {
  align-items: stretch;
  background: var(--folio-component-profileTabs-background);
  display: flex;
  min-height: var(--folio-component-profileTabs-minHeight);
  position: sticky;
  top: 0;
  z-index: 30;
}

.workspace-profile-bar-inner {
  display: flex;
  margin-inline: auto;
  max-width: var(--folio-component-workspace-maxWidth);
  min-width: 0;
  width: min(100%, var(--folio-component-workspace-maxWidth));
}

.workspace-profile-bar .folio-profile-tabs {
  flex: 1 1 auto;
  min-width: 0;
  padding-inline: var(--folio-layout-profile-rail-inset) 0;
  position: static;
  z-index: auto;
}

/* The add control follows the last tab while the strip fits and holds the strip's end
   once tabs overflow, so it never slides under the logout button beside the strip.
   Its own width replaces the side margins: a margin would leave a gap the scrolled
   tabs show through. */
.workspace-profile-bar .folio-profile-tab-add {
  background: var(--folio-component-profileTabs-background);
  inset-inline-end: 0;
  margin-inline: 0;
  position: sticky;
  width: var(--folio-primitive-space-48);
}

.workspace-profile-bar .folio-profile-tab-shell .folio-profile-tab {
  cursor: grab;
}

/* Pupil tabs share one width and give way together when the strip runs short, as a
   browser's tabs do; below their minimum the strip scrolls. The cross keeps its place
   at each tab's end and the label starts at the tab's start. */
.workspace-profile-bar .folio-profile-tab-shell:has(.folio-profile-tab-close) {
  flex: 0 1 var(--folio-component-profileTab-pupilWidth);
  min-width: var(--folio-component-profileTab-pupilMinWidth);
}

/* A close holds every pupil tab at its width while the pointer or focus stays in the
   strip, or for a moment after a touch close, so the next cross stops under the
   pointer (profile-tabs.js). */
:root[data-profile-tabs-held] .workspace-profile-bar .folio-profile-tab-shell:has(.folio-profile-tab-close) {
  flex: 0 0 var(--workspace-profile-tab-held);
  min-width: 0;
}

.workspace-profile-bar .folio-profile-tab-shell:has(.folio-profile-tab-close) > form:first-child {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}

.workspace-profile-bar .folio-profile-tab-shell:has(.folio-profile-tab-close) .folio-profile-tab {
  flex: 1 1 auto;
  justify-content: flex-start;
  min-width: 0;
}

.workspace-profile-bar .folio-profile-tab-shell:has(.folio-profile-tab-close) .workspace-queue-anchor {
  display: flex;
  min-width: 0;
}

/* A label longer than its tab fades out instead of stopping at a hard edge. The text
   carries a fade-wide padding it gives back with a negative margin: a label that fits
   ends before the fade and keeps the queue dot right after it, while a clipped one
   runs on into the padding, where the fade covers it, still inside the tab. */
.workspace-profile-tab-text {
  --workspace-profile-tab-fade: var(--folio-component-profileTab-closablePaddingInline);
  margin-inline-end: calc(-1 * var(--workspace-profile-tab-fade));
  -webkit-mask-image: linear-gradient(to right, black calc(100% - var(--workspace-profile-tab-fade)), transparent);
  mask-image: linear-gradient(to right, black calc(100% - var(--workspace-profile-tab-fade)), transparent);
  min-width: 0;
  overflow: hidden;
  padding-inline-end: var(--workspace-profile-tab-fade);
  white-space: nowrap;
}

.workspace-profile-bar .folio-profile-tab-shell.is-dragging {
  border-radius: var(--folio-component-profileTab-radiusTop);
  box-shadow: var(--folio-component-taskFeed-shadow);
  position: relative;
  will-change: transform;
  z-index: 1;
}

.workspace-profile-bar .folio-profile-tab-shell.is-dragging:not(:has(.folio-profile-tab[aria-selected="true"])) {
  background: var(--folio-primitive-color-graphite-800);
  color: var(--folio-component-profileTabs-inactiveHoverText);
}

.workspace-profile-bar .folio-profile-tab-shell.is-dragging .folio-profile-tab,
.workspace-profile-bar .folio-profile-tabs.is-reordering {
  cursor: grabbing;
  user-select: none;
}

.workspace-logout {
  align-items: center;
  background: var(--folio-component-profileTabs-background);
  display: flex;
  flex: 0 0 auto;
}

.workspace-logout button {
  color: var(--folio-component-profileTabs-inactiveText);
  font-family: var(--folio-semantic-typography-interfaceFamily);
  font-size: var(--folio-component-profileTab-labelSize);
  min-height: var(--folio-component-profileTab-height);
  padding: var(--folio-primitive-space-8) var(--folio-component-profileTab-paddingInline);
  white-space: nowrap;
}

.workspace-logout button:hover {
  color: var(--folio-component-profileTabs-inactiveHoverText);
}

.workspace-profile-picker-list {
  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);
  color: var(--folio-semantic-color-text-primary);
  display: grid;
  font-family: var(--folio-semantic-typography-interfaceFamily);
  gap: var(--folio-primitive-space-4);
  inset: auto;
  margin: 0;
  max-width: calc(100vw - 2 * var(--folio-primitive-space-16));
  max-height: calc(100dvh - var(--folio-component-profileTabs-minHeight) - 2 * var(--folio-primitive-space-16));
  overflow: auto;
  min-width: 180px;
  padding: var(--folio-primitive-space-8);
  position: fixed;
}

.workspace-profile-picker-list:not(:popover-open) {
  display: none;
}

.workspace-profile-picker-list button {
  padding: var(--folio-primitive-space-8);
  text-align: start;
  width: 100%;
}

.workflow-rail-spacer {
  min-width: 0;
}

.workflow-heading {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--folio-primitive-space-8);
  justify-content: space-between;
  margin-bottom: var(--folio-primitive-space-12);
}

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

.workspace-task-list-frame {
  align-self: start;
  min-width: 0;
}

.workflow-heading.workflow-list-context-head {
  justify-content: flex-start;
  margin-bottom: 0;
  min-height: var(--folio-primitive-size-control-touch);
}

.workflow-meta {
  color: var(--folio-semantic-color-text-secondary);
}

.folio-filter-control .workflow-meta,
.workflow-cart-head > .workflow-meta,
.workflow-cart-head > strong {
  display: block;
}

.folio-filter-control .workflow-meta {
  margin-top: var(--folio-primitive-space-2);
}

.workflow-back {
  align-items: center;
  background: transparent;
  border: 0;
  display: inline-flex;
  height: var(--folio-primitive-size-control-touch);
  justify-content: center;
  min-height: var(--folio-primitive-size-control-touch);
  padding: 0;
  width: var(--folio-primitive-size-control-touch);
}

.workflow-back 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-task-number,
.folio-homework-row,
.folio-filter-reset,
.workflow-back {
  color: inherit;
  text-decoration: none;
}

.folio-homework-row {
  width: 100%;
}

.workspace-empty {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 240px;
}

/* In the homework list the empty state is one more row: it spans the list's columns
   and keeps a row's height and inset instead of the page-sized empty block. */
.folio-homework-list > .workspace-empty {
  display: block;
  grid-column: 1 / -1;
  min-height: 0;
  padding: var(--folio-component-homeworkList-rowPaddingBlock) var(--folio-component-homeworkList-rowPaddingInline);
}

.workspace-task-dialog > .folio-dialog-body .folio-task-body {
  min-width: 0;
}

.workspace-task-section {
  border-top: var(--folio-primitive-border-thin) solid var(--folio-semantic-color-border-subtle);
  margin-top: var(--folio-primitive-space-24);
  padding-top: var(--folio-primitive-space-20);
}

.workspace-task-section h2 {
  font-family: var(--folio-semantic-typography-interfaceFamily);
  font-size: var(--folio-component-disclosure-labelSize);
  font-weight: var(--folio-semantic-typography-bookWeight);
}

.folio-submission img {
  display: block;
  height: auto;
  margin-top: var(--folio-primitive-space-12);
  max-width: 100%;
}

.workspace-editor-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--folio-primitive-space-16);
  font-family: var(--folio-semantic-typography-interfaceFamily);
}
.workspace-editor-save-busy,
.workspace-task-editor[data-saving] .workspace-editor-save-idle { display: none; }
.workspace-task-editor[data-saving] .workspace-editor-save-busy { display: inline; }
.workspace-task-editor[data-saving] [type="submit"]:disabled { opacity: 1; }
.workspace-task-editor {
  display: grid;
  gap: var(--folio-primitive-space-24);
  min-width: 0;
  font-family: var(--folio-semantic-typography-interfaceFamily);
}
.workspace-task-editor [hidden] { display: none; }
.workspace-task-editor input,
.workspace-task-editor select,
.workspace-task-editor textarea {
  box-sizing: border-box;
  font: inherit;
  color: inherit;
  background: var(--folio-semantic-color-background-canvas);
  border: var(--folio-primitive-border-thin) solid var(--folio-semantic-color-border-subtle);
  border-radius: 0;
  padding: var(--folio-primitive-space-8);
  min-width: 0;
}
/* The editor widens its dialog so a wide screen can show the card beside the form. */
.folio-dialog[data-editor-wide] { max-width: min(var(--folio-component-workspace-maxWidth), calc(100% - var(--folio-primitive-space-24))); }
.workspace-editor-main { display: grid; gap: var(--folio-primitive-space-24); min-width: 0; }
.workspace-editor-side { min-width: 0; }
.workspace-editor-side:has(> [hidden]) { display: none; }
/* The editor itself decides when there is room for the card (task-editor.js); the
   design system's responsive rules stay the only breakpoints. */
.folio-dialog[data-editor-wide] .workspace-task-editor { grid-template-columns: minmax(0, 1fr) 536px; column-gap: var(--folio-primitive-space-32); align-items: start; }
.folio-dialog[data-editor-wide] .workspace-editor-side {
  display: block;
  grid-column: 2;
  grid-row: 1;
  position: sticky;
  inset-block-start: calc(var(--workspace-editor-head, 0px) + var(--folio-primitive-space-16));
  max-height: calc(100dvh - var(--workspace-editor-head, 0px) - var(--folio-primitive-space-110));
  overflow-y: auto;
  scrollbar-width: thin;
}
.folio-dialog[data-editor-wide] .workspace-editor-bar { grid-column: 1 / -1; }
.folio-dialog[data-editor-wide] .workspace-task-editor [data-editor-preview] { display: none; }
.workspace-editor-difficulty { display: flex; align-items: center; gap: var(--folio-primitive-space-16); }
.workspace-editor-group,
.workspace-editor-themes,
.workspace-editor-generals { display: grid; gap: var(--folio-primitive-space-12); min-width: 0; }
.workspace-editor-choices > .folio-filter-options { max-height: 40vh; overflow-y: auto; }
.workspace-editor-skill { display: flex; align-items: center; gap: var(--folio-primitive-space-12); min-width: 0; }
.workspace-editor-skill > span { flex: 1; overflow-wrap: anywhere; }
.workspace-editor-skill > label { display: flex; align-items: center; gap: var(--folio-primitive-space-8); }
.workspace-editor-skill [data-weight] { width: 5ch; box-sizing: content-box; }
.workspace-editor-skill .folio-dialog-close { flex-shrink: 0; }
.workspace-editor-skill label > span { color: var(--folio-semantic-color-text-secondary); }
/* Disclosures read like the taskbook filters: a label, its current value beneath, a chevron. */
.workspace-editor-disclosure > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--folio-primitive-size-icon-sm);
  align-items: center;
  gap: var(--folio-primitive-space-8);
  padding: var(--folio-primitive-space-8) 0;
  cursor: pointer;
  list-style: none;
}
.workspace-editor-disclosure > summary::-webkit-details-marker { display: none; }
.workspace-editor-disclosure > summary .workflow-meta {
  display: block;
  overflow: hidden;
  color: var(--folio-semantic-color-text-secondary);
  font-size: 0.86em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.workspace-editor-disclosure[open] > summary .workflow-meta { display: none; }
.workspace-editor-disclosure[open] > summary { margin-block-end: var(--folio-primitive-space-8); }
.workspace-editor-section { border-block-start: var(--folio-primitive-border-thin) solid var(--folio-semantic-color-border-subtle); padding-block-start: var(--folio-primitive-space-4); }

/* A section is its task's own blocks; only structured blocks get a frame and a name. */
.workspace-editor-blocks,
.workspace-editor-block,
.workspace-editor-list,
.workspace-editor-column,
.workspace-editor-item-body { display: grid; gap: var(--folio-primitive-space-8); min-width: 0; align-content: start; }
.workspace-editor-blocks { gap: var(--folio-primitive-space-12); padding-block-end: var(--folio-primitive-space-8); }
.workspace-editor-block-framed {
  border: var(--folio-primitive-border-thin) solid var(--folio-semantic-color-border-subtle);
  padding: var(--folio-primitive-space-12);
}
.workspace-editor-kind,
.workspace-editor-caption { color: var(--folio-semantic-color-text-secondary); font-size: 0.78em; }
.workspace-editor-kind { letter-spacing: 0.08em; text-transform: uppercase; }
.workspace-task-editor textarea.workspace-editor-field {
  display: block;
  width: 100%;
  overflow: hidden;
  resize: none;
  line-height: var(--folio-semantic-typography-readerLineHeight);
}
.workspace-task-editor textarea.workspace-editor-field-tex { overflow-x: auto; overflow-wrap: normal; white-space: pre; }
.workspace-task-editor textarea.workspace-editor-field-label { text-align: center; padding-inline: var(--folio-primitive-space-4); }
.workspace-editor-field::placeholder { color: var(--folio-semantic-color-text-secondary); opacity: 1; }
.workspace-editor-item { display: grid; grid-template-columns: 4ch minmax(0, 1fr); gap: var(--folio-primitive-space-8); align-items: start; }
.workspace-editor-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--folio-primitive-space-16); }
.workspace-editor-figures,
.workspace-editor-images { display: flex; flex-wrap: wrap; gap: var(--folio-primitive-space-16); }
.workspace-editor-images:empty { display: none; }
.workspace-editor-figure { display: grid; gap: var(--folio-primitive-space-8); margin: 0; max-width: 100%; min-width: 0; }
.workspace-editor-figure-image { position: relative; justify-self: start; max-width: 100%; }
.workspace-editor-figure img { display: block; max-width: 100%; max-height: 16rem; object-fit: contain; }
.workspace-editor-figure .folio-dialog-close { position: absolute; inset-block-start: 0; inset-inline-end: 0; background: var(--folio-semantic-color-background-canvas); }
/* Empty text before/after a block stays out of sight until the block is in use. */
.workspace-editor-block-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--folio-primitive-space-16); }
.workspace-editor-adds { display: flex; flex-wrap: wrap; gap: 0 var(--folio-primitive-space-16); margin-inline-start: auto; opacity: 0; transition: opacity var(--folio-semantic-motion-duration) var(--folio-semantic-motion-easing); }
.workspace-editor-block:hover .workspace-editor-adds,
.workspace-editor-block:focus-within .workspace-editor-adds { opacity: 1; }
.workspace-editor-add { border: 0; background: none; color: var(--folio-semantic-color-text-secondary); cursor: pointer; font: inherit; font-size: 0.78em; padding: 0; }
.workspace-editor-add::before { content: "+ "; }
.workspace-editor-add:hover,
.workspace-editor-add:focus-visible { color: var(--folio-semantic-color-text-primary); }
/* Save stays in reach however long the task is. */
.workspace-editor-bar {
  position: sticky;
  inset-block-end: 0;
  z-index: 1;
  display: grid;
  gap: var(--folio-primitive-space-8);
  margin: 0 calc(var(--folio-component-dialog-bodyPadding) * -1) calc(var(--folio-component-dialog-bodyPadding) * -1);
  padding: var(--folio-primitive-space-12) var(--folio-component-dialog-bodyPadding);
  background: var(--folio-semantic-color-background-content);
  border-block-start: var(--folio-primitive-border-thin) solid var(--folio-semantic-color-border-subtle);
}
.workspace-editor-dirty { margin-inline-start: auto; color: var(--folio-semantic-color-text-secondary); font-size: 0.86em; }
.workspace-editor-upload { position: relative; display: inline-block; overflow: hidden; color: var(--folio-semantic-color-text-secondary); font-size: 0.86em; }
.workspace-editor-upload:hover,
.workspace-editor-upload:focus-within { color: var(--folio-semantic-color-text-primary); }
.workspace-editor-upload input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.workspace-editor-upload:focus-within { outline: var(--folio-primitive-border-thin) solid currentColor; }
.workspace-editor-error { margin: 0; color: var(--folio-semantic-color-text-primary); }
.workspace-editor-note { margin: 0; font-size: 0.86em; }
.workspace-editor-weights { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--folio-primitive-space-4) var(--folio-primitive-space-16); }
.workspace-editor-weights:not(:has(> :not([hidden]))) { display: none; }
.workspace-editor-weights > .workspace-editor-even { margin-inline-start: auto; opacity: 1; font-size: 0.86em; }
.workspace-editor-even::before { content: none; }
.workspace-task-editor input.workspace-editor-search { display: block; width: 100%; margin-block-end: var(--folio-primitive-space-8); }
.workspace-task-editor [data-weight][aria-invalid] { border-color: var(--folio-semantic-color-status-red); }
.workspace-editor-preview { min-width: 0; display: grid; gap: var(--folio-primitive-space-24); transition: opacity var(--folio-semantic-motion-duration) var(--folio-semantic-motion-easing); }
.workspace-editor-preview[data-stale] { opacity: 0.55; }
.workspace-editor-preview-card { min-width: 0; overflow: hidden; }
.workspace-editor-preview-card iframe,
.workspace-editor-card-stage iframe { display: block; width: 536px; border: 0; transform-origin: top left; }
.workspace-editor-card-stage { position: fixed; inset-inline-start: -10000px; inset-block-start: 0; width: 536px; pointer-events: none; }