.md-grid {
    max-width: 66rem;
}

.md-typeset h1 {
    font-weight: bold;
    color: var(--md-default-fg-color);
}

.md-typeset h2 {
    font-weight: bold;
}

.md-sidebar {
    width: 11.5rem;
}

.md-footer {
    margin-top: 30px;
}

.card {
    border-radius: 5px;
    box-shadow: 0 1px 3px 0 #ddd, 0 0 0 1px #ddd;
}

a.card {
    -webkit-box-shadow: 0 1px 3px 0 #ddd, 0 0 0 1px #ddd;
    box-shadow: 0 1px 3px 0 #ddd, 0 0 0 1px #ddd;
    transition: 0.25s;
}

a.card:hover {
    -webkit-box-shadow: 0 1px 12px 0 #ccc, 0 0 0 1px #ddd;
    box-shadow: 0 1px 12px 0 #ccc, 0 0 0 1px #ddd;
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
}

.card .container {
    padding: 10px 16px;
    text-align: center;
}

#this-week {
    display: flex;
    flex-wrap: wrap;
}

#this-week .card {
    flex: 1 1 0;
    margin: 0.5rem;
    min-width: 250px;
}

#this-week .card .header {
    font-size: 14pt;
    font-weight: bold;
    padding: 15px;
    margin-bottom: 2px;
    border-bottom: 1px #ccc solid;
}

#this-week .card .content {
    font-size: 11pt;
    padding: 15px;
    border-bottom: 0.5px #ccc solid;
}

#this-week .card .content:last-child {
    border-bottom: none;
    padding-bottom: 20px;
}

#this-week .lecture-name,
#this-week .reading-name,
#this-week .recitation-name,
#this-week .homework-name {
    font-size: 12pt;
    font-weight: bold;
    padding-bottom: 2px;
}

#this-week .lecture-date,
#this-week .reading-date,
#this-week .recitation-date,
#this-week .homework-date {
    font-size: 11pt;
    font-weight: light;
    padding-bottom: 2px;
}

#this-week .homework-date .material-symbols-outlined,
#this-week .lecture-date .material-symbols-outlined,
#this-week .reading-date .material-symbols-outlined {
    font-size: 15px;
    vertical-align: text-top;
    padding-right: 2px;
}

#schedule .md-typeset__table {
    display: table;
    width: 100%;
    margin-right: 50px;
}

#schedule table {
    border-collapse: collapse;
    font-size: 90%;
    display: table;
}

#schedule table td, table th {
    border-left: 1px solid var(--md-typeset-table-color);
    border-right: 1px solid var(--md-typeset-table-color);
    padding: 10px!important;
}

#schedule table:not([class]) td {
    vertical-align: middle;
}

#schedule table td:first-child, table th:first-child {
    border-left: none;
}

#schedule table td:last-child, table th:last-child {
    border-right: none;
}

#schedule table thead,
#schedule table tbody tr:nth-child(10n+5),
#schedule table tbody tr:nth-child(10n) {
    border-bottom: 3px #ccc solid;
}

#schedule table td:nth-last-child(3) {
    border-right: none;
}

#schedule table:not([class]) tbody tr:hover {
    background-color: rgba(0,0,0,0);
}

/* Quiz cell styling */
#schedule .quiz {
    line-height: 1.5;
}
#schedule .quiz .quiz-due {
    color: var(--md-default-fg-color--light);
}
#schedule .quiz .label.label-purple {
    margin-top: 0.6em;
    display: inline-block;
}

/* Quiz readings list inside quiz box */
#schedule .quiz .quiz-readings-wrap {
    margin-top: 0.5em;
    padding-top: 0.4em;
    border-top: 1px solid var(--md-default-fg-color--lightest);
}
#schedule .quiz .quiz-readings-label {
    display: block;
    font-size: 0.65em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--md-default-fg-color--light);
    margin-bottom: 0.55em;
}
#schedule .quiz ul.quiz-readings {
    list-style: none;
    padding: 0;
    margin: 0;
}
#schedule .quiz ul.quiz-readings li {
    display: flex;
    align-items: center;
    gap: 0.45em;
    margin-bottom: 0.3em;
}
#schedule .quiz ul.quiz-readings li:last-child {
    margin-bottom: 0;
}
#schedule .quiz .reading-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9em;
    flex-shrink: 0;
    line-height: 1;
}
#schedule .quiz ul.quiz-readings a {
    color: var(--md-typeset-a-color);
    text-decoration: none;
}
#schedule .quiz ul.quiz-readings a:hover {
    text-decoration: underline;
}

/* Checkpoint list styling */
#schedule .assignment ul.checkpoints {
    list-style: none;
    padding: 0;
    margin: 1rem 0 1rem 0;
}

#schedule .assignment ul.checkpoints li {
    display: flex;
    align-items: center;
    margin-bottom: 0.65rem;
    gap: 0.65rem;
}

#schedule .assignment ul.checkpoints li:last-child {
    margin-bottom: 0;
}

/* Checkpoint badge - flag icon */
#schedule .assignment .checkpoint-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 0;
    line-height: 1;
}

/* Checkpoint info container */
#schedule .assignment .checkpoint-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex-grow: 1;
}

/* Checkpoint date */
#schedule .assignment .checkpoint-date {
    font-size: 0.65rem;
    color: var(--md-default-fg-color--light);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Checkpoint title */
#schedule .assignment .checkpoint-title {
    font-size: 0.75rem;
    color: var(--md-default-fg-color);
    line-height: 1.35;
    font-weight: 400;
}

a.label, a.label:visited {
    color: #fff;
}

a.label:hover {
    color: #fff;
    text-decoration: underline;
}

.label.label-aqua {
    background-color: #2E8C8C;
    border-color: #2E8C8C;
}

.label.label-red {
    background-color: #D84136;
    border-color: #D84136;
    color: #fff;
}

.label.label-gold {
    background-color: #D99036;
    border-color: #D99036;
}

.label.label-green {
    background-color: #28a745;
    border-color: #28a745;
}

.label.label-break {
    background-color: #282828;
    border-color: #767676;
    color: #e5e5e5;
}

.label.label-break:hover {
    text-decoration: none;
    color: #e5e5e5;
}

.label.label-blue {
    background-color: #2185d0;
    border-color: #2185d0;
}

/* Custom schedule table (website/docs/index.md). Mirrors coursemd's Event/Assignment
   pill layout (reusing the .label label-* pill classes above) but renders one row per
   real event on its true date, so there is no quiz column and no empty Tue/Thu rows. */
#course-schedule .md-typeset__table {
    /* Material wraps tables in an inline-block container, which otherwise
       shrink-wraps this table instead of letting it fill the content area. */
    display: block;
}

#course-schedule table {
    /* display:table defeats Material's inline-block shrink-to-content on unclassed
       tables, so width:100% actually fills the content column. */
    display: table;
    width: 100%;
    border-collapse: collapse;
}

#course-schedule th,
#course-schedule td {
    text-align: left;
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid var(--md-typeset-table-color);
    vertical-align: middle;
}

#course-schedule thead th {
    font-weight: 700;
    border-bottom: 2px solid var(--md-typeset-table-color);
}

#course-schedule td.when {
    width: 9rem;
    white-space: nowrap;
    color: var(--md-default-fg-color--light);
    font-variant-numeric: tabular-nums;
}

/* Week boundary: a heavier divider above the first row of each new week
   (weeks run Mon-Sun, matching the syllabus week numbering). */
#course-schedule tr.week-start td {
    border-top: 3px solid var(--md-default-fg-color--light);
}

#course-schedule tbody tr:hover {
    background: var(--md-default-fg-color--lightest);
}

/* Theme primary = a deep tartan green (mkdocs.yml sets palette primary: custom).
   The nav itself is painted by the tartan below; this mainly colors other primary UI. */
:root {
    --md-primary-fg-color: #0d4d2b;
    --md-primary-fg-color--light: #14663a;
    --md-primary-fg-color--dark: #083a20;
    --md-primary-bg-color: #ffffff;
    --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);
}

/* Material paints prose links in the primary color, and the tartan green above is
   so dark that links read as body text. Use a lighter green for links (5.4:1 on
   white, 7.7:1 on the slate background) and underline them so they read as links
   without depending on color. */
:root,
[data-md-color-scheme="default"] {
    --md-typeset-a-color: #1a7a47;
}

[data-md-color-scheme="slate"] {
    --md-typeset-a-color: #5cc78a;
}

.md-typeset a:not(.label):not(.headerlink):not(.staffer-links a) {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.md-typeset a:not(.label):not(.headerlink):not(.staffer-links a):hover,
.md-typeset a:not(.label):not(.headerlink):not(.staffer-links a):focus {
    text-decoration-thickness: 2px;
}

/* CMU tartan on the top nav — an approximation of the Carnegie Mellon sett. Layers,
   top to bottom: diagonal twill, red tramlines, yellow guard line, then green+blue
   blocks (semi-transparent so warp/weft crossings blend into teal), over a near-black
   base that shows through the gaps as the black bands. Pure CSS, one 60px sett, same
   in light and dark. Tune: block alphas for saturation, the pixel stops for sett scale,
   the stripe alphas for how loud the red/yellow read. */
.md-header,
.md-tabs {
    background-color: #0b1416;
    background-image:
        /* dark scrim so the tartan reads as a deep, muted texture and white nav text
           stays legible over it. Raise the alpha to mute more, lower to brighten. */
        linear-gradient(rgba(7, 12, 14, 0.63), rgba(7, 12, 14, 0.63)),
        /* diagonal twill (woven texture) */
        repeating-linear-gradient(45deg,
            rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 4px),
        /* red tramlines through both blocks (vertical + horizontal) */
        repeating-linear-gradient(90deg,
            transparent 0 11px, rgba(216, 32, 46, 0.9) 11px 13px,
            transparent 13px 16px, rgba(216, 32, 46, 0.9) 16px 18px,
            transparent 18px 41px, rgba(216, 32, 46, 0.9) 41px 43px,
            transparent 43px 46px, rgba(216, 32, 46, 0.9) 46px 48px,
            transparent 48px 60px),
        repeating-linear-gradient(0deg,
            transparent 0 11px, rgba(216, 32, 46, 0.9) 11px 13px,
            transparent 13px 16px, rgba(216, 32, 46, 0.9) 16px 18px,
            transparent 18px 41px, rgba(216, 32, 46, 0.9) 41px 43px,
            transparent 43px 46px, rgba(216, 32, 46, 0.9) 46px 48px,
            transparent 48px 60px),
        /* yellow guard line, once per sett (vertical + horizontal) */
        repeating-linear-gradient(90deg,
            transparent 0 28px, rgba(245, 205, 25, 0.95) 28px 31px, transparent 31px 60px),
        repeating-linear-gradient(0deg,
            transparent 0 28px, rgba(245, 205, 25, 0.95) 28px 31px, transparent 31px 60px),
        /* green + blue blocks, warp (vertical) */
        repeating-linear-gradient(90deg,
            rgba(18, 99, 58, 0.62) 0 27px, transparent 27px 33px,
            rgba(30, 64, 190, 0.62) 33px 57px, transparent 57px 60px),
        /* green + blue blocks, weft (horizontal) */
        repeating-linear-gradient(0deg,
            rgba(18, 99, 58, 0.62) 0 27px, transparent 27px 33px,
            rgba(30, 64, 190, 0.62) 33px 57px, transparent 57px 60px);
}

/* Keep the header title bold after scrolling. Material shows the site title (bold) at
   the top and swaps in the page title at a lighter weight once you scroll past the H1;
   force that second title bold too, for legibility over the tartan. */
.md-header__topic + .md-header__topic {
    font-weight: 700;
}

.label.label-purple {
    background-color: #8B5A96;
    border-color: #8B5A96;
}

.label .material-symbols-outlined {
    font-size: 15px;
    vertical-align: text-top;
    padding-right: 4px;
}

.left.floating.label {
    left: 0;
    right: auto;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.floating {
    position: absolute;
    z-index: 100;
    top: -1em;
    white-space: nowrap;
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
}

.label:first-child {
    margin-left: 0;
}

.label {
    font-size: 0.65rem;
    display: inline-block;
    line-height: 1;
    vertical-align: baseline;
    margin: 0.14em;
    background-color: #e8e8e8;
    background-image: none;
    padding: 0.5833em 0.833em;
    color: rgba(0,0,0,.6);
    text-transform: none;
    font-weight: 700;
    border: 0 solid transparent;
    border-radius: 0.28571429rem;
    -webkit-transition: background .1s ease;
    transition: background .1s ease;
}

#course-instructors .card,
#course-assistants .card {
    display: inline-block;
    min-width: 275px;
    margin: 0.5rem;
}

.staffer .staffer-image {
    border-radius: 50%;
    height: 100px;
    width: 100px;
    object-fit: cover;
    margin-top: .50rem;
}

.staffer .staffer-name {
    font-weight: bold;
    margin: .25rem !important;
}

.staffer .staffer-links {
    margin: .25rem !important;
    line-height: normal;
}

.staffer-links a {
    font-size: 24px;
}

.staffer-links .material-symbols-outlined {
    font-size: 24px;
    vertical-align: text-top;
    padding: 0px 3px;
}

.admonition p.admonition-title,
details summary {
    font-size: .8rem;
}

.admonition p, .admonition ul,
details p, details ul {
    font-size: .725rem;
}

.admonition code,
details code {
    font-size: .65rem;
}