/* ==========================================================
   extra.css: the site's look, on top of Material for MkDocs.
   Loaded through `extra_css` in mkdocs.yml.

   Style: "literary journal". Cream paper, oxblood + gold,
   Garamond headings, Inter body text.

   To change a color, edit the variables in the first two
   blocks (light mode, then dark mode). Everything else uses them.
   ========================================================== */

@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..700;1,400..600&display=swap");

/* ---------- 1. Colors: light mode ---------- */
[data-md-color-scheme="default"] {
  --csl-ink:     #2a2522;                 /* main text */
  --csl-muted:   rgba(42, 37, 34, .62);   /* secondary text */
  --csl-accent:  #7a2e3a;                 /* oxblood */
  --csl-gold:    #b48a4a;
  --csl-paper:   #faf7f1;                 /* page background */
  --csl-card:    #ffffff;
  --csl-rule:    rgba(42, 37, 34, .12);   /* thin lines and borders */
  --csl-tint:    rgba(122, 46, 58, .07);  /* soft oxblood wash */
  --csl-shadow:  0 14px 32px -16px rgba(42, 37, 34, .35);

  --csl-todo:    #6b625a;  --csl-todo-bg:  rgba(107, 98, 90, .12);
  --csl-doing:   #94631a;  --csl-doing-bg: rgba(180, 138, 74, .18);
  --csl-done:    #2f6b4a;  --csl-done-bg:  rgba(47, 107, 74, .13);

  /* Map our colors onto Material's variables */
  --md-default-bg-color:        var(--csl-paper);
  --md-primary-fg-color:        var(--csl-paper);   /* header background */
  --md-primary-fg-color--light: var(--csl-paper);
  --md-primary-fg-color--dark:  var(--csl-paper);
  --md-primary-bg-color:        var(--csl-ink);     /* header text */
  --md-primary-bg-color--light: var(--csl-muted);
  --md-accent-fg-color:         var(--csl-accent);  /* hover / focus */
  --md-accent-bg-color:         #ffffff;
  --md-typeset-color:           var(--csl-ink);
  --md-typeset-a-color:         var(--csl-accent);  /* links */
  --md-typeset-table-color:     var(--csl-rule);
  --md-footer-bg-color:         #2a2522;
  --md-footer-bg-color--dark:   #221e1b;
}

/* ---------- 2. Colors: dark mode ---------- */
[data-md-color-scheme="slate"] {
  --md-hue: 30;                           /* warm the default greys */

  --csl-ink:     #efe8dc;
  --csl-muted:   rgba(239, 232, 220, .62);
  --csl-accent:  #e3a0aa;                 /* soft rose */
  --csl-gold:    #d8b273;
  --csl-paper:   #1b1917;
  --csl-card:    #23201d;
  --csl-rule:    rgba(239, 232, 220, .12);
  --csl-tint:    rgba(227, 160, 170, .09);
  --csl-shadow:  0 14px 32px -16px rgba(0, 0, 0, .7);

  --csl-todo:    #c9c0b5;  --csl-todo-bg:  rgba(201, 192, 181, .12);
  --csl-doing:   #e2bd7d;  --csl-doing-bg: rgba(216, 178, 115, .16);
  --csl-done:    #8fd1a8;  --csl-done-bg:  rgba(143, 209, 168, .13);

  --md-default-bg-color:        var(--csl-paper);
  --md-primary-fg-color:        var(--csl-paper);
  --md-primary-fg-color--light: var(--csl-paper);
  --md-primary-fg-color--dark:  var(--csl-paper);
  --md-primary-bg-color:        var(--csl-ink);
  --md-primary-bg-color--light: var(--csl-muted);
  --md-accent-fg-color:         var(--csl-accent);
  --md-accent-bg-color:         #1b1917;
  --md-typeset-color:           var(--csl-ink);
  --md-typeset-a-color:         var(--csl-accent);
  --md-typeset-table-color:     var(--csl-rule);
  --md-footer-bg-color:         #141210;
  --md-footer-bg-color--dark:   #100e0d;
}

/* ---------- 3. Typography ---------- */
:root { --csl-serif: "EB Garamond", Georgia, "Times New Roman", serif; }

.md-typeset { line-height: 1.7; }

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-header__title {
  font-family: var(--csl-serif);
  color: var(--csl-ink);
  letter-spacing: -.005em;
}
.md-typeset h1 { font-size: 2.6em; font-weight: 600; line-height: 1.1; margin-bottom: .5em; }
.md-typeset h2 {
  font-size: 1.6em; font-weight: 600; margin-top: 2em;
  padding-bottom: .3em; border-bottom: 1px solid var(--csl-rule);
}
.md-typeset h3 { font-size: 1.25em; font-weight: 600; }
.md-header__title { font-size: 1.05rem; font-weight: 600; }

/* ---------- 4. Header and tabs ---------- */
.md-header { box-shadow: none; }
.md-header--shadow { box-shadow: 0 1px 0 var(--csl-rule); }
.md-tabs { border-bottom: 1px solid var(--csl-rule); }
.md-tabs__item { position: relative; }
.md-tabs__link { font-weight: 500; opacity: .7; }
.md-tabs__item--active .md-tabs__link { opacity: 1; color: var(--csl-accent); }
.md-tabs__item--active::after {
  content: ""; position: absolute; left: .6rem; right: .6rem; bottom: 0;
  height: 2px; border-radius: 2px; background: var(--csl-accent);
}

@media screen and (min-width: 60em) {
  .md-search__form { background-color: var(--csl-tint); border-radius: 999px; }
  .md-search__form:hover { background-color: var(--csl-rule); }
  .md-search__input { border-radius: 999px; }
}

/* ---------- 5. Buttons ---------- */
.md-typeset .md-button {
  border: 1px solid var(--csl-rule); border-radius: 999px;
  padding: .55em 1.35em; font-weight: 600; color: var(--csl-ink);
  margin: .2em .4em .2em 0;
}
.md-typeset .md-button--primary {
  background: var(--csl-accent); border-color: var(--csl-accent); color: var(--md-accent-bg-color);
}
.md-typeset .md-button .twemoji { margin-right: .3em; }

/* ---------- 6. Home page hero ---------- */
.md-content__inner:has(.hero) > .md-content__button { display: none; }  /* no edit pencil on Home */
.md-typeset .hero {
  position: relative; overflow: hidden;
  margin: -.5rem 0 2.5rem; padding: 2.5rem 0 2rem;
  border-bottom: 1px solid var(--csl-rule);
}
.md-typeset .hero::before {            /* big decorative ampersand */
  content: "&"; position: absolute; right: 3%; top: .5rem;
  font: italic 400 15rem/1 var(--csl-serif);
  color: var(--csl-gold); opacity: .16; pointer-events: none;
}
.md-typeset .hero .eyebrow {
  margin: 0; font-size: .68rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--csl-accent);
}
.md-typeset .hero h1 {
  font-size: clamp(2.3rem, 6vw, 3.8rem); line-height: 1.02; margin: .35em 0 .4em; max-width: 12em;
}
.md-typeset .hero h1 em { color: var(--csl-gold); font-weight: 500; }
.md-typeset .hero .lede { font-size: 1.08em; max-width: 34em; color: var(--csl-muted); margin-bottom: 1.6em; }
@media screen and (max-width: 44.9375em) { .md-typeset .hero::before { display: none; } }

/* ---------- 7. Cards (Home, Modules, Schedule) ---------- */
.md-typeset .grid.cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.md-typeset .grid.cards > ul > li {
  position: relative;
  border: 1px solid var(--csl-rule); border-radius: .8rem;
  background: var(--csl-card); padding: 1.1rem 1.2rem;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--csl-accent); box-shadow: var(--csl-shadow); transform: translateY(-2px);
}
.md-typeset .grid.cards > ul > li > hr { margin: .8em 0; border-bottom-color: var(--csl-rule); }

/* Card title row: icon chip + serif title. The whole card is clickable. */
.md-typeset .grid.cards > ul > li > p:first-child {
  display: flex; align-items: center; gap: .7rem; margin: 0;
  font: 600 1.2em/1.25 var(--csl-serif);
}
.md-typeset .grid.cards > ul > li > p:first-child a { color: var(--csl-ink); }
.md-typeset .grid.cards > ul > li > p:first-child a::after { content: ""; position: absolute; inset: 0; }
.md-typeset .grid.cards > ul > li > p:not(:first-child) { color: var(--csl-muted); margin: 0; font-size: .95em; }

.md-typeset .grid.cards .twemoji.lg {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 2.3rem; height: 2.3rem; border-radius: .65rem;
  background: var(--csl-tint); color: var(--csl-accent);
}
.md-typeset .grid.cards .twemoji.lg svg { width: 1.25rem; height: 1.25rem; max-height: none; }

/* ---------- 9. Tables ---------- */
.md-typeset__table { width: 100%; }
.md-typeset__table table:not([class]) { display: table; width: 100%; }
.md-typeset table:not([class]) {
  border: 1px solid var(--csl-rule); border-radius: .8rem; overflow: hidden;
  background: var(--csl-card); font-size: .78rem;
}
.md-typeset table:not([class]) th {
  background: var(--csl-tint); color: var(--csl-ink);
  font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.md-typeset table:not([class]) td { border-top: 1px solid var(--csl-rule); vertical-align: middle; }
.md-typeset table:not([class]) tbody tr:hover { background: var(--csl-tint); box-shadow: none; }
.md-typeset td.tba { color: var(--csl-muted); font-style: italic; }

/* Glossary: term in serif */
.md-typeset .glossary td:first-child { font: 600 1.15em var(--csl-serif); white-space: nowrap; }

/* ---------- 10. Status badges and tags ---------- */
.md-typeset .badge {
  display: inline-flex; align-items: center; gap: .45em; white-space: nowrap;
  padding: .2em .7em; border-radius: 999px; font-size: .68rem; font-weight: 600;
}
.md-typeset .badge::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: currentColor; }
.md-typeset .badge.todo  { color: var(--csl-todo);  background: var(--csl-todo-bg); }
.md-typeset .badge.doing { color: var(--csl-doing); background: var(--csl-doing-bg); }
.md-typeset .badge.done  { color: var(--csl-done);  background: var(--csl-done-bg); }
.md-typeset .tag {
  display: inline-block; padding: .1em .55em; border-radius: .35em;
  border: 1px solid var(--csl-rule); font-size: .68rem; font-weight: 500; color: var(--csl-muted);
}

/* Assignments progress bar */
.md-typeset .progress { margin: 1.5em 0; }
.md-typeset .progress__label { font-size: .78rem; color: var(--csl-muted); margin-bottom: .5em; }
.md-typeset .progress__label strong { font: 600 1.6rem/1 var(--csl-serif); color: var(--csl-ink); margin-right: .2em; }
.md-typeset .progress__bar { height: .4rem; border-radius: 999px; background: var(--csl-rule); overflow: hidden; }
.md-typeset .progress__bar span { display: block; height: 100%; border-radius: 999px; background: var(--csl-accent); transition: width .6s ease; }

/* ---------- 11. Admonitions (boxes) ---------- */
.md-typeset .admonition,
.md-typeset details {
  border-width: 1px; border-radius: .8rem; box-shadow: none; overflow: hidden; font-size: .8rem;
}

/* Custom box for deadlines:  !!! deadline "This week" */
:root {
  --md-admonition-icon--deadline: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15 13h1.5v2.82l2.44 1.41-.75 1.3L15 16.69zm4-5H5v11h4.67c-.43-.91-.67-1.93-.67-3a7 7 0 0 1 7-7c1.07 0 2.09.24 3 .67zM5 21a2 2 0 0 1-2-2V5c0-1.11.89-2 2-2h1V1h2v2h8V1h2v2h1a2 2 0 0 1 2 2v6.1c1.24 1.26 2 2.99 2 4.9a7 7 0 0 1-7 7c-1.91 0-3.64-.76-4.9-2zm11-9.85A4.85 4.85 0 0 0 11.15 16c0 2.68 2.17 4.85 4.85 4.85A4.85 4.85 0 0 0 20.85 16c0-2.68-2.17-4.85-4.85-4.85"/></svg>');
}
.md-typeset .admonition.deadline { border-color: var(--csl-rule); border-left: 4px solid var(--csl-accent); background: var(--csl-card); }
.md-typeset .deadline > .admonition-title {
  background: transparent; font: 600 1.2rem/1.4 var(--csl-serif); padding-top: .8rem;
}
.md-typeset .deadline > .admonition-title::before {
  top: 1rem; background-color: var(--csl-accent);
  -webkit-mask-image: var(--md-admonition-icon--deadline); mask-image: var(--md-admonition-icon--deadline);
}

/* Small print line, e.g. the readings note on Home */
.md-typeset .fine-print { font-size: .72rem; color: var(--csl-muted); margin-top: 2.5em; }
.md-typeset .fine-print .twemoji { color: var(--csl-gold); margin-right: .3em; }

/* ==========================================================
   12. Live parts (app.js): schedule, assignments, "This week"
   ========================================================== */
.csl-loading, .csl-error { color: var(--csl-muted); font-style: italic; }
.csl-error { color: var(--csl-accent); }
.csl-empty { color: var(--csl-muted); font-style: italic; margin: .2em 0; }
.csl-hint { color: var(--csl-muted); font-size: .9em; }
.csl-sub { display: block; font-size: .85em; font-weight: 400; color: var(--csl-muted); }
.csl-nowrap { white-space: nowrap; }

/* Buttons */
.csl-btn {
  display: inline-flex; align-items: center; gap: .3em; cursor: pointer;
  font: 600 .72rem/1.2 inherit; font-family: inherit;
  padding: .55em 1.1em; border-radius: 999px;
  border: 1px solid var(--csl-rule); background: var(--csl-card); color: var(--csl-ink);
  transition: background .15s, border-color .15s, color .15s;
}
.csl-btn:hover { border-color: var(--csl-accent); color: var(--csl-accent); }
.csl-btn--primary { background: var(--csl-accent); border-color: var(--csl-accent); color: var(--md-accent-bg-color); }
.csl-btn--primary:hover { color: var(--md-accent-bg-color); filter: brightness(1.08); }
.csl-btn--ghost { background: transparent; }
.csl-btn--small { padding: .3em .75em; font-size: .64rem; }
.csl-btn--danger:hover { border-color: #b3261e; color: #b3261e; }
[data-md-color-scheme="slate"] .csl-btn--danger:hover { border-color: #f2b8b5; color: #f2b8b5; }
.csl-btn--add { width: 100%; justify-content: center; margin-top: .6em; border-style: dashed; background: transparent; color: var(--csl-muted); }
.csl-btn:disabled { opacity: .6; cursor: progress; }
.csl-iconbtn {
  width: 2rem; height: 2rem; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--csl-rule); background: var(--csl-card); color: var(--csl-ink);
  font: 400 1.2rem/1 var(--csl-serif);
}
.csl-iconbtn:hover { border-color: var(--csl-accent); color: var(--csl-accent); }

/* Pills (small labels) */
.csl-pill {
  display: inline-block; white-space: nowrap; vertical-align: middle;
  padding: .2em .6em; border-radius: 999px;
  font: 600 .58rem/1.3 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase;
}
.csl-pill--onsite    { color: var(--csl-todo);  background: var(--csl-todo-bg); }
.csl-pill--online    { color: #2b5f8a; background: rgba(43, 95, 138, .12); }
.csl-pill--extra     { color: var(--csl-done);  background: var(--csl-done-bg); }
.csl-pill--changed   { color: var(--csl-doing); background: var(--csl-doing-bg); }
.csl-pill--cancelled { color: #b3261e; background: rgba(179, 38, 30, .1); }
.csl-pill--accent    { color: var(--md-accent-bg-color); background: var(--csl-accent); }
[data-md-color-scheme="slate"] .csl-pill--online    { color: #9cc7ec; background: rgba(156, 199, 236, .13); }
[data-md-color-scheme="slate"] .csl-pill--cancelled { color: #f2b8b5; background: rgba(242, 184, 181, .12); }

.csl-editor-banner {
  margin: 0 0 1.2em; padding: .6em 1em; border-radius: .6rem; font-size: .75rem;
  background: var(--csl-doing-bg); color: var(--csl-ink); border: 1px dashed var(--csl-gold);
}

/* Week navigation */
.csl-weeknav { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin: .5em 0 1.2em; }
.csl-weeknav__label { display: flex; flex-direction: column; min-width: 11rem; text-align: center; }
.csl-weeknav__label strong { font: 600 1.3rem/1.2 var(--csl-serif); }
.csl-weeknav__label span { font-size: .72rem; color: var(--csl-muted); }

/* Day cards */
.csl-days { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)); }
.csl-day {
  border: 1px solid var(--csl-rule); border-radius: .8rem; background: var(--csl-card);
  padding: 1rem 1rem .8rem; display: flex; flex-direction: column;
}
.csl-day.is-today { border-color: var(--csl-accent); box-shadow: inset 0 3px 0 var(--csl-accent); }
.csl-day.is-past { opacity: .62; }
.csl-day__head { display: flex; align-items: baseline; gap: .45em; flex-wrap: wrap; margin-bottom: .8em; }
.csl-day__name { font: 600 1.3em/1.2 var(--csl-serif); }
.csl-day__date { font-size: .72rem; color: var(--csl-muted); }
.md-typeset .csl-sessions { list-style: none; margin: 0; padding: 0; flex: 1; }
[dir] .md-typeset .csl-sessions > li { margin: 0 0 .9em; padding: 0 0 .9em; border-bottom: 1px solid var(--csl-rule); }
[dir] .md-typeset .csl-sessions > li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.csl-session__top { display: flex; flex-wrap: wrap; align-items: center; gap: .3em; margin-bottom: .35em; }
.csl-time {
  font: 600 .7rem/1.6 Inter, sans-serif; font-variant-numeric: tabular-nums;
  padding: .1em .55em; border-radius: 999px; background: var(--csl-tint); color: var(--csl-accent);
}
.md-typeset .csl-session__name { display: block; font-weight: 500; line-height: 1.35; color: var(--csl-ink); }
.md-typeset a.csl-session__name:hover { color: var(--csl-accent); }
.csl-session__meta { display: flex; flex-wrap: wrap; gap: .6em; font-size: .72rem; color: var(--csl-muted); margin-top: .2em; }
.md-typeset .csl-join { font-weight: 600; }
.md-typeset .csl-session__note { font-size: .72rem; color: var(--csl-muted); font-style: italic; margin: .3em 0 0; line-height: 1.4; }
.csl-session.is-cancelled .csl-time,
.csl-session.is-cancelled .csl-session__name { text-decoration: line-through; opacity: .6; }
.csl-actions { display: flex; flex-wrap: wrap; gap: .3em; margin-top: .5em; }
.csl-legend { margin-top: 1.2em; display: flex; flex-wrap: wrap; gap: .35em; }

/* Editors' weekly-timetable panel */
.md-typeset details.csl-panel {
  margin-top: 2em; padding: .2em 1.1em .9em; border: 1px solid var(--csl-rule);
  border-radius: .8rem; background: var(--csl-card); font-size: .8rem;
}
.md-typeset details.csl-panel > summary { cursor: pointer; padding: .7em 0; font: 600 1.15rem var(--csl-serif); }
.md-typeset details.csl-panel > summary::before { display: none; }
.md-typeset .csl-list { list-style: none; margin: 0; padding: 0; }
[dir] .md-typeset .csl-list > li {
  margin: 0; padding: .55em 0; border-top: 1px solid var(--csl-rule);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5em;
}
.csl-list .csl-actions { margin: 0; }

/* Assignments: spotlight */
.csl-spotlight {
  margin: 1em 0 1.5em; padding: 1.2rem 1.3rem; border-radius: .9rem;
  background: var(--csl-card); border: 1px solid var(--csl-rule); box-shadow: inset 4px 0 0 var(--csl-accent);
}
.csl-spotlight__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5em; margin-bottom: .9em; }
.md-typeset .csl-spotlight__head h2 { margin: 0; padding: 0; border: 0; font-size: 1.5em; }
.csl-spotlight__head span { font-size: .72rem; color: var(--csl-muted); }
.csl-spotlight__grid { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.csl-present { display: flex; gap: .9rem; padding: .8rem; border-radius: .7rem; background: var(--csl-tint); }
.csl-present.is-past { opacity: .6; }
.csl-present.is-today { outline: 2px solid var(--csl-accent); }
.csl-present__date {
  flex: none; width: 3.2rem; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: .55rem; background: var(--csl-card); padding: .35rem 0;
  font-size: .6rem; text-transform: uppercase; letter-spacing: .08em; color: var(--csl-muted);
}
.csl-present__date strong { font: 600 1.5rem/1.1 var(--csl-serif); color: var(--csl-accent); letter-spacing: 0; }
.csl-present__body { min-width: 0; }
.csl-present__who { font: 600 1.15rem/1.25 var(--csl-serif); color: var(--csl-ink); }
.md-typeset .csl-present__module { display: block; font-size: .74rem; font-weight: 600; margin-top: .1em; }
.csl-present__topic { font-size: .74rem; color: var(--csl-muted); margin: .15em 0 .3em; }
.csl-next { font-size: .76rem; color: var(--csl-muted); margin: .9em 0 0; }
.csl-next strong { color: var(--csl-ink); }

/* Assignments: toolbar + table */
.csl-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 1.2em 0 .8em; }
.csl-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-right: auto; }
.csl-chip {
  cursor: pointer; padding: .35em .9em; border-radius: 999px; font: 500 .7rem/1.3 inherit; font-family: inherit;
  border: 1px solid var(--csl-rule); background: transparent; color: var(--csl-muted);
}
.csl-chip.is-active { background: var(--csl-ink); border-color: var(--csl-ink); color: var(--csl-paper); }
.csl-select, .csl-dialog select, .csl-dialog input, .csl-dialog textarea {
  font: inherit; font-size: .78rem; color: var(--csl-ink); background: var(--csl-card);
  border: 1px solid var(--csl-rule); border-radius: .5rem; padding: .45em .7em;
}
.csl-tablewrap { overflow-x: auto; border: 1px solid var(--csl-rule); border-radius: .8rem; background: var(--csl-card); }
.md-typeset table.csl-table { width: 100%; border-collapse: collapse; font-size: .76rem; display: table; margin: 0; border: 0; }
.md-typeset table.csl-table th {
  text-align: left; background: var(--csl-tint); padding: .8em 1em;
  font-size: .62rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--csl-ink);
}
.md-typeset table.csl-table td { padding: .75em 1em; border-top: 1px solid var(--csl-rule); vertical-align: middle; }
.md-typeset table.csl-table tr.is-this-week td { background: var(--csl-doing-bg); }
.md-typeset table.csl-table td:first-child { font-variant-numeric: tabular-nums; }
.csl-badge-btn { border: 0; cursor: pointer; font-family: inherit; }
.csl-badge-btn:hover { filter: brightness(.95); outline: 1px solid currentColor; }

/* Home: "This week" list */
.md-typeset .csl-week { list-style: none; margin: .4em 0; padding: 0; }
[dir] .md-typeset .csl-week > li {
  margin: 0; padding: .5em 0; border-top: 1px solid var(--csl-rule);
  display: grid; grid-template-columns: 6.5rem auto 1fr; gap: .7em; align-items: baseline;
}
[dir] .md-typeset .csl-week > li:first-child { border-top: 0; }
.csl-week > li.is-past { opacity: .55; }
.csl-week__when { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.csl-week__links { display: flex; gap: 1.2em; margin-top: .6em; font-size: .75rem; font-weight: 600; }
@media screen and (max-width: 44.9375em) {
  [dir] .md-typeset .csl-week > li { grid-template-columns: auto 1fr; }
  .csl-week__text { grid-column: 1 / -1; }
}

/* Edit dialog (pop-up) */
.csl-dialog {
  width: min(32rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow: auto;
  border: 1px solid var(--csl-rule); border-radius: 1rem; padding: 1.4rem;
  background: var(--csl-paper); color: var(--csl-ink); box-shadow: var(--csl-shadow);
  font-size: .8rem;
}
.csl-dialog::backdrop { background: rgba(20, 16, 14, .45); backdrop-filter: blur(2px); }
.csl-dialog h2 { margin: 0 0 1rem; font: 600 1.45rem/1.2 var(--csl-serif); }
.csl-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.csl-field { display: flex; flex-direction: column; gap: .3em; font-size: .7rem; font-weight: 600; color: var(--csl-muted); }
.csl-field--wide { grid-column: 1 / -1; }
.csl-field[hidden] { display: none; }
.csl-dialog input:focus, .csl-dialog select:focus, .csl-dialog textarea:focus, .csl-select:focus {
  outline: 2px solid var(--csl-accent); outline-offset: 1px; border-color: transparent;
}
.csl-dialog__error { color: #b3261e; min-height: 1.2em; margin: .8em 0 0; font-size: .75rem; }
[data-md-color-scheme="slate"] .csl-dialog__error { color: #f2b8b5; }
.csl-dialog__actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .6rem; }

/* Toast (saved / error message) */
.csl-toast {
  position: fixed; left: 50%; bottom: 1.5rem; z-index: 10; transform: translate(-50%, 1rem);
  max-width: calc(100vw - 2rem); padding: .7em 1.2em; border-radius: 999px;
  background: var(--csl-ink); color: var(--csl-paper); font-size: .75rem; font-weight: 500;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.csl-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.csl-toast.is-error { background: #b3261e; color: #fff; }

/* Resources page */
.csl-search { min-width: 0; flex: 1 1 10rem; }
.csl-resources { display: grid; gap: .6rem; }
.csl-res {
  display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center;
  padding: .9rem 1rem; border: 1px solid var(--csl-rule); border-radius: .8rem; background: var(--csl-card);
}
.csl-res__icon {
  width: 2.8rem; height: 2.8rem; border-radius: .6rem; display: flex; align-items: center; justify-content: center;
  font: 700 .58rem/1 Inter, sans-serif; letter-spacing: .04em; background: var(--csl-todo-bg); color: var(--csl-todo);
}
.csl-res__icon--pdf { background: var(--csl-tint); color: var(--csl-accent); }
.csl-res__icon--doc, .csl-res__icon--docx, .csl-res__icon--odt { background: rgba(43, 95, 138, .12); color: #2b5f8a; }
.csl-res__icon--ppt, .csl-res__icon--pptx, .csl-res__icon--odp { background: var(--csl-doing-bg); color: var(--csl-doing); }
.csl-res__icon--link, .csl-res__icon--xls, .csl-res__icon--xlsx { background: var(--csl-done-bg); color: var(--csl-done); }
[data-md-color-scheme="slate"] .csl-res__icon--doc,
[data-md-color-scheme="slate"] .csl-res__icon--docx,
[data-md-color-scheme="slate"] .csl-res__icon--odt { color: #9cc7ec; background: rgba(156, 199, 236, .13); }
.csl-res__body { min-width: 0; }
.md-typeset .csl-res__title { font: 600 1.1rem/1.3 var(--csl-serif); color: var(--csl-ink); overflow-wrap: anywhere; }
.md-typeset a.csl-res__title:hover { color: var(--csl-accent); }
.md-typeset .csl-res__desc { margin: .15em 0 .3em; font-size: .75rem; color: var(--csl-muted); }
.csl-res__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5em; font-size: .68rem; color: var(--csl-muted); margin-top: .2em; }
.csl-res__actions { display: flex; flex-wrap: wrap; gap: .3em; justify-content: flex-end; }
.md-typeset .csl-res__actions a.csl-btn { color: var(--csl-ink); text-decoration: none; }
.md-typeset .csl-res__actions a.csl-btn:hover { color: var(--csl-accent); }
@media screen and (max-width: 44.9375em) {
  .csl-res { grid-template-columns: auto 1fr; }
  .csl-res__actions { grid-column: 1 / -1; justify-content: flex-start; }
}
.csl-dialog input[type="file"] { padding: .6em; border-style: dashed; cursor: pointer; }

/* Default note boxes and the editors' panel use the site palette (not Material blue) */
.md-typeset .admonition.note, .md-typeset details.note { border-color: var(--csl-rule); background: var(--csl-card); }
.md-typeset .note > .admonition-title, .md-typeset .note > summary { background: var(--csl-tint); }
.md-typeset .note > .admonition-title::before, .md-typeset .note > summary::before { background-color: var(--csl-accent); }
.md-typeset details.csl-panel { border-color: var(--csl-rule); box-shadow: none; }
.md-typeset details.csl-panel > summary {
  background: transparent; margin: 0 -1.1em; padding: .7em 1.1em; border-radius: .8rem; color: var(--csl-ink);
}
.md-typeset details.csl-panel > summary:hover { color: var(--csl-accent); }
.md-typeset details.csl-panel > summary::-webkit-details-marker { display: none; }
.md-typeset details.csl-panel > summary { list-style: none; }
.md-typeset details.csl-panel > summary::after {
  display: inline-block; content: "＋"; float: right; position: static; mask-image: none; -webkit-mask-image: none;
  background: none; width: auto; height: auto; transform: none; color: var(--csl-accent); font-family: Inter, sans-serif;
}
.md-typeset details.csl-panel[open] > summary::after { content: "－"; }