/* Learner pages. All layout rules stay inside their page/partial namespace. */
.learner-page {
  --page-ivory: #f7f8f2;
  --page-forest: #183d32;
  --page-leaf: #b7dc81;
  --page-line: #d7dfcf;
  --page-muted: #536b60;
  color: var(--page-forest);
  min-inline-size: 0;
}
.learner-page :where(h1, h2, h3) { color: var(--page-forest); text-wrap: balance; }
.learner-page h1 { letter-spacing: -.035em; line-height: 1.4; }
.learner-page :where(p, li, dd, h1, h2, h3, a) { overflow-wrap: anywhere; }
.learner-page :where(.card, .page, .stack, form, section, article, aside) { min-inline-size: 0; }
.learner-page .card {
  border: 1px solid var(--page-line);
  border-radius: 24px;
  background: #fffefa;
  box-shadow: 0 4px 0 #e8ecdf;
  padding: clamp(1.1rem, 2.8vw, 2rem);
}
.learner-page .muted, .learner-page .helptext { color: var(--page-muted); }
.learner-page .btn:not(.btn-ghost):not(.btn-google) {
  background: var(--page-leaf);
  border-color: #6b914f;
  color: #183d32;
  box-shadow: 0 4px 0 #6b914f;
}
.learner-page .btn:not(:disabled):active { transform: translateY(3px); box-shadow: none; }
.learner-page .btn small { display: block; font-size: .76em; font-weight: 500; margin-block-start: .15rem; }
.learner-page .back-link { display: inline-flex; align-items: center; gap: .5rem; margin-block-end: 1rem; color: #3f644e; }
.learner-page .page-head { margin-block-end: 2rem; }
.learner-page .page-head h1 { margin-block: .25rem .6rem; font-size: clamp(1.8rem, 3.4vw, 2.8rem); }
.learner-page .page-eyebrow, .auth-welcome .page-eyebrow {
  font-size: .78rem; font-weight: 800; letter-spacing: .025em;
  color: #456550; margin-block: 0 1rem;
}
/* A big editorial invitation, with a small, honest learner variant. */
.journey-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  padding: clamp(1.4rem, 4vw, 3.5rem);
  margin-block: .4rem 1.8rem;
  border-radius: 36px;
  border: 1px solid #dce3d4;
  background: #eff3e7;
  isolation: isolate;
}
.journey-copy { min-inline-size: 0; }
.journey-hero h1 { font-size: clamp(2.1rem, 4.5vw, 3.7rem); font-weight: 900; margin: 0 0 1.15rem; line-height: 1.32; }
.journey-lede { color: #466152; font-size: 1.05rem; line-height: 2; max-inline-size: 39rem; }
.journey-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 1.15rem; margin-block-start: 1.8rem; }
.journey-primary { gap: 1.6rem; text-align: start; min-block-size: 56px; max-inline-size: 100%; }
.journey-secondary { font-size: .86rem; color: #365845; text-underline-offset: .3em; }
.journey-hero--learner { padding-block: 1.5rem; }
.journey-hero--learner h1 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); margin-block-end: .5rem; }
.journey-hero--learner .pity-scene { max-inline-size: 310px; justify-self: center; }
.journey-hero--learner .journey-lede { margin-block: .5rem 1rem; }
.journey-progress { max-inline-size: 320px; height: 9px; background: #dce5d1; border-radius: 99px; overflow: hidden; margin-block: 1rem 1.4rem; }
.journey-progress,
.chapter-page .island-bar,
.profile-page .prof-progress-bar { box-sizing: border-box; border: 1px solid #a5a5a5; }
.journey-progress span { display: block; height: 100%; background: #638e43; border-radius: inherit; }
.journey-method { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; padding: 0; gap: 1rem; margin-block: 1.5rem 3rem; }
.journey-method li { display: flex; align-items: center; gap: 1rem; padding: 1.15rem; border-block-end: 2px solid #dde5d4; }
.journey-method b { display: block; font-size: 1rem; }
.journey-method li div > span { display: block; color: #536b60; font-size: .8rem; margin-block-start: .3rem; }
.method-icon { display: grid; place-items: center; flex: 0 0 48px; height: 48px; background: #f8df8b; border-radius: 16px; font-size: 1.55rem; color: #183d32; }
.journey-method li:nth-child(2) .method-icon { background: #dfd2ef; }
.journey-method li:nth-child(3) .method-icon { background: #d0e9ef; }
.journey-section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem; margin-block: 1.5rem .5rem; }
.journey-section-head h2 { margin: 0; font-size: 1.45rem; }
.journey-section-head > span { color: #536b60; font-size: .8rem; }
.journey-empty { border: 1px dashed #aabda1; background: #eff3e7; border-radius: 28px; padding: 2.5rem; }
/* Native learning landscape around the shared brand mascot. Its square stage
   leaves the full coil clear of the book, laptop and decorative code chip. */
.pity-scene { position: relative; inline-size: 100%; max-inline-size: 520px; aspect-ratio: 520 / 400; min-inline-size: 0; }
.pity-scene-land { display: block; inline-size: 100%; block-size: 100%; }
.pity-scene-character { position: absolute; z-index: 1; inline-size: 58%; aspect-ratio: 1; inset-inline-start: 21%; inset-block-start: 9%; transform-origin: 50% 95%; }
.pity-scene-character > .pity { display: block; inline-size: 100%; block-size: auto; max-inline-size: none; aspect-ratio: 1; }
.pity-scene-chip { position: absolute; z-index: 2; inset-inline-end: 6%; inset-block-end: 0; background: #fffefa; border: 1.5px solid #183d32; border-radius: 12px; padding: .65rem .8rem; color: #183d32; font: 600 clamp(.6rem, 1.3vw, .87rem)/1.3 monospace; box-shadow: 0 4px 0 #d2dbc8; transform: rotate(5deg); }
.pity-scene-chip span { display: inline-grid; place-items: center; border-radius: 50%; background: #b7dc81; width: 1.5em; height: 1.5em; margin-inline-end: .3rem; }
/* Chapters and outstanding work: clear summary, then the real lesson route. */
.chapter-overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, .45fr); gap: 2rem; align-items: center; background: #eaf0df; padding: 2rem; border-radius: 28px; border: 1px solid #d7dfcf; }
.chapter-heading { min-inline-size: 0; }
.chapter-next { display: flex; align-items: center; justify-content: end; gap: 1rem; min-inline-size: 0; }
.chapter-next > .pity { flex-shrink: 0; }
.chapter-next .btn { text-align: start; gap: 1rem; }
/* Follow course order in normal flow, without reserving a square canvas. */
.chapter-page .chapter-trail {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem;
  inline-size: 100%; aspect-ratio: auto; margin-block: 1.5rem;
  padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none;
}
.chapter-page .chapter-trail .spiral-path { display: none; }
.chapter-page .chapter-trail .stone {
  position: relative; inset: auto; translate: none; inline-size: 100%; min-inline-size: 0;
  grid-template-columns: 48px minmax(0, 1fr); align-items: start; justify-items: start;
  gap: 1rem; padding: .75rem; text-align: start; color: #183d32;
  background: none; border: 1px solid transparent; border-radius: 18px; animation: none;
}
.chapter-page .chapter-trail .stone::before {
  content: ""; position: absolute; inset-inline-start: calc(.75rem + 23px);
  inset-block-start: calc(.75rem + 48px); inset-block-end: -1.5rem;
  border-inline-start: 2px solid #c6d5b9; pointer-events: none;
}
.chapter-page .chapter-trail .stone:last-child::before { display: none; }
.chapter-page .chapter-trail .stone-dot {
  inline-size: 48px; block-size: 48px; background: #fffdf6; color: #183d32;
  border: 2px solid #9bb787; box-shadow: 0 3px 0 #8aa273; animation: none;
}
.chapter-page .chapter-trail .stone.is-current { background: #e9f2dc; border-color: #b5cda1; }
.chapter-page .chapter-trail .stone.is-current .stone-dot { background: #b7dc81; border-color: #5c8045; }
.chapter-page .chapter-trail .stone.is-complete .stone-dot { background: #183d32; color: #f7f8f2; }
.chapter-page .chapter-trail .stone.is-shut { opacity: 1; filter: none; }
.chapter-page .chapter-trail .stone.is-shut .stone-dot { background: #e1e5dc; border-color: #bac5b1; box-shadow: 0 3px 0 #bac5b1; }
.chapter-page .chapter-trail .stone-label { position: static; inset: auto; inline-size: auto; min-inline-size: 0; text-align: start; overflow-wrap: anywhere; }
.chapter-page .chapter-trail .stone-label b { display: block; -webkit-line-clamp: unset; overflow: visible; font-size: 1rem; line-height: 1.65; color: #183d32; }
.chapter-page .chapter-trail .stone-label small { margin-block-start: .2rem; font-size: .8rem; line-height: 1.6; color: #496150; }
.chapter-page .chapter-trail a.stone:hover { background: #edf3e5; border-color: #b5cda1; }
.chapter-page .chapter-trail .stone:hover .stone-dot { transform: none; }
.chapter-page .chapter-trail a.stone:hover .stone-dot { transform: translateY(-2px); }
.chapter-page .chapter-trail a.stone:active .stone-dot { transform: translateY(1px); box-shadow: 0 1px 0 #8aa273; }
.chapter-page .chapter-trail a.stone:focus-visible { border-color: #52783d; }
.chapter-page .trail-goal { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .65rem .8rem; border-block-start: 1px solid #d7dfcf; padding-block: 1.5rem; }
.chapter-page .trail-goal-pity { margin: 0; flex: 0 0 86px; inline-size: 86px; min-inline-size: 0; }
.chapter-page .trail-goal-pity > .pity { display: block; inline-size: 100%; block-size: auto; }
.chapter-page .trail-goal-pity .pity > img { display: block; inline-size: 100%; block-size: auto; }
.chapter-page .trail-goal > p { margin: 0; }
.remaining-chapters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; align-items: start; }
.remaining-page .left-chapter { margin: 0; }
.remaining-page .left-chapter > h2 { padding-block-end: 1rem; border-block-end: 1px solid #d7dfcf; }
.remaining-page .left-list { border-inline-start: 2px solid #cadbb9; padding-inline-start: 1rem; }
.remaining-page .left-item a { padding-block: .7rem; }
.remaining-page .left-done { grid-column: 1 / -1; text-align: center; max-inline-size: 680px; justify-self: center; }
/* Reading and coding: no forced metrics on textarea/syntax overlay pairs. */
.learning-workspace { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.learning-workspace .lesson-body { min-inline-size: 0; max-inline-size: none; }
.learning-workspace .lesson-body > * + * { margin-block-start: 1.4rem; }
.lesson-practice { min-inline-size: 0; position: static; }
.lesson-page .practice-panel { margin: 0; background: #edf3e7; }
.practice-panel .scratch-title { display: flex; gap: .7rem; align-items: center; padding-block-end: 1rem; border-block-end: 1px solid #cfddc2; margin-block: 0 1rem; }
.practice-panel .ed-intro-lead { font-weight: 700; }
.practice-panel .ed-intro-how { font-size: .86rem; color: #536b60; line-height: 1.9; }
.practice-panel .ed-starters { flex-wrap: wrap; }
.learner-page .markdown-body { line-height: 2; }
.learner-page .markdown-body pre { max-inline-size: 100%; overflow-x: auto; }
.learner-page .markdown-body pre code { white-space: pre; }
.learner-page .lesson-nav { gap: 1rem; }
.learner-page .lesson-nav-btn { border-radius: 20px; padding: 1rem; background: #f0f3e8; color: #183d32; border-color: #d1ddc3; }
.learner-page .read-check { background: #eaf2de; border-color: #a5bf8d; }
.learner-page .quiz-choice { border-radius: 14px; min-block-size: 48px; }
.learner-page .quiz-verdict[data-state="correct"],
.learner-page .quiz-verdict[data-state="wrong"],
.learner-page .quiz-verdict[data-state="error"] { padding: .65rem .85rem; border: 1px solid; border-inline-start-width: 3px; border-radius: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.learner-page .quiz-verdict[data-state="correct"] { color: var(--ink-grass); background: color-mix(in srgb, var(--grass) 10%, var(--paper)); }
.learner-page .quiz-verdict[data-state="wrong"] { color: var(--ink-coral); background: color-mix(in srgb, var(--coral) 10%, var(--paper)); }
.learner-page .quiz-verdict[data-state="error"] { color: var(--ink-sun); background: color-mix(in srgb, var(--sun) 10%, var(--paper)); }
.exercise-workspace { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; }
/* Let the prompt and staff edit wrapper shrink around locally scrolling code. */
.exercise-brief { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; min-inline-size: 0; }
.exercise-brief > * { min-inline-size: 0; }
.exercise-brief .table-wrap { max-inline-size: 100%; overflow-x: auto; }
.exercise-workspace .solution-panel { min-inline-size: 0; position: static; background: #edf3e7; }
.exercise-workspace > .lesson-vote, .exercise-workspace > .ex-next { grid-column: 1 / -1; }
.code-studio { min-inline-size: 0; }
.code-studio .editor-toolbar { border-start-start-radius: 14px; border-start-end-radius: 14px; background: #e1e9d8; border-color: #afc29f; flex-wrap: wrap; }
.code-studio .tb-btn { color: #183d32; min-inline-size: 32px; min-block-size: 36px; }
.code-studio .tb-btn:hover,
.code-studio .tb-btn:focus-visible { background: #edf6db; color: #183d32; }
.code-studio .tb-btn:active { background: #b7dc81; color: #183d32; }
.code-studio .editor-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-block-start: 1rem; }
.code-studio .run-input { background: #fffefa; border: 1px solid #d2ddc7; border-radius: 14px; padding: 0; overflow: hidden; margin-block-start: 1rem; }
.code-studio .run-input > summary { padding: .8rem 1rem; background-color: #edf3e7; cursor: pointer; color: #365845; }
.code-studio .run-input > textarea { border-block-start: 1px solid #d2ddc7; background-color: #fffefa; }
.code-studio [data-results]:not(:empty) { padding: 1rem; border-radius: 14px; background: #fffefa; border: 1px solid #d2ddc7; overflow-x: auto; }
.submission-history { inline-size: 100%; max-inline-size: 100%; }
.submission-history .page-lede { max-inline-size: 650px; line-height: 1.9; margin-block-end: 2rem; }
.submission-history .queue-card { max-inline-size: 100%; padding: .5rem; }
/* Keep the populated history wide enough to read, scrolling inside the card.
   A positioned wrapper also contains absolutely positioned accessible labels. */
.submission-history .table-wrap {
  position: relative;
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}
.submission-history .queue-table { min-inline-size: 46rem; }
.submission-history .queue-table th { position: relative; }
.submission-history .queue-table th:first-child,
.submission-history .queue-table td:first-child {
  inline-size: 35%;
  min-inline-size: 14rem;
}
.submission-history .queue-table td:first-child a { overflow-wrap: break-word; }
.submission-history .queue-table td:not(:first-child) { white-space: nowrap; }
/* Its static position can sit beyond the scrollport in RTL. Anchor the clipped
   one-pixel label to its own cell without removing it from screen readers. */
.submission-history .queue-table .visually-hidden {
  inset-inline-start: 0;
  inset-block-start: 0;
  margin: 0;
}
.submission-history .table th { background: #eaf0df; color: #365845; padding-block: 1rem; }
.submission-history .table td { padding-block: 1.2rem; }
/* Authentication is a welcome panel paired with an uninterrupted real form. */
.auth-layout { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; margin-block: 1rem 3rem; }
.auth-welcome { position: sticky; inset-block-start: 6.5rem; padding: 2rem; border-radius: 30px; background: #eaf0df; min-inline-size: 0; }
.auth-welcome > .page-eyebrow { display: inline-block; text-decoration: none; }
.auth-welcome > p { font-size: clamp(1.25rem, 2.4vw, 1.9rem); font-weight: 800; line-height: 1.7; text-align: center; color: #183d32; margin-block: .5rem 1.6rem; }
.auth-welcome-rule { display: block; width: 48px; height: 5px; background: #83a660; border-radius: 10px; margin-inline: auto; }
.auth-main { min-inline-size: 0; }
.auth-main .signup-wrap, .auth-main .form-card { max-inline-size: none; inline-size: 100%; margin: 0; }
.auth-main .signup-hero { text-align: start; padding: 0; margin-block-end: 1.7rem; }
.auth-main .signup-title { font-size: 1.9rem; line-height: 1.5; }
.auth-main .signup-sub { font-size: .94rem; line-height: 1.9; }
.auth-main .form-card > div:first-child { text-align: start !important; }
.auth-main .form-card .card-title { font-size: 1.85rem; }
.auth-main .oauth-card { margin-block-end: 1rem; }
.auth-main .signup-card { padding: 1.6rem; }
.auth-main .signup-field { margin-block-end: 1.3rem; }
.auth-main :where(.field, .signup-field) label { display: block; margin-block-end: .5rem; font-weight: 700; }
.auth-main :where(input:not([type="checkbox"]):not([type="hidden"]), select) { min-block-size: 48px; border-radius: 12px; background: #fffefa; }
.auth-main .signup-go { margin-block-start: 1rem; }
.auth-main .errorlist, .auth-main .signup-msg.is-bad { background: #fff1e9; border-inline-start: 3px solid #a54427; padding: .65rem .85rem; border-radius: 8px; color: #85351f; }
.auth-main .verify-resend { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: space-between; margin-block-start: 1.5rem; }
.auth-main .code-input { letter-spacing: .3em; text-align: center; }
/* Profile: a personal header, achievement collection, then account settings. */
.profile-page .prof-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.4rem; padding: 2rem; background: #eaf0df; border: 1px solid #d7dfcf; border-radius: 28px; margin-block-end: 1.5rem; }
.profile-page .prof-avatar { border-radius: 22px; background: #f6d982; color: #183d32; border: 1px solid #d1b65f; box-shadow: 0 4px 0 #d1b65f; }
.profile-page .prof-stats { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 2rem; border-block-start: 1px solid #cad6bd; padding-block-start: 1.3rem; margin: 0; }
.profile-page .prof-stat b { color: #183d32; }
.profile-page .prof-stat small { color: #536b60; }
.profile-page .prof-stack { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.profile-page .prof-progress { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.profile-page .prof-progress-bar { flex: 1 1 220px; margin: 0; background: #e0e8d7; }
.profile-page .prof-progress-bar i { background: #719a4b; }
.profile-page .profile-settings { grid-column: 2; grid-row: 2; }
.profile-page .profile-achievements { grid-column: 1; grid-row: 2; }
.profile-page .badge-shelf { gap: 1.2rem; padding-block: 1.3rem; }
.profile-page .email-card { background: #f1f4e9; border: none; box-shadow: none; padding: 1rem; margin-block: 1rem 1.5rem; }
.profile-page .email-now { overflow-wrap: anywhere; }
.profile-page .tidy-form .field { margin-block-end: 1rem; }
/* News is a dated journal, not a wall of matching boxes. */
.news-board { display: grid; grid-template-columns: minmax(180px, .4fr) minmax(0, 1fr); gap: 3rem; max-inline-size: none; }
.news-board > .page-head { position: sticky; inset-block-start: 7rem; align-self: start; }
.news-board [data-news-list] { gap: 1.5rem; }
.news-entry { border: 1px solid #d6dfce; border-inline-start: 5px solid #7ca553; border-radius: 22px; background: #fffefa; padding: 1.5rem; box-shadow: 0 4px 0 #e8ecdf; }
.news-entry .ann-head { margin-block-end: 1.3rem; }
.news-entry .ann-icon { background: #f8df8b; border-radius: 12px; }
.news-entry .ann-body { line-height: 2; font-size: 1rem; }
.news-entry.is-read { border-inline-start-color: #c5d0bb; opacity: 1; background: #f3f5ed; }
.news-entry .ann-foot { border-block-start: 1px solid #e1e7d8; padding-block-start: 1rem; }
.news-entry .ann-tag--new { background: #d8edbf; color: #24432f; }
.learner-notice { border: 1px solid #a9bc97; border-radius: 26px; background: #fffefa; color: #183d32; }
.learner-notice .popup-title { background: #eaf0df; padding-block: 1.25rem; }
.learner-notice .popup-foot { background: #f1f4e9; gap: 1rem; flex-wrap: wrap; }
/* People and memorial retain names, directions and the original green heart. */
.people-page { max-inline-size: none; }
.people-page > .page-head { max-inline-size: 620px; border-inline-start: 5px solid #98b979; padding-inline-start: 1.5rem; margin-block: 1rem 3rem; }
.people-page .team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.people-page .team-card { padding: 2rem 1rem 1.5rem; border: 1px solid #d7dfcf; border-radius: 26px; background: #fffefa; box-shadow: 0 5px 0 #e4eadb; }
.people-page .team-card:nth-child(3n + 2) { background: #f1edf7; }
.people-page .team-card:nth-child(3n + 3) { background: #edf4ed; }
.people-page .team-photo { border-color: #bdcfae; box-shadow: none; }
.people-page .team-name { margin-block-start: 1.2rem; font-size: 1.12rem; }
.people-page .team-position { color: #536b60; }
.people-page .team-memorial { font-family: Estedad, sans-serif; }
.people-page .team-memorial { background: #e4edd9; color: #183d32; border-color: #abc392; }
.people-page .team-in { border-radius: 10px; background: #e4edd9; color: #183d32; }
/* Support: filters and messages have their own hierarchy and comfortable measure. */
.support-desk, .support-thread { max-inline-size: 980px; margin-inline: auto; }
.support-desk > .page-head, .support-thread > .page-head { background: #e8efe0; border-radius: 26px; padding: 1.6rem 2rem; }
.support-page .support-filters { box-shadow: none; background: transparent; padding: 0; border: none; }
.support-filters .staff-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.support-filters .staff-actions > a:first-child { margin-inline-end: auto; }
.support-contact { background: #e7f0ed; color: #183d32; border: 1px solid #c8dbcf; border-radius: 20px; padding: 1.2rem; }
.support-contact .tg-note-icon { background: #c3e0d5; color: #244f44; border-radius: 12px; }
.support-compose { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 1.5rem 3rem; max-inline-size: none; margin-block: 1rem 3rem; align-items: start; }
.support-compose .support-intro { grid-column: 1; grid-row: 1; text-align: start; background: #eaf0df; border-radius: 26px; padding: 2rem; margin: 0; }
.support-compose > .support-contact { grid-column: 1; grid-row: 2; }
.support-compose > form { grid-column: 2; grid-row: 1 / span 2; }
.support-compose .signup-title { font-size: 2rem; line-height: 1.5; }
.support-compose .signup-sub { line-height: 1.9; }
.support-thread .conversation-flow { max-inline-size: 780px; margin-inline: auto; gap: 1.2rem; }
.support-thread .conversation-message { border-start-start-radius: 6px; margin-inline-end: 2.5rem; }
.support-thread .conversation-message.is-staff { margin-inline-start: 2.5rem; margin-inline-end: 0; background: #eaf2df; border-start-start-radius: 24px; border-start-end-radius: 6px; border-color: #bfd3ad; }
.support-thread .conversation-message > p:first-child { border-block-end: 1px solid #d7dfcf; padding-block-end: .7rem; margin-block-end: .8rem; }
.support-page textarea { min-block-size: 160px; }
.support-page .table th { background: #eaf0df; color: #365845; }
.support-page .table td { padding-block: 1.2rem; }
/* Opening gate is quiet: no course information or invented countdown. */
.opening-page .opening-card { max-inline-size: 820px; padding: clamp(1.5rem, 5vw, 4rem); margin: 1rem auto 3rem; border: 1px solid #d7dfcf; border-radius: 32px; background: #eaf0df; }
.opening-page .soon-badge { inline-size: 180px; block-size: 180px; margin: 0 auto 1.5rem; }
.opening-page .soon-badge > .pity { display: block; inline-size: 100%; block-size: auto; }
.opening-page .soon-title { font-size: clamp(2rem, 5vw, 3.5rem); color: #183d32; }
.opening-page .soon-tg { background: #cce4dd; color: #183d32; border-color: #8dac9f; }
.opening-page .soon-note { color: #536b60; line-height: 1.9; }
/* The issued document stays English/LTR; controls stay in the page locale. */
.certificate-status { max-inline-size: 760px; margin: 2rem auto; }
.certificate-page .cert-locked { padding: 2.5rem; border-radius: 28px; background: #eaf0df; }
.certificate-page .cert-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; text-align: start; }
.certificate-page .cert-fact { display: block; border-block-end: 1px solid #d7dfcf; padding-block-end: 1rem; }
.certificate-page .cert-fact:last-child { grid-column: 1 / -1; }
.certificate-page .cert-fact dd { margin: .4rem 0 0; }
.cert-sheet[data-completion-document] { max-inline-size: 900px; background: #fffefa; border: 1px solid #adbfa0; box-shadow: 0 8px 0 #dce4d2; border-radius: 12px; padding: 1rem; margin-inline: auto; }
.cert-sheet[data-completion-document] .cert-inner { border: 2px solid #64884d; border-radius: 4px; padding: 2rem; background: none; }
.certificate-seal { display: flex; justify-content: center; margin-block-end: .7rem; }
.cert-sheet[data-completion-document] .cert-title { color: #183d32; font-size: clamp(1.5rem, 3vw, 2.4rem); }
.cert-sheet[data-completion-document] .cert-name { color: #183d32; border-block-end-color: #a9bf95; }
.cert-sheet[data-completion-document] .cert-course { color: #315c44; }
.cert-sheet[data-completion-document] .cert-score { background: #edf3e5; color: #183d32; border-color: #bdcfab; }
.cert-sheet[data-completion-document] .cert-grid { border-block-color: #bdcfab; }
.certificate-page .cert-actions { margin-block: 2rem; }
/* Short entrance and tactile feedback; nothing loops or delays an action. */
@keyframes page-scene-arrive { from { opacity: .4; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes page-mascot-arrive {
  from { opacity: 0; transform: translateY(12px) scale(.96) rotate(-2deg); }
  65% { opacity: 1; transform: translateY(-2px) scale(1) rotate(1deg); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .chapter-page .chapter-trail .stone { animation: page-scene-arrive .2s ease-out both; }
  .pity-scene-character { animation: page-mascot-arrive .7s ease-out both; }
  .journey-hero .pity-scene, .auth-welcome .pity-scene { animation: page-scene-arrive .45s ease-out both; }
  .learner-page .btn { transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
}
@media (max-width: 1000px) {
  .news-board { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .news-board > .page-head { position: static; }
}
@media (max-width: 760px) {
  .journey-hero { grid-template-columns: minmax(0, 1fr); padding: 1.5rem; gap: .5rem; border-radius: 26px; }
  .journey-hero h1 { font-size: clamp(1.9rem, 8vw, 2.7rem); }
  .journey-hero .pity-scene { max-inline-size: 340px; justify-self: center; }
  .journey-hero--learner { grid-template-columns: minmax(0, 1fr); }
  .journey-hero--learner .pity-scene { max-inline-size: 200px; }
  .journey-hero--learner .pity-scene-chip { display: none; }
  .journey-method { grid-template-columns: minmax(0, 1fr); gap: 0; margin-block-end: 2rem; }
  .journey-method li { padding: 1rem .25rem; }
  .pity-scene-chip { font-size: .7rem; }
  .chapter-overview { grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 1.5rem; }
  .chapter-next { justify-content: start; }
  .chapter-next > .pity { width: 72px; height: auto; }
  .remaining-chapters { grid-template-columns: minmax(0, 1fr); }
  .auth-layout { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .auth-welcome { position: static; display: grid; grid-template-columns: minmax(0, 1fr) 130px; padding: 1.25rem; border-radius: 22px; align-items: center; }
  .auth-welcome .pity-scene { grid-column: 2; grid-row: 1 / span 2; }
  .auth-welcome .pity-scene-chip { display: none; }
  .auth-welcome > p { font-size: 1.05rem; text-align: start; margin: 0; grid-column: 1; }
  .auth-welcome .page-eyebrow { margin-block-end: .4rem; }
  .auth-welcome-rule { display: none; }
  .profile-page .prof-head { grid-template-columns: auto minmax(0, 1fr); padding: 1.3rem; gap: 1rem; }
  .profile-page .profile-return { grid-column: 1 / -1; justify-self: start; }
  .profile-page .prof-stats { gap: 1rem; justify-content: space-between; }
  .profile-page .prof-stack { grid-template-columns: minmax(0, 1fr); }
  .profile-page .profile-settings, .profile-page .profile-achievements { grid-column: 1; grid-row: auto; }
  .people-page .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .people-page .team-card { padding-inline: .65rem; }
  .people-page .team-photo { width: 100px; height: 100px; }
  .support-compose { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .support-compose .support-intro, .support-compose > .support-contact, .support-compose > form { grid-column: 1; grid-row: auto; }
  .support-compose .support-intro > .pity { width: 80px; height: auto; }
  .support-filters .staff-actions > a:first-child { flex-basis: 100%; }
  .support-thread .conversation-message { margin-inline-end: 1rem; }
  .support-thread .conversation-message.is-staff { margin-inline-start: 1rem; }
  .certificate-page .cert-locked { padding: 1.3rem; }
  .certificate-page .cert-facts { grid-template-columns: minmax(0, 1fr); }
  .cert-sheet[data-completion-document] { padding: .5rem; }
  .cert-sheet[data-completion-document] .cert-inner { padding: 1rem; }
  .cert-sheet[data-completion-document] .cert-grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .learner-page .table-wrap { max-inline-size: 100%; overflow-x: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .learner-page *, .learner-page *::before, .learner-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .certificate-page { padding: 0 !important; margin: 0 !important; max-inline-size: none !important; inline-size: 100% !important; }
  .certificate-page .cert-actions, .certificate-page .cert-example-note, .certificate-page .back-link { display: none !important; }
  .cert-sheet[data-completion-document] { width: 100%; max-inline-size: none; margin: 0; padding: 4mm; border-radius: 0; border: 1pt solid #183d32; box-shadow: none; break-inside: avoid; color: #183d32; }
  .cert-sheet[data-completion-document] .cert-inner { padding: 6mm; border: 1pt solid #183d32; }
  .cert-sheet[data-completion-document] .cert-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cert-sheet[data-completion-document] .cert-qr svg { max-block-size: 24mm; }
  .certificate-seal .pity { inline-size: 18mm; block-size: 18mm; }
}

/* Diamond market: one exchange, a distinct wallet, and immutable receipts. */
.market-heading { display: flex; gap: 1rem; align-items: center; }
.market-heading .page-eyebrow { margin: 0; color: #386b5b; }
.market-heading h1 { margin-block: .2rem; }
.market-mark { display: grid; place-items: center; flex: none; inline-size: 64px; block-size: 64px; border-radius: 20px; background: #e1f4ed; color: #165b50; border: 1px solid #a6d9cc; }
.market-mark .ui-icon { inline-size: 32px; block-size: 32px; }
.market-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.market-page h2 { font-size: 1.2rem; margin-block: 0 1rem; }
.market-rate { display: flex; justify-content: center; align-items: center; gap: 1.2rem; margin-block: 1.5rem 2rem; font-size: 2rem; font-weight: 850; }
.market-rate > span:not(.market-equals) { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1rem; border-radius: 18px; }
.market-rate .ui-icon { inline-size: 32px; block-size: 32px; }
.market-diamond { color: #165b50; }
.market-coin { color: var(--coin-ink); }
.market-rate .market-diamond, .market-balances .market-diamond { background: #e1f4ed; }
.market-rate .market-coin, .market-balances .market-coin { background: var(--coin-bg); }
.market-equals { color: #68786d; font-size: 1.4rem; }
.market-form { display: grid; gap: .6rem; }
.market-preview { display: grid; gap: .75rem; background: #f3f6ee; border-radius: 16px; padding: 1rem; margin-block-start: .6rem; }
.market-preview > div, .market-totals > div { display: flex; justify-content: space-between; gap: 1rem; }
.market-preview b, .market-balances dd, .market-totals dd { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.market-form .btn { min-block-size: 52px; inline-size: 100%; white-space: normal; border-radius: 14px; }
.market-form .btn:disabled { opacity: 1; background: #e7eadf; border-color: #b5c0ad; color: #52634e; box-shadow: none; cursor: not-allowed; }
.market-form [data-market-note]:empty { display: none; }
.market-error { border-inline-start: 4px solid #a34337; background: #fff0e9; color: #7d3027; padding: .6rem 1rem; border-radius: 12px; margin-block-end: 1rem; }
.market-unavailable { background: #f4efdb; border-radius: 12px; padding: .8rem; color: #67521b; }
.market-balances { display: grid; gap: .8rem; margin: 0; }
.market-balances > div { padding: 1rem; border-radius: 16px; }
.market-balances dt { display: flex; align-items: center; gap: .4rem; font-size: .9rem; }
.market-balances dd { margin: .3rem 0 0; font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 850; line-height: 1.5; }
.market-totals { display: grid; gap: .6rem; margin-block: 1.4rem; font-size: .9rem; }
.market-totals dd { margin: 0; font-weight: 750; }
.market-history { margin-block-start: 1.4rem; }
.market-receipts { list-style: none; margin: 0; padding: 0; }
.market-receipts li { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .7rem 1rem; padding-block: 1rem; border-block-end: 1px solid var(--page-line); }
.market-receipts li:last-child { border: 0; }
.market-receipt-amounts { display: flex; gap: .6rem 1.4rem; flex-wrap: wrap; font-weight: 750; }
.market-receipt-amounts span { display: inline-flex; align-items: center; gap: .35rem; }
.market-receipts time { display: inline-flex; align-items: center; gap: .4rem; color: var(--page-muted); font-size: .82rem; font-variant-numeric: tabular-nums; }
.market-receipts time > .ui-icon { flex-shrink: 0; }
.market-pagination { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1rem; margin-block-start: 1rem; }
.market-empty { display: flex; align-items: center; gap: .8rem; color: var(--page-muted); padding-block: 1rem; }
.market-empty > p { margin: 0; }
.cert-progress-num.star-fraction { font-size: clamp(.9rem, 2vw, 1.25rem); max-inline-size: 90%; overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .market-layout { grid-template-columns: minmax(0, 1fr); }
  .market-balances { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .market-balances > div { padding: .8rem; }
  .market-balances dd { font-size: 1.6rem; }
  .market-mark { inline-size: 48px; block-size: 48px; border-radius: 16px; }
  .market-rate { gap: .6rem; }
  .market-rate > span:not(.market-equals) { padding: .5rem .8rem; }
}
.market-slider { padding: 1rem 1rem .5rem; border: 1px solid #b8dbcc; border-radius: 18px; background: #eff8f2; }
.market-slider label { display: block; font-weight: 750; }
.market-slider input[type="range"] { --market-fill: 0%; appearance: none; -webkit-appearance: none; display: block; box-sizing: border-box; inline-size: 100%; min-inline-size: 0; block-size: 44px; margin: .45rem 0 0; padding: 0; border: 0; background: transparent; cursor: pointer; direction: ltr; }
.market-slider input[type="range"]::-webkit-slider-runnable-track { block-size: 10px; border-radius: 10px; background: linear-gradient(to right, #267664 var(--market-fill), #d3e6da var(--market-fill)); }
.market-slider input[type="range"]::-moz-range-track { block-size: 10px; border-radius: 10px; background: #d3e6da; }
.market-slider input[type="range"]::-moz-range-progress { block-size: 10px; border-radius: 10px; background: #267664; }
.market-slider input[type="range"]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; inline-size: 28px; block-size: 28px; margin-block-start: -9px; border: 4px solid #fffefa; border-radius: 50%; background: #267664; box-shadow: 0 0 0 1px #267664, 0 3px 6px #183d3229; }
.market-slider input[type="range"]::-moz-range-thumb { inline-size: 20px; block-size: 20px; border: 4px solid #fffefa; border-radius: 50%; background: #267664; box-shadow: 0 0 0 1px #267664; }
.market-slider input:is(:focus-visible, :active)::-webkit-slider-thumb { background: #183d32; border-color: #a7d957; }
.market-slider input:is(:focus-visible, :active)::-moz-range-thumb { background: #183d32; border-color: #a7d957; }
.market-slider:has(input[aria-invalid="true"]) { border-color: #a34337; }
.market-slider input:disabled { opacity: .6; cursor: not-allowed; }
.market-range-limits { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: .85rem; font-weight: 750; color: #165b50; direction: ltr; }
.market-range-limits span { display: inline-flex; align-items: center; gap: .25rem; overflow-wrap: anywhere; }
@media (forced-colors: active) {
  .market-slider input[type="range"]::-webkit-slider-runnable-track { background: CanvasText; }
  .market-slider input[type="range"]::-moz-range-track { background: CanvasText; }
  .market-slider input[type="range"]::-moz-range-progress { background: Highlight; }
  .market-slider input[type="range"]::-webkit-slider-thumb { background: ButtonText; border-color: Canvas; }
  .market-slider input[type="range"]::-moz-range-thumb { background: ButtonText; border-color: Canvas; }
}