/* Imajiedu learning paths in Finch's visual language.
 *
 * Shared by the lesson engines: the path player in /langkahilmu (the nine
 * ibadah courses and the seven Akad chapters, html[data-learning-ui="path"]),
 * the chapter pages copied from the adab-masjid template (faraidh,
 * madrasahzakat, akadsyariah, adab masjid and the sport paths,
 * html[data-learning-path]), and the two Imajigrow module pages (Belajar
 * Pajak, Belajar Keuangan, html[data-learning-ui="reading"]). Studied from a recording of the Finch app:
 * a pale ground and plain white cards, one saturated green for the way
 * forward with a darker lip under it, pill answers with a tick on the
 * right, an orange energy bar, a tinted verdict sheet, and a full-screen
 * green celebration when something is finished (confetti and the energy
 * bar come from /shared/hudhud/finch.mjs). Arabic keeps its own fonts. */

:root {
  --f-bg: #f5f6f1; --f-card: #fff; --f-ink: #3b3833; --f-muted: #85817a;
  --f-line: #e6e8e1; --f-line-d: #d7dbd1; --f-green: #5bbf5d; --f-green-d: #47a14a; --f-green-l: #eaf7e9;
  --f-orange: #f7a928; --f-orange-d: #d98a12; --f-coral: #e8674f; --f-coral-l: #fdefeb;
  --f-shadow: 0 1px 0 var(--f-line), 0 4px 14px rgba(0, 0, 0, .05);
  --f-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7l10 10M17 7L7 17' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  --f-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --accent: #47a14a !important; --pale: #eaf7e9 !important; --ink: #3b3833; --muted: #85817a; --line: #e6e8e1; --paper: #f5f6f1; --shadow: #d7dbd1;
  font-family: Outfit, system-ui, sans-serif; color: var(--f-ink); background: var(--f-bg);
}
body { font-family: Outfit, system-ui, sans-serif; background: var(--f-bg); color: var(--f-ink); }
button, input, select, h1, h2, h3, .brand { font-family: Outfit, system-ui, sans-serif !important; }
button, a, input, select { touch-action: manipulation; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--f-orange); outline-offset: 3px; }
#back-world { display: none !important; }
.brand-mark { display: inline-flex; background: none !important; box-shadow: none !important; }
.brand-mark img { width: 38px; height: 38px; }
.brand-dot { color: var(--f-green); }
.brand { color: var(--f-ink); }

/* ═══ the path player ═══════════════════════════════════════════════ */

html[data-learning-ui] .sidebar { background: #fff; border-color: var(--f-line); }
html[data-learning-ui] .sidebar .nav-item.active, html[data-learning-ui] .nav-item.active { background: #fff1d6; color: var(--f-ink); }
html[data-learning-ui] .course-link.current { background: var(--f-green-l); color: var(--f-green-d); }
html[data-learning-ui] .map-topline > span { color: var(--f-muted); }
html[data-learning-ui] .stats b, html[data-learning-ui] .stats button { color: var(--f-ink); }

/* The course hero: Finch's green promo card. */
html[data-learning-ui] .hero { background: #dff3d9; color: var(--f-ink); border: 0; border-radius: 22px; box-shadow: none; }
html[data-learning-ui] .hero:after { background: rgba(255, 255, 255, .45); }
html[data-learning-ui] .hero .eyebrow { color: var(--f-green-d); }
html[data-learning-ui] .hero h1 { font-weight: 800; letter-spacing: -.01em; }
html[data-learning-ui] .hero-chips span { background: #fff; border: 0; color: var(--f-ink); font-weight: 700; box-shadow: 0 1px 0 rgba(0, 0, 0, .05); }
html[data-learning-ui] .hero-art { filter: none; }

/* Units and the lesson nodes. */
html[data-learning-ui] .unit-heading { background: #fff; color: var(--f-ink); border: 0; border-radius: 18px; box-shadow: var(--f-shadow); }
html[data-learning-ui] .unit-heading > span:first-child { background: var(--f-green); color: #fff; border: 0; box-shadow: 0 3px 0 var(--f-green-d); }
html[data-learning-ui] .node-track:before { border-color: var(--f-line-d); }
html[data-learning-ui] .node-button { background: var(--f-green); color: #fff; border: 0; box-shadow: 0 6px 0 var(--f-green-d); }
html[data-learning-ui] .node-button:not(:disabled):active { transform: translateY(4px); box-shadow: 0 2px 0 var(--f-green-d); }
html[data-learning-ui] .finished .node-button { background: var(--f-orange); color: #fff; border: 0; box-shadow: 0 6px 0 var(--f-orange-d); }
html[data-learning-ui] .locked .node-button { background: #e3e5df; color: #a9aca4; border: 0; box-shadow: 0 6px 0 #d3d6ce; }
html[data-learning-ui] .start-label { color: var(--f-green-d); }
html[data-learning-ui] .node-copy b { color: var(--f-ink); }

/* The rail: Finch's energy card and goal rows. */
html[data-learning-ui] .rail > article, html[data-learning-ui] .goal-card, html[data-learning-ui] .buddy-card, html[data-learning-ui] .mastery-card {
  background: #fff; border: 0; border-radius: 18px; box-shadow: var(--f-shadow);
}
html[data-learning-ui] .resume { background: #fff; border: 0; border-radius: 18px; box-shadow: var(--f-shadow); }
html[data-learning-ui] .mini-lessons .done { background: var(--f-green); color: #fff; }

/* Every progress bar: Finch's rounded orange bar with an inner lip. */
html[data-learning-ui] progress { height: 14px; border: 0; border-radius: 99px; background: #eceee7; overflow: hidden; }
html[data-learning-ui] progress::-webkit-progress-bar { background: #eceee7; border-radius: 99px; }
html[data-learning-ui] progress::-webkit-progress-value { background: linear-gradient(#ffc14d, var(--f-orange)); border-radius: 99px; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .08); }
html[data-learning-ui] progress::-moz-progress-bar { background: linear-gradient(#ffc14d, var(--f-orange)); border-radius: 99px; }
/* …except inside a lesson, where it is the green step bar of Finch's questions. */
html[data-learning-ui] .session-header progress::-webkit-progress-value { background: var(--f-green); box-shadow: none; }
html[data-learning-ui] .session-header progress::-moz-progress-bar { background: var(--f-green); }

/* Buttons: flat green with a darker lip; grey when not yet possible. */
html[data-learning-ui] .primary {
  background: var(--f-green); color: #fff; border: 0; border-radius: 14px; box-shadow: 0 4px 0 var(--f-green-d);
  text-transform: none; letter-spacing: 0; font-weight: 800; font-size: 16px; min-height: 52px;
}
html[data-learning-ui] .primary:hover:not(:disabled) { background: #54b556; }
html[data-learning-ui] .primary:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--f-green-d); }
html[data-learning-ui] .primary:disabled { background: #e3e5df; color: #a9aca4; box-shadow: 0 4px 0 #d3d6ce; opacity: 1; }
html[data-learning-ui] .secondary { border-radius: 14px; }
html[data-learning-ui] .text-btn { color: var(--f-green-d); }

/* Inside a lesson. */
html[data-learning-ui] .session-shell { background: var(--f-bg); }
html[data-learning-ui] .session-header { background: var(--f-bg); border: 0; }
html[data-learning-ui] .close-btn, html[data-learning-ui] .book-btn { color: #8d8a83; background: none; border: 0; }
html[data-learning-ui] .learn-visual { background: #dff3d9; border-radius: 22px; border: 0; }
html[data-learning-ui] .scenario, html[data-learning-ui] .principles > div, html[data-learning-ui] .note {
  background: #fff; border: 0; border-radius: 16px; box-shadow: var(--f-shadow);
}
html[data-learning-ui] .quiz-page > .eyebrow { text-align: center; color: var(--f-muted); letter-spacing: .12em; }

/* The question: Hud hud centred above it, wondering, as Finch's pet does. */
html[data-learning-ui] .question-top { flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.question-visuals { display:flex; align-items:center; justify-content:center; gap:clamp(14px,3vw,32px); width:100%; }
.question-illustration { position:relative; display:block; flex:none; width:clamp(150px,24vw,220px); padding:0; border:0; border-radius:40%; background:transparent; color:#637c61; cursor:zoom-in; }
.question-illustration svg { display:block; width:100%; height:auto; }
.question-illustration>span { position:absolute; right:6%; bottom:6%; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:#fffdf4; box-shadow:0 2px 5px #304e2520; font:18px/1 sans-serif; }
.question-illustration:hover { filter:brightness(1.025); }
.question-illustration:focus-visible { outline:3px solid #659261; outline-offset:4px; }
[data-learning-path] .f-quizbird:has(.question-illustration) { display:flex; align-items:center; justify-content:center; gap:22px; }
.question-art-dialog { box-sizing:border-box; width:min(90vw,540px); max-height:90dvh; padding:20px; border:0; border-radius:24px; background:#fbfcf6; color:#40503e; }
.question-art-dialog::backdrop { background:#25352780; }
.question-art-dialog figure { margin:16px 0; }
.question-art-dialog svg { width:100%; max-height:60dvh; }
.question-art-dialog figcaption { text-align:center; font-family:inherit; font-weight:600; font-size:17px; line-height:1.5; }
.question-art-dialog .art-close { display:block; margin-left:auto; border:1px solid #ced9c8; border-radius:14px; background:white; padding:10px 16px; color:inherit; cursor:pointer; }
html[data-learning-ui] .mini-buddy { position: relative; width: 96px; height: auto; flex: none; }
html[data-learning-ui] .mini-buddy .lesson-hudhud { width: 100%; height: auto; }
html[data-learning-ui] .question-top h1 { font-weight: 800; font-size: clamp(20px, 5.2vw, 26px); line-height: 1.25; }
html[data-learning-ui] .question-top p { color: var(--f-muted); }
/* The "?" — never on Doa Harian, where he keeps the site's quiet. */
body:not([data-course="belajardoa"]) .quiz-page:not(:has(.feedback-panel)) .mini-buddy::after {
  content: '?'; position: absolute; right: -12px; top: -4px; font: 800 30px/1 Outfit, system-ui, sans-serif; color: var(--f-ink);
  animation: f-wonder 1.6s ease-in-out infinite;
}
@keyframes f-wonder { 50% { transform: translateY(-4px) rotate(8deg); } }

/* Finch's pill answers: white, a soft ring, a tick on the right when chosen. */
html[data-learning-ui] .choice {
  position: relative; min-height: 58px; padding: 12px 52px 12px 14px; border: 0; border-radius: 16px; background: #fff;
  box-shadow: inset 0 0 0 2px var(--f-line); color: var(--f-ink); font-weight: 600; transform: none;
}
/* Hover only where there is a pointer that hovers. On a phone :hover sticks to whatever
 * was tapped last, and this rule outranked .selected, so the tapped answer lost its green
 * ring (a grey ring around a green tick) until the next tap. */
@media (hover: hover) {
  html[data-learning-ui] .choice:hover:not(:disabled):not(.selected) { box-shadow: inset 0 0 0 2px var(--f-line-d); background: #fff; }
}
html[data-learning-ui] .choice::after {
  content: ''; position: absolute; right: 14px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%;
  box-shadow: inset 0 0 0 2px #d9dcd4; background: #fff center / 18px no-repeat;
}
html[data-learning-ui] .choice-key { background: #f0f2ec; border: 0; color: var(--f-ink); border-radius: 10px; font-weight: 800; }
html[data-learning-ui] .choice.selected { background: #f6fbf5; box-shadow: inset 0 0 0 2.5px var(--f-green); }
html[data-learning-ui] .choice.selected .choice-key { background: var(--f-green); color: #fff; }
html[data-learning-ui] .choice.selected::after { background-color: var(--f-green); background-image: var(--f-tick); box-shadow: none; }
html[data-learning-ui] .choice.correct-option { background: var(--f-green-l); box-shadow: inset 0 0 0 2.5px var(--f-green); color: var(--f-ink); opacity: 1; }
html[data-learning-ui] .choice.correct-option .choice-key { background: var(--f-green); color: #fff; }
html[data-learning-ui] .choice.correct-option::after { background-color: var(--f-green); background-image: var(--f-tick); box-shadow: none; }
html[data-learning-ui] .choice.wrong-option { background: var(--f-coral-l); box-shadow: inset 0 0 0 2.5px var(--f-coral); }
html[data-learning-ui] .choice.wrong-option .choice-key { background: var(--f-coral); color: #fff; }
html[data-learning-ui] .choice.wrong-option::after { background-color: var(--f-coral); background-image: var(--f-cross); box-shadow: none; }
html[data-learning-ui] .choice:disabled:not(.correct-option):not(.wrong-option) { opacity: .55; }

/* Order questions: chips in a bank, a numbered answer above them. */
html[data-learning-ui] .order-answer { background: #fafbf7; border: 2px dashed var(--f-line-d); border-radius: 16px; }
html[data-learning-ui] .order-answer button, html[data-learning-ui] .order-bank button {
  background: #fff; border: 0; border-radius: 14px; box-shadow: inset 0 0 0 2px var(--f-line), 0 3px 0 var(--f-line-d); color: var(--f-ink); font-weight: 600;
}
html[data-learning-ui] .order-answer button > span { background: var(--f-green); color: #fff; border: 0; }
html[data-learning-ui] .order-bank button:disabled { opacity: .35; box-shadow: inset 0 0 0 2px var(--f-line); }

/* The footer and the verdict: Finch's tinted sheet on the bottom edge. */
html[data-learning-ui] .answer-footer { background: rgba(245, 246, 241, .96); border-top: 1px solid var(--f-line); }
html[data-learning-ui] .answer-footer.is-correct, html[data-learning-ui] .is-correct { background: #e3f5e0; border-color: #cfe9ca; }
html[data-learning-ui] .answer-footer.is-wrong, html[data-learning-ui] .is-wrong { background: #fdeee6; border-color: #f5d3c3; }
html[data-learning-ui] .answer-footer.correct { background: #e3f5e0; }
html[data-learning-ui] .is-wrong .primary { background: var(--f-coral); box-shadow: 0 4px 0 #c24f3a; }
html[data-learning-ui] .feedback-panel { border: 0; border-radius: 20px; box-shadow: none; }
html[data-learning-ui] .feedback-panel.feedback-correct { background: #e3f5e0; }
html[data-learning-ui] .feedback-panel.feedback-wrong { background: #fdeee6; }
html[data-learning-ui] .feedback h2 { font-weight: 800; color: var(--f-green-d); }
html[data-learning-ui] .is-wrong .feedback h2, html[data-learning-ui] .feedback-wrong .feedback h2 { color: #c2552f; }
html[data-learning-ui] .feedback-icon { background: var(--f-green); color: #fff; border: 0; }
html[data-learning-ui] .is-wrong .feedback-icon, html[data-learning-ui] .feedback-wrong .feedback-icon { background: var(--f-coral); color: #fff; }

/* Lesson complete: Finch's full-screen green "Woohoo!". */
html[data-learning-ui] .session-shell:has(> main.result) { background: #3fae5a; }
html[data-learning-ui] .session-shell:has(> main.result) .session-header { background: transparent; }
html[data-learning-ui] main.result { position: relative; color: #fff; text-align: center; background: transparent; }
html[data-learning-ui] .result-art { animation: f-hop 1.4s ease-in-out infinite; }
@keyframes f-hop { 50% { transform: translateY(-8px); } }
html[data-learning-ui] main.result > .eyebrow { color: rgba(255, 255, 255, .85); }
html[data-learning-ui] main.result h1 { color: #fff; font-weight: 800; }
html[data-learning-ui] main.result > p:not(.eyebrow) { color: rgba(255, 255, 255, .92); }
html[data-learning-ui] .result-stats > div { background: rgba(255, 255, 255, .18); border: 0; border-radius: 16px; color: #fff; }
html[data-learning-ui] .result-stats b, html[data-learning-ui] .result-stats span { color: #fff; }
html[data-learning-ui] main.result p.result-note { background: rgba(255, 255, 255, .14); color: #fff; border: 0; border-radius: 16px; padding: 12px 16px; }
html[data-learning-ui] main.result > .primary { background: #fff; color: var(--f-ink); box-shadow: 0 4px 0 rgba(0, 0, 0, .14); }
html[data-learning-ui] main.result > .text-btn { color: #fff; }

html[data-learning-ui] dialog { border: 0; border-radius: 24px; background: var(--f-bg); }
html[data-learning-ui] .goal-options button { border: 0; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 2px var(--f-line); }
html[data-learning-ui] .goal-options .chosen { background: #f6fbf5; box-shadow: inset 0 0 0 2.5px var(--f-green); }
html[data-learning-ui] .library-list button { border: 0; border-radius: 16px; background: #fff; box-shadow: var(--f-shadow); }

/* ═══ the chapter pages ═════════════════════════════════════════════ */

html[data-learning-path] {
  --bg: #f5f6f1; --panel: #dff3d9; --gold: #5bbf5d; --gold-l: #5bbf5d; --gold-p: #eaf7e9; --cream: #fff; --creamtx: #3b3833;
  --parch: #f3efe4; --input: #fff; --ink: #3b3833; --body: #4a4640; --sage: #85817a; --sage-d: #85817a; --olive: #47a14a;
  --ok: #47a14a; --ok-bg: #e3f5e0; --ok-br: #5bbf5d; --bad: #e8674f; --bad-bg: #fdeee6; --bad-br: #e8674f;
}
[data-learning-path] body { background: var(--f-bg); color: var(--f-ink); font-family: Outfit, system-ui, sans-serif; }
[data-learning-path] header { background: rgba(245, 246, 241, .96); border-color: var(--f-line); padding: 14px max(16px, calc((100% - 720px) / 2)); gap: 14px; }
[data-learning-path] header h1 { font-family: Outfit, system-ui, sans-serif; font-weight: 800; font-size: 23px; color: var(--f-ink); }
[data-learning-path] .kick { color: var(--f-muted); }
[data-learning-path] .stat { color: var(--f-muted); }
[data-learning-path] .stat b { font-family: Outfit, system-ui, sans-serif; color: var(--f-ink); font-weight: 800; }
[data-learning-path] .btn { background: #eef0ea; color: var(--f-ink); border: 0; border-radius: 12px; min-height: 44px; font-weight: 700; box-shadow: 0 3px 0 var(--f-line-d); }
[data-learning-path] .btn:hover { background: #e6e9e1; }
[data-learning-path] .btn[style] { background: #fff1d6 !important; color: var(--f-ink) !important; }
[data-learning-path] main { padding: 20px 16px 96px; gap: 10px; }
[data-learning-path] .card { border: 0; border-radius: 20px; background: #fff; box-shadow: var(--f-shadow); padding: 20px; }
[data-learning-path] :is(.mod .t b, .card h2, .stat b, h2) { font-family: Outfit, system-ui, sans-serif !important; color: var(--f-ink); font-weight: 800; }
[data-learning-path] .sub { color: var(--f-muted); }
[data-learning-path] .gold { color: var(--f-green-d); }

/* The chapter list: Finch's goal rows, icon left and a check square right. */
[data-learning-path] .mod {
  position: relative; max-width: 680px; min-height: 68px; padding: 10px 12px; border: 0; border-radius: 16px; background: #fff;
  box-shadow: var(--f-shadow); transform: none;
}
[data-learning-path] .mod:nth-child(even) { transform: none; }
[data-learning-path] .mod:after { display: none; }
[data-learning-path] .mod:not(.locked):hover { box-shadow: inset 0 0 0 2px var(--f-green), var(--f-shadow); }
[data-learning-path] .mod .g { width: 44px; height: 44px; border: 0; border-radius: 12px; background: #dff3d9; color: var(--f-green-d); font-family: Amiri, serif !important; }
[data-learning-path] .mod.doneM .g { background: var(--f-orange); color: #fff; }
[data-learning-path] .mod .chk { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: #eef0ea; color: transparent; box-shadow: 0 3px 0 var(--f-line-d); font-size: 0; }
[data-learning-path] .mod.doneM .chk { background: var(--f-green) var(--f-tick) center / 22px no-repeat; box-shadow: 0 3px 0 var(--f-green-d); }
[data-learning-path] .mod.doneM .t b { color: var(--f-muted); }
[data-learning-path] .mod.locked { background: #f0f1ec; opacity: .7; box-shadow: none; }
[data-learning-path] .mod .ico { color: var(--f-green-d); }

/* Segmented progress, green like Finch's question steps. */
[data-learning-path] .prog { gap: 6px; }
[data-learning-path] .prog i { height: 10px; background: #e4e7df; }
[data-learning-path] .prog i.on { background: var(--f-green); }
[data-learning-path] .timer { height: 12px; background: #eceee7; }
[data-learning-path] .timer i { background: linear-gradient(#ffc14d, var(--f-orange)); }

[data-learning-path] .cta {
  background: var(--f-green); color: #fff; border: 0; border-radius: 14px; box-shadow: 0 4px 0 var(--f-green-d); font-weight: 800; min-height: 52px; font-size: 16px;
}
[data-learning-path] .cta:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--f-green-d); }
[data-learning-path] .cta:disabled { background: #e3e5df; color: #a9aca4; box-shadow: 0 4px 0 #d3d6ce; }

/* Pill answers. */
[data-learning-path] .opt {
  position: relative; min-height: 56px; padding: 12px 52px 12px 16px; border: 0; border-radius: 16px; background: #fff;
  box-shadow: inset 0 0 0 2px var(--f-line); color: var(--f-ink); font-weight: 600; font-size: 15px;
}
@media (hover: hover) { [data-learning-path] .opt:hover:not(:disabled) { box-shadow: inset 0 0 0 2px var(--f-line-d); } }
[data-learning-path] .opt::after {
  content: ''; position: absolute; right: 14px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%;
  box-shadow: inset 0 0 0 2px #d9dcd4; background: #fff center / 18px no-repeat;
}
[data-learning-path] .opt.ok { background: var(--f-green-l); box-shadow: inset 0 0 0 2.5px var(--f-green); color: var(--f-ink); }
[data-learning-path] .opt.ok::after { background-color: var(--f-green); background-image: var(--f-tick); box-shadow: none; }
[data-learning-path] .opt.no { background: var(--f-coral-l); box-shadow: inset 0 0 0 2.5px var(--f-coral); color: var(--f-ink); }
[data-learning-path] .opt.no::after { background-color: var(--f-coral); background-image: var(--f-cross); box-shadow: none; }
[data-learning-path] .opt:disabled:not(.ok):not(.no) { opacity: .55; }
/* Only the tapped answer reacts. After a wrong tap the chapter pages also mark the right
 * answer .ok; it used to get the same green fill and tick as a chosen answer, so an
 * option nobody tapped looked picked. It keeps a quiet dashed outline instead. */
[data-learning-path] .card:has(> .opt.no) > .opt.ok { background: #fff; box-shadow: inset 0 0 0 2px var(--f-line); outline: 2px dashed var(--f-green); outline-offset: -5px; opacity: 1; }
[data-learning-path] .card:has(> .opt.no) > .opt.ok::after { background-color: #fff; background-image: none; box-shadow: inset 0 0 0 2px #d9dcd4; }
[data-learning-path] .ex { border: 0; border-radius: 16px; background: #e3f5e0; color: #2f5a33; font-size: 14px; padding: 14px 16px; }
[data-learning-path] .ex.no { background: #fdeee6; color: #7a3a26; }
[data-learning-path] .hud { font-size: 14px; }
[data-learning-path] .hearts { color: var(--f-coral); }
[data-learning-path] .combo { color: var(--f-orange-d); }
[data-learning-path] .pill { background: #fff1d6; border: 0; color: var(--f-ink); font-weight: 800; }
[data-learning-path] .hrow { border: 0; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 2px var(--f-line); }
[data-learning-path] .hrow.sel { background: #f6fbf5; box-shadow: inset 0 0 0 2.5px var(--f-green); }
[data-learning-path] .hrow.ok { background: var(--f-green-l); box-shadow: inset 0 0 0 2.5px var(--f-green); }
[data-learning-path] .hrow.no { background: var(--f-coral-l); box-shadow: inset 0 0 0 2.5px var(--f-coral); }
[data-learning-path] .hrow .slot { font-family: Outfit, system-ui, sans-serif; color: var(--f-green-d); border-color: var(--f-green); }
[data-learning-path] .pal button { font-family: Outfit, system-ui, sans-serif; border: 0; background: #fff; box-shadow: inset 0 0 0 2px var(--f-line), 0 3px 0 var(--f-line-d); color: var(--f-ink); font-weight: 700; }
[data-learning-path] .ar { background: #faf7ee; border-right-color: var(--f-orange); }

/* Hud hud with a "?" on each question card (finch.mjs puts him there). */
[data-learning-path] .f-quizbird { display: grid; justify-items: center; margin: 2px 0 6px; }
[data-learning-path] .f-quizbird > span { position: relative; display: block; width: 84px; aspect-ratio: 322 / 396; }
[data-learning-path] .f-quizbird .hh { display: block; width: 100%; height: 100%; }
[data-learning-path] .f-quizbird.wonder > span::after {
  content: '?'; position: absolute; right: -12px; top: -4px; font: 800 28px/1 Outfit, system-ui, sans-serif; color: var(--f-ink);
  animation: f-wonder 1.6s ease-in-out infinite;
}

/* Chapter finished: the same green celebration. */
[data-learning-path] .card.f-woohoo { position: relative; overflow: hidden; background: #3fae5a; color: #fff; box-shadow: none; padding: 28px 20px 22px; }
[data-learning-path] .card.f-woohoo h2, [data-learning-path] .card.f-woohoo .sub, [data-learning-path] .card.f-woohoo div { color: #fff !important; }
[data-learning-path] .card.f-woohoo .pill { background: rgba(255, 255, 255, .22); color: #fff; }
[data-learning-path] .card.f-woohoo .cta { background: #fff; color: var(--f-ink); box-shadow: 0 4px 0 rgba(0, 0, 0, .14) !important; }
[data-learning-path] .card.f-woohoo .btn { background: rgba(255, 255, 255, .2); color: #fff; box-shadow: none; }
[data-learning-path] .card.f-woohoo .medal { display: none; }
[data-learning-path] .card.f-soft { background: #fdeee6; }
[data-learning-path] .medal { background: var(--f-orange); color: #fff; }

/* The opening screen and the toast. */
[data-learning-path] .open { background: linear-gradient(#49b86a, #3a9e57); color: #fff; }
[data-learning-path] .open h2 { font-family: Outfit, system-ui, sans-serif; font-weight: 800; color: #fff; }
[data-learning-path] .open .eyebrow { color: rgba(255, 255, 255, .85); }
[data-learning-path] .open .steps div { background: rgba(255, 255, 255, .16); border: 0; border-radius: 14px; }
[data-learning-path] .open .steps b { color: #fff; }
[data-learning-path] .open .go { background: #fff; color: var(--f-ink); border-radius: 14px; box-shadow: 0 4px 0 rgba(0, 0, 0, .14); }
[data-learning-path] #toast { background: #2e3a45; border: 0; color: #fff; border-radius: 16px; }

@media (max-width: 600px) {
  [data-learning-path] header { padding: 12px 16px; }
  [data-learning-path] .card { padding: 18px; }
  .hero-art { max-width: 35%; }
}

/* ═══ the module pages ══════════════════════════════════════════════ */

/* Belajar Pajak and Belajar Keuangan: a rail of modules beside the open
 * one, each ending in a short check. The Imajigrow lockup stays; the rest
 * takes the same Finch look as the chapter pages — white cards on a pale
 * ground, goal rows with a check circle, pill answers with a tick or a
 * cross, and one green button for the way forward. Every selector carries
 * html[...] so it outranks imajigrow-simulators.css whatever the order. */
html[data-learning-ui="reading"] {
  --desk: #f5f6f1; --desk2: #fff; --line: #e6e8e1; --ink: #3b3833; --mut: #85817a; --dim: #85817a;
  --gold: #5bbf5d; --gold2: #47a14a; --ok: #47a14a; --bad: #e8674f; --cyan: #47a14a;
  --paper: #eaf7e9; --paper2: #f5f6f1; --pink: #3b3833; --pmut: #85817a; --pline: #cfe9ca;
}
html[data-learning-ui="reading"] body { background: var(--f-bg); color: var(--f-ink); }
html[data-learning-ui="reading"] :is(button, a):focus-visible { outline: 3px solid var(--f-orange) !important; outline-offset: 3px; }

html[data-learning-ui="reading"] header { background: rgba(245, 246, 241, .96); color: var(--f-ink); border-bottom: 1px solid var(--f-line); box-shadow: none; }
html[data-learning-ui="reading"] header .grow-sim-lockup { color: var(--f-ink) !important; }
html[data-learning-ui="reading"] header .grow-sim-divider { background: var(--f-line-d); }
html[data-learning-ui="reading"] header .lbl { color: var(--f-muted); }
html[data-learning-ui="reading"] header .brand { color: var(--f-ink); font-weight: 800; }
html[data-learning-ui="reading"] header .bar { height: 10px; background: #e4e7df; }
html[data-learning-ui="reading"] header .bar i { background: var(--f-green); border-radius: 99px; }
html[data-learning-ui="reading"] header .seg { border: 0; border-radius: 12px; background: #eef0ea; padding: 3px; gap: 3px; }
html[data-learning-ui="reading"] header .seg button { color: var(--f-muted); border-radius: 9px; min-height: 38px; }
html[data-learning-ui="reading"] header .seg button.on { background: #fff; color: var(--f-ink); box-shadow: 0 1px 0 var(--f-line-d), 0 2px 6px rgba(0, 0, 0, .06); }
html[data-learning-ui="reading"] header .btn { background: #eef0ea; color: var(--f-ink); border: 0; box-shadow: 0 3px 0 var(--f-line-d); }

/* The rail: Finch's goal rows, a number circle that becomes a green tick. */
html[data-learning-ui="reading"] .rail { gap: 8px; }
html[data-learning-ui="reading"] .mrow {
  align-items: center; min-height: 60px; padding: 10px 12px; border: 0; border-radius: 16px; background: #fff;
  color: var(--f-ink); box-shadow: var(--f-shadow);
}
html[data-learning-ui="reading"] .mrow:hover { background: #fff; box-shadow: inset 0 0 0 2px var(--f-line-d), var(--f-shadow); }
html[data-learning-ui="reading"] .mrow.on { background: #f6fbf5; box-shadow: inset 0 0 0 2.5px var(--f-green); }
html[data-learning-ui="reading"] .mrow b { color: var(--f-ink); font-weight: 700; font-size: 14px; }
html[data-learning-ui="reading"] .mrow span { color: var(--f-muted); }
html[data-learning-ui="reading"] .pip { width: 30px; height: 30px; border: 0; background: #eef0ea; color: var(--f-muted); font-size: 12px; box-shadow: 0 2px 0 var(--f-line-d); }
html[data-learning-ui="reading"] .pip.done { background: var(--f-green); color: #fff; box-shadow: 0 2px 0 var(--f-green-d); }

/* The module and its check. */
html[data-learning-ui="reading"] .card { border: 0; border-radius: 20px; background: #fff; color: var(--f-ink); box-shadow: var(--f-shadow); }
html[data-learning-ui="reading"] .lbl { color: var(--f-muted); font-weight: 700; }
html[data-learning-ui="reading"] .pill { border: 0; background: #fff1d6; color: var(--f-ink); font-weight: 800; }
html[data-learning-ui="reading"] h1.t { color: var(--f-ink); font-weight: 800; letter-spacing: -.02em; }
html[data-learning-ui="reading"] p.lede { color: var(--f-ink); }
html[data-learning-ui="reading"] ul.pts li { color: #5d5952; }
html[data-learning-ui="reading"] ul.pts li::before { background: var(--f-green); }
html[data-learning-ui="reading"] .paper { border: 0; border-radius: 16px; background: var(--f-green-l); color: var(--f-ink); }
html[data-learning-ui="reading"] .paper .pg { color: var(--f-green-d); }
html[data-learning-ui="reading"] .q > p { color: var(--f-ink); font-size: 15px; }
html[data-learning-ui="reading"] .opt {
  position: relative; min-height: 56px; padding: 12px 52px 12px 16px; border: 0; border-radius: 16px; background: #fff;
  box-shadow: inset 0 0 0 2px var(--f-line); color: var(--f-ink); font-weight: 600; font-size: 14.5px; margin-bottom: 9px;
}
@media (hover: hover) { html[data-learning-ui="reading"] .opt:hover:not(:disabled) { border: 0; box-shadow: inset 0 0 0 2px var(--f-line-d); } }
html[data-learning-ui="reading"] .opt::after {
  content: ''; position: absolute; right: 14px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%;
  box-shadow: inset 0 0 0 2px #d9dcd4; background: #fff center / 18px no-repeat;
}
html[data-learning-ui="reading"] .opt.right { background: var(--f-green-l); box-shadow: inset 0 0 0 2.5px var(--f-green); }
html[data-learning-ui="reading"] .opt.right::after { background-color: var(--f-green); background-image: var(--f-tick); box-shadow: none; }
html[data-learning-ui="reading"] .opt.wrong { background: var(--f-coral-l); box-shadow: inset 0 0 0 2.5px var(--f-coral); }
html[data-learning-ui="reading"] .opt.wrong::after { background-color: var(--f-coral); background-image: var(--f-cross); box-shadow: none; }
html[data-learning-ui="reading"] .opt:disabled:not(.right):not(.wrong) { opacity: .55; }
/* The explanation: Finch's tinted verdict, green when the pick was right. */
html[data-learning-ui="reading"] .why { border: 0; border-radius: 14px; padding: 12px 14px; background: #e3f5e0; color: #2f5a33; font-size: 13.5px; }
html[data-learning-ui="reading"] .q:has(.opt.wrong) .why { background: #fdeee6; color: #7a3a26; }
html[data-learning-ui="reading"] .done-note { width: fit-content; padding: 10px 16px; border-radius: 14px; background: var(--f-green); color: #fff; font-weight: 800; box-shadow: 0 3px 0 var(--f-green-d); }
html[data-learning-ui="reading"] .btn { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 14px; background: #eef0ea; color: var(--f-ink); min-height: 48px; font-weight: 700; box-shadow: 0 3px 0 var(--f-line-d); }
html[data-learning-ui="reading"] .btn:hover { background: #e6e9e1; }
html[data-learning-ui="reading"] .btn.gold { background: var(--f-green); color: #fff; font-weight: 800; box-shadow: 0 4px 0 var(--f-green-d); }
html[data-learning-ui="reading"] .btn.gold:hover { background: #52b554; }
html[data-learning-ui="reading"] .btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--f-line-d); }
html[data-learning-ui="reading"] .btn.gold:active { box-shadow: 0 1px 0 var(--f-green-d); }
html[data-learning-ui="reading"] footer { color: var(--f-muted); }
html[data-learning-ui="reading"] .grow-sim-nav { border-top-color: var(--f-line); }
html[data-learning-ui="reading"] .grow-sim-nav a { color: var(--f-green-d); }

@media (max-width: 760px) {
  html[data-learning-ui="reading"] .mrow { box-shadow: var(--f-shadow); }
  html[data-learning-ui="reading"] .mrow.on { box-shadow: inset 0 0 0 2.5px var(--f-green); }
}

/* ═══ shared by both: the celebration layer from finch.mjs ══════════ */

.f-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.f-confetti i { position: absolute; top: -20px; width: 9px; height: 14px; border-radius: 2px; animation: f-fall 2.6s ease-in forwards; }
@keyframes f-fall { to { transform: translateY(110vh) rotate(540deg); } }
.f-energy { display: flex; align-items: center; gap: 8px; max-width: 420px; margin: 14px auto 6px; }
.f-energy .f-bar { position: relative; flex: 1; height: 24px; border-radius: 99px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.f-energy .f-bar i { display: block; height: 100%; width: var(--to); border-radius: inherit; background: linear-gradient(#ffc14d, #f7a928); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .08); animation: f-fill 1.2s .3s cubic-bezier(.3, 1.2, .5, 1) backwards; }
.f-energy .f-bar em { position: absolute; inset: 0; display: grid; place-items: center; font: 800 12px/1 Outfit, system-ui, sans-serif; font-style: normal; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
@keyframes f-fill { from { width: var(--from); } }
.f-energy svg { width: 40px; height: 40px; flex: none; }
.f-energy + .f-note { margin: 0 auto 10px; font: 600 13px/1.4 Outfit, system-ui, sans-serif; color: rgba(255, 255, 255, .9); }
@media (prefers-reduced-motion: reduce) {
  .f-confetti { display: none; }
  .f-energy .f-bar i, html[data-learning-ui] .result-art, .mini-buddy::after, .f-quizbird > span::after { animation: none !important; }
}