/* Shared opt-in teaching interface. Mathematical scenes keep their own rules. */
.learning-ui {
  --ui-surface: #fffdf8;
  --ui-error: #a52732;
  --ui-error-bg: #fff0ef;
  --ui-success: #256443;
  --ui-success-bg: #edf7ef;
  --ui-gap: 16px;
  --ui-radius: 16px;
  --ui-number-width: calc(5ch + 2.5rem);
}
.learning-breadcrumbs, .learning-ui .arithmetic-breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 48px; margin: 0 0 14px; color: var(--muted); font-size: 1rem; }
.learning-breadcrumbs button, .learning-ui .arithmetic-breadcrumbs button { min-height: 44px; padding: 6px 10px; border: 0; background: transparent; color: var(--blue-dark); }
.learning-breadcrumbs [aria-current="page"] { color: var(--ink); font-weight: 700; overflow-wrap: anywhere; }
.learning-ui .learning-activity-heading { display: block; }
.learning-ui .learning-activity-heading > button { margin-top: 10px; }
.learning-ui #activitySwitcher label { display: grid; gap: 8px; margin-top: 14px; }
.learning-ui #activitySwitcher select { width: min(100%, 440px); }
.learning-ui .header { text-align: left; margin-bottom: 24px; }
.learning-ui > .container { padding: 0; }
.learning-ui .header h1 { text-wrap: balance; font-size: clamp(1.9rem,4vw,2.8rem); }
.learning-ui .header h1 span { font-size: .55em; }
.learning-ui .header > p { max-width: 65ch; }
.learning-ui .learning-overview { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: #fffdf8; }
.learning-section-heading { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.learning-section-heading > div { max-width: 70ch; }
.learning-section-heading h2 { margin: 0 0 8px; }
.learning-section-heading p:last-child { color: var(--muted); }
.learning-eyebrow { margin: 0 0 7px; color: var(--blue-dark); font-size: .82rem; font-weight: 700; letter-spacing: .04em; }
.learning-unit-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 16px; }
.learning-course-note { margin: 16px 0 0; color: var(--muted); font-size: .9rem; }
.learning-continue h3, .learning-continue p { margin: 0; }
.learning-continue p { color: var(--muted); }
.learning-continue > div { flex: 1 1 220px; min-width: 0; }
.learning-continue > button { flex: 0 0 auto; }
.learning-unit-card { display: grid; grid-template-columns: 56px minmax(0,1fr); gap: 12px; padding: 20px; border: 1px solid var(--line); border-radius: var(--ui-radius); background: var(--ui-surface); min-width: 0; }
.learning-unit-identity { display: grid; gap: 8px; justify-items: center; color: var(--blue-dark); font-variant-numeric: tabular-nums; }
.learning-unit-identity span { font-weight: 700; font-size: .9rem; }
.learning-unit-identity strong { display: grid; place-items: center; width: 48px; height: 48px; background: #eef3f3; border-radius: 12px; font-size: 1.5rem; }
.learning-unit-copy h3 { margin: 0 0 8px; font-size: 1.15rem; }
.learning-unit-copy p { margin: 0 0 8px; color: var(--muted); line-height: 1.6; }
.learning-unit-card > button { grid-column: 2; justify-self: start; }
.learning-card-count { font-size: .9rem; color: var(--blue-dark) !important; }
.learning-stats { margin: 10px 0 20px; color: var(--blue-dark); font-size: .95rem; font-variant-numeric: tabular-nums; }
.learning-continue, .learning-ui .arithmetic-continue, .learning-ui .geometry-overview-actions { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; margin: 16px 0; background: var(--yellow-soft); border-radius: 12px; }
.learning-demo-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
.learning-demo-nav > span { color: var(--muted); font-size: .9rem; font-variant-numeric: tabular-nums; }
.learning-ui .learning-help, .learning-ui .learning-parent { margin-top: 18px; border-top: 1px solid var(--line); color: var(--muted); }
.learning-ui .learning-parent { padding: 16px 0; }
.learning-ui .learning-help summary, .learning-ui .learning-parent summary { min-height: 48px; padding: 12px 0; font-weight: 700; color: var(--ink); }
.learning-ui .learning-help p, .learning-ui .learning-parent p { margin: 8px 0; max-width: 68ch; }
.learning-ui button, .learning-ui select, .learning-ui input:not([type="checkbox"]) { min-height: 44px; }
.learning-ui button:focus-visible, .learning-ui select:focus-visible, .learning-ui input:focus-visible { outline: 3px solid var(--blue-dark); outline-offset: 3px; }
.learning-ui .arithmetic-question-card, .learning-ui .arithmetic-demo-example { background: var(--ui-surface); border: 1px solid var(--line); }
.learning-ui .arithmetic-feedback.is-review { background: var(--ui-error-bg); color: var(--ui-error); border: 1px solid var(--ui-error); }
.learning-ui .arithmetic-feedback.is-correct { background: var(--ui-success-bg); color: var(--ui-success); border: 1px solid #9ec8ad; }
.learning-ui .learning-actions { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); align-items: stretch; gap: 8px; width: 100%; }
.learning-ui .learning-actions > button { width: 100%; padding: 10px 5px; }
.learning-ui .arithmetic-answer-form { width: 100%; }
.learning-ui .arithmetic-answer-form .arithmetic-number-input { width: var(--ui-number-width); max-width: 100%; min-height: 58px; padding: 10px 16px; font-size: 1.75rem; font-variant-numeric: tabular-nums; text-align: center; }
.learning-round-status, .learning-ui #roundStatus { margin: 8px 0 12px; font-size: .9rem; color: var(--muted); text-align: left; font-variant-numeric: tabular-nums; }
.learning-ui .arithmetic-next-row { display: none; }
.learning-ui .arithmetic-round-heading p { margin: 0 0 8px; font-size: 1rem; }
.learning-ui .arithmetic-activity-heading { display: block; }
.learning-ui .arithmetic-activity-heading > button { margin-top: 10px; }
.learning-ui .arithmetic-stage-panel { background: white; }
.teaching-frame { min-width: 0; padding-top: 14px; }
.learning-original-problem { position: sticky; top: 8px; z-index: 1; margin: 12px 0 4px; padding: 10px 12px; border-left: 3px solid var(--blue-dark); background: #eef3f3; color: var(--ink); overflow-wrap: anywhere; line-height: 1.65; font-variant-numeric: tabular-nums; }
.teaching-narration { padding: 12px 0; margin: 14px 0 0; border-top: 1px solid var(--line); color: var(--ink); font-size: 1.08rem; }
.teaching-expression { font-size: clamp(1.15rem,4vw,1.8rem); font-weight: 750; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.teaching-check { color: var(--blue-dark); font-weight: 650; }
.teaching-scenario { width: min(100%,600px); margin: 8px 0; }
.teaching-scenario label { display: block; margin-bottom: 6px; }
.teaching-scenario select { max-width: 100%; width: 100%; font: inherit; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); }
.teaching-columns { border-collapse: separate; border-spacing: 4px 6px; margin: 12px auto; font-variant-numeric: tabular-nums; width: min(100%,420px); table-layout: fixed; text-align: center; }
.teaching-columns thead th { color: var(--muted); font-size: .85rem; }
.teaching-columns th:first-child { width: 44px; }
.teaching-columns td { position: relative; padding: 8px 2px; font-size: clamp(1.6rem,6vw,2.4rem); font-weight: 700; }
.teaching-columns .carry { color: var(--blue-dark); font-size: 1rem; height: 28px; padding: 0; }
.teaching-columns s { color: #9b5b5b; font-size: .95rem; margin-right: 3px; }
.teaching-columns td strong { font-size: 1.4rem; color: var(--blue-dark); }
.teaching-columns .answer-digit { border-top: 2px solid var(--ink); }
.learning-ui .is-active { background: #e8f1f3; outline: 2px solid var(--blue-dark); outline-offset: -2px; border-radius: 6px; }
.number-cards, .teaching-number-line { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; }
.number-card { display: inline-block; padding: 12px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font-size: clamp(1rem,3.5vw,1.4rem); font-variant-numeric: tabular-nums; }
.number-jump { color: var(--blue-dark); font-weight: 700; }
.place-blocks { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; align-items: start; }
.place-blocks:has(.place-column:nth-child(3):last-child) { grid-template-columns: repeat(3,minmax(0,1fr)); }
.place-column { min-width: 0; display: grid; justify-items: center; gap: 10px; border-left: 1px solid var(--line); padding: 6px 2px; }
.place-pieces { display: flex; flex-wrap: wrap; align-content: start; justify-content: center; gap: 4px; min-height: 140px; }
.place-piece { display: block; border: 1px solid var(--blue-dark); background: #b4cfdb; }
.place-0 { width: 10px; height: 10px; }
.place-1 { width: 8px; height: 55px; background: repeating-linear-gradient(to bottom,#b4cfdb 0 4px,#426c86 4px 5px); }
.place-2, .place-3 { width: 36px; height: 36px; background-color: #c3d7e0; background-image: linear-gradient(#64869b 1px,transparent 1px),linear-gradient(90deg,#64869b 1px,transparent 1px); background-size: 3.5px 3.5px; }
.place-3 { box-shadow: 3px -3px 0 #7495a6,6px -6px 0 #a4bfcc; margin: 6px 6px 0 0; }
.place-digit { font-size: 1.6rem; font-weight: 750; }
.compare-places { display: grid; gap: 10px; justify-content: center; }
.compare-places > div { display: flex; gap: 6px; }
.teaching-groups { display: grid; grid-template-columns: repeat(auto-fit,minmax(80px,1fr)); gap: 10px; }
.teaching-loose { grid-column: 1/-1; padding: 10px 0; border-top: 1px dashed var(--line); }
.teaching-pair { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; align-items: center; }
.teaching-array { display: grid; gap: 7px; justify-content: center; margin: 12px; }
.teaching-array figcaption { margin-bottom: 8px; color: var(--blue-dark); font-weight: 700; }
.teaching-array-row { display: flex; align-items: center; gap: 5px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; }
.teaching-row-label { width: 3.5em; font-size: .8rem; color: var(--muted); }
.teaching-array .arithmetic-counter { width: 10px; height: 10px; flex-basis: 10px; border-width: 1px; }
.teaching-estimate { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 48px; }
.teaching-estimate > div { padding: 16px; border: 1px solid var(--line); border-radius: 8px; }
.teaching-estimate svg { display: block; max-width: 100%; height: auto; }
.estimate-reference svg { width: 110px; }
.estimate-target svg { width: 336px; }
.teaching-focus { text-align: center; color: var(--blue-dark); font-weight: 700; }
.teaching-person { display: block; margin: 0 auto 8px; }
.teaching-capacity { display: grid; justify-items: center; gap: 8px; padding: 12px; margin: 12px auto; width: fit-content; border: 2px dashed var(--blue-dark); }
.teaching-slots { display: flex; gap: 6px; }
.teaching-slots span { width: 14px; height: 14px; border: 1px dashed var(--blue-dark); border-radius: 50%; }
.teaching-boxes .arithmetic-visual-group { border: 2px solid #a68858; border-radius: 3px; background: #fff6e3; }
.learning-choice-buttons { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px; border: 0; padding: 8px 0; margin: 0; min-width: 0; }
.learning-choice-buttons legend { width: 100%; margin-bottom: 8px; text-align: center; font-weight: 700; }
.learning-choice-buttons button[aria-pressed="true"] { color: white; background: var(--blue-dark); border-color: var(--blue-dark); }
.learning-ui .arithmetic-price-visual { display: grid; gap: 10px; }
@media(max-width:700px) {
  .learning-ui .learning-overview { padding: 18px 14px; }
  .learning-unit-grid { grid-template-columns: minmax(0,1fr); gap: 9px; }
  .learning-unit-card { padding: 16px 12px; grid-template-columns: 44px minmax(0,1fr); gap: 10px; }
  .learning-unit-identity strong { width: 40px; height: 44px; }
  .learning-demo-nav { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .learning-demo-nav > span { grid-column: 1/-1; }
  .place-pieces { min-height: 100px; }
  .place-2, .place-3 { width: 28px; height: 28px; background-size: 2.7px 2.7px; }
  .learning-ui .learning-actions { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .learning-ui .learning-actions > button { font-size: .94rem; padding: 8px 4px; }
}
@media(prefers-reduced-motion:reduce) { .learning-ui * { scroll-behavior: auto !important; } }
.learning-activity-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.learning-activity-card { display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:14px; padding:20px; border:1px solid var(--line); border-radius:var(--ui-radius); background:var(--ui-surface); min-width:0; }
.learning-activity-card h3 { margin:0 0 8px; font-size:1.15rem; }
.learning-activity-card p { margin:8px 0; }
.learning-activity-status { color:var(--blue-dark); }
.learning-practice-link { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 16px; border:1px solid var(--blue-dark); color:var(--blue-dark); border-radius:10px; text-decoration:none; background:#fffdf8; font-weight:650; }
.learning-practice-link:focus-visible { outline:3px solid var(--blue-dark); outline-offset:3px; }
.learning-progress-row { display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:16px 0; border-bottom:1px solid var(--line); }
.learning-progress-row > div { flex:1 1 260px; min-width:0; }
.learning-progress-row h3 { margin:0; font-size:1.05rem; color:var(--ink); }
.learning-progress-row p { font-size:.95rem; }
.learning-progress-row > a { flex:0 0 auto; }
.learning-management details { margin-top:16px; border-top:1px solid var(--line); }
.learning-management label { display:block; margin:12px 0; }
.learning-management input:not([type=checkbox]) { display:block; width:min(100%,360px); margin-top:8px; padding:8px; font:inherit; }
.learning-management input[type=checkbox] { width:22px; height:22px; vertical-align:middle; margin-right:8px; }
.learning-setting-actions { display:flex; flex-wrap:wrap; gap:8px; }
.learning-real-task { padding:16px 0; border-top:1px solid var(--line); }
.learning-stage-nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:18px 0; }
.learning-stage-nav button { padding:10px 4px; }
.learning-stage-nav [aria-pressed=true] { background:var(--blue-dark); color:white; }
.learning-unit-view, .learning-activity-view { padding:24px; border:1px solid var(--line); border-radius:var(--radius); background:white; }
.learning-unit-view > button { margin:8px 0 18px; }
.learning-feedback { margin:14px 0; padding:12px; border:1px solid var(--line); border-radius:8px; }
.learning-feedback.is-error { color:var(--ui-error); background:var(--ui-error-bg); border-color:var(--ui-error); }
.learning-feedback.is-correct { color:var(--ui-success); background:var(--ui-success-bg); }
@media(max-width:700px) { .learning-activity-grid { grid-template-columns:minmax(0,1fr); }.learning-unit-view,.learning-activity-view { padding:18px 14px; }.learning-activity-card { padding:16px 12px; } }

/* Shared stage chrome; engine-specific models remain in their own stylesheets. */
.learning-ui .learning-stage-nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:16px 0; }
.learning-ui .learning-stage-nav button { min-height:52px; padding:8px 12px; }
.learning-ui .learning-stage-nav button[aria-pressed="true"] { color:#fff; background:var(--blue-dark); border-color:var(--blue-dark); }
@media(max-width:700px){ .learning-ui .learning-stage-nav { gap:6px; }.learning-ui .learning-stage-nav button { min-height:48px; padding:7px 5px; font-size:.92rem; } }

.learning-ui .learning-activity-view, .learning-ui.geometry-module .learning-activity-view { padding:24px; background:#fffdf8; border:1px solid var(--line); border-radius:var(--radius); }
@media(max-width:700px){ .learning-ui .learning-activity-view,.learning-ui.geometry-module .learning-activity-view { padding:18px 14px; } }