/* Materials: course chips, the file tree and the file viewer. */

/* The Moodle section (4B-UI, layout A): the files card, and the course card beside it on a laptop. */
.moodle-layout {
    display: flex;
    width: 100%;
    max-width: 980px;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
}

.materials-card {
    flex: 1 1 640px;
    min-width: 0;
    width: 100%;
    max-width: 640px;
    padding: 22px 22px 26px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface-raised);
    box-shadow: var(--shadow-raised);
}

.materials-course-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 14px 0 4px;
}

.course-chip-row {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.course-chip {
    display: inline-flex;
    flex: 0 0 auto;
    min-width: 56px;
    min-height: var(--touch-target);
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: .85rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    scroll-snap-align: start;
    transition: border-color var(--transition), background var(--transition), transform var(--transition);
}

.course-chip:hover {
    border-color: var(--color-accent);
    transform: translateY(-1px);
}

.course-chip.active {
    border-color: var(--color-accent);
    background: var(--color-brand-soft);
    color: var(--color-accent);
}

.materials-course-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: var(--touch-target);
    margin-top: 8px;
    padding: 4px 14px;
    border: 1px solid var(--color-border);
    border-radius: 26px;
    background: var(--color-surface);
    font-size: .8rem;
}

.materials-course-bar:has(.materials-sync-label:empty) {
    display: none;
}

.materials-sync-label {
    min-width: 0;
    color: var(--color-text-muted);
}

.materials-sync-label.is-warning {
    color: var(--color-warning);
}

.materials-sync-button {
    display: inline-grid;
    flex: 0 0 auto;
    width: var(--touch-target);
    height: var(--touch-target);
    place-items: center;
    padding: 0;
    border: 1px solid var(--color-border-strong);
    border-radius: 50%;
    background: var(--color-surface-raised);
    color: var(--color-text);
    font-weight: 650;
    transition: border-color var(--transition), background var(--transition);
}

.materials-sync-button:hover:not(:disabled) {
    border-color: var(--color-accent);
    background: var(--color-surface-hover);
}

.materials-sync-button:disabled {
    cursor: default;
    opacity: .8;
}

.materials-sync-button .sync-icon {
    display: inline-grid;
    place-items: center;
}

.materials-sync-button .sync-icon svg {
    display: block;
}

.materials-sync-button.is-checking .sync-icon {
    animation: spin 900ms linear infinite;
}

.materials-tree {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 14px;
}

.materials-folder summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: var(--touch-target);
    box-sizing: border-box;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: .88rem;
    font-weight: 600;
    list-style: none;
}

.materials-folder summary::-webkit-details-marker {
    display: none;
}

.materials-folder summary:hover {
    background: var(--color-surface-hover);
}

.materials-folder .folder-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.materials-folder .folder-count {
    flex: 1 0 auto;
    text-align: right;
    color: var(--color-text-muted);
    font-size: .68rem;
    font-weight: 500;
}

.materials-folder-children {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 3px 0 5px 25px;
    padding-left: 11px;
    border-left: 1px solid var(--color-border);
}

.materials-file {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: var(--touch-target);
    padding: 9px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}

.materials-file:hover {
    border-color: var(--color-accent);
    background: var(--color-surface-hover);
}

.file-icon, .folder-icon {
    display: inline-grid;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    place-items: center;
    color: var(--badge-other);
}

.file-icon svg, .folder-icon svg {
    display: block;
    width: 22px;
    height: 22px;
}

.file-icon--pdf {
    color: var(--badge-pdf);
}

.file-icon--word {
    color: var(--badge-doc);
}

.file-icon--excel {
    color: var(--badge-xls);
}

.file-icon--powerpoint {
    color: var(--badge-ppt);
}

.file-icon--image {
    color: var(--badge-img);
}

.folder-icon {
    color: var(--color-text-muted);
}

.folder-icon--open {
    color: var(--color-accent);
}

.materials-file .file-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .85rem;
}

.materials-file .file-size {
    flex: 0 0 auto;
    color: var(--color-text-muted);
    font-size: .68rem;
}

.file-icon--html {
    color: var(--color-accent);
}

/* docs/26: a link, activity or too-large row (approved mockup, docs/26-mockup). It looks like a file row; the <a>
   inside fills it, and the row's Copy link icon sits after it. */
.materials-file--item {
    padding: 0;
    cursor: default;
}

.materials-file--item .item-open {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: var(--touch-target);
    padding: 9px 10px;
    border-radius: inherit;
    color: inherit;
    text-decoration: none;
}

.materials-file--item .item-open:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}

.materials-file--item .folder-link {
    margin: 0 6px 0 -6px;
}

.file-icon--link,
.file-icon--activity,
.file-icon--writeup {
    color: var(--color-accent);
}

.materials-file .file-ext {
    display: inline-grid;
    flex: 0 0 auto;
    color: var(--color-text-muted);
}

.materials-file .file-ext svg {
    display: block;
    width: 14px;
    height: 14px;
}

/* File viewer: a full-screen dialog (top bar + body) on every screen size. */
#modalOverlay:has(.viewer) {
    padding: 0;
    align-items: stretch;
}

#modal:has(.viewer) {
    display: flex;
    width: 100vw;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
}

#modal:has(.viewer) #modalContent {
    display: flex;
    flex: 1;
    min-width: 0;
}

.viewer {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
}

.viewer-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: calc(56px + var(--safe-top));
    padding: var(--safe-top) 12px 0;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
}

#modalContent .viewer-title {
    flex: 1;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    font-size: 1rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.viewer-action {
    display: inline-flex;
    min-height: var(--touch-target);
    align-items: center;
    padding: 0 14px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-size: .85rem;
    cursor: pointer;
    font-weight: 650;
    text-decoration: none;
}

.viewer-action:hover {
    border-color: var(--color-accent);
    background: var(--color-surface-hover);
}

/* ↗ and L2's Copy link: round icon buttons. */
.viewer-newtab,
.viewer-copylink {
    min-width: var(--touch-target);
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    font-size: 1.05rem;
}

.viewer-body {
    display: flex;
    flex: 1;
    min-height: 0;
    padding-bottom: var(--safe-bottom);
    background: var(--color-bg);
}

.viewer-content {
    display: flex;
    flex: 1;
    min-width: 0;
    align-items: center;
    justify-content: center;
}

.materials-viewer-frame {
    width: 100%;
    height: 100%;
    border: 0;
    background: var(--doc-page);
}

.materials-viewer-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.viewer-panel {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 24px;
    text-align: center;
}

.viewer-panel .primary-btn {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

/* 4C: "Preparing preview…" offers Try again and Download side by side. */
.viewer-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.viewer-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--color-border-strong);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: spin 800ms linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* The course card: Grades, Due soon, Announcements. */
.course-details-card {
    position: sticky;
    top: 0;
    flex: 0 0 320px;
    min-width: 0;
    padding: 20px 20px 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface-raised);
    box-shadow: var(--shadow-raised);
}

.course-details-card:empty {
    display: none;
}

.cd-section {
    margin-bottom: 18px;
}

.cd-title {
    margin: 0 0 8px;
    color: var(--color-text-muted);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.cd-empty {
    margin: 0;
    padding: 12px;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: .8rem;
    line-height: 1.5;
}

.cd-total {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 6px;
}

.cd-total-value {
    font-size: 1.5rem;
    font-weight: 750;
}

.cd-total-label {
    color: var(--color-text-muted);
    font-size: .74rem;
}

.cd-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cd-list > li {
    border-top: 1px solid var(--color-border);
}

.cd-list > li:first-child {
    border-top: 0;
}

.cd-grade-row, .cd-row {
    display: flex;
    min-height: 40px;
    align-items: center;
    gap: 8px;
    font-size: .8rem;
}

.cd-grade-row {
    flex-wrap: wrap;
    padding: 6px 0;
}

.cd-row {
    width: 100%;
    min-height: var(--touch-target);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-size: .8rem;
    text-align: left;
    cursor: pointer;
}

.cd-row:hover .cd-name {
    color: var(--color-accent);
}

.cd-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cd-ann .cd-name {
    font-weight: 650;
}

.cd-due-submitted .cd-name {
    color: var(--color-text-muted);
}

.cd-when, .cd-weight {
    color: var(--color-text-muted);
    font-size: .72rem;
    white-space: nowrap;
}

.cd-grade {
    min-width: 44px;
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}

.cd-feedback {
    flex-basis: 100%;
    margin: 0;
    color: var(--color-text-muted);
    font-size: .74rem;
    line-height: 1.45;
    white-space: pre-line;
}

.cd-code {
    flex: 0 0 auto;
    color: var(--color-text-muted);
    font-size: .64rem;
    font-weight: 700;
}

.cd-flag {
    flex: 0 0 auto;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--color-warning-bg);
    color: var(--color-warning);
    font-size: .62rem;
    font-weight: 750;
    text-transform: uppercase;
}

.cd-flag-submitted {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.cd-flag-overdue {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

.cd-ann-body {
    padding: 0 0 12px;
    font-size: .8rem;
    line-height: 1.5;
}

.cd-ann-by {
    margin: 0 0 4px;
    color: var(--color-text-muted);
    font-size: .72rem;
}

.cd-ann-text {
    margin: 0;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* Text for screen readers only. */
.sr-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* All updates: the chip's dot, and the feed that replaces the files. */
.updates-chip {
    gap: 6px;
}

.chip-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-accent);
}

.chip-dot[hidden] {
    display: none;
}

.moodle-layout[data-mode="course"] .updates-feed,
.moodle-layout[data-mode="course"] .updates-due-phone,
.updates-due-phone,
.moodle-layout[data-mode="updates"] .moodle-switch,
.moodle-layout[data-mode="updates"] .materials-sync-button,
.moodle-layout[data-mode="updates"] .zip-menu-anchor,
.moodle-layout[data-mode="updates"] .materials-course-bar,
.moodle-layout[data-mode="updates"] #materialsStatus,
.moodle-layout[data-mode="updates"] .materials-tree {
    display: none;
}

.updates-feed {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.feed-day {
    margin: 14px 0 4px;
    color: var(--color-text-muted);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.feed-day:first-child {
    margin-top: 0;
}

.feed-note {
    color: var(--color-text-muted);
    font-size: .85rem;
}

.upd {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid var(--color-border);
}

.feed-day + .upd {
    border-top: 0;
}

.u-dot {
    flex: 0 0 7px;
    height: 7px;
    margin-top: 7px;
    border-radius: 50%;
}

.upd.unseen .u-dot {
    background: var(--color-accent);
}

.u-course {
    flex: 0 0 auto;
    min-width: 36px;
    padding-top: 2px;
    color: var(--color-text-muted);
    font-size: .68rem;
    font-weight: 700;
}

.u-main {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text);
    font: inherit;
    text-align: left;
}

button.u-main {
    cursor: pointer;
}

button.u-main:hover .u-subj {
    color: var(--color-accent);
}

.u-kind {
    color: var(--color-text-muted);
    font-size: .7rem;
}

.u-subj {
    font-size: .88rem;
    font-weight: 650;
}

.u-text {
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: .8rem;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upd.open .u-text {
    color: var(--color-text);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.u-link {
    align-self: flex-start;
    margin-top: 4px;
    color: var(--color-accent);
    font-size: .78rem;
    font-weight: 650;
    text-decoration: none;
}

.u-time {
    flex: 0 0 auto;
    color: var(--color-text-muted);
    font-size: .72rem;
    white-space: nowrap;
}

/* The phone's Files | Grades switch; a laptop shows both panes side by side. */
.moodle-switch {
    display: none;
    gap: 4px;
    margin-top: 10px;
    padding: 3px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
}

.moodle-switch button {
    flex: 1;
    min-height: 34px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--color-text-muted);
    font: inherit;
    font-size: .82rem;
    font-weight: 650;
    cursor: pointer;
}

.moodle-switch button[aria-pressed="true"] {
    background: var(--color-brand-soft);
    color: var(--color-accent);
}

@media (max-width: 720px) {
    .moodle-layout {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    .moodle-layout .materials-card {
        flex: none;
        max-width: none;
    }
    .moodle-switch {
        display: flex;
    }
    .course-details-card {
        position: static;
        flex: none;
    }
    .moodle-layout[data-pane="files"] .course-details-card,
    .moodle-layout[data-mode="updates"] .course-details-card {
        display: none;
    }
    .moodle-layout[data-mode="updates"] .updates-due-phone {
        display: block;
        margin-top: 14px;
    }
    .moodle-layout[data-mode="course"][data-pane="grades"] .materials-course-bar,
    .moodle-layout[data-mode="course"][data-pane="grades"] #materialsStatus,
    .moodle-layout[data-mode="course"][data-pane="grades"] .materials-tree {
        display: none;
    }
    /* On Grades the two cards read as one: the course card continues the files card. */
    .moodle-layout[data-mode="course"][data-pane="grades"] .materials-card {
        padding-bottom: 8px;
        border-bottom: 0;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        box-shadow: none;
    }
    .moodle-layout[data-mode="course"][data-pane="grades"] .course-details-card {
        padding-top: 8px;
        border-top: 0;
        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
        box-shadow: none;
    }
}

@media (max-width: 640px) {
    .viewer-bar {
        gap: 6px;
        padding-right: 8px;
        padding-left: 6px;
    }
    .viewer-download {
        padding: 0 10px;
    }
}

/* Soft launch (docs/20): without moodle-student, the files card alone, as before 4B-UI. */
.moodle-layout[data-details="off"] .course-details-card,
.moodle-layout[data-details="off"] .moodle-switch {
    display: none;
}

/* P2: the not-connected note's way out, under the sentence. */
.materials-connect-btn {
    display: block;
    margin-top: 12px;
}

/* Z3 (docs/25): zip downloads. A folder row's icon at its right end; the round button beside Refresh.
   L2: a folder row's link icon (Copy link) sits left of the zip icon and looks and shows the same. */
.zip-download,
.folder-link {
    display: inline-grid;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    margin: -4px -4px -4px auto;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color var(--transition), background var(--transition), opacity var(--transition);
}

.zip-download svg,
.folder-link svg,
.viewer-copylink svg {
    display: block;
}

/* The first of the row's icons takes the free space; a zip icon after a link icon sits right beside it. */
.folder-link:not(:last-child) {
    margin-right: 0;
}

.folder-link + .zip-download {
    margin-left: 0;
}

.zip-download:hover,
.folder-link:hover {
    background: var(--color-brand-soft);
    color: var(--color-accent);
}

.zip-download:focus-visible,
.folder-link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
    color: var(--color-accent);
}

.zip-download.is-preparing {
    color: var(--color-accent);
    cursor: default;
}

.zip-download.is-preparing svg,
.zip-course-button.is-preparing svg {
    animation: spin 900ms linear infinite;
}

.zip-download.is-failed {
    color: var(--color-warning);
}

.zip-course-button.is-failed {
    color: var(--color-warning);
}

/* A laptop: the icon shows while the pointer or the keyboard is on the row, and while its zip is prepared. */
@media (hover: hover) {
    .zip-download,
    .folder-link {
        opacity: 0;
    }
    .materials-folder summary:hover .folder-link,
    .materials-folder summary:focus-within .folder-link,
    .materials-file--item:hover .folder-link,
    .materials-file--item:focus-within .folder-link,
    .materials-folder summary:hover .zip-download,
    .materials-folder summary:focus-within .zip-download,
    .zip-download.is-preparing,
    .zip-download.is-failed {
        opacity: 1;
    }
}

/* A phone (no hover): a full touch target, only on open folders (asked 2026-10-06, option B), so the
   closed list looks as before. The row keeps its height: the margins take back the summary's padding. */
@media (hover: none) {
    .zip-download,
    .folder-link {
        width: var(--touch-target);
        height: var(--touch-target);
        margin: -9px -10px -9px auto;
    }
    .folder-link:not(:last-child) {
        margin-right: 0;
    }
    .materials-folder:not([open]) > summary .folder-link {
        display: none;
    }
    /* A link row on a phone: a long press on it copies or shares its address. */
    .materials-file--item .folder-link {
        display: none;
    }
    /* A closed folder's zip still preparing shows alone: back at the row's right end. */
    .materials-folder:not([open]) > summary .folder-link + .zip-download {
        margin-left: auto;
    }
    .materials-folder:not([open]) > summary .zip-download:not(.is-preparing):not(.is-failed) {
        display: none;
    }
}

.zip-menu-anchor {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}

.zip-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 20;
    display: grid;
    gap: 2px;
    min-width: 210px;
    padding: 6px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.zip-menu[hidden] {
    display: none;
}

.zip-menu button {
    min-height: var(--touch-target);
    padding: 0 12px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-size: .88rem;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.zip-menu button:hover,
.zip-menu button:focus-visible {
    background: var(--color-surface-hover);
}

/* L2: a thin line between the downloads and Copy course link. */
.zip-menu-divider {
    height: 1px;
    margin: 4px 6px;
    background: var(--color-border);
}