/*!
 * ORDER 1013 - one opt-in lesson template.
 * Add ss617 to BODY only. No import, URL, generated text, or lesson content.
 * Source: 617 C1 written rules; later Owner rulings are recorded in the spec.
 * This stylesheet is a design handoff, not a rendered page acceptance.
 */

/* ===== PART 1: TOKENS, FRAME, START, GOALS ===== */

/* T1/T3; 617 P1-02 C1: canonical families. Deep is never a concept fill. */
.ss617 {
  --ss617-mint-light: #E8FFE8;
  --ss617-mint-mid: #BFE6BF;
  --ss617-mint-deep: #2E7D32;
  --ss617-peach-light: #FFF0DB;
  --ss617-peach-mid: #FAD9A8;
  --ss617-peach-deep: #D98A2B;
  --ss617-cyan-light: #EAFBFF;
  --ss617-cyan-mid: #C2ECF5;
  --ss617-cyan-deep: #3AAEC8;
  --ss617-purple-light: #F6EAFA;
  --ss617-purple-mid: #E2C4EE;
  --ss617-purple-deep: #9B3FC9;
  --ss617-sand-light: #F0EBCF;
  --ss617-sand-mid: #DDD3A0;
  --ss617-sand-deep: #8A7B4A;
  --ss617-yellow-light: #FFFBE6;
  --ss617-yellow-mid: #FCEFB8;
  --ss617-yellow-deep: #C9A227;
  /* C1 DISABLED: no family selector consumes teal or orange. */
  --ss617-disabled-teal-light: #EAF7F2;
  --ss617-disabled-teal-mid: #B7E0D0;
  --ss617-disabled-teal-deep: #2E8B7A;
  --ss617-disabled-orange-light: #FFF7ED;
  --ss617-disabled-orange-mid: #FED7AA;
  --ss617-disabled-orange-deep: #C2410C;
  /* C1 reserved kinds; answer-feedback colours remain engine-owned. */
  --ss617-definition-bg: #FFF0F0;
  --ss617-definition-ink: #C00000;
  --ss617-misconception-bg: #FFF0F0;
  --ss617-misconception-mid: #F5C2C2;
  --ss617-misconception-ink: #C0392B;
  --ss617-comparison-bg: #F5F0E4;
  --ss617-comparison-ink: #6D4C41;
  --ss617-memory-bg: #171413;
  --ss617-memory-key: #FFFF00;
  --ss617-recall-bg: #EEF4FF;
  --ss617-recall-deep: #3B6FD4;
  --ss617-warmup-bg: #F4F0FF;
  --ss617-warmup-deep: #7C5CD4;
  --ss617-summary-bg: #F5F0E4;
  --ss617-zh-ink: #C2410C;
  /* 617 P3-01 neutral and action tokens; no feedback aliases. */
  --ss617-bg: #FBF8F4;
  --ss617-paper: #FFFFFF;
  --ss617-soft: #F4EFE7;
  --ss617-ink: #171413;
  --ss617-secondary: #3A342F;
  --ss617-muted: #6B6358;
  --ss617-border: #E6DFD3;
  --ss617-input-border: #8F8578;
  --ss617-brand: #EA580C;
  --ss617-primary: #C4530C;
  --ss617-primary-ink: #FFFFFF;
  --ss617-accent-ink: #7A2E08;
  --ss617-accent-soft: #FFF6EE;
  --ss617-focus: #185FA5;
  /* 617 P1-08: fonts and the 390/1280 scale. C5 differences in SIZE_NOTE. */
  --ss617-font: "Geist", "Noto Sans SC", system-ui, sans-serif;
  --ss617-serif: "Fraunces", Georgia, serif;
  --ss617-mono: "Geist Mono", ui-monospace, monospace;
  --ss617-body-size: 20px;
  --ss617-card-title-size: 28px;
  --ss617-card-title-wide: 32px;
  --ss617-control-size: 18px;
  --ss617-control-wide: 20px;
  --ss617-caption-size: 18px;
  --ss617-status-size: 18px;
  --ss617-secondary-size: 14px;
  --ss617-page-title-size: 40px;
  --ss617-page-title-wide: 48px;
  --ss617-line-height: 1.5;
  --ss617-title-leading: 1.2;
  --ss617-font-normal: 400;
  --ss617-font-strong: 600;
  --ss617-font-bold: 700;
  /* 617 P1-08/09; new frame values are recommendations, not measurements. */
  --ss617-space-1: 4px;
  --ss617-space-2: 8px;
  --ss617-space-3: 12px;
  --ss617-space-4: 16px;
  --ss617-space-5: 20px;
  --ss617-space-6: 24px;
  --ss617-space-8: 32px;
  --ss617-gutter: min(20px, 5vw);
  --ss617-gutter-wide: 30px;
  --ss617-card-pad: 16px;
  --ss617-card-pad-wide: 24px;
  --ss617-card-radius: 16px;
  --ss617-card-radius-wide: 20px;
  --ss617-inner-radius: 12px;
  --ss617-border-width: 1px;
  --ss617-input-border-width: 1.5px;
  --ss617-mark-width: 4px;
  --ss617-focus-width: 3px;
  --ss617-focus-gap: 3px;
  --ss617-shadow: none;
  --ss617-touch: 48px;
  --ss617-stage-wide: 54px;
  --ss617-index-target: 48px;
  --ss617-enlarge-target: 56px;
  --ss617-main-target: 64px;
  --ss617-main-target-wide: 68px;
  --ss617-mode-target: 80px;
  --ss617-stage-min: 78px;
  --ss617-course-min: 96px;
  --ss617-brand-min: 120px;
  --ss617-language-width: 104px;
  --ss617-stage-number: 32px;
  --ss617-rail-height: 56px;
  --ss617-notice-height: 80px;
  --ss617-notice-wide: 56px;
  --ss617-safe-top: 64px;
  /* KBD-1: builder measures actual overlays; this is a starter reserve only. */
  --ss617-safe-bottom: 112px;
  --ss617-rail-z: 45;
  --ss617-picture-scale: 85%;
  --ss617-picture-cap: 544px;
  --ss617-text-measure: 54ch;
  --ss617-text-measure-zh: 26em;
  margin: 0;
  background: var(--ss617-bg);
  color: var(--ss617-ink);
  font-family: var(--ss617-font);
  font-size: var(--ss617-body-size);
  line-height: var(--ss617-line-height);
  scroll-padding-block-start: var(--ss617-safe-top);
  scroll-padding-block-end: var(--ss617-safe-bottom);
}

/* T1/T4: sizing stays inside the opted-in body; no overflow clipping. */
.ss617 *, .ss617 *::before, .ss617 *::after {
  box-sizing: border-box;
}

/* C6/P1-08: visible focus without changing any enabled/disabled state. */
.ss617 :where(button, a, input, textarea, select, summary):focus-visible {
  outline: var(--ss617-focus-width) solid var(--ss617-focus);
  outline-offset: var(--ss617-focus-gap);
  scroll-margin-block: var(--ss617-safe-top) var(--ss617-safe-bottom);
}

/* 617 P1-09 + OF-08: use page width; no narrow inner wrapper. */
.ss617 .ss617-main {
  inline-size: calc(100% - var(--ss617-gutter) - var(--ss617-gutter));
  min-inline-size: 0;
  margin-inline: auto;
  padding-block: var(--ss617-space-5);
}

/* P2-01 frame: compact wrapping header; preserve actual control nodes. */
.ss617 .ss617-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ss617-space-2);
  padding: var(--ss617-space-3) var(--ss617-gutter);
  background: var(--ss617-paper);
  border-block-end: var(--ss617-border-width) solid var(--ss617-border);
}

/* P2-01: brand can yield space instead of causing horizontal scroll. */
.ss617 .ss617-brand {
  flex: 1 1 var(--ss617-brand-min);
  min-inline-size: 0;
  max-inline-size: 100%;
}

/* P2-01/C6: language remains two real full-size buttons. */
.ss617 .ss617-language {
  display: flex;
  flex: 0 1 var(--ss617-language-width);
  gap: 0;
  padding: var(--ss617-space-1);
  max-inline-size: 100%;
}

/* P2-01: course controls share the next phone row and wrap at zoom. */
.ss617 .ss617-course {
  flex: 1 1 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ss617-course-min)), 1fr));
  gap: var(--ss617-space-2);
  min-inline-size: 0;
}

/* P1-08/C6: worded frame controls stay readable; event state is untouched. */
.ss617 .ss617-touch, .ss617 .ss617-course > button,
.ss617 .ss617-language > button, .ss617 .ss617-tool {
  min-block-size: var(--ss617-touch) !important;
  min-inline-size: min(100%, var(--ss617-touch));
  max-inline-size: 100%;
  padding: var(--ss617-space-2) var(--ss617-space-3);
  border: var(--ss617-border-width) solid var(--ss617-border);
  border-radius: var(--ss617-inner-radius);
  font-family: var(--ss617-font);
  font-size: var(--ss617-control-size);
  line-height: var(--ss617-line-height);
  white-space: normal;
  overflow-wrap: anywhere;
  box-shadow: var(--ss617-shadow);
}

/* P2-01/617 phone mockups: seven real stages, wrapping four then three at 390. */
.ss617 .ss617-stage-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ss617-space-2);
  padding: var(--ss617-space-2) var(--ss617-gutter);
  inline-size: 100%;
  min-inline-size: 0;
  overflow: visible;
}

/* P2-01/KBD-4: engine stage classes are styled, never replaced. */
.ss617 .ss617-stage-list .stage-tab {
  flex: 1 1 calc((100% - var(--ss617-space-6)) / 4);
  min-inline-size: min(100%, var(--ss617-stage-min));
  min-block-size: var(--ss617-touch) !important;
  max-inline-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--ss617-space-1);
  padding: var(--ss617-space-2);
  border: var(--ss617-border-width) solid var(--ss617-border);
  border-radius: var(--ss617-inner-radius);
  background: var(--ss617-paper);
  color: var(--ss617-ink);
  font-size: var(--ss617-control-size) !important;
  line-height: var(--ss617-title-leading);
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* P2-01: current state has both the existing aria state and a visible outline. */
.ss617 .ss617-stage-list .stage-tab[aria-current="step"] {
  background: var(--ss617-accent-soft);
  border-color: var(--ss617-primary);
  color: var(--ss617-accent-ink);
}

/* P2-01: number stays present and retains its source string. */
.ss617 .ss617-stage-list .stage-num {
  flex: 0 0 auto;
  inline-size: var(--ss617-stage-number);
  block-size: var(--ss617-stage-number);
  font-size: var(--ss617-status-size) !important;
}

/* C5/OF-05: secondary labels remain engine-visible at its approved breakpoints. */
.ss617 .ss617-stage-list .medley-route-sublabel {
  font-size: var(--ss617-secondary-size) !important;
  line-height: var(--ss617-line-height);
  white-space: normal;
}

/* P2-01/C6: all live controls remain in normal flow, in source order. */
.ss617 .ss617-toolbar, .ss617 .ss617-audio-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ss617-space-2);
  min-inline-size: 0;
  max-inline-size: 100%;
  padding: var(--ss617-space-2) 0;
}

/* P2-01: range input uses the available space and retains its real semantics. */
.ss617 .ss617-audio-tools input[type="range"] {
  flex: 1 1 var(--ss617-course-min);
  min-inline-size: 0;
  max-inline-size: 100%;
  min-block-size: var(--ss617-touch);
}

/* C6: mastery/progress contents and colours remain owned by existing components. */
.ss617 .ss617-progress {
  flex: 1 1 var(--ss617-brand-min);
  min-inline-size: 0;
  max-inline-size: 100%;
}

/* 950 P1-03/07: only the current-stage return rail is sticky. */
.ss617 .ss617-entry-rail {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--ss617-rail-z);
  inline-size: 100%;
  min-block-size: var(--ss617-rail-height) !important;
  padding: var(--ss617-space-2) var(--ss617-space-3);
  margin-block-end: var(--ss617-space-2);
  background: var(--ss617-paper);
  color: var(--ss617-ink);
  border: var(--ss617-border-width) solid var(--ss617-border);
  border-radius: var(--ss617-inner-radius);
  font-size: var(--ss617-status-size);
  line-height: var(--ss617-line-height);
  text-align: start;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* 950 P1-05/OF-04: single original notice; its predicate/text is not changed. */
.ss617 .ss617-entry-notice {
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: var(--ss617-notice-height);
  padding: var(--ss617-space-2) var(--ss617-space-3);
  margin-block-end: var(--ss617-space-2);
  overflow-wrap: anywhere;
}

/* 617 P1-08: serif is reserved for page-level headings; not teaching cards. */
.ss617 .ss617-page-title {
  margin-block: 0 var(--ss617-space-4);
  color: var(--ss617-ink);
  font-family: var(--ss617-serif);
  font-size: var(--ss617-page-title-size);
  font-weight: var(--ss617-font-strong);
  line-height: var(--ss617-title-leading);
  overflow-wrap: anywhere;
}

/* 617 P2-01: Start keeps copy/action first and its actual picture after. */
.ss617 .ss617-start {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--ss617-space-6);
  min-inline-size: 0;
}

/* OF-07/Board994: preserve phone picture legibility and natural aspect ratio. */
.ss617 .ss617-start-picture {
  inline-size: 100%;
  min-inline-size: 0;
  margin: 0;
}

/* T6: a frame for an existing drawn picture, not a page-made diagram. */
.ss617 .ss617-start-picture img {
  display: block;
  inline-size: 100%;
  max-inline-size: 100%;
  block-size: auto;
  object-fit: contain;
}

/* 617 P2-01: primary and secondary actions keep complete wording. */
.ss617 .ss617-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ss617-space-3);
  align-items: stretch;
  min-inline-size: 0;
}

/* P1-08/P2-01: minimum 64px action with a word label; never icon-only. */
.ss617 .ss617-action {
  display: inline-flex;
  flex: 1 1 var(--ss617-brand-min);
  align-items: center;
  justify-content: center;
  gap: var(--ss617-space-2);
  min-block-size: var(--ss617-main-target) !important;
  min-inline-size: min(100%, var(--ss617-touch));
  max-inline-size: 100%;
  padding: var(--ss617-space-3) var(--ss617-space-4);
  border: var(--ss617-border-width) solid var(--ss617-border);
  border-radius: var(--ss617-card-radius);
  background: var(--ss617-paper);
  color: var(--ss617-ink);
  font-family: var(--ss617-font);
  font-size: var(--ss617-control-size);
  font-weight: var(--ss617-font-strong);
  line-height: var(--ss617-line-height);
  white-space: normal;
  overflow-wrap: anywhere;
  text-decoration: none;
  box-shadow: var(--ss617-shadow);
}

/* P3-01 reused action colour; canonical brand orange is not used as text fill. */
.ss617 .ss617-action-primary {
  background: var(--ss617-primary);
  color: var(--ss617-primary-ink);
  border-color: var(--ss617-primary);
}

/* 617 P2-01/950 Goals: preserve all real goal rows and preparation content. */
.ss617 .ss617-goals {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ss617-space-6);
  align-items: start;
  min-inline-size: 0;
}

/* 617 P2-01: native goal controls, no replacement content or extra reveal. */
.ss617 .ss617-goal-list {
  display: grid;
  gap: var(--ss617-space-3);
  margin: 0;
  padding: 0;
}

/* D2 layout: one readable goal row at a time, retained icon in its own slot. */
.ss617 .ss617-goal {
  display: flex;
  align-items: flex-start;
  gap: var(--ss617-space-3);
  min-inline-size: 0;
  min-block-size: var(--ss617-main-target);
  padding: var(--ss617-space-4);
  background: var(--ss617-paper);
  border: var(--ss617-border-width) solid var(--ss617-border);
  border-radius: var(--ss617-inner-radius);
  overflow-wrap: anywhere;
}

/* 617 frame/950 entry: this is the only desktop threshold, 1280 CSS px.
 * Below it natural wrapping handles phones/zoom; above it the 1220px design
 * fits with 30px gutters. Larger viewports keep that density, per T4/C5. */
@media (min-width: 1280px) {
  /* P1-08/09: desktop tokens only; earlier token values remain intact. */
  .ss617 {
    --ss617-card-title-size: var(--ss617-card-title-wide);
    --ss617-control-size: var(--ss617-control-wide);
    --ss617-page-title-size: var(--ss617-page-title-wide);
    --ss617-gutter: var(--ss617-gutter-wide);
    --ss617-card-pad: var(--ss617-card-pad-wide);
    --ss617-card-radius: var(--ss617-card-radius-wide);
    --ss617-main-target: var(--ss617-main-target-wide);
    --ss617-notice-height: var(--ss617-notice-wide);
  }
  /* P2-01: controls fit a desktop row without a fixed header height. */
  .ss617 .ss617-course {
    flex: 1 1 var(--ss617-brand-min);
  }
  /* KBD-4: restore the 54px floor under the opt-in stage wrapper. */
  .ss617 .ss617-stage-list .stage-tab {
    flex: 1 1 auto;
    flex-direction: row;
    min-block-size: var(--ss617-stage-wide) !important;
  }
  /* P2-01: copy then picture; neither uses an arbitrary narrow max-width. */
  .ss617 .ss617-start {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--ss617-space-8);
  }
  /* OF-07: slight reduction, with an absolute cap to avoid percentage growth. */
  .ss617 .ss617-start-picture {
    inline-size: min(var(--ss617-picture-scale), var(--ss617-picture-cap));
    justify-self: end;
  }
  /* P2-01/950 Goals: three goals plus the retained preparation panel. */
  .ss617 .ss617-goals {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--ss617-space-8);
  }
}

/* ===== PART 2: LEARN CARDS, LINES, PICTURES AND CARD NAVIGATION ===== */

/* C1 contrast/R2.04: text-only proposals; canonical PART1 triples stay unchanged. */
.ss617 {
  --ss617-peach-title-ink: #895000;
  --ss617-cyan-title-ink: #006576;
  --ss617-sand-title-ink: #625526;
  --ss617-yellow-title-ink: #705800;
  --ss617-zh-mid-ink: #923008;
  --ss617-zh-strong-ink: #A83A0A;
  --ss617-recall-ink: #315FBC;
  --ss617-warmup-ink: #6B4AB8;
  --ss617-memory-zh-ink: #FFB56B;
  --ss617-emoji-slot: 1.2em;
  --ss617-note-action-min: 148px;
  --ss617-topic-min: 144px;
  --ss617-picker-row: 56px;
  --ss617-term-target: 72px;
  --ss617-picture-radius: 12px;
}

/* C1/T2: explicit semantic family assignment; no nth-child colour rotation. */
.ss617 .ss617-card[data-concept-family="mint"] {
  --ss617-family-light: var(--ss617-mint-light);
  --ss617-family-mid: var(--ss617-mint-mid);
  --ss617-family-deep: var(--ss617-mint-deep);
  --ss617-family-title: var(--ss617-mint-deep);
}

/* C1/R2.04: peach canonical accent plus proposed readable text layer. */
.ss617 .ss617-card[data-concept-family="peach"] {
  --ss617-family-light: var(--ss617-peach-light);
  --ss617-family-mid: var(--ss617-peach-mid);
  --ss617-family-deep: var(--ss617-peach-deep);
  --ss617-family-title: var(--ss617-peach-title-ink);
}

/* C1/R2.04: cyan canonical accent plus proposed readable text layer. */
.ss617 .ss617-card[data-concept-family="cyan"] {
  --ss617-family-light: var(--ss617-cyan-light);
  --ss617-family-mid: var(--ss617-cyan-mid);
  --ss617-family-deep: var(--ss617-cyan-deep);
  --ss617-family-title: var(--ss617-cyan-title-ink);
}

/* C1: purple title on light; labels use neutral ink on mid. */
.ss617 .ss617-card[data-concept-family="purple"] {
  --ss617-family-light: var(--ss617-purple-light);
  --ss617-family-mid: var(--ss617-purple-mid);
  --ss617-family-deep: var(--ss617-purple-deep);
  --ss617-family-title: var(--ss617-purple-deep);
}

/* C1/R2.04: sand canonical accent plus proposed readable text layer. */
.ss617 .ss617-card[data-concept-family="sand"] {
  --ss617-family-light: var(--ss617-sand-light);
  --ss617-family-mid: var(--ss617-sand-mid);
  --ss617-family-deep: var(--ss617-sand-deep);
  --ss617-family-title: var(--ss617-sand-title-ink);
}

/* C1/R2.04: yellow canonical accent plus proposed readable text layer. */
.ss617 .ss617-card[data-concept-family="yellow"] {
  --ss617-family-light: var(--ss617-yellow-light);
  --ss617-family-mid: var(--ss617-yellow-mid);
  --ss617-family-deep: var(--ss617-yellow-deep);
  --ss617-family-title: var(--ss617-yellow-title-ink);
}

/* P1-02/08: one card body for every lesson and all three old markup families. */
.ss617 .ss617-card {
  min-inline-size: 0;
  inline-size: 100%;
  max-inline-size: none;
  padding: var(--ss617-card-pad);
  border: var(--ss617-border-width) solid var(--ss617-family-mid, var(--ss617-border));
  border-radius: var(--ss617-card-radius);
  background: var(--ss617-family-light, var(--ss617-paper));
  color: var(--ss617-ink);
  font-family: var(--ss617-font);
  font-size: var(--ss617-body-size);
  font-weight: var(--ss617-font-normal);
  line-height: var(--ss617-line-height);
  box-shadow: var(--ss617-shadow);
}

/* P1-02: mid role surface is not a deep fill; its word supplies meaning too. */
.ss617 .ss617-role {
  inline-size: fit-content;
  max-inline-size: 100%;
  padding: var(--ss617-space-2) var(--ss617-space-3);
  border: var(--ss617-border-width) solid var(--ss617-family-mid, var(--ss617-border));
  border-radius: var(--ss617-inner-radius);
  background: var(--ss617-family-mid, var(--ss617-soft));
  color: var(--ss617-ink);
  font-size: var(--ss617-caption-size);
  font-weight: var(--ss617-font-strong);
  line-height: var(--ss617-line-height);
  overflow-wrap: break-word;
}

/* P1-08/C2f/R2.03: family title on light; no repeated red/yellow banner. */
.ss617 .ss617-card-title {
  margin: var(--ss617-space-3) 0 var(--ss617-space-5);
  padding: 0;
  background: transparent;
  color: var(--ss617-family-title, var(--ss617-ink));
  font-family: var(--ss617-font);
  font-size: var(--ss617-card-title-size);
  font-weight: var(--ss617-font-strong);
  line-height: var(--ss617-title-leading);
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

/* P1-04/09: natural-height content; hidden/reveal state remains engine-owned. */
.ss617 .ss617-card-content:not([hidden]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ss617-space-5);
  align-items: start;
  min-inline-size: 0;
}

/* OF-08: remove the obsolete 880px inner cap, not the actual source content. */
.ss617 .ss617-card-copy {
  min-inline-size: 0;
  max-inline-size: none;
}

/* P1-04: emphasis belongs to the core, not every letter on the entire card. */
.ss617 .ss617-core {
  margin-block: 0 var(--ss617-space-4);
  font-size: var(--ss617-body-size);
  font-weight: var(--ss617-font-strong);
  line-height: var(--ss617-line-height);
}

/* P1-03/T5: one authored emoji slot; wrapped text starts in the second column. */
.ss617 .ss617-line:not([hidden]) {
  display: grid;
  grid-template-columns: var(--ss617-emoji-slot) minmax(0, 1fr);
  column-gap: var(--ss617-space-2);
  align-items: start;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: var(--ss617-line-height);
}

/* P1-03: page text owns the single relevant emoji; CSS generates nothing. */
.ss617 .ss617-emoji {
  inline-size: var(--ss617-emoji-slot);
  text-align: center;
  font-size: inherit;
  line-height: inherit;
}

/* P1-03/950 P2-03: ordinary word boundaries; no line clamp or ellipsis. */
.ss617 .ss617-line-text {
  min-inline-size: 0;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* P1-04: separately authored points stay separated without bullet duplication. */
.ss617 .ss617-lines:not([hidden]) {
  display: grid;
  gap: var(--ss617-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* C1/R2.05: key/remember/support are meanings within the same concept family. */
.ss617 .ss617-note {
  margin-block: var(--ss617-space-5);
  padding: var(--ss617-space-4);
  border: var(--ss617-border-width) solid var(--ss617-family-mid, var(--ss617-border));
  border-inline-start: var(--ss617-mark-width) solid var(--ss617-family-deep, var(--ss617-border));
  border-radius: var(--ss617-inner-radius);
  background: var(--ss617-family-light, var(--ss617-paper));
  color: inherit;
}

/* C1: kind word/icon remain in markup; readable title differs from body weight. */
.ss617 .ss617-note-title {
  margin-block: 0 var(--ss617-space-2);
  color: var(--ss617-note-ink, var(--ss617-family-title, var(--ss617-ink)));
  font-size: var(--ss617-body-size);
  font-weight: var(--ss617-font-strong);
  line-height: var(--ss617-line-height);
}

/* C1 reserved definition; never substitute the earlier support-orange scheme. */
.ss617 .ss617-note[data-note-kind="definition"] {
  --ss617-note-ink: var(--ss617-definition-ink);
  background: var(--ss617-definition-bg);
  border-color: var(--ss617-definition-ink);
  color: var(--ss617-definition-ink);
}

/* C1 reserved misconception; not the engine's wrong-answer state. */
.ss617 .ss617-note[data-note-kind="do-not-confuse"] {
  --ss617-note-ink: var(--ss617-misconception-ink);
  background: var(--ss617-misconception-bg);
  border-color: var(--ss617-misconception-mid);
  border-inline-start-color: var(--ss617-misconception-ink);
}

/* C1 reserved comparison applies only to its existing specifically tagged kind. */
.ss617 .ss617-note[data-reserved-kind="comparison"] {
  --ss617-note-ink: var(--ss617-comparison-ink);
  background: var(--ss617-comparison-bg);
  border-color: var(--ss617-comparison-ink);
}

/* C1/R2.04: before/after recall retains one recall colour; no correctness green. */
.ss617 .ss617-note[data-reserved-kind="recall"] {
  --ss617-note-ink: var(--ss617-recall-ink);
  background: var(--ss617-recall-bg);
  border-color: var(--ss617-recall-ink);
}

/* C1/R2.04: warm-up text proposal is separate from the canonical reserved deep. */
.ss617 .ss617-note[data-reserved-kind="warmup"] {
  --ss617-note-ink: var(--ss617-warmup-ink);
  background: var(--ss617-warmup-bg);
  border-color: var(--ss617-warmup-ink);
}

/* C1: only an existing mnemonic uses the dark reserved treatment. */
.ss617 .ss617-note[data-reserved-kind="memory"] {
  --ss617-note-ink: var(--ss617-memory-key);
  background: var(--ss617-memory-bg);
  border-color: var(--ss617-memory-bg);
  color: var(--ss617-primary-ink);
}

/* C1: keyword emphasis is authored markup, not generated teaching content. */
.ss617 .ss617-note[data-reserved-kind="memory"] strong {
  color: var(--ss617-memory-key);
}

/* C1 bilingual cue: same family in both languages, one language at a time. */
.ss617.zh-mode .ss617-card, .ss617:lang(zh) .ss617-card {
  color: var(--ss617-zh-ink);
}

/* C1/R2.04: purple/sand Chinese text needs the proposed stronger text layer. */
.ss617.zh-mode .ss617-card:is([data-concept-family="purple"], [data-concept-family="sand"]),
.ss617:lang(zh) .ss617-card:is([data-concept-family="purple"], [data-concept-family="sand"]) {
  color: var(--ss617-zh-strong-ink);
}

/* C1/R2.04: all mid-label Chinese text uses the separately recorded text ink. */
.ss617.zh-mode .ss617-role, .ss617:lang(zh) .ss617-role {
  color: var(--ss617-zh-mid-ink);
}

/* C1/R2.04: retain readable Chinese on the reserved dark surface. */
.ss617.zh-mode .ss617-note[data-reserved-kind="memory"],
.ss617:lang(zh) .ss617-note[data-reserved-kind="memory"] {
  color: var(--ss617-memory-zh-ink);
}

/* T6/C2b/Board1002: only an existing picture frame; no label/leader overlay. */
.ss617 .ss617-picture {
  min-inline-size: 0;
  inline-size: 100%;
  margin: 0;
}

/* P1-05/OF-07: preserve original aspect and all labels drawn into the asset. */
.ss617 .ss617-picture img {
  display: block;
  inline-size: 100%;
  max-inline-size: 100%;
  block-size: auto;
  object-fit: contain;
  background: var(--ss617-paper);
  border: var(--ss617-border-width) solid var(--ss617-family-mid, var(--ss617-border));
  border-radius: var(--ss617-picture-radius);
}

/* D2/P1-05: one plain caption next to its own picture; text remains source-bound. */
.ss617 .ss617-caption {
  margin-block: var(--ss617-space-2) var(--ss617-space-3);
  font-size: var(--ss617-caption-size);
  font-weight: var(--ss617-font-normal);
  line-height: var(--ss617-line-height);
  white-space: normal;
  overflow-wrap: break-word;
}

/* P1-05/C6: retain picture-state navigation and Enlarge as real controls. */
.ss617 .ss617-picture-actions:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ss617-space-3);
  align-items: center;
  margin-block-start: var(--ss617-space-3);
  min-inline-size: 0;
}

/* P1-08: enlargement has its own minimum, without a duplicate image button. */
.ss617 .ss617-action.ss617-enlarge {
  min-block-size: var(--ss617-enlarge-target) !important;
}

/* P1-06/08: Explain and Cover/recall remain visible actions; narrow widths wrap. */
.ss617 .ss617-card-actions:not([hidden]) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ss617-note-action-min)), 1fr));
  gap: var(--ss617-space-3);
  margin-block: var(--ss617-space-5);
  min-inline-size: 0;
}

/* P1-06: native details/summary keeps its actual open state and source body. */
.ss617 .ss617-disclosure {
  margin-block: var(--ss617-space-3);
  border: var(--ss617-border-width) solid var(--ss617-family-mid, var(--ss617-border));
  border-radius: var(--ss617-inner-radius);
  background: var(--ss617-family-light, var(--ss617-paper));
}

/* P1-08: summary is a large worded action; native marker remains a state cue. */
.ss617 .ss617-disclosure > summary {
  min-block-size: var(--ss617-main-target) !important;
  padding: var(--ss617-space-3) var(--ss617-space-4);
  color: var(--ss617-family-title, var(--ss617-ink));
  font-size: var(--ss617-control-size);
  font-weight: var(--ss617-font-strong);
  line-height: var(--ss617-line-height);
  white-space: normal;
  overflow-wrap: break-word;
  cursor: pointer;
}

/* P1-06: only the current naturally opened body receives inner spacing. */
.ss617 .ss617-disclosure[open] > .ss617-disclosure-body {
  padding: 0 var(--ss617-space-4) var(--ss617-space-4);
}

/* P2-02: existing topics use wrapping worded controls, no sideways strip. */
.ss617 .ss617-topics:not([hidden]) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ss617-topic-min)), 1fr));
  gap: var(--ss617-space-2);
  margin-block: var(--ss617-space-4);
}

/* C6/P2-08: keep the stronger existing 72px term target while using new visuals. */
.ss617 .ss617-term {
  min-block-size: max(var(--ss617-main-target), var(--ss617-term-target)) !important;
}

/* P2-02: selected topic is explicit in state and outline, never colour alone. */
.ss617 .ss617-topic[aria-selected="true"],
.ss617 .ss617-topic[aria-current="true"] {
  border-color: var(--ss617-primary);
  color: var(--ss617-accent-ink);
  background: var(--ss617-accent-soft);
  font-weight: var(--ss617-font-strong);
}

/* P1-07: one source-derived card position region; consolidation is PAGE_SIDE. */
.ss617 .ss617-position {
  min-inline-size: 0;
  margin-block: 0 var(--ss617-space-4);
  font-size: var(--ss617-status-size);
  line-height: var(--ss617-line-height);
  overflow-wrap: break-word;
}

/* P1-07/950 P2-06: visible card picker is the existing real button, not a clone. */
.ss617 .ss617-picker {
  min-block-size: var(--ss617-main-target) !important;
  min-inline-size: min(100%, var(--ss617-index-target));
  max-inline-size: 100%;
  padding: var(--ss617-space-3) var(--ss617-space-4);
  background: var(--ss617-paper);
  color: var(--ss617-ink);
  border: var(--ss617-border-width) solid var(--ss617-input-border);
  border-radius: var(--ss617-inner-radius);
  font-size: var(--ss617-status-size);
  line-height: var(--ss617-line-height);
  white-space: normal;
  overflow-wrap: break-word;
}

/* KBD-1: open picker scroll area reserves the measured overlay zones. */
.ss617 .ss617-picker-list:not([hidden]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ss617-space-2);
  max-block-size: max(var(--ss617-picker-row), calc(100svh - var(--ss617-safe-top) - var(--ss617-safe-bottom)));
  min-inline-size: 0;
  padding: var(--ss617-space-1) var(--ss617-space-1) var(--ss617-safe-bottom);
  scroll-padding-block: var(--ss617-space-2) var(--ss617-safe-bottom);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* KBD-1/P1-07: list labels remain full width with an unclipped focus target. */
.ss617 .ss617-picker-list > button {
  min-block-size: var(--ss617-picker-row) !important;
  min-inline-size: 0;
  inline-size: 100%;
  padding: var(--ss617-space-3);
  scroll-margin-block: var(--ss617-space-2) var(--ss617-safe-bottom);
  font: inherit;
  font-size: var(--ss617-status-size);
  white-space: normal;
  overflow-wrap: break-word;
}

/* P1-07: selected page item remains identifiable beyond its colour. */
.ss617 .ss617-picker-list > button[aria-current="true"] {
  border: var(--ss617-focus-width) solid var(--ss617-primary);
  font-weight: var(--ss617-font-bold);
}

/* P1-07: Previous/Next card and distinct screen actions keep real handlers. */
.ss617 .ss617-card-nav:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ss617-space-3);
  margin-block-start: var(--ss617-space-6);
  min-inline-size: 0;
}

/* C6: disabled presentation stays legible; no capability is enabled by CSS. */
.ss617 .ss617-card :is(button:disabled, button[aria-disabled="true"]) {
  opacity: 1;
  color: var(--ss617-muted);
  background: var(--ss617-soft);
  cursor: not-allowed;
}

/* P1-09/OF-08: same single desktop threshold as PART1, isolated card rules. */
@media (min-width: 1280px) {
  /* C2d: accepted wider layout uses45/55; no narrow inner-card max width. */
  .ss617 .ss617-card-content:not([hidden]) {
    grid-template-columns: minmax(0, 9fr) minmax(0, 11fr);
    column-gap: var(--ss617-space-8);
    row-gap: var(--ss617-space-6);
  }
  /* OF-09/10: a valid no-picture screen never gets a fake empty figure column. */
  .ss617 .ss617-card-content[data-picture="none"]:not([hidden]) {
    grid-template-columns: minmax(0, 1fr);
  }
  /* OF-07: slightly smaller drawn picture; keep full caption/control grouping. */
  .ss617 .ss617-picture {
    inline-size: min(var(--ss617-picture-scale), var(--ss617-picture-cap));
    justify-self: center;
  }
}

/* ===== PART 3: TRY AND TEST QUESTION / ANSWER AREA ===== */

/* P3-01/02/C2c: preserve617 reference sizes and use later accepted r2 field sizes. */
.ss617 {
  --ss617-answer-617-phone: 224px;
  --ss617-answer-617-wide: 240px;
  --ss617-answer-min: 176px;
  --ss617-answer-min-wide: 180px;
  --ss617-answer-type: 18px;
  --ss617-answer-type-wide: 20px;
  --ss617-question-type: 18px;
  --ss617-question-type-wide: 20px;
  --ss617-question-command: 20px;
  --ss617-question-command-wide: 24px;
  --ss617-question-instruction: 21px;
  --ss617-question-instruction-wide: 22px;
  --ss617-answer-leading: 1.6;
  --ss617-question-pad: 20px;
  --ss617-question-pad-wide: 28px;
  --ss617-question-measure: 66ch;
  --ss617-mode-min: 120px;
  --ss617-mode-status: 16px;
  --ss617-mode-icon: 24px;
  --ss617-question-dot: 56px;
  --ss617-question-pager-phone: 260px;
  --ss617-submit-min: 210px;
  --ss617-qa-gap-wide: 36px;
}

/* P3-01/09: source order is question then answer; normal flow, no sticky pane. */
.ss617 .ss617-qa:not([hidden]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--ss617-space-6);
  min-inline-size: 0;
  inline-size: 100%;
  max-inline-size: none;
}

/* P3-01/04: guide and selector belong in the left question context on desktop. */
.ss617 .ss617-question-column, .ss617 .ss617-answer-area {
  min-inline-size: 0;
  inline-size: 100%;
  max-inline-size: none;
}

/* P3-04: all four original guide lines; no clipping or first-view word removal. */
.ss617 .ss617-practice-guide {
  margin-block: 0 var(--ss617-space-4);
  padding: var(--ss617-space-3) var(--ss617-space-4);
  border: var(--ss617-border-width) solid var(--ss617-border);
  border-inline-start: var(--ss617-mark-width) solid var(--ss617-accent-ink);
  border-radius: var(--ss617-inner-radius);
  background: var(--ss617-soft);
  color: var(--ss617-ink);
  font-size: var(--ss617-status-size);
  line-height: var(--ss617-line-height);
}

/* P3-04: keep existing guide heading subordinate to the page heading. */
.ss617 .ss617-practice-guide-title {
  margin-block: 0 var(--ss617-space-2);
  font: inherit;
  font-weight: var(--ss617-font-strong);
}

/* P3-04: full real guide statements stay separate and naturally wrap. */
.ss617 .ss617-practice-guide-line {
  margin-block: var(--ss617-space-2);
  overflow-wrap: break-word;
}

/* P3-09: four56px positions per phone row; three Try / seven Test remain real. */
.ss617 .ss617-question-pager:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ss617-space-3);
  max-inline-size: min(100%, var(--ss617-question-pager-phone));
  margin-block: var(--ss617-space-4);
}

/* P3-09: numbers retain current/draft state; no pseudo-content is generated. */
.ss617 .ss617-question-dot {
  flex: 0 0 var(--ss617-question-dot);
  inline-size: var(--ss617-question-dot);
  min-inline-size: min(100%, var(--ss617-question-dot));
  min-block-size: var(--ss617-question-dot) !important;
  max-inline-size: 100%;
  border-radius: var(--ss617-inner-radius);
  font-size: var(--ss617-status-size);
  line-height: var(--ss617-line-height);
}

/* P3-06: four original worded reader controls; wrap to one column when needed. */
.ss617 .ss617-question-reader:not([hidden]) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ss617-note-action-min)), 1fr));
  gap: var(--ss617-space-3);
  margin-block: var(--ss617-space-4);
  min-inline-size: 0;
}

/* P3-06: source figure, source identity and exact stem remain in the real card. */
.ss617 .ss617-question {
  min-inline-size: 0;
  padding: var(--ss617-question-pad);
  border: var(--ss617-border-width) solid var(--ss617-border);
  border-radius: var(--ss617-card-radius-wide);
  background: var(--ss617-paper);
  color: var(--ss617-ink);
}

/* P3-06: original source identity/enlargement row can wrap without losing words. */
.ss617 .ss617-question-meta:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ss617-space-3);
  margin-block-end: var(--ss617-space-4);
  font-size: var(--ss617-mode-status);
  line-height: var(--ss617-line-height);
}

/* P3-06: preserve the original assessment image, not the Learn picture treatment. */
.ss617 .ss617-question-picture {
  display: block;
  inline-size: 100%;
  max-inline-size: 100%;
  block-size: auto;
  object-fit: contain;
  margin-block: 0 var(--ss617-space-4);
}

/* P3-06/C5: exact original prose; larger phone proposal18 versus r2 source17. */
.ss617 .ss617-question-text {
  min-inline-size: 0;
  max-inline-size: var(--ss617-question-measure);
  font-size: var(--ss617-question-type);
  line-height: var(--ss617-answer-leading);
  text-align: start;
  white-space: normal;
  overflow-wrap: break-word;
}

/* Board993/994: keep the stronger current command emphasis. */
.ss617 .ss617-question-command {
  font-size: var(--ss617-question-command);
  font-weight: var(--ss617-font-bold);
  line-height: var(--ss617-answer-leading);
}

/* Board993/994: original instruction remains after its stem, before input. */
.ss617 .ss617-question-instruction {
  font-size: var(--ss617-question-instruction);
  line-height: var(--ss617-answer-leading);
  margin-block: var(--ss617-space-3) 0;
}

/* P3-06: Chinese prose measure does not constrain the actual answer field. */
.ss617.zh-mode .ss617-question-text, .ss617:lang(zh) .ss617-question-text {
  max-inline-size: var(--ss617-text-measure-zh);
}

/* P3-02/03: page-owned real field groups stay stacked, including multipart forms. */
.ss617 .ss617-answer-group:not([hidden]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ss617-space-3);
  margin-block-end: var(--ss617-space-6);
  min-inline-size: 0;
}

/* P3-02: visible source label, never a placeholder-only or generated label. */
.ss617 .ss617-answer-label {
  display: block;
  margin-block: 0 var(--ss617-space-2);
  font-size: var(--ss617-control-size);
  font-weight: var(--ss617-font-strong);
  line-height: var(--ss617-line-height);
}

/* P3-05: four modes use2x2 at390; narrow/zoom naturally falls to one column. */
.ss617 .ss617-modes:not([hidden]) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(var(--ss617-mode-min), calc((100% - var(--ss617-space-3)) / 2))), 1fr));
  gap: var(--ss617-space-3);
  padding: 0;
  margin-block: 0 var(--ss617-space-4);
  background: transparent;
  border: 0;
  min-inline-size: 0;
}

/* P3-05/T2: style the actual buttons/engine voice instance; preserve availability. */
.ss617 .ss617-modes > button, .ss617 .ss617-modes .voice-btn {
  grid-column: auto !important;
  grid-row: auto !important;
  min-inline-size: 0;
  min-block-size: var(--ss617-mode-target) !important;
  inline-size: 100% !important;
  max-inline-size: 100%;
  block-size: auto;
  padding: var(--ss617-space-3);
  gap: var(--ss617-space-1);
  border: var(--ss617-border-width) solid var(--ss617-input-border);
  border-radius: var(--ss617-inner-radius);
  background: var(--ss617-paper);
  color: var(--ss617-ink);
  font-family: var(--ss617-font);
  font-size: var(--ss617-control-size);
  font-weight: var(--ss617-font-strong);
  line-height: var(--ss617-line-height);
  white-space: normal;
  overflow-wrap: break-word;
  text-align: center;
}

/* P3-05: icon size does not replace the adjacent actual mode word. */
.ss617 .ss617-modes .icon, .ss617 .ss617-modes .voice-ic {
  inline-size: var(--ss617-mode-icon);
  block-size: var(--ss617-mode-icon);
}

/* P3-05/08: the real engine voice word shares the readable mode-label scale. */
.ss617 .ss617-modes .voice-lbl {
  font-size: var(--ss617-control-size);
  line-height: var(--ss617-line-height);
}

/* P3-05: selected styling follows real state without activating another mode. */
.ss617 .ss617-modes > button:is(.active, [aria-pressed="true"]),
.ss617 .ss617-modes .voice-btn[aria-pressed="true"] {
  border-color: var(--ss617-primary);
  background: var(--ss617-accent-soft);
  color: var(--ss617-accent-ink);
}

/* P3-05/08: existing coming-soon reason is readable and stays genuine source text. */
.ss617 .ss617-mode-status, .ss617 .ss617-modes .medley-soon {
  font-size: var(--ss617-mode-status);
  line-height: var(--ss617-line-height);
  opacity: 1;
  white-space: normal;
}

/* P3-05: same real microphone status/wave spans the available modes width. */
.ss617 .ss617-modes .voice-status, .ss617 .ss617-modes .voice-wave {
  grid-column: 1 / -1;
  grid-row: auto;
  min-inline-size: 0;
  max-inline-size: 100%;
}

/* P3-02/T2: engine box remains its original node; no decorative proxy input. */
.ss617 .ss617-answer-area .aui-box {
  min-inline-size: 0;
  inline-size: 100%;
  max-inline-size: none;
  border-radius: var(--ss617-card-radius);
  background: var(--ss617-paper);
  box-shadow: var(--ss617-shadow);
}

/* P3-02/C2c: operative r2 minima; old617224/240 are retained as inert reference tokens. */
.ss617 .ss617-answer-field,
.ss617 .ss617-answer-area .aui-box > textarea.answer-text {
  box-sizing: border-box;
  min-inline-size: 0 !important;
  inline-size: 100% !important;
  max-inline-size: none !important;
  min-block-size: var(--ss617-answer-min) !important;
  block-size: auto;
  padding: var(--ss617-space-5) !important;
  border: var(--ss617-input-border-width) solid var(--ss617-input-border) !important;
  border-radius: var(--ss617-card-radius);
  background: var(--ss617-paper) !important;
  color: var(--ss617-ink);
  font-family: var(--ss617-font);
  font-size: var(--ss617-answer-type) !important;
  line-height: var(--ss617-answer-leading) !important;
  resize: vertical;
  scroll-margin-block: var(--ss617-safe-top) var(--ss617-safe-bottom);
}

/* P3-10: beat engine outline:none!important on real answer controls, without changing state. */
.ss617 .ss617-answer-area :is(textarea, .aui-send, .aui-toolbtn, .voice-btn):focus-visible {
  outline: var(--ss617-focus-width) solid var(--ss617-focus) !important;
  outline-offset: var(--ss617-focus-gap) !important;
}

/* P3-08: only already-authorized helper content; engine hidden/reveal predicates remain. */
.ss617 .ss617-answer-area .aui-help {
  max-block-size: none;
  overflow: visible;
}

/* P3-08: override engine13px important text without changing its feedback palette. */
.ss617 .ss617-answer-area .aui-help > * {
  font-size: var(--ss617-answer-type) !important;
  line-height: var(--ss617-answer-leading) !important;
  opacity: 1;
}

/* P3-02: existing placeholder remains text in the field, not a label or answer. */
.ss617 .ss617-answer-field::placeholder,
.ss617 .ss617-answer-area .aui-box > textarea.answer-text::placeholder {
  color: var(--ss617-muted);
  opacity: 1;
}

/* P3-02/05: actual supported writing surface keeps the corresponding usable area. */
.ss617 .ss617-writing-surface {
  min-inline-size: 0;
  inline-size: 100%;
  min-block-size: var(--ss617-answer-min);
  border: var(--ss617-input-border-width) solid var(--ss617-input-border);
  border-radius: var(--ss617-card-radius);
}

/* P3-03: presentation mount for the actual Submit; integration establishes DOM order. */
.ss617 .ss617-submit-row, .ss617 .ss617-answer-area .aui-dock {
  min-inline-size: 0;
  inline-size: 100%;
  max-inline-size: 100%;
  margin-block: var(--ss617-space-3) 0;
  align-self: start;
  justify-self: stretch;
}

/* P3-03/T2: worded real send control; never a second send or a CSS-created label. */
.ss617 .ss617-submit, .ss617 .ss617-answer-area .aui-send {
  position: static;
  inset: auto;
  min-inline-size: min(100%, var(--ss617-submit-min)) !important;
  inline-size: 100% !important;
  max-inline-size: 100%;
  min-block-size: var(--ss617-main-target) !important;
  block-size: auto;
  padding: var(--ss617-space-3) var(--ss617-space-6);
  border: var(--ss617-border-width) solid var(--ss617-primary);
  border-radius: var(--ss617-card-radius);
  font-family: var(--ss617-font);
  font-size: var(--ss617-control-size) !important;
  font-weight: var(--ss617-font-bold);
  line-height: var(--ss617-line-height) !important;
  white-space: normal !important;
  overflow-wrap: break-word;
  box-shadow: var(--ss617-shadow);
  scroll-margin-block: var(--ss617-safe-top) var(--ss617-safe-bottom);
}

/* P3-01/03: ready action colour only; existing busy/sent/disabled state colours stay. */
.ss617 .ss617-submit:not(:disabled):not([aria-disabled="true"]):not([data-send-state="busy"]):not([data-send-state="sent"]),
.ss617 .ss617-answer-area .aui-send:not(:disabled):not([aria-disabled="true"]):not([data-send-state="busy"]):not([data-send-state="sent"]) {
  background: var(--ss617-primary);
  color: var(--ss617-primary-ink);
}

/* P3-08: real save/attempt/reason text; no invented state or response payload. */
.ss617 .ss617-answer-state,
.ss617 .ss617-answer-area :is(.medley-save-text, .medley-attempts, .attempt-status, .voice-status, .cap-hint, .medley-marks) {
  min-inline-size: 0;
  max-inline-size: 100%;
  font-size: var(--ss617-status-size) !important;
  line-height: var(--ss617-line-height) !important;
  white-space: normal;
  overflow-wrap: break-word;
}

/* P3-04: tool layout stays on actual engine bar; moving mounts is PAGE_SIDE. */
.ss617 .ss617-answer-area .aui-bar:not([hidden]),
.ss617 .ss617-help-tools:not([hidden]) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ss617-mode-min)), 1fr));
  gap: var(--ss617-space-3);
  min-inline-size: 0;
  max-inline-size: 100%;
  padding: var(--ss617-space-4) 0 0;
  border-block-start: var(--ss617-border-width) solid var(--ss617-border);
}

/* P3-04: actual cells retain engine visibility, tooltip and eligibility predicates. */
.ss617 .ss617-answer-area .aui-toolcell {
  min-inline-size: 0;
  min-block-size: var(--ss617-mode-target);
  padding: calc(var(--ss617-mode-icon) + var(--ss617-space-6)) var(--ss617-space-3) var(--ss617-space-3);
  border: var(--ss617-border-width) solid var(--ss617-border);
  border-radius: var(--ss617-inner-radius);
  background: var(--ss617-paper);
}

/* P3-04: engine Recheck/teacher and dock occupy their own rows, without reordering. */
.ss617 .ss617-answer-area :is(.aui-toolcell--recheck, .aui-toolcell--ask, .aui-dock),
.ss617 .ss617-recheck-zone, .ss617 .ss617-teacher-zone {
  grid-column: 1 / -1;
  min-inline-size: 0;
}

/* P3-04: separate teacher context, retaining its original request route. */
.ss617 .ss617-teacher-zone {
  margin-block-start: var(--ss617-space-4);
  padding-block-start: var(--ss617-space-4);
  border-block-start: var(--ss617-border-width) solid var(--ss617-border);
}

/* P3-04/08: actual help button text remains readable, never opacity-only locked. */
.ss617 .ss617-answer-area .aui-toolbtn {
  position: absolute;
  inset: 0;
  align-items: flex-start;
  justify-content: center;
  padding: var(--ss617-space-3) var(--ss617-space-3) 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  min-block-size: var(--ss617-mode-target) !important;
  min-inline-size: min(100%, var(--ss617-mode-min));
  max-inline-size: 100%;
  font-family: var(--ss617-font);
  font-size: var(--ss617-control-size);
  line-height: var(--ss617-line-height);
  white-space: normal;
}

/* P3-04/08: existing engine sibling label is kept, not replaced with generated words. */
.ss617 .ss617-answer-area .aui-toolbtn-lbl,
.ss617 .ss617-help-label {
  font-size: var(--ss617-control-size) !important;
  line-height: var(--ss617-line-height) !important;
  white-space: normal;
  overflow-wrap: break-word;
  opacity: 1;
}

/* P3-04/08: visible reason comes from real state; tooltip is not its only source. */
.ss617 .ss617-help-reason {
  margin-block: var(--ss617-space-2) 0;
  font-size: var(--ss617-status-size);
  line-height: var(--ss617-line-height);
  color: var(--ss617-muted);
  white-space: normal;
  overflow-wrap: break-word;
}

/* P3-01/05: neutral unavailable controls; CSS does not change actual disabled state. */
.ss617 .ss617-answer-area :is(button:disabled, button[aria-disabled="true"], .aui-toolbtn.fbv3-locked) {
  opacity: 1;
  color: var(--ss617-muted);
  background: var(--ss617-soft);
  box-shadow: var(--ss617-shadow);
  cursor: not-allowed;
}

/* P3-03: the existing response table stays a semantic table, not a new question form. */
.ss617 .ss617-response-table {
  inline-size: 100%;
  max-inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--ss617-answer-type);
  line-height: var(--ss617-answer-leading);
}

/* P3-03: existing table cells may wrap; retain its approved narrow reflow contract. */
.ss617 .ss617-response-table :is(th, td) {
  min-inline-size: 0;
  padding: var(--ss617-space-3);
  vertical-align: top;
  overflow-wrap: break-word;
}

/* P3-07/09: current Back/Next/Review/End controls stay in their actual flow. */
.ss617 .ss617-question-nav:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ss617-space-3);
  margin-block-start: var(--ss617-space-6);
  min-inline-size: 0;
}

/* P3-01/C2c: one1280 desktop set; later accepted equal columns supersede old ratio. */
@media (min-width: 1280px) {
  /* C5: accepted field geometry plus617 input font, no larger-screen breakpoints. */
  .ss617 {
    --ss617-answer-min: var(--ss617-answer-min-wide);
    --ss617-answer-type: var(--ss617-answer-type-wide);
    --ss617-question-type: var(--ss617-question-type-wide);
    --ss617-question-command: var(--ss617-question-command-wide);
    --ss617-question-instruction: var(--ss617-question-instruction-wide);
    --ss617-question-pad: var(--ss617-question-pad-wide);
  }
  /* Board993/994: question left and answer right both use half of available width. */
  .ss617 .ss617-qa:not([hidden]) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--ss617-qa-gap-wide);
  }
  /* P3-09: all seven selector buttons may fit in the desktop row. */
  .ss617 .ss617-question-pager:not([hidden]) {
    max-inline-size: 100%;
  }
  /* P3-05: four modes use four equal columns without omitting Photo. */
  .ss617 .ss617-modes:not([hidden]) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ===== PART 4: WRAP, RECAP AND COMPLETE ===== */

/* KBD-2/P3-02: later accepted544 cap; measured recap offsets remain page-owned. */
.ss617 {
  --ss617-wrap-picture-cap: 544px;
  --ss617-recap-offset: var(--ss617-safe-top);
  --ss617-recap-reserve: 80px;
  --ss617-recap-z: 44;
  --ss617-complete-stat-min: 160px;
  --ss617-complete-action-target: 112px;
  --ss617-complete-action-wide: 118px;
}

/* P2-07/OF-06: real source notes keep normal flow; CSS does not choose a new order. */
.ss617 .ss617-wrap:not([hidden]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ss617-space-6);
  min-inline-size: 0;
  inline-size: 100%;
}

/* P2-07: use PART2 card/note classes and family tokens, not duplicate box systems. */
.ss617 .ss617-wrap-part {
  min-inline-size: 0;
  max-inline-size: none;
  margin-block: 0 var(--ss617-space-6);
  scroll-margin-block: var(--ss617-safe-top) var(--ss617-safe-bottom);
}

/* C1/C2g: reserved whole-lesson summary surface; real concept cards keep their family. */
.ss617 .ss617-wrap .ss617-note[data-reserved-kind="summary"] {
  --ss617-note-ink: var(--ss617-ink);
  background: var(--ss617-summary-bg);
  border-color: var(--ss617-border);
  border-inline-start-color: var(--ss617-secondary);
  color: inherit;
}

/* P2-07: the existing prompt precedes its own deliberate native disclosure. */
.ss617 .ss617-wrap-prompt {
  margin-block: 0 var(--ss617-space-2);
  font-size: var(--ss617-body-size);
  line-height: var(--ss617-line-height);
  overflow-wrap: break-word;
}

/* KBD-2/OF-07: cap the actual picture frame, never the whole notes region. */
.ss617 .ss617-wrap-picture {
  min-inline-size: 0;
  inline-size: min(100%, var(--ss617-wrap-picture-cap));
  max-inline-size: min(100%, var(--ss617-wrap-picture-cap)) !important;
  margin-inline: auto;
}

/* T6/C2b: approved drawn picture only; no label overlay, line or node styling. */
.ss617 .ss617-wrap-picture img {
  display: block;
  inline-size: 100%;
  max-inline-size: 100%;
  block-size: auto;
  object-fit: contain;
}

/* 950 P3-02: current recap content stays natural height; hidden predicates are kept. */
.ss617 .ss617-recap-page {
  min-inline-size: 0;
  max-inline-size: none;
  padding-block: var(--ss617-space-4);
  scroll-margin-block-start: calc(var(--ss617-recap-offset) + var(--ss617-recap-reserve));
  scroll-margin-block-end: var(--ss617-safe-bottom);
}

/* 950 P3-02/03: one real recap toolbar, below actual measured sticky chrome. */
.ss617 .ss617-recap-toolbar:not([hidden]) {
  position: sticky;
  inset-block-start: var(--ss617-recap-offset);
  z-index: var(--ss617-recap-z);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--ss617-space-2);
  min-inline-size: 0;
  margin-block: 0 var(--ss617-space-4);
  padding: var(--ss617-space-2) 0;
  background: var(--ss617-paper);
}

/* 950 P3-03: source outer position, inner picker and Close stay in DOM order. */
.ss617 .ss617-recap-toolbar > * {
  min-inline-size: 0;
  max-inline-size: 100%;
}

/* 950 P3-02: outer position is a real retained control, not a second stage bar. */
.ss617 .ss617-recap-outer {
  flex: 0 1 var(--ss617-main-target);
}

/* 950 P3-02: inner picker may wrap while preserving full labels and targets. */
.ss617 .ss617-recap-choice {
  flex: 1 1 var(--ss617-mode-min);
}

/* 950 P3-03: Close restores the original Wrap state; styling never performs it. */
.ss617 .ss617-recap-close {
  flex: 1 1 var(--ss617-course-min);
}

/* KBD-1 Wrap side: measured recap height plus live help reserve in open picker. */
.ss617 .ss617-wrap .ss617-picker-list:not([hidden]) {
  max-block-size: max(var(--ss617-picker-row), calc(100svh - var(--ss617-recap-offset) - var(--ss617-recap-reserve) - var(--ss617-safe-bottom)));
  scroll-padding-block: var(--ss617-space-2) var(--ss617-safe-bottom);
}

/* 950 P3-03: keep source card links and their real visit-local return origin. */
.ss617 .ss617-wrap-links:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ss617-space-2);
  min-inline-size: 0;
  margin-block-start: var(--ss617-space-3);
}

/* 950 P3_CARD_RETURN: one real return control above the original target card. */
.ss617 .ss617-wrap-return {
  inline-size: 100%;
  max-inline-size: 100%;
  margin-block-end: var(--ss617-space-3);
}

/* 950 P3-03: inner/outer navigation remains independent from Finish. */
.ss617 .ss617-wrap-nav:not([hidden]) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ss617-note-action-min)), 1fr));
  gap: var(--ss617-space-2);
  margin-block-start: var(--ss617-space-6);
  min-inline-size: 0;
}

/* P2-07/950 Complete: truthful existing state and records in ordinary document flow. */
.ss617 .ss617-complete {
  --ss617-entry-inline-size: 100%;
  --ss617-entry-margin-start: 0px;
  min-inline-size: 0;
  max-inline-size: none;
  padding-block: var(--ss617-space-6);
  color: var(--ss617-ink);
  text-align: start;
}

/* P2-07: never fabricate completion in CSS; source supplies ready/pending/failure. */
.ss617 .ss617-complete-state {
  margin-block: 0 var(--ss617-space-5);
  padding: var(--ss617-space-4);
  border: var(--ss617-border-width) solid var(--ss617-border);
  border-radius: var(--ss617-card-radius);
  background: var(--ss617-paper);
  font-size: var(--ss617-body-size);
  line-height: var(--ss617-line-height);
  overflow-wrap: break-word;
}

/* P2-07: show only available real record cells; absence is not a zero score. */
.ss617 .ss617-complete-records:not([hidden]) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ss617-complete-stat-min)), 1fr));
  gap: var(--ss617-space-4);
  margin-block: var(--ss617-space-5);
  min-inline-size: 0;
}

/* P2-07: each actual record retains its source value and readable label. */
.ss617 .ss617-complete-record {
  min-inline-size: 0;
  padding: var(--ss617-space-4);
  border: var(--ss617-border-width) solid var(--ss617-border);
  border-radius: var(--ss617-inner-radius);
  background: var(--ss617-paper);
  font-size: var(--ss617-status-size);
  line-height: var(--ss617-line-height);
  overflow-wrap: break-word;
}

/* P2-07: Review/topic/next/home actions use the shared large-button vocabulary. */
.ss617 .ss617-complete-actions:not([hidden]) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ss617-topic-min)), 1fr));
  gap: var(--ss617-space-3);
  margin-block-start: var(--ss617-space-6);
  min-inline-size: 0;
}

/* C6/C5: preserve the stronger existing Complete action target where that control exists. */
.ss617 .ss617-complete-actions .ss617-action {
  min-block-size: var(--ss617-complete-action-target) !important;
}

/* P2-07: Finish and recap endpoints retain true disabled state and readable reasons. */
.ss617 .ss617-wrap :is(button:disabled, button[aria-disabled="true"]),
.ss617 .ss617-complete :is(button:disabled, button[aria-disabled="true"]) {
  opacity: 1;
  color: var(--ss617-muted);
  background: var(--ss617-soft);
  box-shadow: var(--ss617-shadow);
  cursor: not-allowed;
}

/* KBD-2/OF-07: same1280 threshold; never infer absolute size from85% alone. */
@media (min-width: 1280px) {
  /* C5: existing desktop Complete action floor, not an invented control. */
  .ss617 {
    --ss617-complete-action-target: var(--ss617-complete-action-wide);
  }
  /* Only the picture is bounded; the rest of Wrap retains full available width. */
  .ss617 .ss617-wrap-picture {
    inline-size: min(var(--ss617-picture-scale), var(--ss617-wrap-picture-cap));
  }
}

/* 1014 item 6 (KBD-1, R1.01): measured focus reserve */
/* 1014B: help48px+bottom18px+8px=74px. In the176px list, */
/* top8px+label64px+bottom74px=146px; top64px required202px. */
body.ss617 .ss617-picker-list > button {
  scroll-margin-block-start: 8px !important;
  scroll-margin-block-end: 74px !important;
}
/* 1136 item 2 — 1120 rows 1120-P2-D01 1120-P2-D02 1120-P2-D03 1120-P2-D04 1120-P2-D05 1120-P2-D06 1120-P2-D07 1120-P2-D08 1120-P2-D09 1120-P2-D10 1120-P2-D11 1120-P2-D12 1120-P2-D13 1120-P2-D14 1120-P2-D15 1120-P2-D16 1120-P2-D17 1120-P2-D18 1120-P2-D19 1120-P2-D20 1120-P2-D21 1120-P2-D22 */
/* 1120-P2-D01 1120-P2-D04 1120-P2-D07 1120-P2-D14 1120-P2-D22 */
body.ss617 #lesson .ss617-start-picture,
body.ss617 #lesson .ss617-picture,
body.ss617 #lesson .ss617-wrap-picture {
  inline-size: 100%;
  max-inline-size: 100% !important;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}
/* 1120-P2-D11 1120-P2-D12 1120-P2-D13 1120-P2-D15 */
body.ss617 #lesson .ss617-picture .l01-s7-states,
body.ss617 #lesson .ss617-picture .l01-s7-state,
body.ss617 #lesson .ss617-picture .l01-s7-plane,
body.ss617 #lesson .ss617-picture .l01-s7-plane > img {
  inline-size: 100% !important;
  max-inline-size: 100%;
  block-size: auto;
  transform: none;
}
/* 1120-P2-D15 */
body.ss617 #lesson .ss617-picture .l01-s7-plane > img {
  object-fit: contain;
}
/* 1120-P2-D08 1120-P2-D13 */
body.ss617 #lesson .ss617-wrap-picture {
  float: none;
  margin-inline: auto;
  grid-column: 1 / -1;
  grid-row: auto;
}
/* 1120-P2-D16 1120-P2-D17 1120-P2-D18 */
body.ss617 .ss617-stage-list .stage-tab {
  min-block-size: 54px !important;
  block-size: auto;
  font-size: 18px !important;
}
/* 1120-P2-D18 1120-P2-D19 */
body.ss617 .ss617-stage-list .stage-num {
  font-size: 18px !important;
}
/* 1120-P2-D20 */
body.ss617 .ss617-stage-list .medley-route-sublabel {
  font-size: 14px !important;
}
@media (min-width: 1280px) {
  /* 1120-P2-D02 1120-P2-D03 1120-P2-D21 */
  body.ss617 #lesson.ss617-main {
    inline-size: calc(100% - 60px);
    max-inline-size: none;
  }
  /* 1120-P2-D02 1120-P2-D03 1120-P2-D21 */
  body.ss617 #lesson .ss617-start {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
    inline-size: 100%;
    max-inline-size: none;
    padding: 0;
    margin-inline: 0;
  }
  /* 1120-P2-D02 1120-P2-D03 1120-P2-D05 1120-P2-D06 1120-P2-D08 1120-P2-D09 1120-P2-D10 1120-P2-D11 1120-P2-D12 1120-P2-D13 */
  body.ss617 #lesson .ss617-start-picture,
  body.ss617 #lesson .ss617-picture,
  body.ss617 #lesson .ss617-wrap-picture {
    inline-size: min(85%, 544px);
    max-inline-size: 544px !important;
  }
  /* 1120-P2-D11 1120-P2-D13 */
  body.ss617 #lesson .ss617-start-picture .ss617-picture,
  body.ss617 #lesson .ss617-wrap-picture .ss617-picture {
    inline-size: 100%;
    max-inline-size: 100% !important;
  }
  /* 1120-P2-D19 */
  body.ss617 .ss617-stage-list .stage-tab {
    font-size: 20px !important;
  }
}
/* 1136 item 3 — 1120 rows 1120-P3-D01 1120-P3-D02 1120-P3-D03 1120-P3-D04 1120-P3-D05 1120-P3-D06 1120-P3-D07 1120-P3-D08 1120-P3-D09 1120-P3-D10 1120-P3-D11 1120-P3-D12 1120-P3-D13 1120-P3-D15 1120-P3-D16 1120-P3-D17 1120-P3-D18 1120-P3-D19 1120-P3-D20 */
@media (max-width: 1279px) {
  /* 1120-P3-D09 1120-P3-D10 */
  body.ss617 #lesson .ss617-answer-area,
  body.ss617 #lesson .ss617-answer-group {
    padding-inline: 0 !important;
    border-inline-width: 0 !important;
    min-inline-size: 0;
  }
}
/* 1120-P3-D10 1120-P3-D11 */
body.ss617 #lesson .ss617-answer-area .ss617-answer-field {
  box-sizing: border-box;
  inline-size: 100% !important;
  max-inline-size: 100%;
  min-block-size: var(--ss617-answer-min) !important;
  padding: 20px;
  border-width: 1.5px;
  font-size: var(--ss617-answer-type) !important;
  line-height: 1.6;
  resize: vertical;
}
/* 1120-P3-D15 1120-P3-D20 */
body.ss617 #lesson .ss617-writing-surface {
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: 100%;
  min-block-size: var(--ss617-answer-min);
}
/* 1120-P3-D17 */
body.ss617 #lesson.ss617-main {
  padding-block-end: max(74px, var(--ss617-safe-bottom));
}
/* 1120-P3-D17 */
body.ss617 #lesson button,
body.ss617 #lesson a,
body.ss617 #lesson input,
body.ss617 #lesson textarea,
body.ss617 #lesson select,
body.ss617 #lesson summary {
  scroll-margin-block-start: calc(var(--ss617-rail-height) + 8px);
  scroll-margin-block-end: 74px;
}
@media (max-width: 1279px) {
  /* 1120-P3-D08 */
  body.ss617 {
    --ss617-gutter: clamp(8px, calc(100vw - 304px), 16px);
    --ss617-card-pad: clamp(8px, calc(10vw - 24px), 12px);
  }
  /* 1120-P3-D01 1120-P3-D02 1120-P3-D03 1120-P3-D04 1120-P3-D05 1120-P3-D06 1120-P3-D07 1120-P3-D08 */
  body.ss617 #lesson.ss617-main {
    inline-size: calc(100% - 2 * var(--ss617-gutter));
    max-inline-size: 100%;
    min-inline-size: 0;
    margin-inline: var(--ss617-gutter) !important;
    padding-inline: 0;
  }
  /* 1120-P3-D01 1120-P3-D02 1120-P3-D03 1120-P3-D04 1120-P3-D05 1120-P3-D06 1120-P3-D07 1120-P3-D18 */
  body.ss617 #lesson .screen,
  body.ss617 #lesson .medley-view {
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;
    padding-inline: 0;
  }
  /* 1120-P3-D01 1120-P3-D02 1120-P3-D03 1120-P3-D04 1120-P3-D05 1120-P3-D06 1120-P3-D07 1120-P3-D18 */
  body.ss617 #lesson .ss617-start,
  body.ss617 #lesson .ss617-goals,
  body.ss617 #lesson .ss617-card,
  body.ss617 #lesson .ss617-question,
  body.ss617 #lesson .ss617-wrap-part,
  body.ss617 #lesson .ss617-complete {
    box-sizing: border-box;
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;
    margin-inline: 0;
    padding-inline: var(--ss617-card-pad);
    border-width: 1px;
    border-style: solid;
  }
  /* 1120-P3-D01 */
  body.ss617 #lesson .ss617-start {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  /* 1120-P3-D04 1120-P3-D05 1120-P3-D09 1120-P3-D10 */
  body.ss617 #lesson .ss617-qa {
    grid-template-columns: minmax(0, 1fr);
    min-inline-size: 0;
  }
  /* 1120-P3-D06 1120-P3-D18 */
  body.ss617 #lesson .ss617-wrap-part > .ss617-note {
    inline-size: 100%;
    max-inline-size: 100%;
    padding-inline: 0;
    border-inline-width: 0;
  }
}
/* 1136 item 4 — 1120 rows 1120-P4-D01 1120-P4-D02 1120-P4-D03 1120-P4-D04 1120-P4-D05 1120-P4-D06 1120-P4-D07 1120-P4-D08 1120-P4-D09 1120-P4-D10 1120-P4-D17 1120-P4-D18 */
/* 1120-P4-D01 1120-P4-D03 */
body.ss617 #lesson .ss617-start h1 {
  font-family: var(--ss617-serif);
  font-size: 40px;
  line-height: 1.2;
  color: #171413;
  margin-block: 24px;
}
/* 1120-P4-D03 */
body.ss617 #lesson .ss617-start .key-strip {
  margin-block: 0 24px;
}
/* 1120-P4-D03 1120-P4-D05 */
body.ss617 #lesson .ss617-start .ss617-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
/* 1120-P4-D03 1120-P4-D05 */
body.ss617 #lesson .ss617-start .ss617-actions .ss617-action {
  inline-size: 100%;
  min-block-size: var(--ss617-main-target) !important;
  block-size: auto;
  background: #FFFFFF;
  color: #171413;
  font-size: var(--ss617-control-size) !important;
  white-space: normal;
}
/* 1120-P4-D05 */
body.ss617 #lesson .ss617-start .ss617-actions .ss617-action.primary,
body.ss617[data-s7-route="goals"] .foot .ss617-action.primary {
  background: #C4530C;
  color: #FFFFFF;
  border-color: #C4530C;
}
/* 1120-P4-D07 1120-P4-D08 */
body.ss617 #lesson .ss617-goals {
  border: 0;
  padding: 0;
  gap: 24px;
}
/* 1120-P4-D07 1120-P4-D08 */
body.ss617 #lesson .ss617-goals .ss617-goal-list {
  gap: 12px;
}
/* 1120-P4-D07 */
body.ss617 #lesson .ss617-goals .ss617-goal {
  inline-size: 100%;
  min-block-size: var(--ss617-main-target);
  padding: var(--ss617-card-pad);
  border: 1px solid #E6DFD3;
  background: #FFFFFF;
  font-size: 20px;
}
/* 1120-P4-D07 */
body.ss617 #lesson .ss617-goals .ss617-goal strong,
body.ss617 #lesson .ss617-goals .ss617-goal small {
  font-size: 20px;
  line-height: 1.5;
}
/* 1120-P4-D09 */
body.ss617 #lesson .ss617-goals .ready-panel {
  min-inline-size: 0;
  padding: var(--ss617-card-pad);
  border: 1px solid #E6DFD3;
  background: #FFF6EE;
  color: #171413;
}
/* 1120-P4-D10 1120-P4-D17 */
body.ss617[data-s7-route="goals"] .foot-shell {
  position: static;
}
/* 1120-P4-D10 */
body.ss617[data-s7-route="goals"] .foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  inline-size: calc(100% - 2 * var(--ss617-gutter));
  max-inline-size: none;
  margin-inline: auto;
  padding-inline: 0;
}
/* 1120-P4-D05 1120-P4-D10 */
body.ss617[data-s7-route="goals"] .foot .ss617-action {
  inline-size: 100%;
  min-block-size: var(--ss617-main-target) !important;
  block-size: auto;
  font-size: var(--ss617-control-size) !important;
  white-space: normal;
}
/* 1120-P4-D05 1120-P4-D10 */
body.ss617[data-s7-route="goals"] .foot .ss617-action:not(.primary) {
  background: #FFFFFF;
  color: #171413;
}
@media (max-width: 1279px) {
  /* 1120-P4-D01 1120-P4-D03 */
  body.ss617 #lesson .ss617-start {
    border-color: #E6DFD3;
    border-radius: var(--ss617-card-radius);
    background: #FFFFFF;
  }
}
@media (min-width: 1280px) {
  /* 1120-P4-D01 1120-P4-D04 */
  body.ss617 #lesson .ss617-start h1 {
    font-size: 48px;
  }
  /* 1120-P4-D04 1120-P4-D05 */
  body.ss617 #lesson .ss617-start .ss617-actions {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  /* 1120-P4-D08 */
  body.ss617 #lesson .ss617-goals {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 32px;
  }
  /* 1120-P4-D10 */
  body.ss617[data-s7-route="goals"] .foot {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  /* 1120-P4-D10: preserve the existing message above the two source navigation controls. */
  body.ss617[data-s7-route="goals"] .foot > .foot-center {
    grid-column: 1 / -1;
    grid-row: 1;
  }
}
/* 1136 item 5 — 1120 rows 1120-P5-D05 1120-P5-D06 1120-P5-D07 1120-P5-D08 1120-P5-D09 1120-P5-D10 1120-P5-D11 1120-P5-D13 1120-P5-D14 1120-P5-D16 1120-P5-D18 */
/* 1120-P5-D05 1120-P5-D06 1120-P5-D07 1120-P5-D08 1120-P5-D09 1120-P5-D10 1120-P5-D11 1120-P5-D13 */
body.ss617 #lesson .ss617-role {
  background-color: var(--ss617-family-mid, #F4EFE7) !important;
  color: #171413 !important;
  opacity: 1 !important;
}
/* 1120-P5-D05 1120-P5-D06 1120-P5-D07 1120-P5-D08 1120-P5-D09 1120-P5-D10 1120-P5-D11 1120-P5-D13 */
body.ss617.zh-mode #lesson .ss617-role,
body.ss617:lang(zh) #lesson .ss617-role {
  color: #923008 !important;
}
/* 1120-P5-D13 */
body.ss617 #lesson .ss617-role * {
  color: inherit !important;
  opacity: 1 !important;
}
/* 1136 item 6 — 1120 rows 1120-P6-D01 1120-P6-D02 1120-P6-D03 1120-P6-D04 1120-P6-D05 1120-P6-D06 1120-P6-D07 1120-P6-D08 1120-P6-D09 */
/* 1120-P6-D01 1120-P6-D02 1120-P6-D03 1120-P6-D04 */
body.ss617 #lesson .ss617-modes:not([hidden]) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: none;
  grid-auto-rows: auto;
  gap: 12px;
}
/* 1120-P6-D01 1120-P6-D02 1120-P6-D03 1120-P6-D04 */
body.ss617 #lesson .ss617-modes > button,
body.ss617 #lesson .ss617-modes .voice-btn {
  min-block-size: 80px !important;
  block-size: auto !important;
  min-inline-size: 0;
  font-size: var(--ss617-control-size) !important;
  line-height: 1.5;
}
/* 1120-P6-D01 1120-P6-D02 1120-P6-D03 1120-P6-D04 */
body.ss617 #lesson .ss617-modes .icon,
body.ss617 #lesson .ss617-modes .voice-ic,
body.ss617 #lesson .ss617-modes .voice-ic svg {
  inline-size: 24px !important;
  block-size: 24px !important;
}
/* 1120-P6-D01 1120-P6-D02 1120-P6-D03 1120-P6-D04 */
body.ss617 #lesson .ss617-modes .voice-lbl {
  font-size: var(--ss617-control-size) !important;
}
/* 1120-P6-D01 1120-P6-D02 1120-P6-D03 1120-P6-D04 */
body.ss617 #lesson .ss617-modes .medley-soon {
  font-size: 16px !important;
}
/* 1120-P6-D05 1120-P6-D06 1120-P6-D08 */
body.ss617 .ss617-course {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  inline-size: calc(100vw - 2 * var(--ss617-gutter));
  max-inline-size: none;
  min-inline-size: 0;
  margin-inline: -16px;
}
/* 1120-P6-D05 1120-P6-D06 1120-P6-D07 1120-P6-D08 */
body.ss617 .ss617-course > button {
  min-block-size: 48px !important;
  block-size: auto !important;
  min-inline-size: 0;
}
/* 1120-P6-D05 1120-P6-D06 1120-P6-D07 1120-P6-D08 1120-P6-D09 */
body.ss617 .ss617-course .u2-dir-panel {
  position: static;
  grid-column: 1 / -1;
  inline-size: 100%;
  max-inline-size: 100%;
  max-block-size: min(var(--u2-dir-max, 440px), calc(100svh - 90px));
  min-inline-size: 0;
}
/* 1120-P6-D05 1120-P6-D06 1120-P6-D07 1120-P6-D08 */
body.ss617 .u2-dir-panel #u2-dir-close {
  inline-size: 48px;
  block-size: 48px;
  min-inline-size: 48px;
  min-block-size: 48px;
}
/* 1120-P6-D09 */
body.ss617 .u2-dir-panel .u2-dir-head {
  flex: 0 0 auto;
}
/* 1120-P6-D09 */
body.ss617 .u2-dir-panel .u2-dir-list {
  max-block-size: calc(100svh - 156px);
  overflow-y: auto;
  min-block-size: 0;
}
/* 1120-P6-D05 1120-P6-D06 1120-P6-D07 1120-P6-D08 */
body.ss617 .u2-dir-panel .u2-dir-item {
  min-block-size: 56px !important;
  block-size: auto;
  min-inline-size: 0;
  scroll-margin-block: 8px 74px;
}
@media (max-width: 319px) {
  /* 1120-P6-D04 */
  body.ss617 #lesson .ss617-modes:not([hidden]) {
    grid-template-columns: minmax(0, 1fr);
  }
  /* 1120-P6-D08 */
  body.ss617 .ss617-course {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (min-width: 360px) {
  /* 1120-P6-D06 1120-P6-D07 */
  body.ss617 .ss617-course {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1280px) {
  /* 1120-P6-D03 */
  body.ss617 #lesson .ss617-modes:not([hidden]) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    inline-size: calc(100% - 2px);
    margin-inline: auto;
  }
  /* 1120-P6-D07 */
  body.ss617 .ss617-course {
    inline-size: 400px;
    margin-inline: 0;
  }
}
/* 1136 item 7 — 1120 rows 1120-P6-D10 1120-P6-D11 1120-P6-D12 1120-P6-D13 1120-P6-D14 1120-P6-D15 1120-P6-D16 1120-P6-D17 1120-P6-D18 1120-P6-D19 1120-P6-D20 */
/* 1120-P6-D10 1120-P6-D11 1120-P6-D12 1120-P6-D13 1120-P6-D14 */
body.ss617 #lesson .ss617-card[data-card-id="C07"] .l01-cc,
body.ss617 #lesson .ss617-card[data-card-id="C07"] .ss617-note,
body.ss617 #lesson .ss617-card[data-card-id="C07"] .l01-relation,
body.ss617 #lesson .ss617-card[data-card-id="C07"] .l01-c-more,
body.ss617 #lesson .ss617-card[data-card-id="C07"] .concise-points,
body.ss617 #lesson .ss617-card[data-card-id="C07"] .l01-easy,
body.ss617 #lesson .ss617-card[data-card-id="C07"] .l01-easy-body {
  min-inline-size: 0;
  max-inline-size: 100%;
  block-size: auto;
  max-block-size: none;
  overflow: visible;
  white-space: normal;
  overflow-wrap: anywhere;
}
/* 1120-P6-D10 1120-P6-D11 1120-P6-D12 1120-P6-D13 1120-P6-D14 */
body.ss617 #lesson .ss617-card[data-card-id="C07"] .l01-cc {
  grid-template-columns: minmax(0, 1fr);
}
/* 1120-P6-D10 1120-P6-D11 1120-P6-D12 1120-P6-D13 1120-P6-D14 */
body.ss617 #lesson .ss617-card[data-card-id="C07"] .ss617-note,
body.ss617 #lesson .ss617-card[data-card-id="C07"] .l01-c-more,
body.ss617 #lesson .ss617-card[data-card-id="C07"] .l01-easy,
body.ss617 #lesson .ss617-card[data-card-id="C07"] .l01-easy-body {
  padding: 12px 0;
  border-inline-width: 1px;
}
/* 1120-P6-D10 1120-P6-D11 1120-P6-D12 1120-P6-D13 1120-P6-D14 */
body.ss617 #lesson .ss617-card[data-card-id="C07"] .l01-relation {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding-inline: 0;
  list-style-position: inside;
}
/* 1120-P6-D10 1120-P6-D11 1120-P6-D12 1120-P6-D13 1120-P6-D14 */
body.ss617 #lesson .ss617-card[data-card-id="C07"] .l01-relation > li {
  min-inline-size: 0;
  max-inline-size: 100%;
  margin-block: 0;
  overflow-wrap: anywhere;
}
/* 1120-P6-D15 1120-P6-D16 1120-P6-D18 */
body.ss617 {
  --ss617-rail-height: 64px;
}
/* 1120-P6-D15 1120-P6-D16 1120-P6-D17 1120-P6-D18 */
body.ss617 #lesson .screen.active .btn.ss617-entry-rail {
  min-block-size: var(--ss617-rail-height) !important;
  max-inline-size: none;
  block-size: auto;
  font-size: 18px !important;
  margin-block: 0 8px;
}
/* 1120-P6-D15 1120-P6-D16 1120-P6-D17 1120-P6-D18 1120-P6-D20 */
body.ss617 #lesson .l01-entry-notice-slot {
  margin-block: 0 8px;
  min-inline-size: 0;
}
/* 1120-P6-D15 1120-P6-D16 1120-P6-D17 1120-P6-D18 1120-P6-D20 */
body.ss617 #lesson .l01-entry-notice-slot .ss617-entry-notice {
  inline-size: 100%;
  min-block-size: var(--ss617-notice-height);
  block-size: auto;
  margin: 0;
}
/* 1120-P6-D15 1120-P6-D16 1120-P6-D17 1120-P6-D18 */
body.ss617 #lesson .l01-entry-notice-slot + * {
  margin-block-start: 0;
}
/* 1120-P6-D15 1120-P6-D16 1120-P6-D18 */
body.ss617 #lesson .ss617-start .l01-entry-notice-slot + h1 {
  margin-block-start: 0;
}
@media (max-width: 1279px) {
  /* 1120-P6-D15 1120-P6-D16 1120-P6-D18 */
  body.ss617 #lesson .ss617-start .ss617-entry-rail,
  body.ss617 #lesson .ss617-start .l01-entry-notice-slot,
  body.ss617 #lesson .ss617-complete .ss617-entry-rail,
  body.ss617 #lesson .ss617-complete .l01-entry-notice-slot {
    inline-size: var(--ss617-entry-inline-size, calc(100vw - 2 * var(--ss617-gutter))) !important;
    margin-inline-start: var(--ss617-entry-margin-start, calc(-1 * (var(--ss617-card-pad) + 1px))) !important;
  }
}
@media (max-width: 215px) {
  /* 1120-P6-D18 */
  body.ss617 #lesson .l01-entry-notice-slot .ss617-entry-notice {
    min-block-size: 108px;
  }
}
@media (min-width: 1280px) {
  /* 1120-P6-D17 */
  body.ss617 {
    --ss617-rail-height: 68px;
  }
  /* 1120-P6-D17 */
  body.ss617:not([data-s7-route="start"]):not([data-s7-route="goals"]) #lesson .ss617-entry-rail,
  body.ss617:not([data-s7-route="start"]):not([data-s7-route="goals"]) #lesson .l01-entry-notice-slot {
    inline-size: var(--ss617-entry-inline-size, calc(100vw - 60px));
    margin-inline-start: var(--ss617-entry-margin-start, -30px);
  }
}
/* 1136 item 8 — 1120 rows 1120-P6-D21 1120-P6-D22 1120-P6-D23 1120-P6-D24 1120-P6-D25 1120-P6-D26 */
/* 1120-P6-D21 1120-P6-D24: native reader uses the same inner column as the answer. */
body.ss617 #lesson .ss617-question-reader:not([hidden]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: none;
  grid-auto-rows: auto;
  gap: 12px;
  flex: 0 0 auto;
  inline-size: calc(100% - 2px - 2 * var(--ss617-card-pad));
  min-inline-size: 0;
  margin-inline: auto;
}
/* 1120-P6-D21 1120-P6-D24: existing reader children retain their source sequence. */
body.ss617 #lesson .ss617-question-reader > * {
  grid-column: auto;
  grid-row: auto;
  min-inline-size: 0;
  max-inline-size: 100%;
}






/* 1120-P6-D26: phone dot packing keeps the original numeric targets and state. */
body.ss617 #lesson .ss617-question-pager:not([hidden]) {
  inline-size: min(100%, 260px);
  max-inline-size: 260px;
  gap: 12px;
}
/* 1120-P6-D26: Back/Next remain in the native global footer and retain source order. */
body.ss617[data-s7-route="try"] .foot,
body.ss617[data-s7-route="test"] .foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  inline-size: calc(100vw - 2 * var(--ss617-gutter) - 2px - 2 * var(--ss617-card-pad));
  min-inline-size: 0;
  max-inline-size: none;
  margin-inline: auto;
  padding-inline: 0;
}
/* 1120-P6-D26: native footer actions occupy their own track. */
body.ss617[data-s7-route="try"] .foot > .btn,
body.ss617[data-s7-route="test"] .foot > .btn,
body.ss617[data-s7-route="test"] .foot .u2-foot-pair > .btn {
  inline-size: 100%;
  min-inline-size: 0;
  margin-inline: 0;
}
@media (min-width: 360px) {
  /* 1120-P6-D22 1120-P6-D23 1120-P6-D26: two equal columns with exactly 12px between them. */
body.ss617 #lesson .ss617-question-reader:not([hidden]),
body.ss617[data-s7-route="try"] .foot,
body.ss617[data-s7-route="test"] .foot {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1280px) {
  /* 1120-P6-D23 1120-P6-D26: match the accepted 531px answer-field width at 1280. */
  body.ss617 #lesson .ss617-question-reader:not([hidden]),
  body.ss617[data-s7-route="try"] .foot,
  body.ss617[data-s7-route="test"] .foot {
    inline-size: calc((100vw - 4 * var(--ss617-gutter) - 2 * var(--ss617-question-pad) - 2px - var(--ss617-qa-gap-wide)) / 2 - 2px);
  }
  /* 1120-P6-D26: keep the native message above the navigation tracks without changing control order. */
  body.ss617[data-s7-route="try"] .foot > .foot-center,
  body.ss617[data-s7-route="test"] .foot > .foot-center {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  /* 1120-P6-D26: original Review and Next use the same tracks; both remain distinct native controls. */
  body.ss617[data-s7-route="test"] .foot > .u2-foot-pair {
    display: contents;
  }

  /* 1120-P6-D26: seven original Test dots fit in 464px. */
  body.ss617 #lesson .ss617-question-pager:not([hidden]) {
    inline-size: 464px;
    max-inline-size: 464px;
  }
}

/* 1204 item 2 — 1120 rows 1120-P3-D17 1120-P1-D13 1120-P1-D14 — ruling R1.08 */
/* 1120-P3-D17 1120-P1-D13 1120-P1-D14: withdrawn the causal 1136 74px token override; retain the existing template reserve and unchanged 1014B picker margins. */

/* 1204 item 4 — 1120 rows 1120-P3-D09 1120-P3-D10 1120-P3-D18 1120-P6-D21 1120-P6-D22 1120-P6-D23 1120-P6-D24 1120-P6-D25 — ruling R1.06 */
@media (max-width: 1279px) {
  /* 1120-P3-D09 1120-P3-D10 1120-P3-D18; R1.06 */
  body.ss617 #lesson .ss617-answer-area .aui-box {
    padding-inline: 0 !important;
    border-inline-width: 0 !important;
    min-inline-size: 0;
  }
}

/* 1120-P6-D25; R1.06 */
body.ss617 #lesson .ss617-answer-area .aui-toolcell {
  position: relative;
  block-size: auto;
  min-block-size: 80px;
  min-inline-size: 0;
  grid-column: auto;
  grid-row: auto;
}
/* 1120-P6-D25; R1.06 */
body.ss617 #lesson .ss617-answer-area .aui-toolcell .aui-toolbtn {
  min-block-size: 0 !important;
  min-inline-size: 0;
}

/* 1120-P6-D21 1120-P6-D24; R1.06 */
body.ss617 #lesson .ss617-answer-area .aui-bar:not([hidden]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: none;
  grid-auto-rows: auto;
  gap: 12px;
  padding-inline: 0;
}
/* 1120-P6-D22 1120-P6-D25; R1.06 */
body.ss617 #lesson .ss617-answer-area .aui-toolcell--ans > .aui-tip::after {
  left: auto;
  right: 0;
}
/* 1120-P6-D21 1120-P6-D22 1120-P6-D23 1120-P6-D24; R1.06 */
body.ss617 #lesson .ss617-answer-area .aui-toolcell--recheck,
body.ss617 #lesson .ss617-answer-area .aui-toolcell--ask,
body.ss617 #lesson .ss617-answer-area .aui-dock {
  grid-column: 1 / -1;
  grid-row: auto;
  justify-self: stretch;
  inline-size: 100%;
  min-inline-size: 0;
}
/* 1120-P6-D21 1120-P6-D22 1120-P6-D24; R1.06 */
body.ss617 #lesson .ss617-answer-area .aui-dock .aui-send,
body.ss617 #lesson .ss617-question button[id$="-submit"] {
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: 64px !important;
}
@media (min-width: 360px) {
  /* 1120-P6-D22 1120-P6-D23; R1.06 */
  body.ss617 #lesson .ss617-answer-area .aui-bar:not([hidden]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1280px) {
  /* 1120-P6-D23; R1.06 */
  body.ss617 #lesson .ss617-answer-area .aui-dock .aui-send,
  body.ss617 #lesson .ss617-question button[id$="-submit"] {
    min-block-size: 68px !important;
  }
}

/* 1204 item 5 — 1120 rows 1120-P6-D15 1120-P6-D16 1120-P6-D18 — ruling R1.07 */
/* 1120-P6-D15 1120-P6-D16 1120-P6-D18; R1.07 */
body.ss617 {
  --ss617-safe-top: var(--l01-entry-rail-reserve);
  scroll-padding-top: var(--l01-entry-rail-reserve);
}
/* 1120-P6-D15 1120-P6-D16 1120-P6-D18; R1.07 */
body.ss617 #lesson .question-stem,
body.ss617 #lesson .l01-entry-notice-slot,
body.ss617 #lesson .question-block {
  scroll-margin-top: var(--l01-entry-rail-reserve);
}

/* 1204 item 9 — 1120 rows 1120-P4-D11 1120-P4-D12 1120-P4-D13 1120-P4-D14 1120-P4-D15 1120-P4-D16 / R1.05 */
/* 1120-P4-D12 R1.05: existing actual records only. */
body.ss617 #lesson .ss617-complete .ss617-complete-records:not([hidden]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  padding-inline: 0;
  list-style: none;
}
/* 1120-P4-D12 R1.05 */
body.ss617 #lesson .ss617-complete .ss617-complete-record {
  padding: 12px;
  font-size: 20px;
  block-size: auto;
}
/* 1120-P4-D14 R1.05: five original destinations in source order. */
body.ss617 #lesson .ss617-complete .ss617-wrap-links {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
/* 1120-P4-D14 R1.05 */
body.ss617 #lesson .ss617-complete .ss617-wrap-links button {
  inline-size: 100%;
  min-block-size: 112px !important;
  font-size: 18px;
}
/* 1120-P4-D14 1120-P4-D15 R1.05: retain real Review and Finish predicates. */
body.ss617 #lesson .ss617-complete > .row button {
  min-block-size: 112px !important;
  font-size: 18px;
}
@media (min-width: 1280px) {
  /* 1120-P4-D11 R1.05: desktop paper1220 and inner1170 in the active Complete view. */
  body.ss617 #lesson:has(.screen.active .ss617-complete) {
    inline-size: calc(100% - 60px);
    max-inline-size: 1220px;
    margin-inline: auto !important;
    padding-inline: 0;
  }
  /* 1120-P4-D11 R1.05 */
  body.ss617 #lesson .ss617-complete {
    inline-size: 100%;
    padding-inline: 24px;
    border-width: 1px;
    border-style: solid;
  }

  /* 1120-P4-D12 R1.05 */
  body.ss617 #lesson .ss617-complete .ss617-complete-records:not([hidden]) {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }
  /* 1120-P4-D12 R1.05 */
  body.ss617 #lesson .ss617-complete .ss617-complete-record { padding: 16px; }
  /* 1120-P4-D14 R1.05 */
  body.ss617 #lesson .ss617-complete .ss617-wrap-links { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  /* 1120-P4-D14 R1.05 */
  body.ss617 #lesson .ss617-complete .ss617-wrap-links button { min-block-size: 118px !important; font-size: 20px; }
  /* 1120-P4-D14 1120-P4-D15 R1.05 */
  body.ss617 #lesson .ss617-complete > .row button { min-block-size: 118px !important; font-size: 20px; }
}

/* 1204 item 11 — 1120 rows 1120-P5-D01 1120-P5-D02 1120-P5-D03 1120-P5-D06 1120-P5-D07 1120-P5-D12 1120-P5-D14 — ruling R1.15 */
/* 1120-P5-D01 1120-P5-D06 — ruling R1.15: C08 uses the existing peach tokens. */
body.ss617 .ss617-card[data-card-id="C08"] {
  --ss617-family-light: var(--ss617-peach-light);
  --ss617-family-mid: var(--ss617-peach-mid);
  --ss617-family-deep: var(--ss617-peach-deep);
  --ss617-family-title: var(--ss617-peach-title-ink);
  --point-light: var(--ss617-peach-light) !important;
  --point-mid: var(--ss617-peach-mid) !important;
  --point-deep: var(--ss617-peach-deep) !important;
}
/* 1120-P5-D02 1120-P5-D07 — ruling R1.15: C09 uses the existing cyan tokens. */
body.ss617 .ss617-card[data-card-id="C09"] {
  --ss617-family-light: var(--ss617-cyan-light);
  --ss617-family-mid: var(--ss617-cyan-mid);
  --ss617-family-deep: var(--ss617-cyan-deep);
  --ss617-family-title: var(--ss617-cyan-title-ink);
  --point-light: var(--ss617-cyan-light) !important;
  --point-mid: var(--ss617-cyan-mid) !important;
  --point-deep: var(--ss617-cyan-deep) !important;
}
/* 1120-P5-D03 1120-P5-D12 1120-P5-D14 — ruling R1.15: C13 keeps its source misconception kind, using existing reserved tokens. */
body.ss617 .ss617-card[data-card-id="C13"] {
  --ss617-family-light: var(--ss617-misconception-bg);
  --ss617-family-mid: var(--ss617-misconception-mid);
  --ss617-family-deep: var(--ss617-misconception-ink);
  --ss617-family-title: var(--ss617-misconception-ink);
  --point-light: var(--ss617-misconception-bg) !important;
  --point-mid: var(--ss617-misconception-mid) !important;
  --point-deep: var(--ss617-misconception-ink) !important;
}