/* ==========================================================================
   Course pages with bespoke structure
   DevOps Automation · Research Methodology · Modelling and Simulation

   These three pages carry a lot of hand-written structure (delivery plans,
   annotated reading lists, curated online courses) that is worth keeping
   exactly as it is. This sheet re-dresses that structure in the portal's
   design language instead of rebuilding it: same markup, same scripts,
   same content — rules and typography in place of gradients and pills.

   Loaded after portal.css.
   ========================================================================== */


/* --- Hero ---------------------------------------------------------------- */

.hero, .ms-hero {
  background: none;
  color: var(--fg);
  text-align: left;
  padding: var(--sp-5) 0 var(--sp-7);
  border: 0;
}

.hero .container, .ms-hero .container { padding-inline: 0; }

.hero h1, .ms-hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 6vw, var(--text-2xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: var(--sp-3) 0 0;
  color: var(--fg);
  max-width: 24ch;
}

.ms-hero .code, .hero .code {
  display: inline-flex; align-items: center; gap: 0.4em;
  background: none; border: 0; border-radius: 0; padding: 0;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
}
.ms-hero .code::before, .hero .code::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent);
}

/* One of these pages wraps its title in .section-header inside the hero;
   that block must not pick up the section rule and label treatment. */
.hero .section-header, .ms-hero .section-header {
  border-top: 0;
  padding-top: 0;
  margin-bottom: 0;
  text-align: left;
}
.hero .section-header h1, .ms-hero .section-header h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 6vw, var(--text-2xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: none;
  color: var(--fg);
  margin: 0;
  max-width: 24ch;
}

.hero p.lede, .ms-hero p.lede, .hero .section-subtitle {
  max-width: var(--w-text);
  margin: var(--sp-5) 0 0;
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--fg-secondary);
  opacity: 1;
}

/* Metadata that used to be white pills */
.meta-badges {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.5em;
  justify-content: flex-start;
  margin-top: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--fg-muted);
}
.meta-badges span {
  background: none; color: inherit; padding: 0;
  border-radius: 0; font-size: inherit; font-weight: 400;
}
.meta-badges span:not(:last-child)::after {
  content: " \00b7"; color: var(--fg-faint); margin-left: 0.4em;
}

.hero-actions {
  justify-content: flex-start;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}
.hero-actions a,
.hero-actions a.ghost {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 0.625rem var(--sp-4);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 400;
  min-height: 2.5rem;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.hero-actions a:hover, .hero-actions a.ghost:hover {
  transform: none; box-shadow: none;
  border-color: var(--fg); background: var(--bg-sunken);
}
.hero-actions a i { color: var(--fg-muted); font-size: 0.85em; }
.hero-actions a:hover i { color: var(--accent); }
.hero-actions a:first-child {
  background: var(--fg); color: var(--bg); border-color: var(--fg);
}
.hero-actions a:first-child:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.hero-actions a:first-child i { color: currentColor; }


/* --- Sections ------------------------------------------------------------ */

.section, .ms-section { padding-block: var(--sp-8) 0; }

.section-header, .ms-section-head {
  text-align: left;
  margin-bottom: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--fg);
}

.section-header h2, .ms-section-head h2 {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg);
  margin: 0;
}
.section-header h2 i, .ms-section-head h2 i { display: none; }

.section-header h3, .ms-section-head h3,
.category-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  border: 0;
  margin: var(--sp-6) 0 var(--sp-4);
  padding: 0;
  display: block;
}
.category-title i { display: none; }

.section-subtitle,
.section-header p, .ms-section-head p {
  max-width: var(--w-text);
  margin: var(--sp-3) 0 0;
  font-size: var(--text-base);
  color: var(--fg-muted);
  line-height: 1.6;
}

.note-line, .plan-note {
  border-left: 2px solid var(--border-strong);
  background: none;
  padding: var(--sp-1) 0 var(--sp-1) var(--sp-5);
  margin: var(--sp-5) 0;
  font-size: var(--text-base);
  color: var(--fg-muted);
  line-height: 1.6;
  max-width: var(--w-text);
  border-radius: 0;
}


/* --- Course information -------------------------------------------------- */

.course-info-grid, .info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: 0;
  border-top: 1px solid var(--border);
}

.info-card {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  padding: var(--sp-5) var(--sp-6) var(--sp-5) 0;
}
.info-card h4 {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 0 0 var(--sp-3);
}
.info-card h4 i { display: none; }
.info-card ul { list-style: none; padding: 0; margin: 0; }
.info-card li {
  position: relative;
  padding-left: var(--sp-5);
  font-size: var(--text-base);
  color: var(--fg-secondary);
  line-height: 1.55;
}
.info-card li + li { margin-top: var(--sp-3); }
.info-card li::before {
  content: "\2014"; position: absolute; left: 0; color: var(--fg-faint);
}
.info-card p {
  font-size: var(--text-base);
  color: var(--fg-secondary);
  line-height: 1.6;
  margin: 0;
}


/* --- Unit / note cards --------------------------------------------------- */

.notes-grid, .unit-grid, .res-grid, .unit-container {
  display: block;
  border-top: 1px solid var(--fg);
}

.note-card, .unit-card, .res-card {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--sp-3) var(--sp-5);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  padding: var(--sp-6) 0;
  transition: none;
}
.note-card:hover, .unit-card:hover, .res-card:hover {
  transform: none; box-shadow: none;
}

/* the "Unit III / 8 syllabus hours" strip */
.nc-top, .u-top, .res-head {
  display: block;
  grid-column: 1;
  grid-row: 1 / span 3;
  padding: 0;
  background: none;
  border: 0;
}
.nc-no, .u-no {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg);
  background: none;
  padding: 0;
  border-radius: 0;
}
.nc-hours, .u-hours {
  display: block;
  margin-top: var(--sp-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--fg-muted);
  background: none;
  padding: 0;
}

.note-card h3, .note-card h4,
.unit-card h3, .unit-card h4,
.res-card h4, .res-card h5 {
  grid-column: 2;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0;
}

.nc-topics, .topics, .res-card p {
  grid-column: 2;
  font-size: var(--text-base);
  color: var(--fg-muted);
  line-height: 1.6;
  margin: 0;
  max-width: 52rem;
}

/* keyword chips become a quiet mono line */
.nc-chips, .chip-row, .tool-chips {
  grid-column: 2;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.45em;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--fg-muted);
}
.tag, .nc-chips span, .chip-row span {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  color: inherit;
  font-size: inherit;
  font-weight: 400;
  letter-spacing: 0.02em;
}
.nc-chips > *:not(:last-child)::after,
.chip-row > *:not(:last-child)::after,
.tool-chips > *:not(:last-child)::after {
  content: " \00b7"; color: var(--fg-faint); margin-left: 0.4em;
}

.tag-ready, .tag-done { color: var(--accent); }
.tag-next, .tag-today { color: var(--fg); }
.tag-tbc { color: var(--fg-faint); }

/* the "Read Unit I notes" call to action */
.nc-open, .open, .res-links a, .book-links a, .btn-view, .btn-download {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: none;
  color: var(--fg-secondary);
  border: 0;
  border-bottom: 1px solid var(--border-strong);
  border-radius: 0;
  padding: 0 0 2px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nc-open:hover, .open:hover, .res-links a:hover, .book-links a:hover,
.btn-view:hover, .btn-download:hover {
  background: none; color: var(--accent); border-color: var(--accent);
  transform: none; box-shadow: none;
}
.nc-open i, .open i, .btn-view i, .btn-download i { font-size: 0.9em; }

.nc-open, .open { grid-column: 3; grid-row: 1; justify-self: end; }

.nc-soon, .coming-soon, .pending .nc-topics {
  color: var(--fg-faint);
}
.note-card.pending h4, .note-card.pending h3 { color: var(--fg-muted); }
.nc-soon {
  grid-column: 3; grid-row: 1; justify-self: end;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media (max-width: 48rem) {
  .note-card, .unit-card, .res-card {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-2);
    padding: var(--sp-5) 0;
  }
  .nc-top, .u-top, .res-head { grid-row: auto; }
  .nc-top, .u-top { display: flex; align-items: baseline; gap: var(--sp-3); }
  .nc-hours, .u-hours { margin-top: 0; }
  .note-card h3, .note-card h4, .unit-card h3, .unit-card h4,
  .nc-topics, .topics, .nc-chips, .chip-row,
  .nc-open, .open, .nc-soon { grid-column: 1; }
  .nc-open, .open, .nc-soon { justify-self: start; margin-top: var(--sp-2); }
  .note-card h3, .note-card h4, .unit-card h3, .unit-card h4 { font-size: var(--text-md); }
}


/* --- Online course cards (DevOps Automation) ----------------------------- */

.res-card { grid-template-columns: minmax(0, 1fr) auto; }
.res-head {
  grid-column: 1; grid-row: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: var(--sp-2);
}
.res-card h5 { grid-column: 1; }
.res-card p { grid-column: 1; margin-top: var(--sp-2); }

.provider, .free-badge, .unit-pill {
  background: none !important;
  border: 0;
  border-radius: 0;
  padding: 0;
  color: var(--fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.free-badge { color: var(--accent); }
.unit-pill { color: var(--fg-muted); }
.res-head > *:not(:last-child)::after {
  content: " \00b7"; color: var(--fg-faint); margin-left: 0.4em;
}

.res-links, .book-links {
  grid-column: 2; grid-row: 1 / span 4;
  display: flex; flex-direction: column; align-items: flex-end;
  gap: var(--sp-3);
  padding-left: var(--sp-5);
}

@media (max-width: 48rem) {
  .res-card { grid-template-columns: minmax(0, 1fr); }
  .res-links, .book-links {
    grid-column: 1; grid-row: auto;
    flex-direction: row; flex-wrap: wrap; align-items: center;
    justify-content: flex-start;
    padding-left: 0; margin-top: var(--sp-3);
    gap: var(--sp-4);
  }
}


/* --- Reading lists ------------------------------------------------------- */

.book-list { border-top: 1px solid var(--border); }

.book-row, .book {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--sp-3) var(--sp-5);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  padding: var(--sp-5) 0;
}
.book-row:hover, .book:hover { transform: none; box-shadow: none; }

.book-idx {
  grid-column: 1;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--fg-muted);
  background: none;
  border: 0; border-radius: 0; padding: 0;
  width: auto; height: auto;
  display: block;
}

.book-body { grid-column: 2; min-width: 0; }

.book-title {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  color: var(--fg);
}

.book-meta {
  display: block;
  margin-top: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--fg-muted);
}

.book-note {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--text-base);
  color: var(--fg-muted);
  line-height: 1.6;
}

@media (max-width: 48rem) {
  .book-row, .book { grid-template-columns: 2rem minmax(0, 1fr); }
  .book-body { grid-column: 2; }
}


/* --- Delivery plan (toolbar, filters, progress, rows) -------------------- */

.plan-toolbar {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  margin-bottom: var(--sp-4);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
}

/* Flex items default to min-width:auto and refuse to shrink below their
   content, which pushed these toolbars past the viewport on a phone. */
.plan-toolbar > *, .plan-filters, .progress-wrap, .section-switch, .next-up {
  min-width: 0;
  max-width: 100%;
}

.plan-filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.filter-chip {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.3rem var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-muted);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.filter-chip:hover { color: var(--fg); border-color: var(--border-strong); }
.filter-chip.active, .filter-chip[aria-pressed="true"] {
  color: var(--accent); border-color: var(--accent); background: none;
}

.section-switch { display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--border); }
.section-switch > * {
  display: block;
  padding: var(--sp-4) var(--sp-5) var(--sp-4) 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  cursor: pointer;
  flex: 1 1 18rem;
  text-align: left;
}
.section-switch > *[aria-pressed="true"], .section-switch > *.active {
  box-shadow: inset 2px 0 0 var(--accent);
  padding-left: var(--sp-4);
}
.sw-name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-md);
  color: var(--fg);
}
.sw-meta {
  display: block;
  margin-top: var(--sp-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--fg-muted);
}

.progress-wrap {
  display: flex; align-items: center; gap: var(--sp-3);
  min-width: 12rem;
}
.progress-bar {
  flex: 1;
  height: 2px;
  background: var(--border);
  border-radius: 0;
  overflow: hidden;
}
.progress-bar > * { background: var(--accent); height: 100%; display: block; }
.progress-text {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--fg-muted);
  white-space: nowrap;
}

.lecture-list { border-top: 1px solid var(--border); padding: 0; }

.lecture-row {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--sp-3) var(--sp-4);
  padding: var(--sp-4) 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
}
.lec-num, .d-num, .lec-date {
  grid-column: 1;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--fg-muted);
  background: none;
  border: 0; border-radius: 0; padding: 0;
  text-align: left;
}
.d-day, .d-mon { display: block; }
.lec-date.is-tbc { color: var(--fg-faint); }
.lecture-row.is-tbc .lec-title, .lecture-row.is-tbc .lec-topic { color: var(--fg-muted); }
.lec-body { grid-column: 2; min-width: 0; }
.lec-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5em; }
.lec-title {
  font-size: var(--text-base);
  color: var(--fg);
  line-height: 1.5;
}
.lec-topic, .lec-meta, .lec-code, .lec-assess, .unit-hours, .nu-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--fg-muted);
  background: none;
  border: 0; border-radius: 0; padding: 0;
}
.lec-topic { display: block; margin-top: 3px; font-family: var(--font-sans); }
.lec-links { grid-column: 3; display: flex; gap: var(--sp-3); align-items: center; }

.next-up {
  border-left: 2px solid var(--accent);
  background: none;
  border-radius: 0;
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-5);
  margin: var(--sp-5) 0;
}

.no-results {
  padding: var(--sp-7) 0;
  color: var(--fg-muted);
  font-size: var(--text-base);
  text-align: left;
}

@media (max-width: 48rem) {
  .lecture-row { grid-template-columns: 2.75rem minmax(0, 1fr); }
  .lec-links { grid-column: 2; margin-top: var(--sp-2); }
  .plan-toolbar { align-items: stretch; flex-direction: column; }
  .plan-filters, .progress-wrap { flex: 1 1 100%; width: 100%; }
  /* the status line is a full sentence; let it wrap above its bar */
  .progress-wrap { flex-wrap: wrap; min-width: 0; }
  .progress-text { white-space: normal; flex: 1 1 100%; order: 2; }
  .progress-bar { flex: 1 1 100%; order: 1; min-width: 0; }
  .section-switch > * { flex: 1 1 100%; }
  .plan-toolbar input, .plan-toolbar select { width: 100%; min-width: 0; }
}


/* --- Tables -------------------------------------------------------------- */

.tbl-wrap {
  overflow-x: auto;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  margin: var(--sp-5) 0;
  -webkit-overflow-scrolling: touch;
}

.tbl-wrap table { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
.tbl-wrap th, .tbl-wrap td {
  text-align: left;
  vertical-align: top;
  padding: var(--sp-3) var(--sp-4) var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
  color: var(--fg-secondary);
  line-height: 1.55;
}
.tbl-wrap th {
  background: none;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-muted);
  white-space: nowrap;
}
.tbl-wrap tr:hover td { background: var(--bg-sunken); }


/* --- Odds and ends ------------------------------------------------------- */

.container { width: 100%; max-width: var(--w-page); margin-inline: auto; padding-inline: var(--w-gutter); }

.ms { font-variant-numeric: tabular-nums; }

.empty-message, .future-subjects {
  padding: var(--sp-6) 0;
  color: var(--fg-muted);
  font-size: var(--text-base);
  text-align: left;
  border-top: 1px solid var(--border);
}
.empty-message i { display: none; }

/* Font Awesome is not loaded on these pages. Static glyph slots are stripped
   when the page is generated; these rules catch the ones the page's own
   scripts insert at runtime. */
i[class^="fa"], i[class*=" fa-"], .fas, .far, .fab { display: none !important; }


/* --- Blog posts ---------------------------------------------------------- */

.post-shell { max-width: var(--w-text); margin-inline: auto; padding-inline: var(--w-gutter); }

.post-header { padding-block: var(--sp-5) var(--sp-6); }

.post-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 6vw, var(--text-2xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0;
}

.post-meta {
  margin-top: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.post-hero {
  width: 100%;
  margin: var(--sp-6) 0;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.post-hero:not([src]), .post-hero[src=""] { display: none; }

.post-content {
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--fg-secondary);
  padding-bottom: var(--sp-8);
}
.post-content > * + * { margin-top: var(--sp-4); }
.post-content h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin-top: var(--sp-7);
}
.post-content h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-lg);
  color: var(--fg);
  margin-top: var(--sp-6);
}
.post-content ul, .post-content ol { padding-left: 0; }
.post-content li { position: relative; padding-left: var(--sp-5); }
.post-content li + li { margin-top: var(--sp-2); }
.post-content ul > li::before { content: "\2014"; position: absolute; left: 0; color: var(--fg-faint); }
.post-content ol { counter-reset: n; }
.post-content ol > li { counter-increment: n; }
.post-content ol > li::before {
  content: counter(n, decimal-leading-zero);
  position: absolute; left: 0; top: 0.2em;
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-muted);
}
.post-content strong { color: var(--fg); font-weight: 600; }
.post-content blockquote {
  border-left: 2px solid var(--accent);
  padding: var(--sp-1) 0 var(--sp-1) var(--sp-5);
  margin: var(--sp-6) 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--fg);
}

/* Posts carry a few hand-written grids in inline styles. Give their cells a
   visible edge in both themes, and let them stack on a narrow screen. */
.post-content [style*="grid"] > div {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-sunken);
  min-width: 0;
}
.post-content [style*="grid"] { min-width: 0; }

@media (max-width: 34rem) {
  .post-content [style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Qur'anic quotations in one of the posts */
.quran-verse {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.7;
  color: var(--fg);
  border-left: 2px solid var(--accent);
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-5);
  margin: var(--sp-6) 0 var(--sp-3);
}
.quran-translation {
  display: block;
  padding-left: var(--sp-5);
  margin-bottom: var(--sp-6);
  font-size: var(--text-base);
  color: var(--fg-muted);
}


/* --- Form controls inside course pages ----------------------------------- */

.plan-toolbar input[type="search"],
.plan-toolbar input[type="text"],
.plan-toolbar select,
.section input[type="search"],
.section select {
  font: inherit;
  font-size: var(--text-base);
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 0.5rem var(--sp-3);
  min-height: 2.5rem;
  min-width: 12rem;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.plan-toolbar input:focus, .plan-toolbar select:focus,
.section input:focus, .section select:focus {
  outline: none;
  border-color: var(--fg);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
.plan-toolbar input::placeholder { color: var(--fg-faint); }


/* A link whose file is not in the repository: shown, but visibly inert. */
.is-missing {
  color: var(--fg-muted) !important;
  border-color: transparent !important;
  background: none !important;
  pointer-events: none;
  cursor: default;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.is-missing::after {
  content: " \00b7 not published";
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.8em;
  letter-spacing: 0.04em;
  text-transform: lowercase;
}