/* Thinkera Academy lessons: course home and lesson page. Logical properties throughout, so RTL and LTR both work. */
.tk-learn {
    --tk-royal: #113972;
    --tk-royal-600: #1B4A8F;
    --tk-azure: #2F5795;
    --tk-teal: #426EB5;
    --tk-teal-700: #2F5795;
    --tk-navy: #0A1628;
    --tk-ink: #0F1B2D;
    --tk-muted: #52627A;
    --tk-line: #DDE3EC;
    --tk-pale: #EEF3FA;
    --tk-radius: 16px;
    color: var(--tk-ink);
    letter-spacing: 0;
}
/* Latin lesson names and summaries in an Arabic page keep their own reading order. */
.tk-learn :is(h2, h3, p, .tk-card-title, .tk-card-summary, .tk-side-title, .tk-cta-title, .tk-item-title, .tk-lesson-summary, .tk-hero-summary) { unicode-bidi: plaintext; }
.tk-learn .tk-icon { flex: none; vertical-align: middle; }
.tk-eyebrow { color: var(--tk-muted); font-weight: 600; margin: 0 0 .5rem; }
.tk-h2 { font-size: 1.35rem; font-weight: 700; margin: 2rem 0 1rem; }
.tk-empty { color: var(--tk-muted); padding: 1.25rem; border: 1px dashed var(--tk-line); border-radius: var(--tk-radius); }

.tk-badge {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .8125rem; font-weight: 600; line-height: 1; padding: .35rem .6rem; border-radius: 999px;
}
.tk-badge-free { background: #E9F6EF; color: #1E7F4F; }
.tk-badge-paid { background: var(--tk-pale); color: var(--tk-royal); }
.tk-badge-lock { background: #F1F3F6; color: var(--tk-muted); }
.tk-badge-soon { background: #FBF1DE; color: #8A5A10; }
.tkj-stop:has(.tk-badge-soon) .tkj-title { color: var(--tk-muted); }
.tk-badge-done { background: var(--tk-royal); color: #fff; }

/* ------------------------------------------------------------------ course home */
.tk-hero {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: center;
    padding: 2rem; border-radius: 22px; color: #D7E3F5;
    background: radial-gradient(circle at 90% 0%, rgba(10, 191, 163, .22), transparent 50%), var(--tk-navy);
}
.tk-hero .tk-eyebrow { color: #A9BEDB; }
.tk-hero-summary { color: #D7E3F5; max-inline-size: 60ch; }
.tk-hero-summary p:last-child { margin-bottom: 0; }
.tk-hero-summary a { color: #fff; }
.tk-progress { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.tk-progress-bar { flex: 1; max-inline-size: 360px; block-size: 10px; border-radius: 999px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.tk-progress-bar span { display: block; block-size: 100%; background: var(--tk-teal); border-radius: inherit; }
.tk-progress-label { color: #fff; font-weight: 600; }
.tk-hero-cta { display: flex; flex-direction: column; align-items: stretch; gap: .5rem; min-inline-size: 240px; }
.tk-cta-kicker { font-size: .8rem; color: #A9BEDB; }
.tk-cta-title { color: #fff; font-weight: 700; margin-bottom: .5rem; }
.tk-hero .btn-primary { background: #fff; border-color: #fff; color: var(--tk-royal); font-weight: 700; }
.tk-hero .btn-primary:hover, .tk-hero .btn-primary:focus { background: var(--tk-pale); border-color: var(--tk-pale); color: var(--tk-royal); }
.tk-hero .btn-secondary { background: transparent; border-color: rgba(255, 255, 255, .35); color: #fff; }
.tk-hero .btn-secondary:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.tk-hero :focus-visible { outline-color: #fff; }

.tk-unlock-banner {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    margin: 1.5rem 0 0; padding: 1rem 1.25rem; border-radius: var(--tk-radius);
    background: var(--tk-pale); border: 1px solid #C9D6EA; color: var(--tk-royal);
}
.tk-unlock-banner p { flex: 1; min-inline-size: 16rem; margin: 0; font-weight: 600; }

.tk-lessons { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.tk-card-link {
    display: flex; gap: 1rem; block-size: 100%; padding: 1.25rem; border-radius: var(--tk-radius);
    background: #fff; border: 1px solid var(--tk-line); color: inherit; text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.tk-card-link:hover { border-color: #AFC2DE; box-shadow: 0 8px 24px rgba(15, 27, 45, .08); color: inherit; text-decoration: none; }
.tk-card.is-next .tk-card-link { border-color: var(--tk-royal); box-shadow: 0 0 0 1px var(--tk-royal); }
.tk-card-num {
    flex: none; inline-size: 44px; block-size: 44px; border-radius: 12px; display: grid; place-items: center;
    font-weight: 700; font-size: 1.1rem; background: var(--tk-pale); color: var(--tk-royal);
}
.tk-card.is-done .tk-card-num { background: var(--tk-royal); color: #fff; }
.tk-card.is-locked .tk-card-num { background: #F1F3F6; color: var(--tk-muted); }
.tk-card-body { display: flex; flex-direction: column; gap: .5rem; min-inline-size: 0; flex: 1; }
.tk-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; color: var(--tk-muted); font-size: .85rem; font-weight: 600; }
.tk-card-title { font-size: 1.1rem; font-weight: 700; margin: 0; line-height: 1.45; }
.tk-card-summary { color: var(--tk-muted); font-size: .92rem; }
.tk-card-steps { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; padding-top: .25rem; }
.tk-pip { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; color: var(--tk-muted); padding: .3rem .6rem; border-radius: 999px; border: 1px solid var(--tk-line); }
.tk-pip.is-done { color: var(--tk-royal); border-color: #B7C8E2; background: var(--tk-pale); }
.tk-pip.is-locked { color: #8A97AA; border-style: dashed; }
.tk-card-progress { display: block; block-size: 4px; border-radius: 999px; background: var(--tk-pale); overflow: hidden; }
.tk-card-progress span { display: block; block-size: 100%; background: var(--tk-teal); }

/* ------------------------------------------------------------------ lesson page */
.tk-lessonpage { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 2rem; align-items: start; }
.tk-side { position: sticky; inset-block-start: 5rem; }
.tk-back { display: inline-block; font-weight: 600; margin-bottom: 1rem; }
.tk-side-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.tk-side-list a {
    display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border-radius: 12px;
    color: var(--tk-ink); text-decoration: none; font-size: .92rem;
}
.tk-side-list a:hover { background: var(--tk-pale); color: var(--tk-ink); }
.tk-side-list a.is-current { background: var(--tk-royal); color: #fff; }
.tk-side-list a.is-locked { color: var(--tk-muted); }
.tk-side-num { flex: none; inline-size: 28px; block-size: 28px; border-radius: 8px; display: grid; place-items: center; font-weight: 700; font-size: .85rem; background: var(--tk-pale); color: var(--tk-royal); }
.tk-side-list a.is-current .tk-side-num { background: rgba(255, 255, 255, .16); color: #fff; }
.tk-side-title { flex: 1; min-inline-size: 0; line-height: 1.4; }
.tk-side-state { flex: none; font-weight: 700; color: var(--tk-teal-700); }
.tk-side-list a.is-current .tk-side-state { color: #fff; }

.tk-lesson-summary { color: var(--tk-muted); max-inline-size: 70ch; }

.tk-stepper ol { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; counter-reset: none; }
.tk-step-link {
    display: flex; align-items: center; gap: .75rem; block-size: 100%; padding: .9rem 1rem; border-radius: var(--tk-radius);
    border: 1px solid var(--tk-line); background: #fff; color: var(--tk-ink); text-decoration: none;
}
.tk-step-link:hover { border-color: #AFC2DE; color: var(--tk-ink); text-decoration: none; }
.tk-step-link.is-active { border-color: var(--tk-royal); box-shadow: 0 0 0 1px var(--tk-royal); background: var(--tk-pale); }
.tk-step-link.is-empty { opacity: .55; }
.tk-step-dot {
    flex: none; inline-size: 34px; block-size: 34px; border-radius: 50%; display: grid; place-items: center;
    font-weight: 700; border: 2px solid var(--tk-line); color: var(--tk-muted); background: #fff;
}
.tk-step-link.is-active .tk-step-dot { border-color: var(--tk-royal); color: var(--tk-royal); }
.tk-step-link.is-done .tk-step-dot { border-color: var(--tk-royal); background: var(--tk-royal); color: #fff; }
.tk-step-text { display: flex; flex-direction: column; min-inline-size: 0; }
.tk-step-label { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; }
.tk-step-label .tk-icon { color: var(--tk-azure); }
.tk-step-sub { font-size: .8rem; color: var(--tk-muted); min-block-size: 1.2em; }

.tk-item { background: #fff; border: 1px solid var(--tk-line); border-radius: var(--tk-radius); padding: 1.25rem; margin-bottom: 1rem; }
.tk-item-head { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; flex-wrap: wrap; }
.tk-item-icon { inline-size: 36px; block-size: 36px; padding: 6px; border-radius: 10px; background: var(--tk-pale); }
.tk-item-titles { flex: 1; min-inline-size: 12rem; }
.tk-item-type { display: block; font-size: .78rem; color: var(--tk-muted); font-weight: 600; }
.tk-item-title { font-size: 1.1rem; font-weight: 700; margin: 0; }
.tk-item-badges { display: flex; gap: .4rem; flex-wrap: wrap; }
.tk-item-body > .no-overflow > :last-child { margin-bottom: 0; }
.tk-item .filter-tkvideo { margin-top: 0 !important; }
.tk-pdf { border-radius: 12px; overflow: hidden; border: 1px solid var(--tk-line); }
.tk-pdf-open { margin-top: .75rem; }
.tk-pdf iframe { display: block; inline-size: 100%; block-size: min(78vh, 900px); border: 0; }
.tk-video { display: block; inline-size: 100%; border-radius: 12px; background: var(--tk-navy); }
.tk-quiz-facts { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0 0 1rem; padding: 0; color: var(--tk-muted); }
.tk-quiz-facts strong { color: var(--tk-ink); }
.tk-item.is-locked { background: #FAFBFD; }
.tk-lock { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1rem; border-radius: 12px; border: 1px dashed #C3CDDC; color: var(--tk-muted); }
.tk-lock-text { flex: 1; min-inline-size: 14rem; }
.tk-lock .tk-icon-lock { color: var(--tk-royal); }

.tk-pager { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.5rem; flex-wrap: wrap; }
.tk-pager .btn-primary { margin-inline-start: auto; }

/* ------------------------------------------------------------------ unlock and manage pages */
.tk-unlock { max-inline-size: 760px; margin-inline: auto; }
.tk-unlock-hero { padding: 2rem; border-radius: 22px; color: #D7E3F5; background: radial-gradient(circle at 90% 0%, rgba(10, 191, 163, .22), transparent 50%), var(--tk-navy); }
.tk-unlock-hero h2 { color: #fff; font-weight: 700; margin: 0 0 .5rem; }
.tk-unlock-hero p { margin: 0; }
.tk-unlock-list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; padding: 0; margin: 1.5rem 0; }
.tk-unlock-list li { display: flex; flex-direction: column; gap: .25rem; padding: 1rem; border-radius: var(--tk-radius); border: 1px solid var(--tk-line); background: #fff; }
.tk-unlock-list strong { font-size: 1.75rem; color: var(--tk-royal); line-height: 1.1; }
.tk-unlock-list span { display: inline-flex; align-items: center; gap: .4rem; color: var(--tk-muted); }
.tk-pay { padding: 1.25rem; border-radius: var(--tk-radius); border: 1px solid var(--tk-line); background: #fff; }

.tk-manage-lesson { margin-bottom: 1.5rem; border: 1px solid var(--tk-line); border-radius: var(--tk-radius); overflow: hidden; background: #fff; }
.tk-manage-lesson > header { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .9rem 1.1rem; background: var(--tk-pale); }
.tk-manage-lesson > header h3 { flex: 1; margin: 0; font-size: 1.05rem; font-weight: 700; }
.tk-manage-lesson table { margin: 0; }
.tk-manage-lesson td, .tk-manage-lesson th { vertical-align: middle; }
.tk-manage-lesson .form-select { min-inline-size: 10rem; }

@media (max-width: 991.98px) {
    .tk-lessonpage { grid-template-columns: minmax(0, 1fr); }
    .tk-side { position: static; order: 2; }
    .tk-hero { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
    .tk-hero, .tk-unlock-hero { padding: 1.25rem; }
    .tk-stepper ol { grid-template-columns: minmax(0, 1fr); }
    .tk-unlock-list { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .tk-card-link { transition: none; }
}

/* ======================================================================================================
   The student app: lesson page (.tkl) and course home (.tkc). Mobile first; logical properties only.
   ====================================================================================================== */
.tkl, .tkc { --ink: #0F1B2D; --muted: #5B6B82; --line: #E3E9F2; --tint: #E9EFF9; --royal: #113972; --royal-600: #17488E;
    --azure: #8FB3E6; --good: #1E7F4F; --good-bg: #E9F6EF;
    /* the brand teal: #0ABFA3 is 2.33:1 on white, so it is decoration only. --teal-line is the lightest teal that
       still makes a 3:1 boundary, --teal-ink carries text (4.8:1 on --teal-bg), --good-ink does the same for green */
    --teal: #0ABFA3; --teal-line: #08937D; --teal-ink: #067A68; --teal-bg: #E7F8F5; --good-ink: #1B7347;
    /* a PDF wears the reader's own red: --pdf-ink is 5.6:1 on --pdf-bg, so the marker is read, not guessed */
    --pdf-bg: #FBECEA; --pdf-ink: #B3372F;
    color: var(--ink); }
.tkl :is(h1, h2, p, a, span), .tkc :is(h1, h2, p, a, span) { unicode-bidi: plaintext; }
.tkl .tk-icon, .tkc .tk-icon { flex: none; }
.tkl-arrow::before { content: "\2190"; }
[dir="ltr"] .tkl-arrow::before { content: "\2192"; }
.tk-btn-lg { min-height: 52px; padding: 0 1.6rem; border-radius: 999px; font-size: 1.02rem; }
.tk-badge-next { background: #E9EFF9; color: #113972; }
.tk-badge-done { background: #E9F6EF; color: #1E7F4F; }

/* ---------- lesson page ---------- */
.tkl-head { margin-bottom: 1rem; }
.tkl-back { display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; color: var(--muted); font-weight: 600; text-decoration: none; }
.tkl-back .tkl-arrow::before { content: "\2192"; }
[dir="ltr"] .tkl-back .tkl-arrow::before { content: "\2190"; }
.tkl-back:hover { color: var(--royal); text-decoration: none; }
.tkl-pos { margin: .25rem 0 0; color: var(--muted); font-size: .9rem; font-weight: 600; }
.tkl-title { margin: .15rem 0 0; font-size: 1.45rem; line-height: 1.4; font-weight: 700; }
@media (min-width: 768px) { .tkl-title { font-size: 1.9rem; } }

/* The steps, in two shapes. A phone gets one button (.tkl-stepsel), because five of them will not fit a
   360 px row and stacking them ate the screen above the lesson; from 768 px up they are the single row. */
.tkl-stepbar {
    position: sticky; top: 64px; z-index: 20; margin: 0 -1rem 1.25rem; padding: .5rem 1rem;
    background: rgba(243, 246, 251, .96); backdrop-filter: blur(8px);
}
@media (min-width: 768px) { .tkl-stepbar { margin-inline: 0; padding: 0; background: none; backdrop-filter: none; } }

.tkl-steps { display: none; }
@media (min-width: 768px) {
    .tkl-steps {
        display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .35rem; padding: .35rem;
        border-radius: 18px; background: #fff; border: 1px solid var(--line);
    }
}
.tkl-step {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
    min-height: 58px; padding: .45rem .25rem; border-radius: 14px; background: #fff; border: 1px solid var(--line);
    color: var(--muted); font-weight: 700; font-size: .875rem; text-align: center; text-decoration: none;
}
@media (min-width: 768px) { .tkl-step { flex-direction: row; gap: .5rem; min-height: 48px; border: 0; font-size: .95rem; } }
.tkl-step:hover { color: var(--royal); text-decoration: none; }
.tkl-step.is-active { background: var(--royal); border-color: var(--royal); color: #fff; box-shadow: 0 6px 16px rgba(17, 57, 114, .25); }
.tkl-step.is-empty { opacity: .45; }
.tkl-step-check {
    position: absolute; inset-block-start: 4px; inset-inline-end: 6px; display: grid; place-items: center;
    width: 18px; height: 18px; border-radius: 50%; background: var(--good); color: #fff; font-size: .7rem;
}
.tkl-step.is-active .tkl-step-check { background: #fff; color: var(--good); }
@media (min-width: 768px) { .tkl-step-check { position: static; } }
.tkl-step-lock { position: absolute; inset-block-start: 4px; inset-inline-end: 6px; opacity: .6; }
.tkl-step-lock svg { width: 14px; height: 14px; }

/* the phone's dropdown: the open step on a button, all of them on a sheet under it */
.tkl-stepsel { position: relative; }
@media (min-width: 768px) { .tkl-stepsel { display: none; } }
.tkl-stepsel-btn {
    display: flex; align-items: center; gap: .65rem; min-height: 56px; padding: .5rem .85rem; border-radius: 16px;
    background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(15, 27, 45, .05);
    color: var(--ink); font-weight: 700; cursor: pointer; list-style: none;
}
.tkl-stepsel-btn::-webkit-details-marker { display: none; }
.tkl-stepsel-btn .tkl-step-icon { color: var(--royal); }
.tkl-stepsel-now { display: flex; flex-direction: column; gap: .1rem; min-width: 0; text-align: start; }
.tkl-stepsel-cap { color: var(--muted); font-size: .72rem; font-weight: 600; }
.tkl-stepsel-label { font-size: .98rem; line-height: 1.3; }
.tkl-stepsel-state { margin-inline-start: auto; color: var(--good); font-size: .85rem; }
.tkl-stepsel-state svg { width: 14px; height: 14px; }
.tkl-stepsel-chev {
    flex: none; margin-inline-start: auto; color: var(--muted); transition: transform 180ms ease;
}
.tkl-stepsel-state + .tkl-stepsel-chev { margin-inline-start: .55rem; }
.tkl-stepsel[open] .tkl-stepsel-chev { transform: rotate(180deg); }
.tkl-stepsel[open] .tkl-stepsel-btn { border-color: var(--royal); }
.tkl-stepsel-menu {
    position: absolute; inset-inline: 0; top: calc(100% + .35rem); z-index: 30; display: flex;
    flex-direction: column; gap: .15rem; padding: .35rem; border-radius: 16px; background: #fff;
    border: 1px solid var(--line); box-shadow: 0 12px 30px rgba(15, 27, 45, .16);
}
.tkl-stepsel-item {
    display: flex; align-items: center; gap: .65rem; min-height: 48px; padding: .4rem .7rem; border-radius: 12px;
    color: var(--muted); font-weight: 700; text-decoration: none;
}
.tkl-stepsel-item:hover { background: var(--tint); color: var(--royal); text-decoration: none; }
.tkl-stepsel-item.is-active { background: var(--royal); color: #fff; }
.tkl-stepsel-item.is-active .tkl-stepsel-state { color: #fff; }
.tkl-stepsel-item.is-empty { opacity: .45; }
@media (prefers-reduced-motion: reduce) { .tkl-stepsel-chev { transition: none; } }

/* one column: the lesson gets the whole width, and its list of lessons folds away behind an icon (.tkl-toc) */
.tkl-grid { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
.tkl-main { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }

.tkl-item { background: #fff; border: 1px solid var(--line); border-radius: 22px; overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 27, 45, .04), 0 8px 24px rgba(15, 27, 45, .05); }
.tkl-item-title { margin: 0; font-size: 1.12rem; font-weight: 700; line-height: 1.5; }
.tkl-under { padding: 1rem 1.25rem 0; }
.tkl-badges { display: flex; flex-wrap: wrap; gap: .4rem; padding: .75rem 1.25rem 1.1rem; }
.tkl-badges:empty { display: none; }

.tkl-player { position: relative; aspect-ratio: 16 / 9; background: #0A1628; }
.tkl-player iframe, .tkl-player video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* The interactive explanation, played inside the lesson card. The H5P player sizes its own iframe through
   h5p-resizer, so the height is left to it — an aspect-ratio box like .tkl-player would fight it and clip the
   questions, which are taller than the picture. */
.tkl-h5p { background: #0A1628; }
.tkl-h5p iframe.h5p-player { display: block; width: 100%; border: 0; }
.tkl-over { padding: 1.25rem 1.25rem .75rem; }

/* The way across to the lesson's other shape — the interactive video beside the plain one, the interactive
   practice beside the quizzes. Until 5 October 2026 each pair was a row of two tabs *above* the content, which
   asked the student to choose before they had seen anything and spent a line of a phone screen on a choice
   most of them never made. Now the shape that *is* the lesson opens by itself and this is the single link
   under it. It is deliberately not a tab: it stands alone, only as wide as its words, so it reads as an offer
   at the end of the content rather than as a control that must be answered first. */
.tkl-switch {
    position: relative; display: flex; width: fit-content; align-items: center; gap: .6rem;
    margin: 1.1rem auto .25rem; padding: .6rem 1.15rem; border: 1.5px solid var(--line);
    border-radius: 999px; background: var(--tint); color: var(--muted); text-decoration: none;
}
.tkl-switch:hover {
    color: var(--royal); background: #fff; border-color: var(--royal); text-decoration: none;
    box-shadow: 0 4px 12px rgba(17, 57, 114, .12);
}
.tkl-switch:focus-visible { outline: 3px solid var(--azure); outline-offset: 1px; }
/* the mark is drawn in the template as an SVG — a circle with a play glyph inside it, centred by
   construction. A CSS triangle made of borders fills its box unevenly, so its box centre is never its
   optical centre. A dashed ring says «interactive» without a second colour. */
.tkl-switch-icon, .tkl-switch-mark { flex: 0 0 auto; display: grid; place-items: center; }
.tkl-switch-text { display: flex; flex-direction: column; line-height: 1.25; text-align: start; min-width: 0; }
.tkl-switch-text strong { font-size: .95rem; font-weight: 700; }
.tkl-switch-text small { font-size: .78rem; color: var(--muted); }
.tkl-switch:hover .tkl-switch-text small { color: var(--royal); opacity: .75; }
.tkl-switch-check { flex: none; color: var(--good); font-weight: 700; }
.tkl-switch-lock { flex: none; opacity: .6; }
.tkl-switch-lock svg { width: 14px; height: 14px; }
/* on a narrow phone it takes the full width: a pill floating in the middle of a small screen reads as an
   ornament rather than as something to press */
@media (max-width: 430px) {
    .tkl-switch { width: auto; justify-content: center; }
    .tkl-switch-text small { font-size: .72rem; }
}

/* practice levels: a segmented switch above the practice card; the bars (1, 2 or 3 filled) say the level without colour */
.tkl-levels {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; margin-bottom: 1rem; padding: .3rem;
    background: var(--tint); border-radius: 16px; scroll-margin-top: 140px;
}
.tkl-level {
    position: relative; display: flex; align-items: center; justify-content: center; gap: .55rem; min-height: 56px;
    padding: .4rem .5rem; border: 1.5px solid transparent; border-radius: 12px; color: var(--muted); text-decoration: none;
}
.tkl-level:hover { color: var(--royal); background: rgba(255, 255, 255, .6); text-decoration: none; }
.tkl-level:focus-visible { outline: 3px solid var(--azure); outline-offset: 1px; }
.tkl-level.is-active { background: #fff; border-color: var(--royal); color: var(--royal); box-shadow: 0 4px 12px rgba(17, 57, 114, .12); }
.tkl-level-text { display: flex; flex-direction: column; line-height: 1.25; text-align: start; }
.tkl-level-text strong { font-size: .95rem; font-weight: 700; }

.tkl-level-text small { font-size: .8125rem; font-weight: 600; opacity: .8; }
.tkl-level-bars { display: inline-flex; align-items: flex-end; gap: 2px; block-size: 16px; flex: none; }
.tkl-level-bars i { display: block; inline-size: 4px; border-radius: 2px; background: currentColor; opacity: .25; }
.tkl-level-bars i:nth-child(1) { block-size: 6px; }
.tkl-level-bars i:nth-child(2) { block-size: 11px; }
.tkl-level-bars i:nth-child(3) { block-size: 16px; }
.tkl-level-1 .tkl-level-bars i:nth-child(-n+1), .tkl-level-2 .tkl-level-bars i:nth-child(-n+2),
.tkl-level-3 .tkl-level-bars i { opacity: 1; }
.tkl-level-check {
    position: absolute; inset-block-start: 4px; inset-inline-end: 6px; display: grid; place-items: center;
    width: 18px; height: 18px; border-radius: 50%; background: var(--good); color: #fff; font-size: .7rem;
}
.tkl-level-lock { position: absolute; inset-block-start: 4px; inset-inline-end: 6px; opacity: .6; }
.tkl-level-lock svg { width: 14px; height: 14px; }
@media (max-width: 420px) {
    .tkl-level { flex-direction: column; gap: .25rem; min-height: 64px; }
    .tkl-level-text { text-align: center; }
}

.tkl-practice { padding: 1.25rem; display: flex; flex-direction: column; gap: 1.1rem; }
@media (min-width: 768px) { .tkl-practice { padding: 1.75rem; } }
.tkl-practice-top { display: flex; gap: 1rem; align-items: center; }
.tkl-practice-text p { margin: .25rem 0 .5rem; color: var(--muted); }
.tkl-practice-icon { display: grid; place-items: center; flex: none; width: 76px; height: 76px; border-radius: 22px; background: var(--tint); color: var(--royal); }
.tkl-practice-icon svg { width: 36px; height: 36px; }
.tkl-ring {
    flex: none; width: 86px; height: 86px; border-radius: 50%; display: grid; place-content: center; text-align: center;
    background: radial-gradient(closest-side, #fff 76%, transparent 77% 100%), conic-gradient(var(--royal) calc(var(--p) * 1%), var(--tint) 0);
}
.tkl-ring strong { font-size: 1.3rem; line-height: 1; color: var(--royal); }
.tkl-ring small { font-size: .7rem; color: var(--muted); font-weight: 600; }
.tkl-facts { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.tkl-facts li { padding: .3rem .7rem; border-radius: 999px; background: #F3F6FB; color: var(--muted); font-size: .82rem; font-weight: 600; }
.tkl-practice-actions { display: flex; flex-direction: column; gap: .6rem; }
@media (min-width: 576px) { .tkl-practice-actions { flex-direction: row; } }

.tkl-doc { padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
.tkl-doc-head { display: flex; gap: .9rem; align-items: center; }
.tkl-doc-head p { margin: .2rem 0 0; color: var(--muted); }
.tkl-doc-icon { display: grid; place-items: center; flex: none; width: 56px; height: 64px; border-radius: 12px; background: var(--pdf-bg); color: var(--pdf-ink); font-weight: 800; font-size: .85rem; }
.tkl-doc-frame { display: none; width: 100%; height: 70vh; border: 1px solid var(--line); border-radius: 14px; }
@media (min-width: 992px) { .tkl-doc-frame { display: block; } }
/* Download, Print and Open above the file; on a small screen the viewer is not drawn and they are the whole story */
.tkl-doc-tools { display: flex; flex-wrap: wrap; gap: .5rem; }
.tkl-doc-tools .tk-btn { flex: 1 1 10rem; }
.tkl-doc-tools button.tk-btn { font: inherit; cursor: pointer; }
@media (min-width: 576px) { .tkl-doc-tools .tk-btn { flex: 0 0 auto; } }

/* «ملفات الدرس»: the lesson's files above the viewer, the open one marked in words as well as in colour */
.tkl-files { padding: .6rem; background: #fff; border: 1px solid var(--line); border-radius: 22px; }
.tkl-filelist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
@media (min-width: 768px) { .tkl-filelist { flex-direction: row; flex-wrap: wrap; } }
.tkl-file { display: flex; align-items: center; gap: .6rem; min-height: 48px; padding: .5rem .75rem; border-radius: 14px;
    background: #fff; border: 1px solid var(--line); color: var(--ink); font-weight: 600; text-decoration: none; }
.tkl-file:hover { border-color: var(--royal); color: var(--royal); text-decoration: none; }
.tkl-file.is-current { padding: calc(.5rem - 1px) calc(.75rem - 1px); border: 2px solid var(--royal); background: var(--tint); color: var(--royal); }
.tkl-file.is-locked { background: #F3F6FB; color: #4A5870; }
.tkl-file-name { min-width: 0; overflow-wrap: anywhere; }
.tkl-file-now { flex: none; padding: .15rem .5rem; border-radius: 999px; background: var(--royal); color: #fff; font-size: .72rem; font-weight: 700; }
.tkl-file-check { flex: none; color: var(--good-ink); font-weight: 800; }
.tkl-file-lock { flex: none; display: inline-flex; color: var(--muted); }
.tkl-file-lock svg { width: 16px; height: 16px; }

/* the type marker on a file's row, on both pages: «PDF» in red, anything else in the page's own grey */
.tkl-file-type, .tkj-file-type { flex: none; display: inline-grid; place-items: center; min-width: 38px; padding: .2rem .4rem;
    border-radius: 8px; background: #F3F6FB; color: var(--muted); font-size: .7rem; font-weight: 800; }
.tkl-file-type.is-pdf, .tkj-file-type.is-pdf { background: var(--pdf-bg); color: var(--pdf-ink); }
/* a video in the files rail: «التقييمات» holds the guide beside the two papers */
.tkl-file-type.is-video, .tkj-file-type.is-video { background: #E6EDF8; color: var(--royal); }

.tkl-body { padding: 1.25rem; }
.tkl-card-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; padding: 1.25rem; }

.tkl-lock, .tkl-unlock { display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: 1.75rem 1.25rem; text-align: center; }
.tkl-unlock { background: #fff; border: 1px dashed #C9D3E3; border-radius: 22px; margin-top: 1rem; }
.tkl-unlock p { margin: 0; color: var(--muted, #5B6B82); max-width: 46ch; }
.tkl-lock-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #E9EFF9; color: #113972; }
.tkl-lock-text { color: var(--muted); }

.tkl-empty { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 2rem 1rem; text-align: center;
    color: var(--muted); background: #fff; border: 1px dashed #C9D3E3; border-radius: 22px; }
.tkl-empty-icon svg { width: 36px; height: 36px; }

.tkl-pager { display: flex; flex-direction: column; gap: .5rem; margin-top: .25rem; }
@media (min-width: 576px) { .tkl-pager { flex-direction: row-reverse; justify-content: space-between; align-items: center; } }
.tkl-next { justify-content: center; }

/* the frame comes from .tkc-livedd-panel now; on wide screens the list runs in columns instead of one long strip */
.tkl-toc { margin-block-start: .25rem; }
@media (min-width: 768px) { .tkl-side-list { columns: 2; column-gap: 1.25rem; } .tkl-side-list li { break-inside: avoid; } }
@media (min-width: 1200px) { .tkl-side-list { columns: 3; } }
.tkl-side-title { margin: 0 0 .6rem; font-size: .95rem; font-weight: 700; color: var(--muted); }
.tkl-side-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.tkl-side-list a { display: flex; align-items: center; gap: .65rem; min-height: 48px; padding: .45rem .55rem; border-radius: 12px; color: var(--ink); text-decoration: none; }
.tkl-side-list a:hover { background: #F3F6FB; text-decoration: none; }
.tkl-side-list a.is-current { background: var(--tint); color: var(--royal); font-weight: 700; }
.tkl-side-list a.is-locked { color: var(--muted); }
.tkl-side-num { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: #F3F6FB; font-weight: 700; font-size: .85rem; }
.tkl-side-list a.is-done .tkl-side-num { background: var(--good-bg); color: var(--good); }
.tkl-side-list a.is-current .tkl-side-num { background: var(--royal); color: #fff; }
.tkl-side-name { flex: 1; line-height: 1.45; font-size: .92rem; }
.tkl-side-lock svg { width: 16px; height: 16px; opacity: .6; }

/* ---------- course home: the path (.tkj) ----------
   Hero: where the student stands (a ring). Resume: the one next step. Path: the lessons unit by unit, a node per
   lesson on a vertical line, each lesson's three steps one tap away. On wide screens the sessions sit beside it. */
.tkj { --path: #D5DDE9; --path-done: #1E7F4F; --node: 40px; display: flex; flex-direction: column; gap: 1.25rem; }

.tkj-hero {
    position: relative; overflow: hidden; display: grid; gap: 1.25rem; align-items: center;
    padding: 1.5rem 1.25rem; border-radius: 26px; color: #fff;
    background: radial-gradient(circle at 100% 0%, rgba(143, 179, 230, .30), transparent 55%),
        radial-gradient(circle at 0% 100%, rgba(10, 191, 163, .16), transparent 45%), linear-gradient(135deg, #113972, #0A1F42);
}
@media (min-width: 768px) { .tkj-hero { grid-template-columns: minmax(0, 1fr) auto; padding: 2rem 2.25rem; gap: 2rem; } }
.tkj-hero-main { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.tkc-kicker { margin: 0; color: #BFD3F0; font-weight: 600; font-size: .9rem; }
.tkc-title { margin: 0; color: #fff; font-size: 1.55rem; line-height: 1.35; font-weight: 700; text-wrap: balance; }
@media (min-width: 768px) { .tkc-title { font-size: 2.1rem; } }
.tkj-summary { color: #D7E3F5; max-width: 62ch; font-size: .95rem; line-height: 1.8;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tkj-summary p { margin: 0; }
.tkj-hero-tools { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.tkj-btn-onblue { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; border: 1px solid rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .08); color: #fff; border-radius: 999px; padding: 0 1rem; font-weight: 600; }
.tkj-btn-onblue:hover { background: rgba(255, 255, 255, .16); color: #fff; text-decoration: none; }

.tkj-meter { display: flex; align-items: center; gap: 1rem; padding: .9rem 1.1rem; border-radius: 20px;
    background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); }
@media (min-width: 768px) { .tkj-meter { flex-direction: column; text-align: center; padding: 1.25rem 1.5rem; min-width: 210px; } }
.tkj-ring { position: relative; flex: none; width: 88px; height: 88px; }
@media (min-width: 768px) { .tkj-ring { width: 112px; height: 112px; } }
.tkj-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.tkj-ring circle { fill: none; stroke-width: 7; }
.tkj-ring-track { stroke: rgba(255, 255, 255, .16); }
.tkj-ring-value { stroke: #5EE6CF; stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
@media (prefers-reduced-motion: reduce) { .tkj-ring-value { transition: none; } }
.tkj-ring-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.55rem; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.tkj-ring-num small { display: inline; font-size: .6em; font-weight: 600; margin-inline-start: 1px; }
.tkj-meter-text { display: flex; flex-direction: column; gap: .2rem; }
.tkj-meter-label { margin: 0; font-weight: 700; color: #fff; }
.tkj-meter-link { color: #BFD3F0; font-weight: 600; font-size: .9rem; min-height: 32px; display: inline-flex; align-items: center; gap: .35rem; justify-content: inherit; }
.tkj-meter-link:hover { color: #fff; }

/* a session running now: the one strip that may sit above everything else */
.tkj-live { display: flex; align-items: center; gap: .85rem; padding: .9rem 1.15rem; min-height: 64px; border-radius: 18px;
    background: #0A1628; color: #fff; text-decoration: none; box-shadow: 0 8px 24px rgba(10, 22, 40, .18); }
.tkj-live:hover { color: #fff; text-decoration: none; background: #0F2240; }
.tkj-live-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: #5EE6CF; box-shadow: 0 0 0 0 rgba(94, 230, 207, .6); animation: tkj-pulse 1.8s infinite; }
@keyframes tkj-pulse { 0% { box-shadow: 0 0 0 0 rgba(94, 230, 207, .55); } 70% { box-shadow: 0 0 0 12px rgba(94, 230, 207, 0); } 100% { box-shadow: 0 0 0 0 rgba(94, 230, 207, 0); } }
@media (prefers-reduced-motion: reduce) { .tkj-live-dot { animation: none; } }
.tkj-live-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tkj-live-kicker { color: #5EE6CF; font-size: .82rem; font-weight: 700; }
.tkj-live-name { font-size: 1rem; line-height: 1.45; }
.tkj-live-go { flex: none; display: inline-flex; align-items: center; gap: .35rem; padding: .5rem 1rem; border-radius: 999px; background: #fff; color: #0A1628; font-weight: 700; }

/* one column: the path gets the whole width, and the sessions fold away behind their own icon (.tkc-livedd) */
.tkj-layout { display: grid; gap: 1.5rem; }
.tkj-main { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }

/* the sessions panel: an icon that opens the block, instead of a column that always takes 360px.
   This .tkc-livedd* block is the only copy: «تقدّمي» (local/thinkera/templates/progress.mustache) folds its own
   side column away with the same markup, and Moodle compiles every plugin's styles.css into the one theme sheet,
   so these classes already reach that page. Change them here, never by copying them into local/thinkera. */
.tkc-livedd { margin: 0 0 1.25rem; }
.tkc-livedd-btn { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .5rem;
    min-height: 44px; padding: .5rem 1rem; border-radius: 999px; background: #fff;
    /* not --line: that is 1.13:1 against the page and does not read as an edge. #7C8AA0 is the lightest that makes
       3:1 on both the white fill (3.50) and the page behind it (3.23) */
    border: 1px solid #7C8AA0; color: var(--royal, #113972); font-weight: 700; }
.tkc-livedd-btn::-webkit-details-marker { display: none; }
.tkc-livedd-btn:hover { border-color: var(--royal, #113972); }
.tkc-livedd-btn:focus-visible { outline: 3px solid var(--royal, #113972); outline-offset: 2px; }
.tkc-livedd-chev { width: .5rem; height: .5rem; border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor;
    transform: rotate(45deg); margin-block-start: -.25rem; transition: transform .18s ease; }
.tkc-livedd[open] .tkc-livedd-chev { transform: rotate(-135deg); margin-block-start: .2rem; }
/* a session running now: a pulsing dot, so the icon is not the only sign */
.tkc-livedd-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--bad, #C0392B);
    box-shadow: 0 0 0 .2rem rgba(192, 57, 43, .18); animation: tkc-live-pulse 1.8s ease-in-out infinite; }
@keyframes tkc-live-pulse { 50% { box-shadow: 0 0 0 .38rem rgba(192, 57, 43, .06); } }
@media (prefers-reduced-motion: reduce) {
    .tkc-livedd-dot { animation: none; }
    .tkc-livedd-chev { transition: none; }
}
.tkc-livedd-panel { margin-block-start: .75rem; padding: 1.1rem 1.15rem; border-radius: 22px; background: #fff;
    border: 1px solid var(--line, #E3E9F2); }
.tkc-livedd-panel .tkc-live { margin: 0; }

/* the next step: a teal card, so it reads as "this one" against the white lesson cards and does not merge with
   the navy hero right above it. The lesson cards stay white; only this one is tinted. */
.tkj-resume { display: grid; gap: 1rem; padding: 1.25rem; border-radius: 22px;
    background: var(--teal-bg); border: 2px solid var(--teal-line);
    box-shadow: 0 1px 2px rgba(15, 27, 45, .04), 0 12px 28px rgba(10, 191, 163, .14); }
.tkj-resume-body { display: flex; flex-direction: column; gap: .7rem; min-width: 0; }
/* wide enough for two columns: the text, and the actions centred against it instead of hanging under it */
@media (min-width: 768px) {
    .tkj-resume { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem 2rem; }
    .tkj-resume-actions { flex-direction: column; align-items: stretch; justify-self: end; }
    .tkj-resume-actions .tkq-actions { flex-direction: column; align-items: stretch; gap: .5rem; }
    .tkj-resume-actions .tk-btn, .tkj-resume-actions .tkq-mine { justify-content: center; }
}
/* the step chips sit on the tint, so they go white instead of the bluish grey they use on a white card */
.tkj-resume .tkj-track-step { background: #fff; }
@media (min-width: 768px) { .tkj-resume { padding: 1.5rem 1.75rem; } }
/* the course is finished: the card turns green, which is what green means everywhere else on the page */
.tkj-resume.is-finished { background: var(--good-bg); border-color: var(--good);
    box-shadow: 0 1px 2px rgba(15, 27, 45, .04), 0 12px 28px rgba(30, 127, 79, .12); }
.tkj-resume-kicker { margin: 0; color: var(--teal-ink); font-weight: 700; font-size: .9rem; }
.tkj-resume.is-finished .tkj-resume-kicker { color: var(--good-ink); }
.tkj-resume-title { margin: 0; font-size: 1.25rem; line-height: 1.45; font-weight: 700; }
.tkj-resume-lead { margin: 0; color: var(--muted); }
.tkj-track { list-style: none; margin: .25rem 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; counter-reset: none; }
.tkj-track-step { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .75rem .35rem .6rem; border-radius: 999px;
    background: #F3F6FB; color: var(--muted); font-size: .88rem; font-weight: 600; }
.tkj-track-dot { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #C9D3E3; font-size: .7rem; line-height: 1; }
.tkj-track-step.is-done { background: var(--good-bg); color: var(--good); }
.tkj-track-step.is-done .tkj-track-dot { background: var(--good); border-color: var(--good); color: #fff; }
.tkj-track-step.is-now { background: var(--tint); color: var(--royal); outline: 2px solid var(--royal); outline-offset: -2px; }
.tkj-track-step.is-now .tkj-track-dot { border-color: var(--royal); background: #fff; box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 10px var(--royal); }
.tkj-resume-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: .25rem; }
.tkj-resume-go { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-width: 14rem;
    box-shadow: 0 6px 16px rgba(17, 57, 114, .22); transition: transform .16s ease, box-shadow .16s ease; }
.tkj-resume-go:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(17, 57, 114, .28); }
.tkj-resume-go:active { transform: translateY(0); box-shadow: 0 4px 12px rgba(17, 57, 114, .22); }
/* the arrow leans toward where the tap goes; it is the only motion on the card */
.tkj-resume-go .tkl-arrow { transition: transform .16s ease; }
.tkj-resume-go:hover .tkl-arrow { transform: translateX(-.15rem); }
[dir="ltr"] .tkj-resume-go:hover .tkl-arrow { transform: translateX(.15rem); }
@media (prefers-reduced-motion: reduce) {
    .tkj-resume-go, .tkj-resume-go .tkl-arrow { transition: none; }
    .tkj-resume-go:hover { transform: none; }
    .tkj-resume-go:hover .tkl-arrow { transform: none; }
}
.tkj-resume-actions .tkq-actions { margin-top: 0; }

/* the path */
.tkj-path .tkc-h2 { margin: .5rem 0 .25rem; }
.tkj-path-lead { margin: 0 0 1rem; color: var(--muted); font-size: .95rem; }
.tkj-unit + .tkj-unit { margin-top: 1.5rem; }
.tkj-unit-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-bottom: .75rem;
    padding-bottom: .5rem; border-bottom: 1px solid var(--line); }
.tkj-unit-title { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--royal); }
.tkj-unit.is-done .tkj-unit-title { color: var(--good); }
.tkj-unit-count { color: var(--muted); font-size: .88rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.tkj-stops { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tkj-stop { position: relative; display: grid; grid-template-columns: var(--node) minmax(0, 1fr); gap: .85rem; padding-bottom: .9rem; }
/* the line between one node and the next; green once the lesson above it is done */
.tkj-stop:not(:last-child)::before { content: ""; position: absolute; inset-inline-start: calc(var(--node) / 2 - 1.5px); top: var(--node);
    bottom: 0; width: 3px; border-radius: 3px; background: var(--path); }
.tkj-stop.is-done:not(:last-child)::before { background: var(--path-done); }
.tkj-node { position: relative; z-index: 1; display: grid; place-items: center; width: var(--node); height: var(--node); border-radius: 50%;
    background: #fff; border: 2px solid #C9D3E3; color: var(--royal); font-weight: 700; font-variant-numeric: tabular-nums; }
.tkj-node .tk-icon { width: 18px; height: 18px; }
.tkj-stop.is-started .tkj-node { border-color: var(--royal); }
.tkj-stop.is-done .tkj-node { background: var(--good); border-color: var(--good); color: #fff; }
.tkj-stop.is-next .tkj-node { background: var(--royal); border-color: var(--royal); color: #fff; box-shadow: 0 0 0 5px rgba(17, 57, 114, .15); }
.tkj-stop.is-locked .tkj-node { background: #F3F6FB; border-color: #DCE3EE; color: #7A889C; }
.tkj-card { display: flex; flex-direction: column; gap: .45rem; min-width: 0; padding: .9rem 1.1rem; border-radius: 18px;
    background: #fff; border: 1px solid var(--line); transition: border-color .15s ease, box-shadow .15s ease; }
.tkj-card:hover { border-color: #C9D3E3; box-shadow: 0 8px 22px rgba(15, 27, 45, .06); }
.tkj-stop.is-next .tkj-card { border: 2px solid var(--royal); }
.tkj-stop.is-locked .tkj-card { background: #FAFBFD; }
.tkj-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; color: var(--muted); font-size: .82rem; font-weight: 600; }
.tkj-title { color: var(--ink); font-size: 1.02rem; font-weight: 700; line-height: 1.5; text-decoration: none; }
.tkj-title:hover { color: var(--royal); text-decoration: underline; }
.tkj-stop.is-locked .tkj-title { color: #4A5870; }
.tkj-sum { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.7; }
.tkj-steps { list-style: none; margin: .15rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.tkj-step { display: inline-flex; align-items: center; gap: .35rem; min-height: 36px; padding: .25rem .75rem; border-radius: 999px;
    background: #F3F6FB; color: #3F4E66; font-size: .84rem; font-weight: 600; text-decoration: none; border: 1px solid transparent; }
.tkj-step:hover { border-color: var(--royal); color: var(--royal); text-decoration: none; }
.tkj-step .tk-icon { width: 16px; height: 16px; }
.tkj-step.is-done { background: var(--good-bg); color: var(--good); }
.tkj-step.is-locked { background: #F3F6FB; color: #7A889C; }
.tkj-step-check { font-weight: 700; }
@media (pointer: coarse) { .tkj-step { min-height: 44px; } }

/* «ملفات الدرس» beside its chip: the lesson's own files without leaving the page. A click or a tap on the arrow
   opens the list, and the keyboard opens it the same way — the disclosure does both itself, with no script and no
   hover. The chip beside it stays a plain link to the step page for anyone who opens neither. */
.tkj-step-item { position: relative; display: inline-flex; align-items: stretch; }
.tkj-step.has-files { padding-inline-end: .5rem; border-start-end-radius: 0; border-end-end-radius: 0; }
.tkj-filesdd { display: flex; }
.tkj-filesdd-btn { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 36px; padding-inline: .4rem; background: #F3F6FB; color: #3F4E66;
    border: 1px solid transparent; border-inline-start: 1px solid var(--line);
    border-start-end-radius: 999px; border-end-end-radius: 999px; }
.tkj-filesdd-btn::-webkit-details-marker { display: none; }
.tkj-filesdd-btn:hover { border-color: var(--royal); color: var(--royal); }
.tkj-filesdd-btn:focus-visible { outline: 3px solid var(--royal); outline-offset: 2px; }
.tkj-filesdd[open] > .tkj-filesdd-btn { background: var(--tint); color: var(--royal); }
.tkj-filesdd-chev { width: .45rem; height: .45rem; border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor;
    transform: rotate(45deg); margin-block-start: -.2rem; transition: transform .18s ease; }
/* the two borders swap sides in RTL, so the corner is turned the other way and the arrow still points down */
[dir="rtl"] .tkj-filesdd-chev { transform: rotate(-45deg); }
.tkj-filesdd[open] .tkj-filesdd-chev { transform: rotate(-135deg); margin-block-start: .2rem; }
[dir="rtl"] .tkj-filesdd[open] .tkj-filesdd-chev { transform: rotate(135deg); }
@media (prefers-reduced-motion: reduce) { .tkj-filesdd-chev { transition: none; } }
@media (pointer: coarse) { .tkj-filesdd-btn { min-height: 44px; } }
/* the list itself: hidden until the disclosure is opened, said here rather than left to the browser, because a
   browser that folds a closed disclosure away with ::details-content alone would still lay this one out */
.tkj-files { display: none; position: absolute; z-index: 30; inset-block-start: calc(100% + .35rem); inset-inline-start: 0;
    min-inline-size: 15rem; max-inline-size: min(22rem, 80vw); list-style: none; margin: 0; padding: .35rem;
    background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 10px 28px rgba(15, 27, 45, .12); }
.tkj-filesdd[open] > .tkj-files { display: block; }
.tkj-file { display: flex; align-items: center; gap: .55rem; min-height: 44px; padding: .4rem .6rem; border-radius: 12px;
    color: var(--ink); font-size: .88rem; font-weight: 600; text-decoration: none; }
.tkj-file:hover { background: var(--tint); color: var(--royal); text-decoration: none; }
.tkj-file.is-locked { color: #4A5870; }
.tkj-file-name { min-width: 0; overflow-wrap: anywhere; }
.tkj-file-check { flex: none; color: var(--good-ink); font-weight: 800; }
.tkj-file-lock { flex: none; display: inline-flex; color: var(--muted); }
.tkj-file-lock svg { width: 16px; height: 16px; }

/* sessions panel heading (the panel's own frame is set with .tkc-livedd-panel above) */
.tkc-livedd-panel .tkc-h2 { font-size: 1.1rem; }
.tkc-h2 { margin: 1.25rem 0 .75rem; font-size: 1.3rem; font-weight: 700; }
.tkc-bar { display: block; height: 8px; border-radius: 999px; background: #EEF2F8; overflow: hidden; }
.tkc-bar > span { display: block; height: 100%; min-width: 4px; border-radius: inherit; background: var(--royal); }

/* In an Arabic page an English title keeps its own letter order (plaintext) but lines up with the Arabic around it. */
[dir="rtl"] :is(.tkl-title, .tkl-item-title, .tkl-side-name, .tkc-title, .tkj-title, .tkj-resume-title, .tkj-live-name) { text-align: right; }
[dir="ltr"] :is(.tkl-title, .tkl-item-title, .tkl-side-name, .tkc-title, .tkj-title, .tkj-resume-title, .tkj-live-name) { text-align: left; }

/* The lesson's name, once.
   A student gets the app layout, which has no page header at all. Anyone who can edit the course keeps
   Boost's layout for its tools — and Boost puts the section's name in its page header, which is the same name
   the lesson page prints again just below it, under «الدرس N من M». The course page does the same with the
   course's name. The breadcrumb above still names both, so dropping the middle heading loses nothing and the
   header keeps its buttons and its image. (Reported on the live site, 29 September 2026.) */
body#page-course-view-thinkera .page-header-headings,
body#page-course-view-section-thinkera .page-header-headings { display: none; }

/* An activity's heading sits over the whole card — the player, the file viewer, the H5P frame — so it is
   centred over it rather than pushed against one edge. (28 September 2026.) */
[dir] .tkl-item-title { text-align: center; }
/* The practice card's heading is centred too (owner's call, 28 September 2026). It is the first line of the
   text column beside the icon, so the column itself is centred with it — heading, lead and facts together —
   rather than leaving a centred heading over a paragraph that is not. */
.tkl-practice-text { text-align: center; }
.tkl-practice-text .tkl-facts { justify-content: center; }
.tkl-practice-actions { align-items: center; }
@media (min-width: 576px) { .tkl-practice-actions { justify-content: center; } }

/* «عندي سؤال», the instructor's inbox, and «من أسئلة الطلبة» */
.tkq-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin-top: .75rem; }
.tkq-actions .tk-btn { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; }
.tkq-mine { color: var(--muted, #5B6B82); font-weight: 600; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.tkq-mine:hover { color: var(--royal, #113972); }
.tkq-badge { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; padding-inline: .35rem;
    border-radius: 999px; background: #B3372F; color: #fff; font-size: .75rem; font-weight: 700; }
.tkq-faq { margin-top: 2rem; }
.tkq-faq-lead { color: var(--muted, #5B6B82); margin: -.25rem 0 1rem; }
.tkq-faq-item { background: #fff; border: 1px solid var(--line, #E3E9F2); border-radius: 16px; margin-bottom: .6rem; }
.tkq-faq-item summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: .4rem .75rem; padding: .9rem 1.1rem; min-height: 56px; font-weight: 700; }
.tkq-faq-item summary::-webkit-details-marker { display: none; }
.tkq-faq-item summary::after { content: "+"; font-size: 1.3rem; color: var(--royal, #113972); line-height: 1; }
.tkq-faq-item[open] summary::after { content: "–"; }
.tkq-faq-q { flex: 1 1 16rem; }
.tkq-faq-lesson { font-size: .8rem; font-weight: 600; color: var(--muted, #5B6B82); background: #F3F6FB; padding: .15rem .55rem; border-radius: 999px; }
.tkq-faq-a { padding: 0 1.1rem 1rem; color: var(--ink, #0F1B2D); line-height: 1.8; white-space: pre-line; }

/* the live sessions on the course home */
.tkc-live { margin: 1.5rem 0 .5rem; display: flex; flex-direction: column; gap: .75rem; }
.tkc-live-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.tkc-live-head .tkc-h2 { margin: 0; }
.tkc-live-head a { font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.tkc-live-none { margin: 0; color: #52627A; }
.tkc-live-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.tkc-live-actions:empty { display: none; }

/* the recorded sessions on the course home */
.tkc-rec-title { margin: .75rem 0 0; font-size: 1rem; font-weight: 700; }
.tkc-recs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.tkc-rec {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem .9rem; align-items: center;
    padding: .75rem .9rem; border: 1px solid #E3E9F2; border-radius: 16px; background: #fff;
}
.tkc-rec-date {
    inline-size: 52px; block-size: 56px; border-radius: 12px; display: flex; flex-direction: column; align-items: center;
    justify-content: center; background: #FBF1DE; color: #8A5A10; font-size: .75rem; font-weight: 600; line-height: 1.15;
}
.tkc-rec-date b { font-size: 1.25rem; }
.tkc-rec-body { min-width: 0; display: flex; flex-direction: column; }
.tkc-rec-name { font-weight: 700; color: #0F1B2D; text-decoration: none; line-height: 1.45; }
.tkc-rec-name:hover { color: #113972; text-decoration: underline; }
.tkc-rec-meta { color: #52627A; font-size: .88rem; }
.tkc-rec-play { grid-column: 1 / -1; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 44px; }
@media (min-width: 640px) {
    .tkc-rec { grid-template-columns: auto minmax(0, 1fr) auto; }
    .tkc-rec-play { grid-column: auto; }
}

/* the session cards used to stack for the 360px column; the panel is full width now, so they keep their own layout */

/* recordings: date and name on one row, the play icon alone at the end of the card (left in Arabic) */
.tkj .tkc-rec { grid-template-columns: auto minmax(0, 1fr); }
.tkj .tkc-rec-play { grid-column: 1 / -1; justify-self: end; display: inline-grid; place-items: center; width: 44px; height: 44px;
    border-radius: 50%; background: var(--tint); color: var(--royal); border: 1px solid transparent; text-decoration: none; }
.tkj .tkc-rec-play:hover { background: var(--royal); color: #fff; }
.tkj .tkc-rec-play svg { width: 22px; height: 22px; }

/* the unit's exams on the path: a stop of its own, not a numbered lesson */
.tkj-exams .tkj-node { background: #FBF1DE; border-color: #E0A542; color: #8A5A10; }
.tkj-exams.is-locked .tkj-node { background: #F3F6FB; border-color: #DCE3EE; color: #7A889C; }
.tkj-exams .tkj-card { background: linear-gradient(0deg, #FFFCF6, #FFFCF6); border-style: dashed; border-color: #E6C88F; }
.tkj-exams.is-locked .tkj-card { background: #FAFBFD; border-color: #DCE3EE; }
.tkl-side-num .tk-icon { width: 16px; height: 16px; }

/* ── «اسأل الـ AI»: the course assistant, floating over the lesson ──────────────────────────────────────
   A chat box rather than a panel in the page: the student is reading a line and asks about that line, so the
   box has to be reachable without leaving the place they were reading, and has to leave without moving it.

   It says what it is on its face — the header line and the first bubble both say it answers from this course
   only — because a student who takes it for a general chatbot asks it general things, is told «not in the
   lesson», and stops trusting the answers that are right.

   Named .tkai, not .tka: .tka is the account page's own block in local_thinkera, and plugin stylesheets are
   served together, so the old name was styling that page from here. */
.tkai {
    /* the lesson's palette is declared on .tkl; a fixed box carries its own copy so it keeps its colours
       wherever in the page it is mounted */
    --ink: #0F1B2D; --muted: #5B6B82; --line: #E3E9F2; --line-strong: #C9D3E3;
    --royal: #113972; --royal-600: #17488E; --azure: #8FB3E6;
    /* The other corner is taken: the theme's quick links (.tkf) already float at the inline end, and on a
       phone the tab bar owns the bottom of the screen at z-index 1030. So this box lives at the inline start,
       sits under the tab bar in the stack, and is lifted clear of it at phone widths. */
    position: fixed; inset-block-end: calc(1.25rem + env(safe-area-inset-bottom));
    inset-inline-start: 1.25rem; z-index: 1029;
    display: flex; flex-direction: column-reverse; align-items: flex-start; gap: .75rem;
}

/* the button, and the same button as a close circle once the box is open */
.tkai-fab {
    display: inline-flex; align-items: center; gap: .55rem; min-height: 54px; padding: 0 1.2rem;
    border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 700; font-size: .95rem;
    background: linear-gradient(135deg, var(--royal-600), var(--royal)); color: #fff;
    box-shadow: 0 8px 22px rgba(17, 57, 114, .32), 0 2px 6px rgba(15, 27, 45, .16);
    transition: transform .18s ease, box-shadow .18s ease;
}
.tkai-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(17, 57, 114, .38); }
.tkai-fab:focus-visible { outline: 3px solid var(--azure); outline-offset: 3px; }
.tkai-fab-icon, .tkai-fab-x { display: inline-flex; }
.tkai-fab-x { display: none; }
.tkai.is-open .tkai-fab { width: 54px; padding: 0; justify-content: center; }
.tkai.is-open .tkai-fab-icon, .tkai.is-open .tkai-fab-label { display: none; }
.tkai.is-open .tkai-fab-x { display: inline-flex; }

.tkai-panel {
    width: min(23.5rem, calc(100vw - 2.5rem)); max-height: min(32rem, calc(100vh - 8rem));
    display: flex; flex-direction: column; overflow: hidden;
    background: #fff; border: 1px solid var(--line); border-radius: 22px;
    box-shadow: 0 24px 60px rgba(15, 27, 45, .22), 0 2px 8px rgba(15, 27, 45, .08);
    animation: tkai-in .2s ease-out;
}
.tkai-panel[hidden] { display: none; }
@keyframes tkai-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }

.tkai-head {
    display: flex; align-items: center; gap: .7rem; padding: .85rem 1rem; flex: none;
    background: linear-gradient(135deg, var(--royal-600), var(--royal)); color: #fff;
}
.tkai-avatar { flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 12px; background: rgba(255, 255, 255, .16); }
.tkai-headtext { flex: 1 1 auto; min-width: 0; }
.tkai-headtext h2 { margin: 0; font-size: 1rem; font-weight: 700; color: #fff; }
.tkai-headtext p { margin: .12rem 0 0; font-size: .76rem; color: rgba(255, 255, 255, .85);
    display: flex; align-items: center; gap: .35rem; }
.tkai-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #5BD69A;
    box-shadow: 0 0 0 3px rgba(91, 214, 154, .25); }
.tkai-x { flex: none; width: 34px; height: 34px; display: inline-flex; align-items: center;
    justify-content: center; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .12);
    color: #fff; cursor: pointer; }
.tkai-x:hover { background: rgba(255, 255, 255, .24); }
.tkai-x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.tkai-log { flex: 1 1 auto; overflow-y: auto; padding: 1rem; background: #F7F9FC;
    display: flex; flex-direction: column; gap: .7rem; }
.tkai-turn { max-width: 90%; }
.tkai-turn.is-me { align-self: flex-end; }
.tkai-text { padding: .65rem .9rem; border-radius: 16px; line-height: 1.65; font-size: .92rem;
    overflow-wrap: anywhere; }
/* what the student wrote, and what went wrong, are printed as text: their own line breaks are kept */
.tkai-turn.is-me .tkai-text, .tkai-turn.is-error .tkai-text { white-space: pre-wrap; }
.tkai-turn.is-me .tkai-text { background: var(--royal); color: #fff; border-end-end-radius: 6px; }
.tkai-turn.is-assist .tkai-text { background: #fff; color: var(--ink); border: 1px solid var(--line);
    border-end-start-radius: 6px; }
.tkai-turn.is-error .tkai-text { background: #FBECEA; color: #8A2B24; border: 1px solid #F0CFC9; }
.tkai-hint { margin: 0; font-size: .75rem; color: var(--muted); text-align: center; }

/* ── the answer's own shape ───────────────────────────────────────────────────────────────────────────
   The answer arrives as Markdown and is built into these elements by the module, so an explanation can
   carry a lead sentence, bullets and a bit of code instead of one grey slab of text. */
.tkai-text > :first-child { margin-block-start: 0; }
.tkai-text > :last-child { margin-block-end: 0; }
.tkai-text p { margin: 0 0 .55rem; }
.tkai-text h3, .tkai-text h4, .tkai-text h5 { margin: .8rem 0 .35rem; line-height: 1.4;
    font-weight: 700; color: var(--royal); }
.tkai-text h3 { font-size: 1.06rem; }
.tkai-text h4 { font-size: 1rem; }
/* «### » is the only heading the model is told it may use, so the smallest one still has to read as a
   heading: every level stays above the .92rem of the text around it */
.tkai-text h5 { font-size: .96rem; }
.tkai-text ul, .tkai-text ol { margin: 0 0 .55rem; padding-inline-start: 1.3rem; }
.tkai-text li { margin: 0 0 .3rem; }
.tkai-text li::marker { color: var(--royal); font-weight: 700; }
.tkai-text strong { font-weight: 700; color: var(--royal); }
.tkai-text code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .86em;
    background: var(--tint); color: var(--ink); border-radius: 6px; padding: .06em .34em; }
.tkai-text pre { margin: 0 0 .55rem; padding: .65rem .75rem; border-radius: 12px; background: #0F1B2D;
    color: #E6EDF7; overflow-x: auto; }
.tkai-text pre code { background: none; color: inherit; padding: 0; font-size: .82rem; line-height: 1.55; }
/* Code reads left to right whatever the sentence around it does — and this rule is kept out of the Arabic
   stylesheet's mirroring, which otherwise turns «direction: ltr» into «direction: rtl» and «text-align: left»
   into «right», and then prints «if x < 5:» as «:if x < 5». */
/*rtl:ignore*/
.tkai-text code, .tkai-text pre { direction: ltr; unicode-bidi: isolate; text-align: left; }
/* where an answer came from is said on its face, in words, never in a colour alone: «from the lesson X» when

   the course answered it somewhere else, «from outside the course» when the course did not answer it at all */
.tkai-badge { align-self: flex-start; margin-block-end: .3rem; padding: .12rem .6rem;
    font-size: .68rem; font-weight: 700; border-radius: 999px; border: 1px solid transparent; }
.tkai-badge.is-lesson { color: var(--royal); background: var(--tint); border-color: #C6D6EC; }
.tkai-badge.is-outside { color: #7A4E00; background: #FFF4DE; border-color: #ECD5A6; }

/* the course had no answer: the choice, and the two buttons that make it */
.tkai-offer { background: #fff; border: 1px dashed var(--line-strong); border-radius: 16px;
    padding: .75rem .85rem; }
.tkai-offer-q { margin: 0 0 .6rem; font-size: .88rem; font-weight: 600; color: var(--ink); }
.tkai-offer-btns { display: flex; flex-wrap: wrap; gap: .45rem; }
.tkai-btn { min-height: 38px; padding: 0 .95rem; border-radius: 999px; cursor: pointer;
    font: inherit; font-size: .85rem; font-weight: 700;
    border: 1px solid var(--line-strong); background: #fff; color: var(--ink); }
.tkai-btn-yes { background: var(--royal); border-color: var(--royal); color: #fff; }
.tkai-btn-yes:hover { background: var(--royal-600); }
.tkai-btn-no:hover { background: var(--tint); }
.tkai-btn:focus-visible { outline: 3px solid var(--azure); outline-offset: 2px; }

/* waiting: three dots rather than a sentence, because the sentence is read as an answer */
.tkai-typing { display: inline-flex; align-items: center; gap: .28rem; padding: .85rem .95rem;
    background: #fff; border: 1px solid var(--line); border-radius: 16px; border-end-start-radius: 6px; }
.tkai-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted);
    animation: tkai-blink 1.2s infinite ease-in-out; }
.tkai-typing i:nth-child(2) { animation-delay: .18s; }
.tkai-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes tkai-blink { 0%, 80%, 100% { opacity: .25; transform: translateY(0); }
    40% { opacity: .9; transform: translateY(-3px); } }

/* where the answer came from: a student who cannot trace an answer has to take it on trust */
.tkai-sources { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.tkai-sources li { font-size: .7rem; color: var(--muted); background: #fff; border: 1px solid var(--line);
    border-radius: 999px; padding: .12rem .55rem; }

.tkai-ask { display: flex; align-items: center; gap: .5rem; flex: none;
    padding: .75rem .85rem; background: #fff; border-top: 1px solid var(--line); }
.tkai-ask input {
    flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 .95rem; font-size: 16px; font-family: inherit;
    border: 1px solid var(--line-strong); border-radius: 999px; background: #F7F9FC; color: var(--ink);
}
.tkai-ask input:focus { outline: 3px solid var(--azure); outline-offset: 1px;
    border-color: var(--royal); background: #fff; }
.tkai-ask input:disabled { opacity: .65; }
.tkai-send { flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center;
    justify-content: center; border: 0; border-radius: 50%; background: var(--royal); color: #fff; cursor: pointer; }
.tkai-send:hover { background: var(--royal-600); }
.tkai-send:disabled { opacity: .5; cursor: default; }
.tkai-send:focus-visible { outline: 3px solid var(--azure); outline-offset: 2px; }
/* the plane flies the way the language reads */
[dir="rtl"] .tkai-send svg { transform: scaleX(-1); }

/* below md the theme shows its bottom tab bar, so the box starts above it rather than under it */
@media (max-width: 767.98px) {
    .tkai { inset-block-end: calc(76px + env(safe-area-inset-bottom)); }
}
/* on a phone the box is a sheet across the width; the button stays a circle at its corner */
@media (max-width: 520px) {
    .tkai { inset-inline: .75rem; align-items: stretch; }
    .tkai-fab { align-self: flex-start; }
    .tkai-panel { width: auto; max-height: min(70vh, 30rem); }
}
@media (prefers-reduced-motion: reduce) {
    .tkai-panel { animation: none; }
    .tkai-fab { transition: none; }
    .tkai-fab:hover { transform: none; }
    .tkai-typing i { animation: none; opacity: .5; }
}
@media print { .tkai { display: none; } }

/* each turn stacks its own parts — the «from outside the course» badge, the answer, the sources — and the
   bubble is only as wide as what is in it */
.tkai-turn { display: flex; flex-direction: column; align-items: flex-start; }
.tkai-turn.is-me { align-items: flex-end; }

/* bigger and smaller, remembered per browser by the module */
.tkai-size { flex: none; width: 34px; height: 34px; display: inline-flex; align-items: center;
    justify-content: center; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .12);
    color: #fff; cursor: pointer; }
.tkai-size:hover { background: rgba(255, 255, 255, .24); }
.tkai-size:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tkai-i-shrink { display: none; }
.tkai.is-big .tkai-i-grow { display: none; }
.tkai.is-big .tkai-i-shrink { display: inline; }
@media (min-width: 521px) {
    .tkai.is-big .tkai-panel { width: min(34rem, calc(100vw - 2.5rem));
        max-height: min(44rem, calc(100vh - 6rem)); }
    .tkai.is-big .tkai-text { font-size: .98rem; }
}
/* on a phone the sheet is already as wide as it can be, so bigger means taller */
@media (max-width: 520px) {
    .tkai.is-big .tkai-panel { max-height: min(86vh, 44rem); }
}


/* ---------------------------------------------------------------- the visitor's invitation
   Shown at the foot of the course page to someone reading it without an account (see
   learn.php's `isguest`). It is the last thing on the page on purpose: it comes after the
   visitor has had the lesson, not before. */
.tkc-guest {
  margin-block-start: var(--tk-space-8, 4rem);
  padding: var(--tk-space-7, 3rem) var(--tk-space-6, 2rem);
  border-radius: var(--tk-radius-lg, 22px);
  background: var(--tk-bg-brand, #113972);
  color: var(--tk-text-on-brand, #fff);
  text-align: center;
}
.tkc-guest-title { margin: 0 0 var(--tk-space-3, .75rem); color: inherit; font-size: var(--tk-size-lg, 1.5rem); }
.tkc-guest-text {
  margin: 0 auto var(--tk-space-5, 1.5rem); max-width: 62ch;
  color: var(--tk-azure-100, #D7E3F5); line-height: var(--tk-leading-body, 1.75);
}
.tkc-guest-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding-inline: var(--tk-space-6, 2rem);
  border-radius: var(--tk-radius-pill, 999px);
  background: var(--tk-bg-surface, #fff); color: var(--tk-text-brand, #113972);
  font-weight: 700; text-decoration: none;
}
.tkc-guest-btn:hover { background: var(--tk-bg-soft, #EDF3FF); color: var(--tk-text-brand, #113972); }
.tkc-guest-note { margin: var(--tk-space-4, 1rem) 0 0; color: var(--tk-azure-300, #8FB3E6); font-size: var(--tk-size-sm, .9375rem); }