:root {
    --ink: var(--black);
    --paper: var(--white);
    --paper-raised: var(--pure-white);
    --line: var(--light-gray);
    --forest: var(--brand-green-deep);
    --forest-dim: var(--brand-green-shade);
    --mustard-soft: var(--accent-1-soft);
    --full-red: var(--color-danger);
    --focus: var(--accent-1);
    --mustard: var(--accent-1);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--paper);
    color: var(--ink);
    font-family: 'Inter', system-ui, sans-serif;
    line-height: 1.5;
    padding: 0 0 6rem;
}

a {
    color: var(--forest);
}

/* ---------- header ---------- */
header.page-head {
    border-bottom: 1px solid var(--line);
    padding: 3rem 2rem 2rem;
    max-width: 1100px;
    margin: 0 auto;
}

header.page-head h1 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 2.4rem;
    margin: 0 0 .5rem;
    color: var(--forest);
}

header.page-head p {
    margin: 0;
    max-width: 60ch;
    color: var(--dark-gray);
    font-size: 1.02rem;
}

main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 150px 2rem;
}

/* ---------- controls ---------- */
.controls {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
    align-items: end;
    padding: 1.75rem 0 1.25rem;
}

.field {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.field label {
    font-size: .78rem;
    color: var(--dark-gray);
    font-weight: 500;
}

.filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 2.35rem;
    color: var(--ink);
    font-size: .88rem;
    cursor: pointer;
}

.filter-toggle input {
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: var(--focus);
}

.field input,
.field select {
    font: inherit;
    font-size: .92rem;
    padding: .5rem .65rem;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: var(--paper-raised);
    color: var(--ink);
    min-width: 9rem;
}

.field input:focus,
.field select:focus,
button:focus-visible,
.course-row:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 1px;
}

#search {
    min-width: 16rem;
}

.field.search {
    flex: 1 1 16rem;
}

.result-count {
    font-size: .85rem;
    color: var(--dark-gray);
    padding-bottom: .6rem;
    margin-left: auto;
    align-self: end;
}

.clear-filters {
    background: none;
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: .5rem .8rem;
    font: inherit;
    font-size: .85rem;
    color: var(--forest);
    cursor: pointer;
}

.clear-filters:hover {
    background: var(--mustard-soft);
}

/* ---------- table ---------- */
table {
    width: 100%;
    border-collapse: collapse;
    font-size: .95rem;
}

thead th {
    text-align: left;
    font-weight: 600;
    color: var(--forest);
    border-bottom: 2px solid var(--forest);
    padding: .7rem .6rem;
    white-space: nowrap;
}

thead th button {
    background: none;
    border: none;
    font: inherit;
    font-weight: 600;
    color: inherit;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    gap: .3rem;
}

thead th button .arrow {
    font-size: .7rem;
    color: var(--mustard);
    visibility: hidden;
}

thead th button[aria-sort="ascending"] .arrow,
thead th button[aria-sort="descending"] .arrow {
    visibility: visible;
}

thead th button[aria-sort="ascending"] .arrow::before {
    content: "▲";
}

thead th button[aria-sort="descending"] .arrow::before {
    content: "▼";
}

tbody tr.course-row {
    cursor: pointer;
    border-bottom: 1px solid var(--line);
}

tbody tr.course-row:hover {
    background: var(--lightest-gray);
}

tbody tr.course-row td {
    padding: .85rem .6rem;
    vertical-align: top;
}

td.title-cell {
    font-weight: 600;
    color: var(--ink);
}

td.title-cell .chevron {
    display: inline-block;
    margin-right: .45rem;
    color: var(--mustard);
    transition: transform .15s ease;
    font-size: .8rem;
}

tr.course-row[aria-expanded="true"] .chevron {
    transform: rotate(90deg);
}

.badge {
    display: inline-block;
    font-size: .72rem;
    font-weight: 500;
    padding: .15rem .5rem;
    border-radius: 99px;
    background: var(--mustard-soft);
    color: var(--accent-1-hover);
    white-space: nowrap;
}

.badge.full {
    background: var(--danger-soft);
    color: var(--full-red);
}

tr.detail-row td {
    padding: 0;
    border-bottom: 1px solid var(--line);
    background: var(--paper-raised);
}

.detail-panel {
    padding: 1.5rem 1.75rem 1.75rem 2.4rem;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.5rem;
    align-items: start;
}

.detail-panel .summary {
    max-width: 62ch;
    color: var(--black);
}

.detail-panel .meta-list {
    list-style: none;
    margin: .75rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .5rem;
}

.detail-panel .meta-list li {
    font-size: .78rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 99px;
    padding: .2rem .6rem;
    color: var(--dark-gray);
}

.detail-actions {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    min-width: 9.5rem;
}

.btn {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    font: inherit;
    font-weight: 600;
    font-size: .88rem;
    padding: .55rem 1rem;
    border-radius: 3px;
    cursor: pointer;
    border: 1px solid transparent;
}

.btn-primary {
    background: var(--forest);
    color: var(--pure-white);
}

.btn-primary:hover {
    background: var(--forest-dim);
}

.btn-secondary {
    background: none;
    border-color: var(--forest);
    color: var(--forest);
}

.btn-secondary:hover {
    background: var(--mustard-soft);
}

.btn[aria-disabled="true"] {
    background: var(--light-gray);
    border-color: var(--light-gray);
    color: var(--dark-gray);
    cursor: not-allowed;
}

.empty-state {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--dark-gray);
}

.empty-state strong {
    display: block;
    color: var(--ink);
    font-size: 1.05rem;
    margin-bottom: .35rem;
}

@media (max-width: 700px) {
    header.page-head {
        padding: 2rem 1.25rem 1.5rem;
    }

    main {
        /* Keep the same top offset as desktop: .main-menu is
           position:absolute (it's meant to float over hero banners),
           so every plain content page must reserve this space itself
           or the header sits on top of whatever comes right after it.
           Dropping this to 0 here was what caused the header to
           overlap .controls on mobile. */
        padding: 150px 1.25rem 3rem;
    }

    table,
    thead,
    tbody,
    tr,
    td {
        display: block;
    }

    thead {
        display: none;
    }

    tbody tr.course-row {
        padding: .9rem 0;
    }

    tbody tr.course-row td {
        padding: .15rem 0;
        border: none;
    }

    td.title-cell {
        font-size: 1.02rem;
    }

    td[data-label]::before {
        content: attr(data-label);
        display: inline-block;
        min-width: 6.5rem;
        color: var(--dark-gray);
        font-size: .78rem;
    }

    .detail-panel {
        grid-template-columns: 1fr;
        padding: 1rem 0 1.5rem;
    }

    .detail-actions {
        flex-direction: row;
    }



}