/* ================================================================================
   APP — STUDENT REALM (Psalmodia)
   Student `.sd-*` classes approved by the operator via student_proposal.css.
   Consumes role tokens from psalmodia.css. No literal hex colour values.
   RTL-safe with logical properties. Responsive.
   ================================================================================ */

/* ---------------- Page scaffold ---------------- */
.sd-page {
    background:
        radial-gradient(52rem 22rem at 50% -6rem, rgba(180, 133, 58, .10), transparent 60%),
        var(--ps-cream);
}

/* Keep the public home/about/program surfaces untouched while ensuring every
   migrated student surface has the same page background and link treatment. */
body:has(main .sd-page) {
    background: var(--ps-page-bg) !important;
    background-color: var(--ps-page-bg) !important;
    color: var(--ps-text);
}

main:has(.sd-page) {
    background: var(--ps-page-bg);
}

.sd-page a,
.sd-page a:hover {
    text-decoration: none;
}

.sd-page a:focus-visible {
    outline: 2px solid var(--ps-gold);
    outline-offset: 3px;
}

.sd-hero {
    position: relative;
    padding: 3rem 0 2.25rem;
    text-align: center;
}

.sd-halo {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: start center;
    overflow: hidden;
    pointer-events: none;
}

.sd-halo::before {
    content: "\2723"; /* ✣ */
    font-size: 16rem;
    line-height: 1;
    margin-top: -2.2rem;
    color: var(--ps-gold);
    opacity: .08;
}

.sd-kicker {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ps-gold-deep);
}

.sd-kicker::before,
.sd-kicker::after {
    content: "";
    width: 2.25rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ps-gold));
}

.sd-kicker::after {
    background: linear-gradient(90deg, var(--ps-gold), transparent);
}

.sd-title {
    position: relative;
    font-family: var(--ps-display);
    font-size: clamp(2rem, 4.6vw, 3.1rem);
    line-height: 1.15;
    color: var(--ps-ink);
    margin: .9rem 0 .6rem;
}

.sd-lede {
    position: relative;
    max-width: 46rem;
    margin: 0 auto;
    color: var(--ps-muted);
    font-size: 1.05rem;
}

.sd-hero-meta {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin-top: 1.4rem;
}

/* ---------------- Sticky section nav ---------------- */
.sd-nav-wrap {
    position: sticky;
    top: 76px;
    z-index: 20;
    padding: .45rem .6rem;
    margin: 0 0 2.5rem;
    background: rgba(255, 253, 248, .9);
    border: 1px solid var(--ps-line);
    border-radius: 999px;
    box-shadow: var(--ps-shadow);
    backdrop-filter: blur(10px);
}

.sd-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    justify-content: center;
}

.sd-nav-link {
    padding: .42rem .95rem;
    border-radius: 999px;
    font-size: .88rem;
    font-weight: 650;
    color: var(--ps-muted);
    text-decoration: none;
    transition: color var(--ps-motion), background-color var(--ps-motion);
}

.sd-nav-link:hover,
.sd-nav-link:focus-visible {
    color: var(--ps-gold-deep);
    background: var(--ps-gold-soft);
}

.sd-nav-link.is-active {
    color: #fff;
    background: var(--ps-teal);
}

/* ---------------- Section headers + screen frames ---------------- */
.sd-section {
    scroll-margin-top: 9.5rem;
    margin-bottom: 3.5rem;
}

.sd-section-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .4rem .9rem;
    margin-bottom: 1.1rem;
}

.sd-num {
    font-family: var(--ps-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ps-gold);
    border: 1px solid var(--ps-line);
    background: var(--ps-paper);
    border-radius: 999px;
    padding: .1rem .8rem;
}

.sd-section-title {
    font-family: var(--ps-display);
    font-size: 1.55rem;
    color: var(--ps-ink);
    margin: 0;
}

.sd-section-note {
    flex-basis: 100%;
    color: var(--ps-muted);
    font-size: .94rem;
    margin: .15rem 0 0;
}

.sd-frame {
    background: var(--ps-paper);
    border: 1px solid var(--ps-line);
    border-radius: var(--ps-radius-lg);
    box-shadow: var(--ps-shadow-md);
    overflow: hidden;
}

.sd-screen {
    padding: clamp(1rem, 3vw, 2rem);
}

/* ---------------- Shared building blocks ---------------- */
.sd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 40px;
    padding: .3rem 1.15rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: .9rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--ps-motion), box-shadow var(--ps-motion), background-color var(--ps-motion), color var(--ps-motion), border-color var(--ps-motion);
}

.sd-btn:hover { transform: translateY(-1px); }

.sd-btn--teal {
    background: var(--ps-teal);
    color: #fff;
    box-shadow: 0 6px 16px rgba(47, 93, 115, .28);
}

.sd-btn--teal:hover { background: var(--ps-ink-deep); color: #fff; }

.sd-btn--gold-outline {
    border-color: var(--ps-gold);
    color: var(--ps-gold-deep);
    background: transparent;
}

.sd-btn--gold-outline:hover { background: var(--ps-gold-soft); color: var(--ps-gold-deep); }

.sd-btn--gold {
    background: linear-gradient(135deg, var(--ps-gold), var(--ps-gold-deep));
    color: #fff;
    box-shadow: 0 6px 16px rgba(180, 133, 58, .3);
}

.sd-btn--gold:hover { color: #fff; }

.sd-pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .74rem;
    font-weight: 700;
    padding: .18rem .7rem;
    border-radius: 999px;
}

.sd-pill--current { background: var(--ps-success-soft); color: var(--ps-success); }
.sd-pill--history { background: var(--ps-mist); color: var(--ps-muted); }
.sd-pill--exception { background: var(--ps-warning-soft); color: var(--ps-warning); }
.sd-pill--open { background: var(--ps-success-soft); color: var(--ps-success); }
.sd-pill--done { background: var(--ps-mist); color: var(--ps-muted); }

.sd-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .78rem;
    font-weight: 650;
    color: var(--ps-muted);
}

.sd-chip i { color: var(--ps-gold); }

.sd-serious {
    font-family: var(--ps-display);
    color: var(--ps-ink);
}

/* ================= SCREEN 01 — COURSES ================= */
.sd-group { margin-bottom: 1.75rem; }

.sd-group-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem .75rem;
    padding-bottom: .55rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--ps-line);
}

.sd-group-title {
    font-family: var(--ps-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ps-ink);
    margin: 0;
}

.sd-group-count { font-size: .8rem; color: var(--ps-muted); }

.sd-course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
    gap: 1rem;
}

.sd-course-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--ps-line-cool);
    border-radius: var(--ps-radius);
    overflow: hidden;
    box-shadow: var(--ps-shadow);
    transition: transform var(--ps-motion), box-shadow var(--ps-motion), border-color var(--ps-motion);
}

.sd-course-card:hover {
    transform: translateY(-3px);
    border-color: var(--ps-gold);
    box-shadow: var(--ps-shadow-md);
}

.sd-course-thumb {
    position: relative;
    aspect-ratio: 16 / 7.5;
    display: grid;
    place-items: center;
    color: #fff;
    overflow: hidden;
}

.sd-course-thumb::before {
    content: "\2723";
    position: absolute;
    inset-inline-end: -1.2rem;
    bottom: -2.6rem;
    font-size: 8.5rem;
    line-height: 1;
    opacity: .14;
}

.sd-thumb--a { background: linear-gradient(135deg, var(--ps-teal), var(--ps-ink-deep)); }
.sd-thumb--b { background: linear-gradient(135deg, var(--ps-gold), var(--ps-gold-deep)); }
.sd-thumb--c { background: linear-gradient(135deg, var(--ps-slate), var(--ps-ink-deep)); }

.sd-course-thumb i { font-size: 1.9rem; opacity: .95; }

.sd-course-body {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1rem 1.1rem 1.15rem;
    flex: 1;
}

.sd-course-name {
    font-family: var(--ps-display);
    font-size: 1.12rem;
    color: var(--ps-ink);
    margin: 0;
}

.sd-course-desc {
    font-size: .86rem;
    color: var(--ps-muted);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sd-course-meta { display: flex; flex-wrap: wrap; gap: .8rem; }

.sd-course-foot {
    margin-top: auto;
    padding-top: .55rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px dashed var(--ps-line);
}

.sd-level-tag { font-size: .76rem; font-weight: 700; color: var(--ps-teal); }

/* ================= SCREEN 02 — COURSE DETAIL / LESSON ================= */
.sd-learn-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.25rem;
    border-radius: var(--ps-radius);
    background: linear-gradient(120deg, var(--ps-ink-deep), var(--ps-teal) 78%);
    color: #fff;
}

.sd-learn-icon {
    width: 3.1rem;
    height: 3.1rem;
    display: grid;
    place-items: center;
    border-radius: .9rem;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    font-size: 1.25rem;
}

.sd-learn-title {
    font-family: var(--ps-display);
    font-size: 1.45rem;
    margin: 0;
}

.sd-learn-sub { font-size: .82rem; opacity: .8; margin: 0; }

.sd-learn-badges { display: flex; flex-wrap: wrap; gap: .4rem; margin-inline-start: auto; }

.sd-learn-badge {
    font-size: .75rem;
    font-weight: 700;
    padding: .25rem .75rem;
    border-radius: 999px;
    background: rgba(244, 234, 214, .16);
    border: 1px solid rgba(244, 234, 214, .4);
    color: var(--ps-gold-soft);
}

.sd-learn {
    display: grid;
    grid-template-columns: 17rem 1fr;
    gap: 1.25rem;
    align-items: start;
}

.sd-learn-side {
    background: #fff;
    border: 1px solid var(--ps-line-cool);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow);
    overflow: hidden;
}

.sd-learn-side-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .8rem 1rem;
    background: var(--ps-teal);
    color: #fff;
    font-weight: 700;
    font-size: .92rem;
}

.sd-learn-side-head span { font-size: .76rem; font-weight: 600; opacity: .85; }

.sd-lesson-list { list-style: none; margin: 0; padding: .4rem; }

.sd-lesson-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .6rem .7rem;
    border-radius: .8rem;
    border: 1px solid transparent;
    background: transparent;
    text-align: start;
    color: var(--ps-ink);
    transition: background-color var(--ps-motion), border-color var(--ps-motion);
}

.sd-lesson-row + .sd-lesson-row { margin-top: .15rem; }

.sd-lesson-row:hover { background: var(--ps-mist); }

.sd-lesson-row.is-active {
    background: var(--ps-teal-soft);
    border-color: var(--ps-teal);
}

.sd-lesson-state {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: .6rem;
    color: #fff;
    background: var(--ps-line-cool);
}

.sd-lesson-row.is-done .sd-lesson-state { background: var(--ps-success); }

.sd-lesson-row.is-active .sd-lesson-state { background: var(--ps-gold); }

.sd-lesson-name { flex: 1; min-width: 0; font-size: .88rem; font-weight: 600; }

.sd-lesson-dur { font-size: .74rem; color: var(--ps-muted); }

.sd-lesson-row.is-quiz .sd-lesson-state {
    width: auto;
    height: auto;
    border-radius: .5rem;
    padding: .1rem .35rem;
    font-size: .62rem;
    font-weight: 800;
}

.sd-learn-panel {
    background: #fff;
    border: 1px solid var(--ps-line-cool);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow);
    padding: 1.1rem;
    display: grid;
    gap: 1rem;
}

.sd-media-card {
    border: 1px solid var(--ps-line);
    border-radius: var(--ps-radius);
    overflow: hidden;
    background: var(--ps-paper);
    transition: box-shadow var(--ps-motion);
}

.sd-media-card:hover {
    box-shadow: var(--ps-shadow-md);
}

.sd-media-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem 1rem;
    font-weight: 700;
    font-size: .95rem;
    color: var(--ps-ink);
    border-bottom: 1px solid var(--ps-line);
    background: linear-gradient(180deg, var(--ps-cream), var(--ps-paper));
}

.sd-media-head i { color: var(--ps-gold); }

.sd-video-ph {
    position: relative;
    aspect-ratio: 16 / 8.2;
    display: grid;
    place-items: center;
    background:
        radial-gradient(30rem 12rem at 50% 115%, rgba(180, 133, 58, .25), transparent 60%),
        linear-gradient(150deg, var(--ps-ink-deep), var(--ps-ink));
    color: #fff;
}

.sd-video-ph::before {
    content: "\2723";
    position: absolute;
    inset-inline-start: 6%;
    top: -14%;
    font-size: 9rem;
    line-height: 1;
    opacity: .1;
}

.sd-play {
    position: relative;
    width: 4rem;
    height: 4rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(180, 133, 58, .92);
    color: #fff;
    font-size: 1.15rem;
    box-shadow: 0 0 0 10px rgba(180, 133, 58, .22);
    transition: transform var(--ps-motion), box-shadow var(--ps-motion);
}

.sd-media-card:hover .sd-play {
    transform: scale(1.06);
    box-shadow: 0 0 0 14px rgba(180, 133, 58, .16);
}

.sd-track {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .8rem 1rem;
}

.sd-track-bar {
    position: relative;
    flex: 1;
    height: .45rem;
    border-radius: 999px;
    background: var(--ps-mist);
    overflow: hidden;
}

.sd-track-fill {
    position: absolute;
    inset: 0;
    inset-inline-end: auto;
    width: 37%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ps-gold), var(--ps-teal));
}

.sd-track-pct {
    font-size: .82rem;
    font-weight: 800;
    color: var(--ps-gold-deep);
    min-width: 2.6rem;
    text-align: end;
}

.sd-meeting-list {
    display: grid;
    gap: .35rem;
    list-style: none;
    margin: .65rem 0 0;
    padding: 0;
}

.sd-meeting-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding-top: .35rem;
    border-top: 1px solid var(--ps-line);
    color: var(--ps-muted);
}

.sd-meeting-list strong {
    color: var(--ps-ink);
    font-weight: 700;
    text-align: end;
    overflow-wrap: anywhere;
}

.sd-audio-body {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .9rem 1rem;
    background: linear-gradient(120deg, var(--ps-gold-soft), var(--ps-paper));
}

.sd-audio-ic {
    width: 2.6rem;
    height: 2.6rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--ps-line);
    color: var(--ps-gold-deep);
    flex: 0 0 auto;
}

.sd-wave {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 3px;
    height: 2rem;
}

.sd-wave i {
    flex: 1;
    max-width: 5px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--ps-gold), var(--ps-gold-deep));
    opacity: .75;
}

/* ---------------- Live-template overrides (not in proposal mockup) ---------------- */

/* Learn header badges: reflow the .course-learning-meta as .sd-learn-badges */
.sd-learn-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-inline-start: auto;
}

/* Live-player video wrapper — dark ink background matching proposal video placeholder */
.sd-live-player {
    position: relative;
    width: 100%;
    background: linear-gradient(150deg, var(--ps-ink-deep), var(--ps-ink));
    border-radius: var(--ps-radius) var(--ps-radius) 0 0;
    overflow: hidden;
}

.sd-live-player .video-js {
    width: 100% !important;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

/* Video tech element: contained within the player, never overflows */
.sd-live-player .video-js .vjs-tech {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Video-js control bar — Psalmodia gold/teal skin over vjs-theme-city */
.sd-live-player .video-js .vjs-control-bar {
    background: linear-gradient(180deg, transparent 0%, rgba(23, 48, 58, .92) 100%);
    padding-bottom: .35rem;
}

.sd-live-player .video-js .vjs-play-progress {
    background: linear-gradient(90deg, var(--ps-gold), var(--ps-teal));
    border-radius: 999px;
}

.sd-live-player .video-js .vjs-play-progress::before {
    color: var(--ps-gold);
}

.sd-live-player .video-js .vjs-slider {
    background: rgba(255, 255, 255, .18);
    border-radius: 999px;
}

.sd-live-player .video-js .vjs-load-progress {
    background: rgba(255, 255, 255, .12);
    border-radius: 999px;
}

.sd-live-player .video-js .vjs-load-progress div {
    background: rgba(255, 255, 255, .08);
    border-radius: 999px;
}

.sd-live-player .video-js .vjs-big-play-button {
    border: 2px solid var(--ps-gold);
    background: rgba(23, 48, 58, .8);
    border-radius: 50%;
    width: 2.8em;
    height: 2.8em;
    line-height: 2.6em;
    margin-top: -1.4em;
    margin-left: -1.4em;
    transition: transform var(--ps-motion), background-color var(--ps-motion);
}

.sd-live-player .video-js .vjs-big-play-button:hover {
    background: var(--ps-gold);
    transform: scale(1.08);
}

.sd-live-player .video-js .vjs-play-control,
.sd-live-player .video-js .vjs-volume-panel,
.sd-live-player .video-js .vjs-seek-button {
    color: var(--ps-gold-soft);
}

.sd-live-player .video-js .vjs-play-control:hover,
.sd-live-player .video-js .vjs-volume-panel:hover,
.sd-live-player .video-js .vjs-seek-button:hover {
    color: var(--ps-gold);
}

.sd-live-player .video-js .vjs-current-time,
.sd-live-player .video-js .vjs-duration,
.sd-live-player .video-js .vjs-time-divider {
    color: rgba(255, 255, 255, .75);
}

.sd-live-player .video-js .vjs-playback-rate .vjs-playback-rate-value {
    color: var(--ps-gold-soft);
    font-size: 1em;
}

/* Audio body in the live template — proposal-consistent golden gradient */
.sd-audio-body {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .9rem 1rem;
    background: linear-gradient(120deg, var(--ps-gold-soft), var(--ps-paper));
    border-radius: 0 0 var(--ps-radius) var(--ps-radius);
}

.sd-audio-body audio {
    width: 100%;
    height: 2.25rem;
    border-radius: .6rem;
}

.sd-audio-body .sd-track {
    padding: .5rem 0 0;
}

/* Audio download button — consistent gold-outline treatment */
.sd-audio-body .sd-btn--teal {
    min-width: 10rem;
}

/* Progress download bar inside audio card — proposal-compatible */
.sd-audio-body .download-progress .progress {
    height: .55rem;
    border-radius: 999px;
    background: var(--ps-mist);
}

.sd-audio-body .download-progress .progress-bar {
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ps-gold), var(--ps-teal));
}

/* Progress track bar — native <progress> element styled via Psalmodia tokens */
.sd-track-bar {
    -webkit-appearance: none;
    appearance: none;
    height: .45rem;
    border-radius: 999px;
    border: 0;
    background: var(--ps-mist);
    overflow: hidden;
}

.sd-track-bar::-webkit-progress-bar {
    background: var(--ps-mist);
    border-radius: 999px;
}

.sd-track-bar::-webkit-progress-value {
    background: linear-gradient(90deg, var(--ps-gold), var(--ps-teal));
    border-radius: 999px;
    transition: width var(--ps-motion);
}

.sd-track-bar::-moz-progress-bar {
    background: linear-gradient(90deg, var(--ps-gold), var(--ps-teal));
    border-radius: 999px;
}

/* Progress track inside the video live-player — light text on dark background */
.sd-live-player .sd-track {
    padding: .5rem 1rem .65rem;
}

.sd-live-player .sd-track .text-muted {
    color: rgba(255, 255, 255, .65) !important;
}

/* Progress percentage in track */
.sd-track-pct {
    font-size: .82rem;
    font-weight: 800;
    color: var(--ps-gold-deep);
    min-width: 2.6rem;
    text-align: end;
}

/* Inside the dark video wrapper, gold percentage stays legible on ink */
.sd-live-player .sd-track-pct {
    color: var(--ps-gold-soft);
}

/* Pill variants for quiz closed status */
.sd-pill--closed {
    background: var(--ps-danger-soft);
    color: var(--ps-danger);
}

/* Sidebar lesson-row refinements in list-group context */
.sd-lesson-list {
    list-style: none;
    margin: 0;
    padding: .4rem;
}

.sd-lesson-row.list-group-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .6rem .7rem;
    border-radius: .8rem;
    border: 1px solid transparent;
    background: transparent;
    text-align: start;
    color: var(--ps-ink);
    transition: background-color var(--ps-motion), border-color var(--ps-motion);
    margin: 0;
}

.sd-lesson-row.list-group-item:hover {
    background: var(--ps-mist);
}

.sd-lesson-row.active {
    background: var(--ps-teal-soft) !important;
    border-color: var(--ps-teal) !important;
    color: var(--ps-ink) !important;
}

.sd-lesson-row.active .sd-lesson-state {
    background: var(--ps-gold);
}

/* Lesson state dot/icon in sidebar */
.sd-lesson-state {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    font-size: .6rem;
    color: #fff;
    background: var(--ps-line-cool);
}

.sd-lesson-row.is-quiz .sd-lesson-state {
    width: auto;
    height: auto;
    border-radius: .5rem;
    padding: .1rem .35rem;
    font-size: .62rem;
    font-weight: 800;
    background: var(--ps-gold-soft);
    color: var(--ps-gold-deep);
}

/* Lesson name truncation in sidebar */
.sd-lesson-name {
    flex: 1;
    min-width: 0;
    font-size: .88rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* PDF viewer within media card — card-consistent paper background */
.sd-pdf-viewer {
    padding: .5rem 0;
    background: var(--ps-paper);
}

.sd-pdf-viewer canvas {
    max-width: 100%;
    height: auto;
    border-radius: var(--ps-radius);
    background: #fff;
}

.sd-pdf-viewer .controls {
    font-size: .85rem;
    padding: .3rem .5rem;
}

/* ================= SCREEN 03 — QUIZ ================= */
.sd-quiz-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1rem;
    padding: 1rem 1.25rem;
    border-radius: var(--ps-radius);
    background: linear-gradient(120deg, var(--ps-teal), var(--ps-teal));
    color: #fff;
    margin-bottom: 1.1rem;
}

.sd-quiz-title { font-family: var(--ps-display); font-size: 1.3rem; margin: 0; }

.sd-quiz-meta { font-size: .83rem; opacity: .85; }

.sd-timer {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .9rem;
    border-radius: 999px;
    background: rgba(181, 71, 71, .92);
    font-weight: 800;
    letter-spacing: .04em;
    font-variant-numeric: tabular-nums;
}

.sd-q-card {
    background: #fff;
    border: 1px solid var(--ps-line-cool);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow);
    padding: 1.1rem 1.2rem;
    margin-bottom: 1rem;
}

.sd-q-head {
    display: flex;
    gap: .6rem;
    align-items: baseline;
    margin-bottom: .8rem;
}

.sd-q-num {
    font-family: var(--ps-display);
    color: var(--ps-gold);
    font-weight: 700;
}

.sd-q-text { font-weight: 700; color: var(--ps-ink); margin: 0; }

.sd-q-pts { margin-inline-start: auto; font-size: .76rem; font-weight: 700; color: var(--ps-muted); }

.sd-opt {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .55rem .8rem;
    border: 1px solid var(--ps-line-cool);
    border-radius: .8rem;
    background: var(--ps-paper);
    font-size: .9rem;
    cursor: pointer;
    transition: border-color var(--ps-motion), background-color var(--ps-motion), box-shadow var(--ps-motion);
}

.sd-opt + .sd-opt { margin-top: .45rem; }

.sd-opt:hover { border-color: var(--ps-gold); background: var(--ps-cream); }

.sd-opt-dot {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 2px solid var(--ps-line-cool);
    background: #fff;
    transition: border-color var(--ps-motion), box-shadow var(--ps-motion);
}

.sd-opt.is-checked {
    border-color: var(--ps-gold);
    background: var(--ps-gold-soft);
    box-shadow: inset 0 0 0 1px var(--ps-gold);
}

.sd-opt.is-checked .sd-opt-dot {
    border-color: var(--ps-gold-deep);
    box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 6px var(--ps-gold-deep);
}

.sd-order-row {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .55rem .8rem;
    border: 1px solid var(--ps-line-cool);
    border-radius: .8rem;
    background: var(--ps-paper);
    font-size: .9rem;
}

.sd-order-row + .sd-order-row { margin-top: .45rem; }

.sd-order-row i { color: var(--ps-muted); }

.sd-order-idx {
    font-family: var(--ps-display);
    font-weight: 700;
    color: var(--ps-gold);
    min-width: 1.2rem;
}

.sd-match-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .35rem 0;
    font-size: .9rem;
}

.sd-match-row .sd-match-key { flex: 0 0 38%; font-weight: 600; color: var(--ps-ink); }

.sd-match-select {
    flex: 1;
    padding: .42rem .7rem;
    border: 1px solid var(--ps-line-cool);
    border-radius: .7rem;
    background: #fff;
    font-size: .86rem;
    color: var(--ps-ink);
}

.sd-quiz-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: .4rem;
}

.sd-note { font-size: .8rem; color: var(--ps-muted); }

.sd-note i { color: var(--ps-gold); }

/* ================= SCREEN 04 — CALENDAR ================= */
.sd-cal-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    margin-bottom: 1rem;
}

.sd-cal-title { font-family: var(--ps-display); font-size: 1.25rem; color: var(--ps-ink); margin: 0; }

.sd-cal-nav { margin-inline-start: auto; display: flex; gap: .4rem; }

.sd-cal-nav a {
    width: 2.2rem;
    height: 2.2rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--ps-line);
    background: #fff;
    color: var(--ps-teal);
    text-decoration: none;
    transition: background-color var(--ps-motion), color var(--ps-motion);
}

.sd-cal-nav a:hover { background: var(--ps-teal); color: #fff; }

.sd-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: .4rem;
}

.sd-cal-wd {
    text-align: center;
    font-size: .74rem;
    font-weight: 700;
    color: var(--ps-muted);
    padding: .25rem 0;
}

.sd-day {
    position: relative;
    min-height: 3.4rem;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: .45rem .55rem;
    font-size: .84rem;
    font-weight: 600;
    color: var(--ps-ink);
    background: #fff;
    border: 1px solid var(--ps-line-cool);
    border-radius: .8rem;
    transition: transform var(--ps-motion), box-shadow var(--ps-motion);
}

.sd-day:hover { transform: translateY(-2px); box-shadow: var(--ps-shadow); }

.sd-day.is-off { background: var(--ps-mist); color: #a9b6bc; border-style: dashed; }

.sd-day.is-meeting { background: var(--ps-teal-soft); border-color: var(--ps-teal); }

.sd-day.is-meeting::after {
    content: "";
    position: absolute;
    inset-inline-start: .55rem;
    bottom: .5rem;
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    background: var(--ps-teal);
}

.sd-day.is-holiday { background: var(--ps-gold-soft); border-color: var(--ps-gold); }

.sd-day.is-holiday::after {
    content: "";
    position: absolute;
    inset-inline-start: .55rem;
    bottom: .5rem;
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    background: var(--ps-gold);
}

.sd-day.is-today {
    border: 2px solid var(--ps-gold-deep);
    box-shadow: 0 0 0 3px rgba(180, 133, 58, .18);
}

.sd-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: .8rem;
    border-top: 1px dashed var(--ps-line);
    font-size: .8rem;
    color: var(--ps-muted);
}

.sd-legend span { display: inline-flex; align-items: center; gap: .4rem; }

.sd-legend i {
    width: .65rem;
    height: .65rem;
    border-radius: 50%;
}

.sd-legend .lg-meet { background: var(--ps-teal); }
.sd-legend .lg-hol { background: var(--ps-gold); }
.sd-legend .lg-today { border: 2px solid var(--ps-gold-deep); }

/* ================= SCREEN 05 — PROFILE + QR ================= */
.sd-profile {
    display: grid;
    grid-template-columns: 19rem 1fr;
    gap: 1.25rem;
    align-items: start;
}

.sd-id-card {
    background: #fff;
    border: 1px solid var(--ps-line-cool);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow);
    padding: 1.4rem 1.2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.sd-id-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4.6rem;
    background: linear-gradient(120deg, var(--ps-teal), var(--ps-teal));
}

.sd-avatar {
    position: relative;
    width: 4.6rem;
    height: 4.6rem;
    margin: 1.4rem auto .7rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--ps-paper);
    border: 3px solid var(--ps-gold);
    font-family: var(--ps-display);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--ps-ink);
    box-shadow: 0 0 0 5px rgba(255, 253, 248, .9);
}

.sd-id-name { font-family: var(--ps-display); font-size: 1.2rem; color: var(--ps-ink); margin: 0; }

.sd-id-role {
    display: inline-block;
    margin: .35rem 0 .8rem;
    font-size: .74rem;
    font-weight: 700;
    color: var(--ps-teal);
    background: var(--ps-teal-soft);
    border-radius: 999px;
    padding: .15rem .7rem;
}

.sd-meta { list-style: none; margin: 0; padding: 0; text-align: start; }

.sd-meta li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .45rem 0;
    border-top: 1px dashed var(--ps-line);
    font-size: .85rem;
}

.sd-meta b { color: var(--ps-muted); font-weight: 600; }
.sd-meta span { color: var(--ps-ink); font-weight: 650; direction: ltr; }

.sd-qr-block {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid var(--ps-line);
    border-radius: var(--ps-radius);
    background: var(--ps-cream);
}

.sd-qr-img {
    width: 7.5rem;
    height: 7.5rem;
    margin: 0 auto .5rem;
    border-radius: .7rem;
    border: 1px solid var(--ps-line-cool);
    background: #fff;
    padding: .5rem;
}

.sd-qr-hint { font-size: .76rem; color: var(--ps-muted); margin: 0; }

.sd-qr-hint i { color: var(--ps-gold); }

.sd-panel-card {
    background: #fff;
    border: 1px solid var(--ps-line-cool);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow);
    margin-bottom: 1.25rem;
    overflow: hidden;
}

.sd-calendar-page .sd-panel-head {
    flex-wrap: wrap;
}

.sd-calendar-page .sd-panel-sub {
    min-width: 0;
    overflow-wrap: anywhere;
    text-align: end;
}

.sd-panel-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .85rem 1.15rem;
    border-bottom: 1px solid var(--ps-line);
    background: linear-gradient(180deg, var(--ps-cream), #fff);
    font-family: var(--ps-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ps-ink);
}

.sd-panel-head i { color: var(--ps-gold); }

.sd-panel-sub {
    margin-inline-start: auto;
    font-family: inherit;
    font-size: .76rem;
    font-weight: 600;
    color: var(--ps-muted);
}

.sd-acc { border-top: 1px solid var(--ps-mist); }
.sd-acc:first-of-type { border-top: 0; }

.sd-acc-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .75rem 1.15rem;
    font-weight: 700;
    font-size: .92rem;
    color: var(--ps-ink);
}

.sd-acc-head .sd-acc-count {
    margin-inline-start: auto;
    font-size: .74rem;
    color: var(--ps-muted);
    background: var(--ps-mist);
    border-radius: 999px;
    padding: .15rem .6rem;
}

.sd-acc-body { padding: 0 1.15rem .85rem; display: grid; gap: .4rem; }

.sd-mini-row {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .55rem .8rem;
    border: 1px solid var(--ps-line-cool);
    border-radius: .8rem;
    font-size: .88rem;
    color: var(--ps-ink);
    background: var(--ps-paper);
    transition: border-color var(--ps-motion), background-color var(--ps-motion);
}

.sd-mini-row:hover { border-color: var(--ps-gold); background: var(--ps-cream); }

.sd-mini-row i { color: var(--ps-gold); }
.sd-mini-row .sd-mini-end { margin-inline-start: auto; font-size: .78rem; color: var(--ps-muted); }

.sd-score {
    font-weight: 800;
    font-size: .8rem;
    padding: .2rem .65rem;
    border-radius: 999px;
}

.sd-score--good { background: var(--ps-success-soft); color: var(--ps-success); }
.sd-score--mid { background: var(--ps-warning-soft); color: var(--ps-warning); }
.sd-score--low { background: var(--ps-danger-soft); color: var(--ps-danger); }

/* ---------------- Profile / accordion integration ---------------- */

/* Hide Bootstrap accordion chevron in student realm; layout uses sd-acc-head content */
.sd-acc-head.accordion-button::after {
    display: none;
}

/* Accordion button reset inside student cards — keep collapse JS, use sd skin */
.sd-panel-card .accordion-button:not(.collapsed) {
    background: transparent;
    box-shadow: none;
}

.sd-panel-card .accordion-button:focus {
    box-shadow: none;
}

/* Crispy forms inside sd-id-card — keep bootstrap form-control, skin labels */
.sd-id-card .form-label {
    font-size: .85rem;
    font-weight: 600;
    color: var(--ps-muted);
    margin-bottom: .2rem;
}

.sd-id-card .form-control,
.sd-id-card .form-select {
    border: 1px solid var(--ps-line-cool);
    border-radius: .7rem;
    font-size: .88rem;
    padding: .45rem .75rem;
    background: var(--ps-paper);
    color: var(--ps-ink);
}

.sd-id-card .form-control:focus,
.sd-id-card .form-select:focus {
    border-color: var(--ps-gold);
    box-shadow: 0 0 0 3px var(--ps-gold-soft);
}

.sd-id-card .invalid-feedback {
    font-size: .78rem;
    color: var(--ps-danger);
}

/* Form text and help inside cards */
.sd-id-card .form-text {
    color: var(--ps-muted);
    font-size: .76rem;
}

/* Wrap course section heading + pill inline */
.sd-acc-head .sd-pill {
    margin-inline-start: 0;
}

/* Ensure sd-page container works with Bootstrap container */
.sd-page > .container {
    position: relative;
}

/* sd-panel-card inside accordion context — no double border on first item */
.sd-panel-card .sd-acc:first-of-type {
    border-top: 0;
}

.sd-panel-card .sd-acc:last-of-type {
    border-bottom: 0;
}

/* ---------------- Collapse / accordion state indicator ---------------- */
/* Replaces Bootstrap's hidden ::after chevron with a Font Awesome icon.
   LTR: collapsed → icon rotates -90deg (points right), expanded → points down.
   RTL: collapsed → icon rotates 90deg (points left), expanded → points down. */
.sd-collapse-indicator {
    transition: transform var(--ps-motion);
    font-size: .78rem;
    color: var(--ps-muted);
    flex-shrink: 0;
}

[dir="ltr"] .sd-acc-head[aria-expanded="false"] .sd-collapse-indicator,
[dir="ltr"] .sd-acc-head.collapsed .sd-collapse-indicator {
    transform: rotate(-90deg);
}

[dir="rtl"] .sd-acc-head[aria-expanded="false"] .sd-collapse-indicator,
[dir="rtl"] .sd-acc-head.collapsed .sd-collapse-indicator {
    transform: rotate(90deg);
}

/* ---------------- Responsive ---------------- */
@media (max-width: 991.98px) {
    .sd-learn { grid-template-columns: 1fr; }
    .sd-profile { grid-template-columns: 1fr; }
    .sd-learn-badge { font-size: .72rem; }
    .sd-day { min-height: 2.9rem; font-size: .78rem; }
}

@media (max-width: 575.98px) {
    .sd-hero { padding: 2.2rem 0 1.6rem; }
    .sd-nav-wrap { top: 66px; border-radius: var(--ps-radius); }
    .sd-day { min-height: 2.4rem; padding: .3rem .4rem; font-size: .72rem; border-radius: .55rem; }
    .sd-cal-grid { gap: .25rem; }
    .sd-learn-head { align-items: flex-start; }
    .sd-learn-badges { margin-inline-start: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .sd-btn, .sd-course-card, .sd-day, .sd-play, .sd-opt,
    .sd-lesson-row, .sd-mini-row, .sd-cal-nav a,
    .sd-nav-link, .sd-media-card, .sd-q-card, .sd-quick-link { transition: none; }
    html { scroll-behavior: auto; }
}

/* ---------------- Live student template helpers ---------------- */
.sd-page,
.sd-page > .container,
.sd-frame,
.sd-screen,
.sd-course-grid,
.sd-course-card,
.sd-learn-head,
.sd-learn-side,
.sd-learn-panel,
.sd-media-card,
.sd-q-card,
.sd-opt,
.sd-order-row,
.sd-match-row,
.sd-profile,
.sd-panel-card { min-width: 0; }

.sd-page img,
.sd-page video,
.sd-page iframe,
.sd-page canvas { max-width: 100%; }

.sd-learn-title,
.sd-learn-sub,
.sd-course-name,
.sd-course-desc,
.sd-q-text,
.sd-match-row .sd-match-key { overflow-wrap: anywhere; }

.sd-empty-icon { color: var(--ps-muted); opacity: .5; }
.sd-inherit-link { color: inherit; }
.sd-chip--small { font-size: .82rem; }
.sd-btn--sm { min-height: 32px; padding: .18rem .8rem; font-size: .82rem; }
.sd-empty-state {
    justify-content: center;
    grid-column: 1 / -1;
    padding: 1.5rem 0;
}

.sd-quiz-head--success { background: linear-gradient(120deg, var(--ps-success), var(--ps-success-deep)); }
.sd-quiz-head--closed { background: var(--ps-slate); }
.sd-quiz-grade-label { font-size: .9rem; }
.sd-quiz-grade-value { font-size: 1.4rem; }
.sd-quiz-closed-alert {
    background: var(--ps-mist);
    border: 1px solid var(--ps-line-cool);
}
.sd-quiz-closed-icon { color: var(--ps-muted); }

.sd-question-label { gap: .4rem; }
.sd-order-grip { color: var(--ps-muted); }
.sd-order-value {
    padding: .35rem .7rem;
    background: var(--ps-paper);
    border-radius: .7rem;
}
.sd-compact-btn {
    min-height: auto;
    padding: .3rem .5rem;
    border-color: var(--ps-line);
    border-radius: .6rem;
    background: transparent;
    font-size: .8rem;
}
.sd-correct-answer-section { margin-top: .7rem; }
.sd-answer-reveal {
    padding: .7rem 1rem;
    border: 1px solid var(--ps-line);
    border-radius: var(--ps-radius);
    background: var(--ps-mist);
}
.sd-answer-label { gap: .35rem; color: var(--ps-success); }
.sd-answer-list { color: var(--ps-ink); font-size: .9rem; }
.sd-manual-grade {
    padding: .7rem 1rem;
    border: 1px solid rgba(163, 106, 27, .25);
    border-radius: var(--ps-radius);
    background: var(--ps-warning-soft);
}
.sd-manual-grade-label {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--ps-warning);
    font-size: .86rem;
}
.sd-review-note {
    padding: .7rem 1rem;
    border: 1px solid var(--ps-line-cool);
    border-radius: var(--ps-radius);
    background: var(--ps-teal-soft);
}
.sd-review-note p { color: var(--ps-teal); font-size: .9rem; }

.sd-calendar-title {
    margin: 0 0 1.5rem;
    font-family: var(--ps-display);
    color: var(--ps-ink);
}
.sd-calendar-subtitle { margin-bottom: .5rem; gap: .4rem; font-size: .86rem; }
.sd-holiday-list { list-style: none; padding: 0; margin: 0 0 1rem; }
.sd-holiday-item {
    padding: .35rem .6rem;
    border: 1px solid var(--ps-line);
    border-radius: .7rem;
    margin-bottom: .35rem;
    background: var(--ps-paper);
    font-size: .88rem;
}
.sd-holiday-date { font-weight: 600; }
.sd-meeting-summary { gap: .4rem; }

.sd-id-role--editing { background: var(--ps-gold-soft); color: var(--ps-gold-deep); }
.sd-profile-form { width: 100%; margin-top: .8rem; text-align: start; }
.sd-profile-meta { margin-top: .8rem; }
.sd-profile-qr-block { margin-top: 1.25rem; }
.sd-qr-title { display: flex; justify-content: center; margin-bottom: .6rem; }
.sd-qr-link { display: block; text-align: center; }
.sd-qr-hint--centered { margin-top: .4rem; text-align: center; }
.sd-empty-course-note { display: block; padding: .5rem .8rem; font-size: .86rem; }
.sd-centered-note { text-align: center; }
.sd-results-body { padding-top: .85rem; }
.sd-result-meta { font-size: .78rem; }
.sd-narrow-container { max-width: 40rem; }

/* ---------------- Landing / welcome (index.html) ---------------- */
.sd-carousel-wrap {
    margin-bottom: 2rem;
    box-shadow: 0 4px 24px rgba(23, 48, 58, .06);
}

.sd-welcome {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2.5rem;
    padding: 1.4rem 1.75rem;
    background: #fff;
    border: 1px solid var(--ps-line-cool);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow);
}

.sd-welcome-role {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .82rem;
    font-weight: 700;
    color: var(--ps-teal);
    margin-bottom: .15rem;
}

.sd-welcome-name {
    font-family: var(--ps-display);
    font-size: 1.35rem;
    color: var(--ps-ink);
    line-height: 1.3;
}

.sd-welcome-stats {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
}

.sd-stat-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .8rem;
    border-radius: 999px;
    background: var(--ps-teal-soft);
    font-size: .82rem;
    font-weight: 700;
    color: var(--ps-teal);
}

.sd-stat-badge--warning {
    background: var(--ps-warning-soft);
    color: var(--ps-warning);
}

.sd-quick-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .8rem;
    margin-bottom: 2.5rem;
}

@media (max-width: 767.98px) {
    .sd-quick-grid { grid-template-columns: repeat(2, 1fr); }
}

.sd-quick-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: 1.5rem 1rem;
    background: #fff;
    border: 1px solid var(--ps-line-cool);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow);
    text-decoration: none;
    color: var(--ps-ink);
    transition: transform var(--ps-motion), box-shadow var(--ps-motion), border-color var(--ps-motion);
}

.sd-quick-link:hover {
    transform: translateY(-3px);
    border-color: var(--ps-gold);
    box-shadow: var(--ps-shadow-md);
    color: var(--ps-ink);
}

.sd-quick-link i {
    font-size: 1.5rem;
    color: var(--ps-gold);
}

.sd-quick-label {
    font-size: .84rem;
    font-weight: 700;
    text-align: center;
}

.sd-landing-title {
    font-family: var(--ps-display);
    font-size: 1.6rem;
    color: var(--ps-ink);
    text-align: center;
    margin-bottom: .5rem;
}

.sd-landing-divider {
    width: 4rem;
    height: 2px;
    background: linear-gradient(90deg, var(--ps-gold), var(--ps-teal));
    margin: 0 auto 1.8rem;
    border-radius: 999px;
}

/* Signup / success icon */
.sd-success-icon {
    font-size: 3.5rem;
    color: var(--ps-gold);
    margin-bottom: .8rem;
}

/* Landing responsive refinements */
@media (max-width: 575.98px) {
    .sd-welcome { padding: 1.1rem; }
    .sd-quick-link { padding: 1rem .7rem; }
    .sd-quick-link i { font-size: 1.2rem; }
}

/* ================= CALENDAR PAGE REFINEMENTS (student) ================= */
/* Polishes the scope-card calendar in student_calendar.html.
   Uses sd-panel-card/sd-screen/sd-chip/sd-meeting-list base styles above.
   Does not affect the admin month-grid calendar. */

/* Meeting-summary container: block-level flex so block children sit correctly.
   Overrides .sd-chip display:inline-flex for the calendar summary context. */
.sd-meeting-summary {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
}

/* Locked weekdays — gold left-border accent, paste surface, wraps safely */
.sd-calendar-locked-days {
    font-size: .82rem;
    padding: .35rem .65rem;
    border-inline-start: 3px solid var(--ps-gold);
    background: var(--ps-cream);
    border-radius: .6rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

/* Scheduled meeting list: override sd-meeting-list vertical rhythm */
.sd-meeting-list.sd-calendar-scheduled {
    display: grid;
    gap: .5rem;
    margin-top: .35rem;
}

/* Reset sd-meeting-list li flex space-between for calendar three-column rows.
   Specificity .sd-meeting-list.sd-calendar-scheduled li (0,2,1) beats base .sd-meeting-list li (0,1,1). */
.sd-meeting-list.sd-calendar-scheduled li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .35rem .7rem;
    padding: .55rem .75rem;
    border: 1px solid var(--ps-line-cool);
    border-radius: .8rem;
    background: var(--ps-paper);
    justify-content: flex-start;
    border-top: none;
    color: inherit;
    transition: border-color var(--ps-motion), box-shadow var(--ps-motion);
}

.sd-meeting-list.sd-calendar-scheduled li:hover {
    border-color: var(--ps-gold);
    box-shadow: var(--ps-shadow);
}

/* Date: teal accent, compact, no wrapping.
   Specificity .sd-calendar-scheduled .sd-calendar-meeting-date (0,2,0) beats .sd-meeting-list strong (0,1,1). */
.sd-calendar-scheduled .sd-calendar-meeting-date {
    font-weight: 700;
    font-size: .82rem;
    color: var(--ps-teal);
    flex-shrink: 0;
    white-space: nowrap;
}

/* Course name: bold ink, wraps for long Arabic/English names without clipping.
   Specificity .sd-calendar-scheduled .sd-calendar-meeting-course (0,2,0) beats .sd-meeting-list strong (0,1,1). */
.sd-calendar-scheduled .sd-calendar-meeting-course {
    color: var(--ps-ink);
    font-weight: 700;
    font-size: .9rem;
    flex: 1 1 10rem;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-align: start;
}

/* Level: muted, pushed inline-end on wider rows.
   Specificity .sd-calendar-scheduled .sd-calendar-meeting-level (0,2,0) beats .sd-meeting-list strong (0,1,1). */
.sd-calendar-scheduled .sd-calendar-meeting-level {
    font-size: .78rem;
    color: var(--ps-muted);
    margin-inline-start: auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.sd-calendar-scheduled .sd-calendar-meeting {
    min-width: 0;
}

/* ================= Responsive ================= */
@media (max-width: 575.98px) {
    .sd-calendar-page .sd-panel-sub {
        flex-basis: 100%;
        margin-inline-start: 0;
        text-align: start;
    }

    .sd-meeting-list.sd-calendar-scheduled li {
        padding: .4rem .55rem;
        gap: .25rem .5rem;
    }

    .sd-calendar-scheduled .sd-calendar-meeting-level {
        margin-inline-start: 0;
        flex-basis: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sd-meeting-list.sd-calendar-scheduled li {
        transition: none;
    }
}