/* Shared lesson frame with the existing stage-one activity presentation.
   The DC component still owns every learning action and reading arrangement. */
body[data-ttobak-screen^="stage-"] .tt-learning-app {
  --s1-clay-paper: #f8f5ec;
  --s1-clay-sage: #c6d6b8;
  --s1-clay-butter: #f2d976;
  --s1-clay-ink: #254c42;
  --s1-clay-line: #d8decd;
  color: var(--s1-clay-ink) !important;
}

/* Place the instruction immediately after the breadcrumb in reading order.
   The ribbon aligns with the activity card's outer edges. */
body[data-ttobak-screen^="stage-"] .tt-learning-app [data-ui="lessonPageStyle"] {
  padding-top: 6px !important;
}
body[data-ttobak-screen^="stage-"] .tt-learning-app [data-ui="lessonHeadingRowStyle"] {
  margin-bottom: 10px !important;
}
body[data-ttobak-screen^="stage-"] .lesson-heading-copy {
  display: grid !important;
  grid-template-columns: 208px minmax(0, 1fr);
  gap: 6px 24px !important;
  width: 100%;
}
body[data-ttobak-screen^="stage-"] .lesson-heading-copy [data-ui="breadcrumbStyle"] {
  grid-column: 1 / -1;
  justify-self: start;
}
body[data-ttobak-screen^="stage-"] .lesson-heading-copy [data-ui="lessonTitleStyle"] {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
}
body[data-ttobak-screen^="stage-"] .learning-feedback-slot {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  margin-inline: 0;
}
body[data-ttobak-screen^="stage-"] .learning-feedback-slot [data-ui="feedbackRowStyle"] {
  margin-bottom: 0 !important;
}

/* Three quiet material levels: paper face, shallow clay support, contact shadow. */
body[data-ttobak-screen^="stage-"] .tt-learning-app [data-ui="activityScrollStyle"] {
  background: var(--s1-clay-paper) !important;
  border-color: var(--s1-clay-line) !important;
  box-shadow: inset 1px 1px 0 #fffdf5, 0 3px 0 #e0e1d3, 0 12px 24px -14px #254c4224 !important;
}

body[data-ttobak-screen^="stage-"] .tt-learning-app [data-ui="feedbackRowStyle"] {
  background: #e5eadb !important;
  border-color: #d4dec6 !important;
  box-shadow: inset 1px 1px 0 #f8fbee, 0 2px 0 #ced7c2 !important;
}

body[data-ttobak-screen="stage-1"] .tt-learning-app [data-ui="s1PlaqueLabelStyle"] {
  background: var(--s1-clay-sage) !important;
  color: var(--s1-clay-ink) !important;
  box-shadow: inset 1px 1px 0 #edf3e2, 0 2px 0 #aebfa0 !important;
}

/* Art occupies the existing workspace; it never establishes its height. */
body[data-ttobak-screen="stage-1"] .tt-learning-app [data-ui="s1WorkspaceStyle"] {
  position: relative;
  isolation: isolate;
  padding: 44px 24px 48px !important;
}

body[data-ttobak-screen="stage-1"] .tt-learning-app [data-ui="s1WorkspaceStyle"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 64px solid transparent;
  border-image: url("./assets/clay-workstation-desktop-transparent-display.webp") 180 250 150 250 fill / 64px 88px 56px 88px;
  border-radius: 24px;
  filter: drop-shadow(0 4px 3px #254c4225);
  pointer-events: none;
}

body[data-ttobak-screen="stage-1"] .tt-learning-app :is([data-ui="s1GlyphAreaStyle"], [data-ui="s1GuideStyle"]) {
  position: relative;
  z-index: 1;
}

/* The reading face has no texture, art, raised glyph, or moving decoration. */
body[data-ttobak-screen="stage-1"] .tt-learning-app [data-ui="s1BoxStyle"] {
  background: var(--s1-clay-paper) !important;
  border-color: #e0d4ae !important;
  box-shadow: inset 1px 1px 0 #fffef9, 0 5px 0 var(--s1-clay-butter), 0 10px 14px -10px #254c4240 !important;
}

body[data-ttobak-screen="stage-1"] .tt-learning-app [data-ui="bigGlyphStyle"] {
  color: var(--s1-clay-ink) !important;
  text-shadow: none !important;
}

body[data-ttobak-screen="stage-1"] .tt-learning-app :is([data-ui="s1SoundRowStyle"], [data-ui="s1HintStyle"]) {
  color: #3e5e50 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-ttobak-screen="stage-1"] .tt-learning-app [data-ui="s1SoundTextStyle"] {
  color: var(--s1-clay-ink) !important;
}
body[data-ttobak-screen="stage-1"] .tt-learning-app [data-ui="s1SoundRowStyle"] {
  font:500 18px/1.5 'Ttobak UI','Ttobak Learning',sans-serif !important;
}
body[data-ttobak-screen="stage-1"] .tt-learning-app [data-ui="s1SoundTextStyle"] { font-size:22px !important;font-weight:600 !important; }
body[data-ttobak-screen="stage-1"] .tt-learning-app [data-ui="s1HintStyle"] {
  font:500 18px/1.5 'Ttobak UI','Ttobak Learning',sans-serif !important;color:#284c40 !important;
}

body[data-ttobak-screen="stage-1"] .tt-learning-app [data-ui="s1GuideBubbleStyle"] {
  background: var(--s1-clay-paper) !important;
  border-color: var(--s1-clay-line) !important;
  color: var(--s1-clay-ink) !important;
  box-shadow: inset 1px 1px 0 #fffef9, 0 2px 0 #e0e2d3 !important;
}

body[data-ttobak-screen="stage-1"] .tt-learning-app [data-ui="s1GuideTextStyle"] {
  color: #476152 !important;
}

body[data-ttobak-screen="stage-1"] .tt-learning-app [data-ui="s1GuideImageStyle"] {
  filter: drop-shadow(0 5px 3px #254c421f) !important;
  background-image:url('./assets/ddori-helper-voice.webp') !important;
  width:112px !important;height:112px !important;
}
body[data-ttobak-screen="stage-3"] .tt-learning-app [data-ui="s3GuideImageStyle"],
body[data-ttobak-screen="stage-8"] .tt-learning-app [data-ui="wordGuideImageStyle"] {
  width:112px !important;height:112px !important;object-fit:contain;
}

/* Existing dimensions, glyphs, selected-chip colors, and event handlers remain. */
body[data-ttobak-screen="stage-1"] .tt-learning-app [data-ui="v.style"] {
  box-shadow: inset 1px 1px 0 #ffffff35, 0 3px 0 #c7cdb9, 0 6px 8px -7px #254c423d !important;
}

body[data-ttobak-screen="stage-1"] .tt-learning-app [data-ui="s1ListenBtnStyle"] {
  background: var(--s1-clay-ink) !important;
  color: var(--s1-clay-paper) !important;
  border-color: #214338 !important;
  box-shadow: inset 1px 1px 0 #ffffff30, 0 3px 0 #17392f, 0 7px 10px -7px #254c425c !important;
}

body[data-ttobak-screen="stage-1"] .tt-learning-app [data-ui="s1ActionRowStyle"] [data-ui="navBtnStyle"] {
  background: var(--s1-clay-paper) !important;
  color: var(--s1-clay-ink) !important;
  border-color: var(--s1-clay-line) !important;
  box-shadow: inset 1px 1px 0 #fffef9, 0 2px 0 #d2d8c7, 0 5px 8px -7px #254c422e !important;
}

body[data-ttobak-screen="stage-1"] .tt-learning-app [data-ui="s1BoardFooterStyle"] {
  border-color: var(--s1-clay-line) !important;
  padding-top:28px!important;
}

body[data-ttobak-screen="stage-1"] .tt-learning-app .ttb-stage1-random {
  min-height: 48px;
  padding: 10px 18px;
  border: 1px solid #c5d1b7;
  border-radius: 14px;
  background: #edf2e4;
  color: #254c42;
  font-family: 'Ttobak Learning', 'Noto Sans CJK KR', 'Malgun Gothic', sans-serif !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.5;
  letter-spacing: 0;
  box-shadow: inset 1px 1px 0 #fffef6, 0 3px 0 #c4cfb7;
  cursor: pointer;
}

body[data-ttobak-screen^="stage-"] .tt-learning-app [data-ui="attemptPanelStyle"] {
  background: #edf0e5 !important;
  border-color: var(--s1-clay-line) !important;
  box-shadow: inset 1px 1px 0 #fbfdf3, 0 2px 0 #d8decd !important;
}

body[data-ttobak-screen^="stage-"] .tt-learning-app :is(button, select):focus-visible {
  outline: 3px solid #197c99 !important;
  outline-offset: 4px !important;
}

body[data-ttobak-screen^="stage-"] .learning-feedback-slot [data-ui="feedbackStepStyle"] {
  display: grid !important;
  place-items: center !important;
  align-self: center !important;
}

@media (max-width: 940px) {
  body[data-ttobak-screen^="stage-"] .lesson-heading-copy { grid-template-columns: minmax(0, 1fr); }
  body[data-ttobak-screen^="stage-"] .learning-feedback-slot { grid-column: 1; grid-row: 2; margin-inline: 0; }
  body[data-ttobak-screen^="stage-"] .lesson-heading-copy [data-ui="lessonTitleStyle"] { grid-row: 3; }
}
@media (max-width: 619px) {
  body[data-ttobak-screen^="stage-"] .tt-learning-app [data-ui="lessonPageStyle"] { padding-top: 6px !important; }
  body[data-ttobak-screen^="stage-"] .tt-learning-app [data-ui="lessonHeadingRowStyle"] { margin-bottom: 10px !important; }
  body[data-ttobak-screen^="stage-"] .lesson-heading-copy { grid-template-columns: minmax(0, 1fr); }
  body[data-ttobak-screen^="stage-"] .learning-feedback-slot { grid-column: 1; grid-row: 2; margin-inline: 0; }
  body[data-ttobak-screen^="stage-"] .lesson-heading-copy [data-ui="lessonTitleStyle"] { grid-row: 3; }
  body[data-ttobak-screen="stage-1"] .tt-learning-app [data-ui="s1WorkspaceStyle"] {
    padding: 28px 16px 30px !important;
    gap: 10px !important;
    box-sizing: border-box;
  }
  body[data-ttobak-screen="stage-1"] .tt-learning-app [data-ui="s1WorkspaceStyle"]::before {
    border-image-source: url("./assets/clay-workstation-mobile-transparent-display.webp");
    border-image-slice: 260 230 250 230 fill;
    border-image-width: 54px 36px 48px 36px;
    border-radius: 20px;
  }
  body[data-ttobak-screen="stage-1"] .tt-learning-app [data-ui="s1GlyphAreaStyle"] { min-width:0 !important; width:100%; }
  body[data-ttobak-screen="stage-1"] .tt-learning-app [data-ui="s1BoxStyle"] {
    width:144px !important;height:148px !important;margin:4px auto 8px !important;
  }
  body[data-ttobak-screen="stage-1"] .tt-learning-app [data-ui="s1SoundRowStyle"] { margin-top:10px !important; }
  body[data-ttobak-screen="stage-1"] .tt-learning-app [data-ui="s1HintStyle"] { font-size:17px !important;line-height:1.5 !important; }
  body[data-ttobak-screen="stage-1"] .tt-learning-app [data-ui="s1GuideStyle"] { max-width:300px !important;gap:8px !important; }
  body[data-ttobak-screen="stage-1"] .tt-learning-app [data-ui="s1GuideBubbleStyle"] {
    padding:8px 10px !important;border-radius:14px !important;line-height:1.45 !important;
  }
  body[data-ttobak-screen="stage-1"] .tt-learning-app [data-ui="s1GuideTitleStyle"] { font-size:13px !important;line-height:1.45 !important; }
  body[data-ttobak-screen="stage-1"] .tt-learning-app [data-ui="s1GuideTextStyle"] { font-size:12px !important;line-height:1.5 !important; }
  body[data-ttobak-screen="stage-1"] .tt-learning-app [data-ui="s1GuideImageStyle"] { width:60px !important;height:64px !important; }
  body[data-ttobak-screen="stage-3"] .tt-learning-app [data-ui="s3GuideImageStyle"],
  body[data-ttobak-screen="stage-8"] .tt-learning-app [data-ui="wordGuideImageStyle"] { width:64px !important;height:64px !important; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-ttobak-screen="stage-1"] .tt-learning-app :is([data-ui="s1WorkspaceStyle"], [data-ui="s1BoxStyle"], [data-ui="v.style"], [data-ui="s1ListenBtnStyle"], [data-ui="s1ActionRowStyle"] button) {
    animation: none !important;
    transition: none !important;
  }
}

@media (forced-colors: active) {
  body[data-ttobak-screen="stage-1"] .tt-learning-app [data-ui="s1WorkspaceStyle"]::before {
    display: none;
  }

  body[data-ttobak-screen="stage-1"] .tt-learning-app [data-ui="s1GuideImageStyle"] {
    filter: none !important;
  }

  body[data-ttobak-screen^="stage-"] .tt-learning-app :is([data-ui="activityScrollStyle"], [data-ui="feedbackRowStyle"], [data-ui="attemptPanelStyle"]),
  body[data-ttobak-screen="stage-1"] .tt-learning-app :is([data-ui="s1BoxStyle"], [data-ui="s1PlaqueLabelStyle"], [data-ui="s1GuideBubbleStyle"], [data-ui="s1SoundRowStyle"], [data-ui="s1HintStyle"]) {
    background: Canvas !important;
    color: CanvasText !important;
    border-color: CanvasText !important;
    box-shadow: none !important;
  }

  body[data-ttobak-screen="stage-1"] .tt-learning-app :is([data-ui="bigGlyphStyle"], [data-ui="s1SoundTextStyle"], [data-ui="s1GuideTextStyle"]) {
    color: CanvasText !important;
  }

  body[data-ttobak-screen^="stage-"] .tt-learning-app :is(button, select) {
    background: ButtonFace !important;
    color: ButtonText !important;
    border-color: ButtonText !important;
    box-shadow: none !important;
    forced-color-adjust: auto;
  }

  body[data-ttobak-screen^="stage-"] .tt-learning-app :is(button, select):focus-visible {
    outline-color: Highlight !important;
  }
}

/* The random action is a button, without a hover underline. */
/* Step numbers follow the first title line, not the combined title and help. */
body[data-ttobak-screen="stage-7"] .tt-learning-app [data-ui="s7FinalGridStyle"] button {
  font-family:'Ttobak UI','Ttobak Learning',sans-serif !important;
  font-size:17px !important;font-weight:500 !important;line-height:1.4 !important;
  min-height:48px !important;padding:10px 6px !important;white-space:nowrap;
}
@media(max-width:619px) {
  body[data-ttobak-screen="stage-7"] .tt-learning-app [data-ui="s7FinalGridStyle"] button { font-size:16px !important; }
}
@media(max-width:359px) {
  body[data-ttobak-screen="stage-7"] .tt-learning-app [data-ui="s7FinalGridStyle"] { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
}
body[data-ttobak-screen^="stage-"] .tt-learning-app [data-ui$="SectionHeadStyle"] {
  align-items:flex-start !important;
}
body[data-ttobak-screen^="stage-"] .tt-learning-app [data-ui$="SectionHeadStyle"] > [data-ui$="StepStyle"] {
  align-self:flex-start !important;display:grid !important;place-items:center;
  width:24px !important;height:24px !important;min-width:24px !important;min-height:24px !important;
  margin-top:0 !important;line-height:1 !important;
}
body[data-ttobak-screen="stage-1"] .tt-learning-app .ttb-stage1-random,
body[data-ttobak-screen="stage-1"] .tt-learning-app .ttb-stage1-random:hover,
body[data-ttobak-screen="stage-1"] .tt-learning-app .ttb-stage1-random:focus-visible{
  text-decoration:none!important;
}

/* Shorten the common heading gap without moving the reading content itself. */
body[data-ttobak-screen^="stage-"] .tt-learning-app [data-ui="breadcrumbStyle"] {
  min-height:24px!important;
  line-height:1.5!important;
  position:relative;
  top:6px;
}

/* Align the compact instruction ribbon with the lower breadcrumb on desktop.
   Only presentation moves; screen scroll/state are untouched. */
@media (min-width: 941px) {
  body[data-ttobak-screen="stage-2"] .lesson-heading-copy [data-ui="breadcrumbStyle"] { grid-column: 1; grid-row: 1; padding-top: 12px !important; }
  body[data-ttobak-screen="stage-2"] .learning-feedback-slot { grid-row: 1 / span 2; align-self: start; }
}
.review-empty { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 18px; }
.review-empty h2 { margin: 0; }