/* Shared work-page reading treatment. The welcome page and print stylesheet
   retain their own layouts. Issue colours and inner reference boxes are semantic. */
/* Shared scales for sustained reading, editing and quiet secondary controls. */
.migration-app {
  --ep-copy-size: 1.125rem;
  --ep-copy-leading: 1.75;
  --ep-copy-width: 720px;
  --ep-ui-muted: #52647c;
  --ep-ui-selected: #e6eef9;
  --ep-ui-radius: 10px;
  --ep-display-font: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", serif;
}
@media screen {
  .migration-main :is(.ep-demo-start h1, .ep-write-title h1, .ep-essay-content > h1, .ep-arsenal-heading h1, .ep-home-welcome h1) {
    font-family: var(--ep-display-font);
    font-weight: 600;
    letter-spacing: .015em;
  }
  .migration-main :is(textarea, input, select, [tabindex="-1"]):focus {
    outline: 2px solid #8096b8;
    outline-offset: 2px;
  }
  .migration-main:not(:has(.ep-home-welcome--layout-b)) {
    --ep-reading-surface: #fbf9f5;
    --ep-glass: #fbf9f5;
    --ep-surface: #fbf9f5;
    --ep-reading-border: #c5d0df;
    --ep-reading-shadow: 0 1px 2px rgba(34,52,78,.04), 0 8px 24px rgba(34,52,78,.075);
  }

  .migration-main:not(:has(.ep-home-welcome--layout-b)) :is(
    .ep-demo-practice, .ep-demo-modes a, .ep-report-state, .ep-report-criterion,
    .ep-report-priority, .ep-report-problem, .ep-report-full-text,
    .ep-map-source, .ep-map-detail-card, .ep-report-full-group,
    .ep-logic-intro, .ep-logic-support-anchor, .ep-logic-support-card,
    .ep-logic-expansion-card, .ep-logic-expansions,
    .ep-training-task, .ep-training-paragraph, .ep-training-draft,
    .ep-archive-card, .ep-archive-empty, .ep-archive-patterns,
    .ep-error-book-section, .ep-error-book-card, .ep-arsenal-card,
    .vocab-card, .ep-review-intro, .ep-review-card
  ) {
    background: #fbf9f5;
    border-right-color: var(--ep-reading-border);
    border-bottom-color: var(--ep-reading-border);
    border-left-color: var(--ep-reading-border);
    box-shadow: var(--ep-reading-shadow);
  }

  .migration-main .ep-arsenal-section {
    background: #f3f6fb;
    border-color: #c9d4e3;
    box-shadow: none;
  }
  .ep-arsenal-picker .ep-arsenal-card {
    background: #fbf9f5;
    border-color: #c9d4e3;
    box-shadow: var(--ds-shadow-2);
  }

  /* Read in this order: source → explanation → reference → supporting detail. */
  :is(.migration-main, .ep-arsenal-picker) :is(.ep-demo-practice blockquote, .ep-map-detail-card__original,
    .ep-training-task blockquote, .ep-training-paragraph__source blockquote,
    .ep-error-book-card__evidence, .ep-arsenal-card__expression,
    .ep-arsenal-card > h3.ep-arsenal-card__expression) {
    color: #263952;
    font-size: 1.094rem;
    font-weight: 400;
    line-height: 1.75;
  }
  :is(.migration-main, .ep-arsenal-picker) :is(.ep-demo-practice__goal p, .ep-arsenal-card__meaning,
    .ep-training-task > p, .ep-error-book-card__explanation,
    .ep-arsenal-card__details dd) {
    color: #526277;
    font-size: .84rem;
    line-height: 1.7;
  }
  :is(.migration-main, .ep-arsenal-picker) :is(.ep-demo-practice__reference, .ep-map-detail-card__improved,
    .ep-error-book-card__answer, .ep-arsenal-card__example) {
    padding: 1rem 1.1rem;
    border: 1px solid #d5e4df;
    border-radius: 12px;
    background: linear-gradient(125deg,#f5fbf8,#edf6f3);
  }
  :is(.migration-main, .ep-arsenal-picker) :is(.ep-demo-practice__reference p, .ep-map-detail-card__improved,
    .ep-error-book-card__answer p, .ep-arsenal-card__example p) {
    color: #355f56;
    font-size: 1.14rem;
    font-weight: 650;
    line-height: 1.75;
  }
  :is(.migration-main, .ep-arsenal-picker) :is(.ep-demo-practice__reference small,
    .ep-arsenal-card__example .ep-arsenal-card__translation) {
    color: #566f68;
    font-size: .78rem;
    font-weight: 400;
  }
  :is(.migration-main, .ep-arsenal-picker) :is(.ep-demo-practice__label, .ep-arsenal-card > h3:not(.ep-arsenal-card__expression),
    .ep-arsenal-card__details dt, .ep-arsenal-card__example > span) {
    color: #536681;
    font-size: .78rem;
    font-weight: 600;
  }
  :is(.migration-main, .ep-arsenal-picker) :is(.ep-demo-practice__top small, .ep-demo-practice__foot,
    .ep-demo-start__note, .ep-demo-modes small, .ep-arsenal-heading__note,
    .ep-arsenal-card__source, .ep-arsenal-card__index, .ep-arsenal-card__origin,
    .ep-arsenal-section__header > strong, .ep-arsenal-search-scope,
    .ep-archive-card__meta, .ep-error-book-card__meta,
    .ep-training-entry-save, .ep-training-task__practice small) {
    color: #637289;
    font-size: .75rem;
    line-height: 1.6;
  }
  :is(.migration-main, .ep-arsenal-picker) .ep-arsenal-card__details > summary { color: #536681; font-size: .81rem; min-height: 44px; }
  :is(.migration-main, .ep-arsenal-picker) .ep-arsenal-search input::placeholder { color: #637289; }
  :is(.migration-main, .ep-arsenal-picker) .ep-arsenal-empty p { color: #536681; }

  /* Section accents belong to material labels, not error/success feedback. */
  :is(.migration-main, .ep-arsenal-picker) .ep-arsenal-card {
    --ep-arsenal-accent: linear-gradient(125deg,#fffbe7,#f3da87);
    --ep-arsenal-accent-border: #d4b85a;
    --ep-arsenal-accent-soft: linear-gradient(125deg,#fffdf3,#fbf5df);
  }
  :is(.migration-main, .ep-arsenal-picker) .ep-curriculum-card--sentence,
  .ep-unit-page[data-unit-section="sentence"] {
    --ep-arsenal-accent: linear-gradient(125deg,#fff3f7,#efc7da);
    --ep-arsenal-accent-border: #c997af;
    --ep-arsenal-accent-soft: linear-gradient(125deg,#fff8fb,#faf0f5);
  }
  :is(.migration-main, .ep-arsenal-picker) .ep-arsenal-card--transition,
  .ep-unit-page[data-unit-section="transition"] {
    --ep-arsenal-accent: linear-gradient(125deg,#f0fbf7,#bfe6d8);
    --ep-arsenal-accent-border: #87bfa9;
    --ep-arsenal-accent-soft: linear-gradient(125deg,#f3faf7,#eaf6f0);
  }
  :is(.migration-main, .ep-arsenal-picker) .ep-arsenal-card--argument,
  .ep-unit-page[data-unit-section="argument"] {
    --ep-arsenal-accent: linear-gradient(125deg,#f5f1ff,#d9cef1);
    --ep-arsenal-accent-border: #ada0ce;
    --ep-arsenal-accent-soft: linear-gradient(125deg,#f8f5fd,#f0ebf8);
  }
  :is(.migration-main, .ep-arsenal-picker) :is(.ep-demo-practice__top > span,
    .ep-logic-support-anchor__heading strong) {
    padding: .3rem .6rem;
    border: 1px solid var(--ep-arsenal-accent-border,#c997af);
    border-radius: 6px;
    background: var(--ep-arsenal-accent,linear-gradient(125deg,#fff3f7,#efc7da));
    color: #34445c;
    box-shadow: none;
    font-size: .75rem;
    font-weight: 650;
  }

  :is(.migration-main, .ep-arsenal-picker) .ep-arsenal-card button {
    min-height: 40px;
    padding: .5rem .85rem;
    border-color: #b9c9dd;
    background: #fbf9f5;
    color: #3e5575;
    font-size: .81rem;
  }
  :is(.migration-main, .ep-arsenal-picker) .ep-arsenal-card [data-arsenal-remove] {
    border-color: transparent;
    background: transparent;
    color: #536681;
  }
  :is(.migration-main, .ep-arsenal-picker) .ep-arsenal-card [data-arsenal-remove]:hover { text-decoration: underline; }
  .migration-main :is(.ep-training-task__result, .ep-training-paragraph__result) {
    min-height: 1.7em;
    overflow-wrap: anywhere;
  }
  :is(.migration-main, .ep-arsenal-picker) .ep-arsenal-card__status:empty { display: block; }
  :is(.migration-main, .ep-arsenal-picker) .ep-arsenal-card__status { min-height: 1.6em; }
  :is(.migration-main, .ep-arsenal-picker) .ep-arsenal-card button:disabled { opacity: 1; color: #637289; background: #f1f4f8; }
  .migration-main .ep-report-priority:hover { transform: none; }

  @media (prefers-reduced-motion: no-preference) {
    .migration-main .migration-write-submit { transition: filter 140ms ease; }
    .migration-main .migration-write-submit:not(:disabled):hover { filter: brightness(1.05); }
  }
}

@media screen {
  .ep-workspace-brand p, .ep-nav-group__label,
  #sidebar .ep-sidebar-account-action small, #sidebar .ep-sidebar-identity small {
    color: var(--ep-ui-muted); font-size: 12px; letter-spacing: normal;
  }
  .migration-write-page .st-key-essay_editor {
    padding: clamp(16px, 2vw, 24px); border-radius: 16px;
    max-width: 768px; margin-inline: auto;
  }
  .ep-write-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
  .ep-write-title h1 { margin: 0; font-size: clamp(1.9rem, 2.7vw, 2.6rem); line-height: 1.2; }
  .ep-write-flow { position: relative; color: var(--ep-ui-muted); font-size: 13px; }
  .ep-write-flow > summary { padding: 10px; min-height: 44px; cursor: pointer; }
  .ep-write-flow[open] .ep-stepper { position: absolute; top: 100%; right: 0; z-index: 15; width: min(620px, calc(100vw - 40px)); padding: 16px; background: #fbf9f5; border: 1px solid #c5d0df; box-shadow: var(--ep-reading-shadow); }
  .migration-write-page .ep-writing-timer { margin: 8px 0; padding: 6px 10px; box-shadow: none; }
  .migration-write-page .st-key-essay_editor textarea,
  .migration-training-page :is(.ep-training-task__practice, .ep-training-paragraph__work, .ep-training-draft__work) textarea {
    display: block; width: 100%; max-width: var(--ep-copy-width); margin-inline: auto;
    padding: 20px 24px; font-size: var(--ep-copy-size); line-height: var(--ep-copy-leading);
    letter-spacing: normal; word-spacing: normal; color: #263952; background: #fbf9f5;
    border-radius: var(--ep-ui-radius); scroll-margin-top: 80px;
  }
  .migration-write-page .st-key-essay_input textarea { min-height: clamp(350px, 48vh, 600px); }
  .migration-write-page .st-key-essay_editor textarea:focus-visible { outline: 2px solid #5480b8; outline-offset: 2px; }
  .migration-write-page .st-key-topic_input textarea { min-height: 104px; }
  .migration-write-page .ep-stepper { padding-block: 6px; margin-bottom: 8px; }
  .migration-training-page .ep-training-task-grid { max-width: 820px; }
  .migration-training-page :is(.ep-training-paragraph, .ep-training-draft__work) { max-width: 840px; }
  .migration-training-page :is(.ep-training-task blockquote, .ep-training-reference p,
    .ep-training-paragraph__source blockquote, .ep-training-draft__original p) {
    max-width: var(--ep-copy-width); font-size: var(--ep-copy-size); line-height: var(--ep-copy-leading);
  }
  .migration-training-page .ep-training-help { margin: 0 0 8px; color: var(--ep-ui-muted); font-size: 14px; }
  .ep-training-help > summary { display: list-item; width: fit-content; min-height: 32px; padding-block: 5px; cursor: pointer; }
  .ep-training-help[open] { padding: 12px; border-radius: var(--ep-ui-radius); background: #fbf9f5; }
  .ep-training-help p { max-width: 70ch; }
  .migration-training-page .ep-training-access { margin: 0; padding: 8px 12px; border-radius: 10px 10px 0 0; }
  .migration-training-page .ep-training-progress-strip { margin: 0 0 10px; padding: 6px 12px; border-top: 0; border-radius: 0 0 10px 10px; font-size: 13px; }
  .migration-training-page .ep-training-panel { padding-top: 2px; }
  .migration-training-page .ep-training-panel__heading { margin-bottom: 8px; }
  .migration-training-page .ep-training-navigation { margin-bottom: 8px; }
  .migration-training-page .ep-training-back { background: transparent; border-color: transparent; font-size: 14px; }
  .migration-training-page .ep-training-task__practice textarea { min-height: 120px; }

  .migration-report-page .ep-report-complete { margin-bottom: 12px; }
  .migration-report-page .ep-report-scoreboard { grid-template-columns: minmax(160px, .65fr) minmax(0, 2fr); gap: 12px; align-items: start; }
  .migration-report-page .ep-overall-card { padding: 14px; min-height: 0; border-radius: 12px; }
  .migration-report-page .ep-overall-card__value { font-size: 48px; line-height: 1.1; margin: 6px 0; }
  .migration-report-page .ep-overall-card__label { font-size: 13px; }
  .migration-report-page .ep-overall-card__note { font-size: 12px; line-height: 1.5; }
  .migration-report-page .ep-report-criteria { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .migration-report-page .ep-report-criterion { padding: 10px 12px; border-radius: var(--ep-ui-radius); box-shadow: none; }
  .ep-criterion-reason { color: var(--ep-ui-muted); font-size: 13px; }
  .ep-criterion-reason > summary { min-height: 32px; padding-block: 5px; cursor: pointer; }
  .migration-report-page .ep-report-priorities { margin-top: 16px; }
  .ep-archive-question { margin: -.3rem 0 1rem; color: var(--ep-ui-muted); font-size: 14px; }
  .ep-archive-question > summary { min-height: 36px; padding-block: 6px; cursor: pointer; }
  .ep-archive-question p { max-width: 74ch; font-size: 16px; line-height: 1.75; white-space: pre-line; }
  .ep-archive-card h2[lang="en"] { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

  .migration-main .ep-arsenal-tabs { border: 0; border-bottom: 1px solid #c5d0df; border-radius: 0; background: transparent; box-shadow: none; }
  .migration-main .ep-arsenal-tabs button.is-active { color: #243f65; background: #fbf9f5; border-color: #a9bed8; box-shadow: none; }
  .migration-main .ep-arsenal-directory button[aria-pressed="true"] {
    color: #243f65; border-color: #9bb2cf; background: var(--ep-ui-selected); box-shadow: none;
  }
  .migration-main .ep-arsenal-subviews button[aria-pressed="true"] { background: transparent; border-color: transparent; border-bottom-color: #345d8a; border-radius: 0; }
  .migration-main .ep-arsenal-section { padding: 12px; border: 0; border-radius: 12px; background: #f3f6fb; }
  .migration-main .ep-arsenal-reader .ep-arsenal-card { border-radius: 12px; box-shadow: var(--ds-shadow-1); }
  .migration-main .ep-arsenal-reader { scroll-margin-top: 74px; }
  .migration-main .ep-corpus-focus { grid-template-columns: auto minmax(0, 1fr); }
  .migration-main .ep-corpus-focus p { font-size: 15px; line-height: 1.7; }
  .migration-main .ep-corpus-focus > small { grid-column: 2; color: var(--ep-ui-muted); font-size: 12px; white-space: normal; }
  .migration-main :is(.ep-corpus-reference p, .ep-corpus-outline p, .ep-sentence-reading p) { font-size: 17px; line-height: 1.75; max-width: 72ch; }
  .migration-main .ep-corpus-outline__label { font-size: 13px; }
  .migration-main .ep-corpus-lens { color: #4b6258; font-size: 12px; }
  .migration-main :is(.ep-corpus-directions, .ep-corpus-views, .ep-sentence-views) button { font-size: 14px; min-height: 40px; }
  .migration-main .ep-arsenal-reader :is(.ep-arsenal-card__meaning, .ep-arsenal-card__details dd) { font-size: 15px; }
  .ep-arsenal-directory-toggle { display: none; }

  @media (max-width: 700px) {
    body:has(:is(.migration-write-page, .migration-training-page, .migration-report-page)) #mobile-account { display: none; }
    .migration-main:has(:is(.migration-write-page, .migration-training-page)) .block-container { padding-top: 12px; }
    .migration-write-page .ep-stepper { gap: 4px; padding: 6px; }
    .migration-write-page .ep-stepper small { display: none; }
    .migration-write-page .st-key-essay_editor { padding: 12px; }
    .migration-write-page .st-key-essay_editor textarea,
    .migration-training-page :is(.ep-training-task__practice, .ep-training-paragraph__work, .ep-training-draft__work) textarea {
      padding: 14px; font-size: 17px; line-height: 1.75;
    }
    .migration-write-page .st-key-essay_input textarea { min-height: max(320px, 45dvh); }
    .migration-training-page .ep-training-navigation { grid-template-columns: 1fr; gap: 4px; }
    .migration-training-page .ep-training-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 2px; }
    .migration-training-page .ep-training-tabs button { padding: 8px 4px; min-height: 44px; font-size: 14px; }
    .migration-training-page .ep-training-back { justify-self: end; padding: 4px 8px; min-height: 36px; }
    .migration-training-page .ep-training-access strong { font-size: 14px; }
    .migration-training-page .ep-training-access p { font-size: 13px; }
    .migration-training-page .ep-training-panel__heading h2 { font-size: 20px; }
    .migration-training-page .ep-training-current__label span { display: none; }
    .migration-training-page .ep-training-panel__heading:has(h2) { display: none; }
    .migration-training-page[data-training-state="demo"] [data-training-sync-state] { display: none; }
    .migration-training-page .ep-training-task { padding: 14px; }
    .migration-training-page .ep-training-task blockquote { margin-block: 10px; padding-block: 6px; }
    .migration-report-page .ep-report-scoreboard { grid-template-columns: 1fr; gap: 8px; }
    .migration-report-page .ep-overall-card { grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; text-align: left; padding: 12px; }
    .migration-report-page .ep-overall-card__value { grid-column: 2; grid-row: 1 / 3; margin: 0; font-size: 40px; }
    .migration-report-page .ep-report-criterion__top { flex-wrap: wrap; gap: 0 6px; font-size: 12px; }
    .migration-report-page .ep-report-criterion__top strong { font-size: 22px; }
    .migration-report-page .ep-report-priorities__heading p { font-size: 13px; }
    .migration-report-page .ep-map-choice { min-height: 44px; }
    #global-lookup-form button[type="submit"] { min-height: 36px; min-width: 44px; }
    .ep-arsenal-directory-toggle { display: flex; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; padding: 10px; border: 1px solid #b8c8dd; border-radius: 8px; color: #243f65; background: #fbf9f5; font: inherit; font-size: 14px; text-align: left; }
    .ep-arsenal-directory-toggle span { flex: none; color: var(--ep-ui-muted); }
    .migration-main .ep-arsenal-directory > p { display: none; }
    .ep-arsenal-directory:has([aria-expanded="false"]) > :is(.ep-arsenal-directory__items, .ep-arsenal-directory__footer) { display: none; }
    .ep-arsenal-directory:has([aria-expanded="true"]) > .ep-arsenal-directory__items { max-height: 40dvh; margin-top: 8px; }
    .migration-main .ep-arsenal-section { padding: 10px; }
    .migration-main .ep-arsenal-section__header { padding-bottom: 8px; }
    .migration-main .ep-arsenal-section__header h2 { font-size: 18px; }
    .migration-main .ep-arsenal-reading { gap: 10px; }
  }
  @media (min-width: 360px) and (max-width: 700px) {
    .migration-training-page .ep-training-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .migration-training-page .ep-training-tabs button { font-size: 13px; padding-inline: 2px; }
  }
}
