// Thinkera Academy: the student app. Mobile first, right-to-left first; logical properties only (inline-start/end),
// so the same rules hold in Arabic and English. Every tap target is at least 44px, every form field 16px text.

$tk-app-bg: #F3F6FB;
$tk-line: #E3E9F2;
$tk-line-strong: #C9D3E3;
$tk-tint: #E9EFF9;
$tk-good-bg: #E9F6EF;
$tk-bad-bg: #FBECEA;
$tk-shadow: 0 1px 2px rgba(15, 27, 45, .04), 0 8px 24px rgba(15, 27, 45, .05);

// ---------------------------------------------------------------- the frame
body.tk-app {
    background: $tk-app-bg;
    color: #1F2A3C;
    @include media-breakpoint-down(md) { padding-bottom: 68px; }   // room for the tab bar

    #page-wrapper { min-height: 100vh; display: flex; flex-direction: column; }
    #page { margin: 0 !important; padding: 0 !important; flex: 1 0 auto; display: flex; flex-direction: column; }
    // Moodle chrome that must never show in the app
    #page-header, .secondary-navigation, .activity-navigation, nav.breadcrumb, .breadcrumb,
    #page-footer, .btn-footer-popover, .drawer-toggles, .usermenu, .tool_dataprivacy, .helplink-mobileapp { display: none !important; }
}

.tk-appbar {
    position: sticky; top: 0; z-index: 1030;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid $tk-line;
}
.tk-appbar-inner {
    max-width: 1180px; height: 64px; margin: 0 auto; padding: 0 1rem;
    display: flex; align-items: center; gap: 1.25rem;
}
.tk-appbar-brand { display: flex; align-items: center; flex: none; min-height: 44px; img { height: 32px; width: auto; } }
.tk-appbar-nav {
    display: none;
    @include media-breakpoint-up(md) { display: block; }
    ul { display: flex; gap: .25rem; list-style: none; margin: 0; padding: 0; }
    a {
        display: block; padding: .5rem 1rem; border-radius: 999px;
        color: $tk-ink; font-weight: 600; text-decoration: none;
        &:hover { background: $tk-app-bg; }
        &.is-active { background: $tk-tint; color: $tk-royal; }
    }
}
.tk-appbar-tools { margin-inline-start: auto; display: flex; align-items: center; gap: .5rem; }
.tk-appbar-plugins {
    display: flex; align-items: center;
    .popover-region-toggle { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; }
    .popover-region-toggle:hover { background: $tk-app-bg; }
    .popover-region-container { border-radius: 16px; border-color: $tk-line; box-shadow: 0 16px 40px rgba(15, 27, 45, .12); }
}

// «رصيد المحفظة» in the top bar, in both frames. It reads as a figure, not a button: a student glances at it to
// know whether a curriculum is one tap away or a transfer away, and presses it only when it is the second.
// #113972 on #E9EFF9 is 8.0:1; the amount never wraps, and on a phone the words give way to the figure.
.tk-wallet {
    display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: 0 .75rem;
    border-radius: 999px; background: $tk-tint; color: $tk-royal; font-weight: 700; font-size: .92rem;
    text-decoration: none; white-space: nowrap;
    &:hover, &:focus { background: #DCE6F6; color: $tk-royal; text-decoration: none; }
}
.tk-wallet-icon { display: inline-grid; place-items: center; }
.tk-wallet-amount { unicode-bidi: plaintext; }
.tk-wallet-label {
    @include media-breakpoint-down(lg) { display: none; }      // the link’s aria-label still says the words
}
// A phone's top bar already carries the brand, two bells and the avatar, and the chip pushed the row past the
// screen: the page scrolled sideways. Here it keeps its 44px target and gives up its padding and a little type.
@include media-breakpoint-down(sm) {
    .tk-appbar-inner { gap: .5rem; padding: 0 .6rem; }
    .tk-wallet { padding: 0 .5rem; gap: .25rem; font-size: .85rem; }
}
.tk-avatar-btn {
    width: 40px; height: 40px; padding: 0; border: 2px solid #fff; border-radius: 50%; overflow: hidden;
    background: $tk-tint; box-shadow: 0 0 0 1px $tk-line;
    img { width: 100%; height: 100%; object-fit: cover; }
}
.tk-usermenu-panel {
    min-width: 270px; padding: .5rem; border: 1px solid $tk-line; border-radius: 16px;
    box-shadow: 0 16px 40px rgba(15, 27, 45, .14);
    .dropdown-item { border-radius: 10px; padding: .7rem .8rem; font-weight: 500; }
    .tk-usermenu-out { color: $tk-bad; }
}
.tk-usermenu-head {
    display: flex; align-items: center; gap: .75rem;
    padding: .5rem .5rem .8rem; margin-bottom: .35rem; border-bottom: 1px solid $tk-line;
    img { border-radius: 50%; flex: none; }
    strong { display: block; color: $tk-ink; }
    span { display: block; font-size: .85rem; color: $tk-muted; }
}

.tk-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 44px; padding: 0 1.1rem; border-radius: 12px; border: 1px solid transparent;
    font-weight: 600; text-decoration: none; white-space: nowrap;
    &:hover { text-decoration: none; }
}
.tk-btn-primary { background: $tk-royal; color: #fff; &:hover { background: $tk-royal-600; color: #fff; } }
.tk-btn-ghost { background: #fff; border-color: $tk-line-strong; color: $tk-royal; &:hover { background: $tk-tint; color: $tk-royal; } }
.tk-btn-quiet { color: $tk-ink; &:hover { background: $tk-app-bg; color: $tk-ink; } }
.tk-btn-danger { background: $tk-bad; color: #fff; &:hover { background: #9A2B24; color: #fff; } }  // #B3372F on white is 5.99:1
.tk-appbar .tk-btn-quiet { @include media-breakpoint-down(sm) { display: none; } }

.tk-page-content { width: 100%; max-width: 1180px; margin: 0 auto; padding: 1.25rem 1rem 2rem;
    @include media-breakpoint-up(md) { padding: 2rem 1.5rem 3rem; } }
.tk-page-content:not(.is-format) .tk-region-main { max-width: 880px; margin: 0 auto; }
.tk-app-practice .tk-page-content .tk-region-main { max-width: 760px; }

.tk-back {
    display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; margin-bottom: .25rem;
    color: $tk-muted; font-weight: 600; font-size: .92rem; text-decoration: none;
    &:hover { color: $tk-royal; text-decoration: none; }
}
.tk-back-arrow::before { content: "\2190"; }
[dir="rtl"] .tk-back-arrow::before { content: "\2192"; }
.tk-page-title {
    margin: 0 0 1.25rem; font-size: 1.55rem; font-weight: 700; line-height: 1.35; color: $tk-ink; unicode-bidi: plaintext;
    @include media-breakpoint-up(md) { font-size: 2rem; }
}

.tk-footer {
    margin-top: auto; padding: 2rem 1rem;
    display: flex; flex-direction: column; align-items: center; gap: .35rem; color: $tk-muted;
    img { opacity: .55; }
    small { font-size: .875rem; }      // read on a phone, not skimmed on a desktop
    .tk-footer-contact { margin: .25rem 0 0; max-width: 38ch; text-align: center; font-size: .875rem; }
    .tk-guide { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: 0 .9rem; margin-top: .25rem;
        border: 1px solid $tk-line; border-radius: 999px; background: #fff; color: $tk-royal; font-weight: 700; font-size: .9rem;
        text-decoration: none; }
    .tk-guide:hover, .tk-guide:focus { text-decoration: none; border-color: $tk-royal; color: $tk-royal; }
}

// Moodle's own notification popover is sized for a desktop: on a phone it hangs from the top bar, screen-wide,
// instead of off the side of the screen
.popover-region-container { max-inline-size: calc(100vw - 1.5rem); }
@include media-breakpoint-down(md) {
    .popover-region .popover-region-container {
        position: fixed; inset-inline: .75rem; inset-block-start: 60px; inline-size: auto; max-inline-size: none;
        max-block-size: calc(100vh - 140px); overflow-y: auto;
    }
}
.popover-region-content-container, .popover-region-content, .all-notifications, .notifications { max-inline-size: 100%; }
.popover-region-container .see-all-link { min-height: 44px; display: flex; align-items: center; justify-content: center; }

// ── the whole notifications page (message/output/popup/notifications.php) ───────────────────────────────
// The page Moodle ships is two bare panes with a hairline between them: a narrow list squeezed against the
// edge, and a grey rectangle six hundred pixels tall with one sentence floating in the middle of it. Both
// panes are cards here, the list rows are the same rows as the bell's panel (they share the template), and
// on a phone the two stack instead of fighting over 390 px. 29 September 2026.
body#page-message-output-popup-notifications {
    // Moodle sets this page's heading to the reader's own name, so the app layout printed «Student Reda»
    // over a page that already says «الإشعارات» two lines below. One title is enough, and it is that one.
    h1.tk-page-title { display: none; }

    // Boost gives the area a fixed 600px height and lays the two panes out as 300px-wide inline blocks; on a
    // phone it slides one over the other with absolute positioning and a toggle button. The sliding is left
    // alone — it works, and fighting it would break the toggle — and the desktop layout is rebuilt as a grid
    // that sizes to its content.
    @include media-breakpoint-up(md) {
        .notification-area {
            display: grid; gap: 1rem; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
            height: auto; border: 0; background: none;
        }
        .notification-area > .control-area,
        .notification-area > .content-area {
            display: block; width: auto; height: auto; border-right: 0; overflow: visible;
        }
    }

    .notification-area .control-area,
    .notification-area .content-area {
        border: 1px solid $tk-line; border-radius: 18px; background: #fff; overflow: hidden;
        box-shadow: 0 1px 2px rgba(15, 27, 45, .04), 0 10px 26px rgba(15, 27, 45, .05);
    }
    .notification-area .control-area { padding: 0; }
    .notification-area .control-area > .content {
        max-height: min(60vh, 32rem); overflow-y: auto;
    }

    // the rows come from the same template as the bell's panel, so they are already tiles and dots
    .content-item-container { border-bottom: 1px solid $tk-line; padding: 0; }
    .content-item-container:last-child { border-bottom: 0; }
    .content-item-container:hover { background: $tk-app-bg; }
    .tk-notif-link { display: flex; align-items: flex-start; gap: .7rem; padding: .85rem 1rem .5rem;
        color: $tk-ink; text-decoration: none; }
    .tk-notif-icon { flex: none; inline-size: 40px; block-size: 40px; display: grid; place-items: center;
        border-radius: 12px; background: $tk-app-bg; color: $tk-muted; }
    .tk-notif-body { flex: 1 1 auto; min-inline-size: 0; }
    .tk-notif-body .content-item-body, .tk-notif-body .content-item-footer { display: block; }
    .notification-message { font-size: .95rem; font-weight: 600; line-height: 1.5; }
    .content-item-footer .timestamp { font-size: .78rem; color: $tk-muted; }
    .tk-notif-dot { flex: none; inline-size: 8px; block-size: 8px; margin-block-start: .55rem;
        border-radius: 50%; background: $tk-royal; }
    .content-item-container.unread {
        background: rgba(17, 57, 114, .035);

        .tk-notif-icon { background: rgba(17, 57, 114, .10); color: $tk-royal; }
        .notification-message { font-weight: 700; }
    }
    .tk-notif-more { display: block; text-align: start; padding-block: 0 .7rem;
        padding-inline: calc(1rem + 40px + .7rem) 1rem; font-size: .78rem; font-weight: 600;
        color: $tk-azure-700; }

    // the reading pane: the notification itself, with room to breathe and its link at the end
    .notification-area .content-area { display: flex; flex-direction: column; min-height: 16rem; }
    .notification-area .content-area > .header { padding: 1.1rem 1.35rem .35rem; font-weight: 700; }
    .notification-area .content-area > .content { flex: 1 1 auto; padding: .35rem 1.35rem 1rem; line-height: 1.7; }
    .notification-area .content-area > .footer { padding: 0 1.35rem 1.25rem; }
    .notification-area .content-area > .footer a { font-weight: 600; }
    // «choose a notification to read it» was a sentence adrift in a tall grey box. Only the padding and the
    // colour are set here: whether it shows at all is Boost's own logic, and a display rule of ours printed
    // «you have no notifications» underneath two of them.
    .notification-area .empty-text { padding: 3rem 1.5rem; color: $tk-muted; text-align: center; }
    // the button that switches panes belongs to phones, where only one pane shows at a time
    .notification-area .toggle-mode { padding: .5rem .75rem 0; }
    @include media-breakpoint-up(md) { .notification-area .toggle-mode { display: none; } }
}

// ── the bell's panel ────────────────────────────────────────────────────────────────────────────────────
// Boost gives the panel a fixed height, so two notifications sat at the top of an empty white sheet; and
// core's row nests a link inside a link, which is invalid HTML — the browser lifts the inner one out, and
// that is what dropped «معاينة الإشعار الكامل» onto a loose line of its own. The row is rebuilt in
// templates/message_popup/notification_content_item.mustache; the panel is sized to its content here.
.popover-region-notifications {
    .popover-region-container {
        height: auto; max-height: unquote("min(70vh, 34rem)"); inline-size: 24rem;
        display: flex; flex-direction: column; border-radius: 18px; overflow: hidden;
    }

    .popover-region-header-container {
        display: flex; align-items: center; gap: .25rem; height: auto; min-height: 56px; line-height: 1.3;
        padding: .5rem; padding-inline-start: 1rem; border-bottom: 1px solid $tk-line; background: #fff;
    }
    .popover-region-header-text { margin: 0; font-size: 1rem; font-weight: 700; color: $tk-ink; }
    .popover-region-header-actions {
        margin-inline-start: auto; display: flex; align-items: center; gap: .15rem;

        .btn {
            min-inline-size: 36px; min-height: 36px; display: inline-flex; align-items: center;
            justify-content: center; border-radius: 50%; color: $tk-muted;
        }
        .btn:hover, .btn:focus { background: $tk-app-bg; color: $tk-royal; }
    }

    // the list sizes itself; the panel scrolls only when it is taller than the screen allows
    .popover-region-content-container { height: auto; flex: 1 1 auto; min-height: 0; }
    // «ليس لديك اشعارات» sits in the page whether or not there is anything to show, and Boost reveals it
    // with `.all-notifications:empty + .empty-message`. The styling has to hang off that selector: a plain
    // rule on .empty-message printed it under two unread notifications.
    .empty-message { display: none; }
    .all-notifications:empty + .empty-message {
        display: grid; place-items: center; padding: 2.5rem 1rem; color: $tk-muted; text-align: center;
    }

    .content-item-container { border-bottom: 1px solid $tk-line; padding: 0; }
    .content-item-container:last-child { border-bottom: 0; }
    .content-item-container:hover { background: $tk-app-bg; }

    .tk-notif-link {
        display: flex; align-items: flex-start; gap: .7rem; padding: .85rem 1rem .5rem;
        color: $tk-ink; text-decoration: none;
    }
    .tk-notif-link:hover, .tk-notif-link:focus { color: $tk-ink; text-decoration: none; }
    .tk-notif-icon {
        flex: none; inline-size: 40px; block-size: 40px; display: grid; place-items: center;
        border-radius: 12px; background: $tk-app-bg; color: $tk-muted;
    }
    .tk-notif-body { flex: 1 1 auto; min-inline-size: 0; }
    .tk-notif-body .content-item-body, .tk-notif-body .content-item-footer { display: block; }
    // two lines and then an ellipsis: a long subject used to push the time out of the row
    .notification-message {
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
        font-size: .925rem; font-weight: 600; line-height: 1.45; color: inherit;
    }
    .content-item-footer .timestamp { font-size: .78rem; color: $tk-muted; }
    .tk-notif-dot {
        flex: none; inline-size: 8px; block-size: 8px; margin-block-start: .55rem; border-radius: 50%;
        background: $tk-royal;
    }
    // unread: the tile itself carries the brand colour, so the state reads before the dot does
    .content-item-container.unread {
        background: rgba(17, 57, 114, .035);

        .tk-notif-icon { background: rgba(17, 57, 114, .10); color: $tk-royal; }
        .notification-message { font-weight: 700; }
    }
    .tk-notif-more {
        display: block; text-align: start; padding-block: 0 .7rem;
        padding-inline: calc(1rem + 40px + .7rem) 1rem;
        font-size: .78rem; font-weight: 600; color: $tk-azure-700;
    }
    .tk-notif-more:hover, .tk-notif-more:focus { color: $tk-royal; text-decoration: underline; }

    .see-all-link {
        flex: none; display: block; min-height: 0; border-top: 1px solid $tk-line; background: #fff;
        text-decoration: none;

        .popover-region-footer-container { height: auto; }
        .popover-region-seeall-text {
            min-height: 48px; display: flex; align-items: center; justify-content: center;
            font-weight: 700; color: $tk-royal;
        }
    }
    .see-all-link:hover .popover-region-seeall-text { background: $tk-app-bg; }
}

// an icon-only link is still a 44px target
.tk-app .btn-link.p-0, .tk-app a.icon-no-margin { min-inline-size: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center; }

.tk-tabbar {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 1030;
    display: flex; background: #fff; border-top: 1px solid $tk-line;
    padding-bottom: env(safe-area-inset-bottom);
    @include media-breakpoint-up(md) { display: none; }
}
.tk-tab {
    flex: 1; min-height: 60px; padding: .45rem 0 .4rem;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    color: #6B7A90; font-size: .75rem; font-weight: 600; text-decoration: none;
    &:hover { text-decoration: none; color: $tk-royal; }
    &.is-active { color: $tk-royal; .tk-tab-icon { background: $tk-tint; } }
}
.tk-tab-icon { display: grid; place-items: center; width: 56px; height: 30px; border-radius: 999px; }

// the student's initial when there is no photo
.tk-initial {
    display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
    background: $tk-royal; color: #fff; font-weight: 700; font-size: 1.05rem;
}
.tk-usermenu-head .tk-initial { width: 48px; height: 48px; flex: none; font-size: 1.3rem; }

// ---------------------------------------------------------------- general content in the app
.tk-app {
    .card, .tk-activity-header .activity-header { border: 1px solid $tk-line; border-radius: 18px; box-shadow: $tk-shadow; }
    .tk-activity-header .activity-header { background: #fff; padding: 1rem 1.25rem; margin-bottom: 1rem; }
    .generaltable { background: #fff; border-radius: 14px; overflow: hidden; border: 1px solid $tk-line; }
    .generaltable th, .generaltable td { padding: .75rem 1rem; vertical-align: middle; }
    .alert { border-radius: 14px; }
    // an activity's own action strip (for example the quiz's start button): a plain row, no Moodle bar
    .tertiary-navigation { padding: 0; margin: 0 0 1rem; background: none; border: 0; }
    .tertiary-navigation .btn-primary { min-height: 48px; padding: 0 1.75rem; border-radius: 999px; }
    input.form-control, select.form-select, textarea.form-control, .custom-select {
        font-size: 16px; min-height: 48px; border-radius: 12px; border-color: $tk-line-strong;
    }
    .btn { min-height: 44px; font-weight: 600; }
    // forms: label above the field on phones
    .mform .fitem { margin-bottom: 1rem; }
    @include media-breakpoint-down(md) {
        .mform .fitem > .col-md-3, .mform .fitem > .col-md-9 { flex: 0 0 100%; max-width: 100%; }
    }
    // the profile form: the account's own fields only, in a card
    &#page-user-edit .mform, &#page-login-change_password .mform {
        background: #fff; border: 1px solid $tk-line; border-radius: 20px; padding: 1.25rem; box-shadow: $tk-shadow;
        @include media-breakpoint-up(md) { padding: 2rem; }
    }
}

// ---------------------------------------------------------------- practice (quiz attempt, summary, review)
// The question strip. The platform draws it as a block in a sidebar; here it is one line above the question:
// the numbers to move by, and the way out of the set. The numbers scroll on their own so a set of forty does
// not push the question off the screen, and the one being answered is filled in rather than merely ringed.
.tk-quiznav {
    margin-bottom: 1rem;
    .block {
        background: #fff; border: 1px solid $tk-line; border-radius: 22px; box-shadow: none; margin: 0 0 .75rem;
    }
    // The strip sits in the middle of the page whichever way the page reads, so a student's eye lands in the
    // same place in Arabic and in English. It is a column, not a row: the numbers centred, the way out under
    // them and centred too.
    .block .card-body {
        display: flex; flex-direction: column; align-items: center; gap: .7rem; padding: .95rem 1.1rem;
    }
    .block .card-title, .block h2, .block h5 { display: none; }
    .qn_buttons {
        display: flex; max-width: 100%; flex-wrap: nowrap; justify-content: center; gap: .45rem;
        margin-inline: auto; overflow-x: auto; padding: .2rem .35rem .4rem; scrollbar-width: thin;
        // `justify-content: center` alone stops working the moment the row overflows: the first chips are
        // pushed out of reach on the scrolled side. `margin: auto` on the items centres a short row and
        // leaves a long one scrollable from its true start.
        > * { margin: auto; }
    }
    .qnbutton {
        position: relative; flex: none; width: 42px; height: 42px; min-height: 42px; margin: 0; padding: 0;
        display: grid; place-items: center; border-radius: 50%;
        border: 2px solid $tk-line; background: #fff; color: $tk-muted; font-weight: 700; text-decoration: none;
        font-variant-numeric: tabular-nums;
        transition: border-color .15s ease, background-color .15s ease, color .15s ease;
        .trafficlight, .thispageholder { display: none; }
        &:hover, &:focus-visible { border-color: $tk-line-strong; color: $tk-ink; text-decoration: none; }
        &.answersaved, &.complete { background: $tk-tint; border-color: $tk-royal; color: $tk-royal; }
        &.correct { background: $tk-good-bg; border-color: $tk-good; color: $tk-good; }
        &.incorrect, &.notanswered { background: $tk-bad-bg; border-color: $tk-bad; color: $tk-bad; }
        &.partiallycorrect { background: #FDF4E3; border-color: $tk-amber; color: $tk-amber-800; }
        // where the student is now: filled, so it is found without reading the numbers
        &.thispage { background: $tk-royal; border-color: $tk-royal; color: #fff; box-shadow: none; }
    }
    // the way out of the set: a button under the numbers and centred with them, not a link with three dots
    .othernav {
        display: flex; flex: none; flex-wrap: wrap; align-items: center; justify-content: center;
        gap: .5rem .75rem; margin: 0; font-weight: 700;
        a {
            display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.3rem;
            border: 2px solid $tk-royal; border-radius: 999px; color: $tk-royal; text-decoration: none;
            &:hover, &:focus-visible { background: $tk-tint; text-decoration: none; }
        }
    }
    #quiz-timer-wrapper, #quiz-timer { border-radius: 999px; }
}

.path-mod-quiz.tk-app {
    .que {
        display: block; margin: 0 0 1rem; padding: 1.25rem;
        background: #fff; border: 1px solid $tk-line; border-radius: 22px; box-shadow: $tk-shadow;
        @include media-breakpoint-up(md) { padding: 1.75rem 2rem; }
    }
    .que .info {
        float: none; width: auto; min-height: 0; margin: 0 0 1rem; padding: 0; background: none; border: 0;
        display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
        .no { margin: 0; padding: .25rem .8rem; border-radius: 999px; background: $tk-tint; color: $tk-royal; font-size: .85rem; font-weight: 700; }
        .state, .grade, .questionflag, .editquestion { display: none; }
    }
    .que .content { margin: 0; }
    .que .formulation { margin: 0 0 1rem; padding: 0; background: none; border: 0; color: inherit; }
    .que .qtext { margin-bottom: 1.3rem; font-size: 1.12rem; font-weight: 600; line-height: 1.8; color: $tk-ink; }
    // A question written in English sits in a right-to-left page. Without this each paragraph keeps the page's
    // direction, so the full stop is thrown to the front of the line («.Choose the option that …») and the text
    // hugs the wrong edge. `plaintext` lets every paragraph take the direction of its own first letter, and
    // `start` then aligns it to that paragraph's own beginning - English to the left, Arabic to the right.
    .que .qtext p, .que .answer p, .que .answer [data-region="answer-label"],
    .que .specificfeedback p, .que .generalfeedback p, .que .rightanswer p, .que .outcome p {
        unicode-bidi: plaintext; text-align: start;
    }
    .que .ablock { margin: 0; }
    .que .ablock .prompt { display: none; }
    .que .answer { display: flex; flex-direction: column; gap: .6rem; counter-reset: tkopt; }
    // An option row is a row that carries a radio or a checkbox - nothing else. Written as `.answer > div` it
    // also caught the essay's editor wrapper, which is a plain div holding the editor and a hidden field: the
    // two became flex children of one row, so the editor was squeezed into half the card and the rest was
    // empty. An essay's answer is styled on its own, below.
    //
    // Two things the platform's own markup does not give a student:
    //  - the row is not a <label>, so only the radio dot itself could be pressed. On a phone that is a 20px
    //    target beside a three-line sentence. The input is stretched over the whole row instead, invisible,
    //    so the sentence is the button - and it stays a real radio, keyboard and screen reader unchanged.
    //  - the letter is written «a. » in the text. In an Arabic line the dot moves to the front and it reads
    //    «.a». The letter is drawn from a counter instead, in its own chip, and the written one is left for
    //    screen readers only. The chip is also what fills in when the option is chosen.
    .que .answer > div:has(input[type="radio"]), .que .answer > div:has(input[type="checkbox"]) {
        counter-increment: tkopt;
        position: relative; display: flex; align-items: center; gap: .85rem; min-height: 64px; margin: 0;
        padding: .9rem 1.1rem; border: 2px solid $tk-line; border-radius: 18px; background: #fff; cursor: pointer;
        transition: border-color .15s ease, background-color .15s ease;
        &::before {
            content: counter(tkopt, lower-alpha);
            flex: none; width: 34px; height: 34px; display: grid; place-items: center;
            border: 2px solid $tk-line-strong; border-radius: 50%; background: #fff;
            font-weight: 700; font-size: .95rem; color: $tk-muted; direction: ltr;
            transition: border-color .15s ease, background-color .15s ease, color .15s ease;
        }
        &:hover { border-color: $tk-line-strong; background: #FAFBFD; }
        &:has(input:checked) {
            border-color: $tk-royal; background: #EEF3FB;
            &::before { border-color: $tk-royal; background: $tk-royal; color: #fff; }
        }
        &:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(17, 57, 114, .25); }
        // the real control, over the whole row and out of sight
        input[type="radio"], input[type="checkbox"] {
            position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0;
            opacity: 0; cursor: pointer; appearance: none; -webkit-appearance: none;
        }
        > div, > label { flex: 1; min-width: 0; cursor: pointer; unicode-bidi: plaintext; }
        // the platform's own letter: kept for a screen reader, never drawn
        .answernumber {
            position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
            clip-path: inset(50%); white-space: nowrap;
        }
        p:last-child { margin-bottom: 0; }
        &.correct {
            border-color: $tk-good; background: $tk-good-bg;
            &::before { border-color: $tk-good; background: $tk-good; color: #fff; }
        }
        &.incorrect {
            border-color: $tk-bad; background: $tk-bad-bg;
            &::before { border-color: $tk-bad; background: $tk-bad; color: #fff; }
        }
        .questioncorrectnessicon { position: relative; z-index: 2; margin-inline-start: auto; }
    }
    // «امسح اختياري»: a quiet link under the options, not a button competing with them
    .qtype_multichoice_clearchoice { margin-top: .5rem; }
    .qtype_multichoice_clearchoice .btn-link { padding: 0; color: $tk-muted; font-weight: 600; }
    // an essay: the whole width, and room to write. The plain box and the rich editor are given the same
    // frame, so a student sees one field whichever one the platform loads.
    .que .answer > .qtype_essay_response {
        display: block; width: 100%; min-width: 0;
        > div { width: 100%; min-width: 0; }
        textarea {
            display: block; width: 100%; min-height: 220px; padding: 1rem 1.1rem;
            font-family: inherit; font-size: 16px; line-height: 1.9; color: $tk-ink;
            border: 2px solid $tk-line; border-radius: 16px; background: #fff; resize: vertical;
            &:focus { border-color: $tk-royal; outline: none; box-shadow: 0 0 0 3px rgba(17, 57, 114, .18); }
        }
        // the rich editor, which replaces that box once its script has loaded
        .tox-tinymce {
            width: 100% !important; min-height: 260px !important;
            border: 2px solid $tk-line !important; border-radius: 16px !important;
        }
        .tox:not([dir="rtl"]) .tox-editor-header, .tox .tox-editor-header { box-shadow: none; }
        .tox .tox-edit-area__iframe { background: #fff; }
        .tox .tox-statusbar { border-top: 1px solid $tk-line; }
        // the editor's own branding line is not part of this platform
        .tox .tox-statusbar__branding { display: none; }
    }
    .que .answer > .qtype_essay_response .editor_atto_content,
    .que .answer > .qtype_essay_response .editor_atto_toolbar { width: 100%; }
    .que .attachments { margin-top: .9rem; }

    .que.match .answer { display: table; width: 100%; }
    .que.match .answer td { padding: .5rem .25rem; }
    .que.match select { min-height: 44px; border-radius: 12px; font-size: 16px; }
    // «تحقَّق» belongs to the question, so it sits inside the card, above a line, at the end of the row -
    // where the next action always is. On a phone it is the width of the card, like every other action.
    .que .im-controls {
        display: flex; justify-content: flex-end; margin-top: 1.25rem; padding-top: 1.1rem;
        border-top: 1px solid $tk-line;
    }
    .que .im-controls input.submit, .que .im-controls button.submit {
        min-height: 48px; padding: 0 1.9rem; border: 0; border-radius: 999px;
        background: $tk-royal; color: #fff; font-weight: 700;
        &:hover { background: $tk-royal-600; }
        @include media-breakpoint-down(sm) { width: 100%; }
    }
    .que .outcome { margin-top: 1rem; padding: 0; background: none; border: 0; color: inherit; }
    .que .specificfeedback, .que .generalfeedback, .que .rightanswer, .que .numpartscorrect {
        margin-top: .75rem; padding: 1rem 1.1rem; border-radius: 16px; line-height: 1.8;
    }
    .que .specificfeedback { background: $tk-app-bg; }
    .que .generalfeedback { background: #EEF3FB; border-inline-start: 4px solid $tk-azure; }
    .que .rightanswer { background: $tk-good-bg; color: #14532D; font-weight: 600; }
    .que.correct .specificfeedback, .que .outcome .correct { color: #14532D; }
    .que .validationerror { color: $tk-bad; font-weight: 600; }
    // moving between pages: the same shape and the same corner as «تحقَّق», so the eye learns one place
    .submitbtns {
        display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .75rem; margin-top: 1.25rem;
        input[type="submit"], .btn {
            min-height: 52px; padding: 0 2rem; border-radius: 999px; font-weight: 700;
            @include media-breakpoint-down(sm) { width: 100%; }
        }
        .mod_quiz-prev-nav {
            order: -1; margin-inline-end: auto;
            background: #fff; border: 2px solid $tk-line-strong; color: $tk-ink;
            &:hover { border-color: $tk-royal; color: $tk-royal; }
        }
        .mod_quiz-next-nav {
            background: $tk-royal; border-color: $tk-royal; color: #fff;
            &:hover { background: $tk-royal-600; border-color: $tk-royal-600; }
        }
    }
    // the activity's "back" strip is the frame's back link here
    &.tk-app-practice .tertiary-navigation { display: none; }
    .quizattemptsummary { width: 100%; }
    #mod_quiz_navblock .othernav a { color: $tk-royal; }

    // ------------------------------------------------------------ reading the answers back, after handing in
    // The facts about the attempt, as tiles (theme_thinkera\output\mod_quiz_renderer::review_attempt_summary).
    .tk-rsum { margin: 0 0 1.25rem; }
    .tk-rsum-caption { margin: 0 0 .75rem; font-size: 1.15rem; font-weight: 700; color: $tk-ink; }
    // auto-fit, so five facts fill one row rather than four and a lonely fifth
    .tk-rsum-list {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin: 0; padding: 0;
        @include media-breakpoint-up(md) { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
    }
    .tk-rsum-item {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
        min-height: 92px; padding: .9rem 1rem; text-align: center;
        background: #fff; border: 1px solid $tk-line; border-radius: 18px;
    }
    .tk-rsum-title { margin: 0; font-size: .82rem; font-weight: 600; color: $tk-muted; line-height: 1.5; }
    .tk-rsum-value {
        margin: 0; font-size: 1.15rem; font-weight: 700; color: $tk-ink; line-height: 1.4;
        unicode-bidi: plaintext;
        p:last-child { margin-bottom: 0; }
    }

    // While answering, a question's state and mark are noise beside it; afterwards they are why the student
    // came. On the review page they are shown, as a pill each, in the question's own header.
    &.tk-app-review .que .info {
        .state, .grade { display: inline-flex; align-items: center; margin: 0; padding: .25rem .8rem;
            border-radius: 999px; font-size: .85rem; font-weight: 700; }
        .state { background: $tk-app-bg; color: $tk-muted; }
        .grade { background: $tk-tint; color: $tk-royal; unicode-bidi: plaintext; }
        .questionflag { display: inline-flex; margin-inline-start: auto; }
    }
    &.tk-app-review .que.correct .info .state { background: $tk-good-bg; color: #14532D; }
    &.tk-app-review .que.incorrect .info .state, &.tk-app-review .que.notanswered .info .state {
        background: $tk-bad-bg; color: $tk-bad;
    }
    &.tk-app-review .que.partiallycorrect .info .state { background: #FDF4E3; color: $tk-amber-800; }
    &.tk-app-review .que .info .tk-essay-waiting { background: #EEF3FB; color: $tk-royal; }
    // an answer already given cannot be changed here: the rows are shown, not offered
    &.tk-app-review .que .answer > div:has(input[type="radio"]),
    &.tk-app-review .que .answer > div:has(input[type="checkbox"]) { cursor: default; }
    &.tk-app-review .que .answer input[type="radio"],
    &.tk-app-review .que .answer input[type="checkbox"] { cursor: default; }
    // the flag control is a quiet mark, not a form with a button
    &.tk-app-review .questionflagsavebutton { display: none; }
    .que .questionflag.editable {
        display: inline-flex; align-items: center; gap: .4rem; margin-inline-start: auto;
        font-size: .82rem; color: $tk-muted;
        label { margin: 0; cursor: pointer; }
        input[type="checkbox"] { width: 18px; height: 18px; accent-color: $tk-amber; }
    }

    // the answer a student wrote, read back: a quoted block, not loose text on the card
    &.tk-app-review .que .qtype_essay_response.readonly {
        display: block; width: 100%; padding: 1rem 1.2rem; border-radius: 16px;
        background: $tk-app-bg; border-inline-start: 4px solid $tk-line-strong; line-height: 1.9;
        p:last-child { margin-bottom: 0; }
    }

    // Moving between pages on the review is a pair of links, not buttons. They are given the same shape as
    // every other action so the page does not end in two stray pieces of text.
    .mod_quiz-prev-nav, .mod_quiz-next-nav {
        display: inline-flex; align-items: center; gap: .4rem; min-height: 48px; padding: 0 1.6rem;
        border-radius: 999px; font-weight: 700; text-decoration: none;
        .arrow { display: none; }
    }
    a.mod_quiz-next-nav {
        background: $tk-royal; color: #fff;
        &:hover, &:focus-visible { background: $tk-royal-600; color: #fff; text-decoration: none; }
    }
    a.mod_quiz-prev-nav {
        background: #fff; border: 2px solid $tk-line-strong; color: $tk-ink;
        &:hover, &:focus-visible { border-color: $tk-royal; color: $tk-royal; text-decoration: none; }
    }
    // the pair sits in one row at the end of the page, the way the answering pages end
    .submitbtns:has(.mod_quiz-prev-nav), .submitbtns:has(.mod_quiz-next-nav) { align-items: center; }

    // ------------------------------------------------------------ «ملخص التدريب» before handing it in
    // The platform's three-column table is replaced by theme_thinkera\output\mod_quiz\renderer with the same
    // question grid the student answered in, so the colours already mean something to them.
    .tk-sum { margin: 0 0 1.5rem; }
    .tk-sum-lead {
        display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem;
        margin: 0 0 1rem; padding: 1rem 1.2rem;
        background: #FDF4E3; border: 1px solid #F0DCB4; border-radius: 18px;
        color: $tk-amber-800; font-weight: 700; line-height: 1.7;
        &.is-done { background: $tk-good-bg; border-color: #B6E3C6; color: #14532D; }
    }
    .tk-sum-count {
        margin-inline-start: auto; padding: .2rem .8rem; border-radius: 999px;
        background: rgba(255, 255, 255, .75); font-variant-numeric: tabular-nums; direction: ltr;
    }
    .tk-sumlist {
        display: grid; grid-template-columns: 1fr; gap: .6rem; margin: 0; padding: 0; list-style: none;
        @include media-breakpoint-up(sm) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        @include media-breakpoint-up(lg) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    .tk-sum-head {
        grid-column: 1 / -1; margin: .5rem 0 0; font-weight: 700; color: $tk-ink;
    }
    .tk-sum-item {
        display: flex; align-items: center; gap: .75rem; min-height: 60px; padding: .6rem .9rem;
        background: #fff; border: 1px solid $tk-line; border-radius: 16px;
    }
    .tk-sum-no {
        flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%;
        border: 2px solid $tk-line-strong; background: #fff; color: $tk-ink; font-weight: 700;
        text-decoration: none;
        &:hover, &:focus-visible { border-color: $tk-royal; color: $tk-royal; text-decoration: none; }
    }
    .tk-sum-no-num { font-variant-numeric: tabular-nums; }
    .tk-sum-state { flex: 1; min-width: 0; font-size: .9rem; font-weight: 600; color: $tk-muted; line-height: 1.5; }
    .tk-sum-flag { flex: none; color: $tk-amber; }
    .tk-sum-mark {
        flex: none; min-width: 2rem; padding: .15rem .6rem; border-radius: 999px;
        background: $tk-app-bg; color: $tk-ink; font-weight: 700; font-variant-numeric: tabular-nums;
        text-align: center;
    }
    // the same states, in the same colours as the numbers a student pressed while answering
    .tk-sum-item {
        &.answersaved, &.complete { border-color: $tk-royal; background: $tk-tint;
            .tk-sum-no { border-color: $tk-royal; color: $tk-royal; } .tk-sum-state { color: $tk-royal; } }
        &.correct { border-color: $tk-good; background: $tk-good-bg;
            .tk-sum-no { border-color: $tk-good; color: $tk-good; } .tk-sum-state { color: #14532D; } }
        &.incorrect, &.notanswered { border-color: $tk-bad; background: $tk-bad-bg;
            .tk-sum-no { border-color: $tk-bad; color: $tk-bad; } .tk-sum-state { color: $tk-bad; } }
        &.partiallycorrect { border-color: $tk-amber; background: #FDF4E3;
            .tk-sum-no { border-color: $tk-amber; color: $tk-amber-800; } .tk-sum-state { color: $tk-amber-800; } }
        &.needsgrading { border-color: $tk-azure; background: #EEF3FB;
            .tk-sum-no { border-color: $tk-azure; color: $tk-royal; } .tk-sum-state { color: $tk-royal; } }
    }
}

// An English page title in an Arabic page lines up with the Arabic around it.
[dir="rtl"] .tk-page-title { text-align: right; }

// On a practice set the title is centred instead, in both languages: the page under it is a single column
// of cards down the middle, and a heading pinned to one edge reads as if it belonged to something else.
// This overrides the rule above, so it is written after it rather than relying on weight.
.tk-app-practice .tk-page-title,
[dir="rtl"] .tk-app-practice .tk-page-title { text-align: center; }

// The practice set's name is already the frame's title: Moodle's own copy of it goes.
.tk-app-practice [role="main"] > h2:first-of-type { display: none; }
.tk-app-practice [role="main"] > h3:first-of-type { font-size: 1.15rem; font-weight: 700; margin: .5rem 0 1rem; }

// How to reach us: the two channels together, centred, one small icon each. The number carries WhatsApp's
// own green and the address a quiet royal envelope, so each is recognised before it is read; the icons are
// 16px and the labels stay the size of the footer's own text, because a footer that shouts is a footer
// nobody trusts.
.tk-contact {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: .25rem 1.5rem; margin-top: .1rem;
}
.tk-wa {
    display: inline-flex; align-items: center; gap: .45rem; min-height: 44px;
    color: $tk-royal; font-weight: 700; text-decoration: none;
    svg { color: #25D366; flex: none; }
    // the envelope is not a brand mark, so it takes the house blue rather than a colour of its own
    &.tk-mail svg { color: $tk-azure; }
    span { unicode-bidi: isolate; }
    &:hover, &:focus-visible { color: $tk-royal-600; text-decoration: none; }
}
// on a phone the two stack, and 44px of height each keeps them far enough apart to press
@include media-breakpoint-down(sm) {
    .tk-contact { gap: 0 1.5rem; }
}