/* lesson-kit.css — the look shared by every self-study lesson.
   White studio, big friendly type, lots of movement. Blue is James's voice,
   red is the learner's microphone, yellow is the highlighter. Each lesson adds
   its own art on top (l-<topic>.css). */

.page-kit { background: var(--cyc); }
.kit { --k-w: 980px; --k-pad: clamp(16px, 4vw, 40px); overflow-x: clip; padding-bottom: 120px; }
.kit .k-wrap { width: min(100%, var(--k-w)); margin-inline: auto; padding-inline: var(--k-pad); }

/* ── type ─────────────────────────────────────────────────────────────── */
.kit h1, .kit h2, .kit h3 { font-family: var(--f-display); letter-spacing: -.03em; line-height: 1.02; margin: 0; }
.kit h2 { font-size: clamp(2.1rem, 1.4rem + 3.4vw, 3.9rem); }
.kit h3 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); letter-spacing: -.02em; }
.kit p { margin: 0; font-size: clamp(1.1rem, 1.02rem + .35vw, 1.3rem); line-height: 1.55; text-wrap: pretty; }
.kit .k-kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-display); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--ink-2); }
.kit .k-kicker .k-num { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--cyc); letter-spacing: 0; font-size: .9rem; transition: background .4s var(--ease-out); }
.kit section.is-done .k-kicker .k-num { background: #18A957; }
.kit section.is-done .k-kicker .k-num::after { content: ''; }
.kit mark { background: linear-gradient(transparent 58%, var(--pen) 58%); color: inherit; padding: 0 .08em; }

/* ── translation lines ───────────────────────────────────────────────── */
.kit .tr { display: block; margin-top: .28em; font-family: system-ui, -apple-system, 'Segoe UI', 'Noto Sans', sans-serif; font-size: max(.72em, 15px); font-weight: 500; line-height: 1.45; letter-spacing: 0; color: #4B5BA8; text-transform: none; animation: k-tr-in .45s var(--ease-out) both; }
.kit .tr[dir="rtl"] { text-align: right; }
.kit h1 .tr, .kit h2 .tr { font-size: clamp(1rem, .9rem + .5vw, 1.25rem); font-weight: 600; }
.kit button .tr { font-size: .78em; color: inherit; opacity: .8; }
@keyframes k-tr-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ── buttons ─────────────────────────────────────────────────────────── */
.k-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 10px 20px; border-radius: 999px; border: 0; background: var(--ink); color: var(--cyc); font: 600 1.02rem/1.2 var(--f-text); cursor: pointer; transition: transform .25s var(--ease-out), background .2s, box-shadow .25s; text-decoration: none; }
.k-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(14, 17, 24, .45); }
.k-btn:active { transform: translateY(0) scale(.98); }
.k-btn:focus-visible { outline: 3px solid var(--sound); outline-offset: 3px; }
.k-btn-ghost { background: var(--cyc); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.k-btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink), 0 10px 24px -14px rgba(14, 17, 24, .35); }
.k-btn-blue { background: var(--sound); }
.k-btn[hidden] { display: none; }

/* the round play button: blue, because it is James's voice */
.k-play { position: relative; display: inline-grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 50%; border: 0; background: var(--sound-soft); color: var(--sound); cursor: pointer; transition: transform .25s var(--ease-out), background .2s; }
.k-play::before { content: ''; width: 0; height: 0; margin-left: 4px; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent currentColor; }
.k-play:hover { transform: scale(1.08); background: #D7E1FF; }
.k-play.is-playing { background: var(--sound); color: var(--cyc); }
.k-play.is-playing::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--sound); animation: k-ring 1s var(--ease-out) infinite; }
@keyframes k-ring { from { opacity: .8; transform: scale(.85); } to { opacity: 0; transform: scale(1.3); } }

/* the little equaliser that dances while a clip plays */
.k-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; }
.k-eq b { width: 3px; height: 30%; border-radius: 2px; background: var(--sound); }
.k-eq.you b { background: var(--live); }
.is-playing .k-eq b { animation: k-eq .7s ease-in-out infinite; }
.is-playing .k-eq b:nth-child(2) { animation-delay: .15s; }
.is-playing .k-eq b:nth-child(3) { animation-delay: .3s; }
@keyframes k-eq { 0%, 100% { height: 25%; } 50% { height: 100%; } }

/* ── hero ────────────────────────────────────────────────────────────── */
.k-hero { position: relative; padding: calc(var(--bar-h) + 48px) 0 clamp(40px, 6vw, 80px); }
.k-hero .k-wrap { position: relative; z-index: 1; }
.k-hero h1 { font-size: clamp(3.2rem, 1.6rem + 8vw, 7.6rem); letter-spacing: -.045em; line-height: .92; margin: 18px 0 20px; }
.k-hero .k-lede { max-width: 36rem; font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); color: var(--ink-2); }
.k-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.k-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--cyc-2); font: 600 .9rem/1 var(--f-text); color: var(--ink); }
.k-chip.level { background: var(--ink); color: var(--cyc); font-family: var(--f-display); letter-spacing: .04em; }
.k-chip.voice { background: var(--sound-soft); color: var(--sound); }
.k-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ── sections ────────────────────────────────────────────────────────── */
.kit section.k-sec { position: relative; padding: clamp(56px, 8vw, 110px) 0; }
.kit section.k-sec + section.k-sec::before { content: ''; position: absolute; top: 0; left: 50%; width: min(86%, 900px); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, var(--line), transparent); }
.k-head { display: grid; gap: 14px; margin-bottom: clamp(24px, 4vw, 40px); max-width: 44rem; }
.k-head p { color: var(--ink-2); }

.k-rise { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.k-rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .k-rise { opacity: 1; transform: none; transition: none; } }

/* ── cards and notes ─────────────────────────────────────────────────── */
.k-card { position: relative; padding: clamp(18px, 3vw, 28px); border-radius: 24px; background: var(--cyc); box-shadow: 0 1px 0 var(--line), 0 18px 40px -28px rgba(14, 17, 24, .35); border: 1px solid var(--line); }
.k-rule { display: grid; gap: 12px; padding: clamp(20px, 3.4vw, 32px); border-radius: 26px; background: var(--ink); color: var(--cyc); }
.k-rule p { color: #D5D9E4; }
.k-rule .tr { color: #AFC2FF; }
.k-rule b { color: var(--pen); }
.k-tip { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; padding: 16px 20px; border-radius: 18px; background: var(--pen-soft); }
.k-tip .k-tip-ico { font-size: 1.6rem; line-height: 1; }
.k-oops { display: grid; gap: 10px; }
.k-oops > div { display: grid; grid-template-columns: 2.6rem 1fr; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; background: var(--cyc-2); }
.k-oops .no, .k-oops .yes { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; font-weight: 800; font-size: 1.2rem; }
.k-oops .no { background: var(--live-soft); color: var(--live); }
.k-oops .yes { background: #DDF5E7; color: #12834A; }
.k-oops s { color: var(--ink-3); text-decoration-thickness: 2px; text-decoration-color: var(--live); }

/* ── game shell ──────────────────────────────────────────────────────── */
.k-game { position: relative; display: grid; gap: 18px; padding: clamp(18px, 3.4vw, 32px); border-radius: 28px; background: linear-gradient(180deg, #F6F8FF, #FFFFFF 60%); border: 1px solid #DFE6FF; overflow: hidden; }
.k-game-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.k-score { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--cyc); box-shadow: inset 0 0 0 1.5px #DFE6FF; font: 700 .95rem/1 var(--f-text); }
.k-bar { height: 8px; border-radius: 99px; background: #E4E9F7; overflow: hidden; }
.k-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--sound), #6C8CFF); transition: width .6s var(--ease-out); }
.k-options { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.k-opt { position: relative; min-height: 58px; padding: 12px 16px; border-radius: 18px; border: 0; background: var(--cyc); box-shadow: inset 0 0 0 2px var(--line); font: 700 1.15rem/1.25 var(--f-text); color: var(--ink); cursor: pointer; transition: transform .2s var(--ease-out), box-shadow .2s, background .2s; }
.k-opt:hover:not(:disabled) { transform: translateY(-2px); box-shadow: inset 0 0 0 2px var(--ink); }
.k-opt:disabled { cursor: default; }
.k-opt.right { background: #DDF5E7; box-shadow: inset 0 0 0 2px #18A957; animation: k-pop .45s var(--ease-out); }
.k-opt.wrong { background: var(--live-soft); box-shadow: inset 0 0 0 2px var(--live); animation: k-shake .4s; }
.k-opt.dim { opacity: .45; }
.k-feedback { min-height: 1.5em; padding: 14px 18px; border-radius: 16px; font-size: 1.08rem; line-height: 1.5; }
.k-feedback:empty { display: none; }
.k-feedback.good { background: #E6F7EE; color: #0F5E36; }
.k-feedback.bad { background: #FFF1EF; color: #8F1F18; }
.k-feedback b { font-weight: 800; }
@keyframes k-pop { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes k-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }

.k-done { display: grid; justify-items: center; gap: 12px; padding: 20px; text-align: center; animation: k-pop .6s var(--ease-out); }
.k-done .k-big { font-family: var(--f-display); font-size: clamp(3rem, 2rem + 5vw, 5rem); line-height: 1; letter-spacing: -.04em; }

/* ── record yourself ─────────────────────────────────────────────────── */
.k-rec { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.k-rec-btn { background: var(--cyc); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.k-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--live); }
.k-rec.is-rec .k-rec-btn { background: var(--live); color: var(--cyc); box-shadow: none; }
.k-rec.is-rec .k-dot { background: var(--cyc); animation: k-blink 1s infinite; }
@keyframes k-blink { 50% { opacity: .2; } }
.k-rec-note { color: var(--ink-2); }

/* ── confetti ────────────────────────────────────────────────────────── */
.k-confetti { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; z-index: 5; }
.k-confetti i { position: absolute; width: 9px; height: 14px; border-radius: 2px; animation: k-confetti 1.3s var(--ease-out) forwards; }
@keyframes k-confetti { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--x), calc(var(--y) + 260px)) rotate(var(--r)); opacity: 0; } }

/* ── the dock: language + progress, bottom of the screen ─────────────── */
.k-dock { position: fixed; z-index: 150; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 999px; background: rgba(255, 255, 255, .9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 0 0 1px var(--line), 0 18px 40px -16px rgba(14, 17, 24, .35); animation: k-dock-in .8s .4s var(--ease-out) both; max-width: calc(100vw - 20px); }
@keyframes k-dock-in { from { opacity: 0; transform: translate(-50%, 30px); } to { opacity: 1; transform: translate(-50%, 0); } }
.k-dock button, .k-dock a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font: 600 .98rem/1 var(--f-text); cursor: pointer; text-decoration: none; white-space: nowrap; }
.k-dock .k-dock-lang { background: var(--ink); color: var(--cyc); }
.k-dock .k-dock-lang svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.k-dock > * { flex: none; }
.k-dock .k-dock-lang span { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; }
.k-dock [hidden] { display: none; }
.k-sw { position: relative; width: 38px; height: 22px; border-radius: 99px; background: var(--line-2); transition: background .25s; }
.k-sw i { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .3s var(--ease-out); }
[aria-pressed="true"] > .k-sw { background: var(--sound); }
[aria-pressed="true"] > .k-sw i { transform: translateX(16px); }
.k-dock-prog { padding: 0 12px 0 6px !important; }
.k-dock-prog svg { width: 34px; height: 34px; transform: rotate(-90deg); }
.k-dock-prog circle { fill: none; stroke: var(--cyc-3); stroke-width: 4; }
.k-dock-prog .k-prog-arc { stroke: #18A957; stroke-linecap: round; transition: stroke-dashoffset .8s var(--ease-out); }
@media (max-width: 420px) { .k-dock-show > span:last-child { display: none; } .k-dock button, .k-dock a { padding: 0 12px; } }

/* the language picker */
.k-langs { width: min(640px, calc(100vw - 24px)); max-height: min(86vh, 760px); padding: 0; border: 0; border-radius: 28px; background: var(--cyc); color: var(--ink); box-shadow: 0 40px 90px -30px rgba(14, 17, 24, .55); }
.k-langs::backdrop { background: rgba(14, 17, 24, .45); backdrop-filter: blur(4px); }
.k-langs[open] { animation: k-pop .45s var(--ease-out); }
.k-langs form { display: grid; gap: 18px; padding: clamp(18px, 4vw, 30px); }
.k-langs h2 { font-family: var(--f-display); font-size: clamp(1.7rem, 1.3rem + 2vw, 2.4rem); letter-spacing: -.03em; margin: 0; }
.k-langs-head p { margin: 6px 0 0; color: var(--ink-2); }
.k-langs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.k-langs-grid button, .k-langs-foot button { display: grid; gap: 2px; justify-items: start; padding: 12px 14px; border: 0; border-radius: 16px; background: var(--cyc-2); color: var(--ink); cursor: pointer; text-align: left; transition: transform .2s var(--ease-out), background .2s; }
.k-langs-grid button:hover { transform: translateY(-2px); background: var(--sound-soft); }
.k-langs-grid button[aria-pressed="true"] { background: var(--sound); color: var(--cyc); }
.k-langs-grid b { font-size: 1.15rem; font-family: system-ui, -apple-system, 'Segoe UI', 'Noto Sans', sans-serif; }
.k-langs-grid span { font-size: .85rem; opacity: .75; }
.k-langs-foot { display: flex; justify-content: space-between; gap: 10px; }
.k-langs-foot button { font: 600 1rem/1 var(--f-text); padding: 14px 18px; }
.k-langs-x { background: var(--ink) !important; color: var(--cyc) !important; }

/* first-visit suggestion */
.k-suggest { position: fixed; z-index: 160; left: 50%; bottom: 84px; display: grid; gap: 12px; width: min(420px, calc(100vw - 24px)); padding: 16px 18px; border-radius: 22px; background: var(--cyc); box-shadow: 0 0 0 1px var(--line), 0 24px 60px -24px rgba(14, 17, 24, .45); transform: translate(-50%, 20px); opacity: 0; transition: transform .5s var(--ease-out), opacity .4s; }
.k-suggest.in { transform: translate(-50%, 0); opacity: 1; }
.k-suggest p { display: grid; gap: 2px; margin: 0; font-size: 1.05rem; }
.k-suggest p span { color: var(--ink-2); font-size: .95rem; }
.k-suggest > div { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── the ending ──────────────────────────────────────────────────────── */
.k-cando { display: grid; gap: 10px; padding: 0; margin: 0; list-style: none; }
/* block + absolute tick: a grid <li> would split the sentence at every <b> */
.k-cando li { position: relative; display: block; min-height: 34px; padding: 4px 0 0 48px; font-size: clamp(1.1rem, 1rem + .35vw, 1.3rem); line-height: 1.4; }
.k-cando li::before { content: '✓'; position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #DDF5E7; color: #12834A; font-weight: 800; }
.k-next { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.k-next a { display: grid; gap: 6px; padding: 20px; border-radius: 22px; background: var(--cyc-2); color: var(--ink); text-decoration: none; transition: transform .25s var(--ease-out), background .2s; }
.k-next a:hover { transform: translateY(-3px); background: var(--sound-soft); }
.k-next a b { font-family: var(--f-display); font-size: 1.3rem; letter-spacing: -.02em; }
.k-next a span { color: var(--ink-2); }
.k-credits { margin-top: 40px; font-size: .85rem; color: var(--ink-3); }
.k-credits summary { cursor: pointer; font-weight: 600; }
.k-credits ul { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.k-credits a { color: inherit; }