/* ---------------------------------------------------------------------------
   AI & Deep Learning — the two small additions this course needs.
   Everything else uses the shared components in /css/course-ml.css:
   daycard, mat-group, mat-row, resource-grid, spotlight, session, notice,
   fig-grid, fig-card and figbox. Nothing here introduces a second design.
   --------------------------------------------------------------------------- */

/* An illustration inside an existing .daycard, above the download row.
   Matches the figure treatment used by .fig-shot so the two read as one system. */
.dc-art{margin:.8rem 0 0;padding:.45rem;border:1px solid var(--line);border-radius:5px;
  background:#fff;display:grid;place-items:center}
.dc-art img{display:block;width:auto;max-width:100%;max-height:168px;height:auto;border-radius:3px}
.dc-art figcaption{justify-self:start;margin:.45rem .15rem .05rem;font-size:.79rem;line-height:1.5;
  color:var(--ink-soft)}

/* The spotlight media slot holds an illustration rather than an inline chart. */
.sl-body .sl-art{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:4px}

/* ---- slides page: the four decks as a 2x2 grid -------------------------- */
/* Four stacked daycards wasted the right-hand half of the page. In a grid the
   day cards sit two by two, so all four are visible without scrolling and the
   illustrations get comparable width. */
.deck-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:.4rem 0 1.1rem}
.deck-grid .daycard{margin:0;display:flex;flex-direction:column}
.deck-grid .daycard .mat-row{margin-top:auto;padding-top:.5rem}
.deck-grid .dc-art img{max-height:150px}
.deck-grid .mat-note{font-size:.85rem;line-height:1.55}
@media (max-width:900px){.deck-grid{grid-template-columns:1fr}}

/* ---- material that is not released yet --------------------------------- */
/* The chip keeps its icon, label and size so the shape of the course is
   visible, but it is a span rather than a link: there is no URL to guess. */
.mat-btn.locked{cursor:default;opacity:.62;background:var(--paper);
  border-style:dashed;color:var(--ink-soft)}
.mat-btn.locked:hover{transform:none;box-shadow:none;border-color:var(--line-strong)}
.mat-btn.locked i{color:var(--ink-faint)}
.mat-group.locked h4{color:var(--ink-soft)}
.mat-group.locked{background:var(--paper)}

/* ---- numbered version of the shared .lo list --------------------------- */
/* The laboratory reference lists an order of work, so the steps need numbers
   rather than the square markers .lo uses. Same spacing, same colour. */
ol.lo.num{counter-reset:lostep}
ol.lo.num li{counter-increment:lostep;padding-left:1.9rem}
ol.lo.num li::before{content:counter(lostep);top:0;width:auto;height:auto;background:none;
  font-family:var(--mono);font-size:.78rem;color:var(--accent);line-height:1.9}

/* A link to a page rather than to a file: navy, beside .i-pdf and .i-data. */
.mat-btn .i-page{color:var(--accent)}

/* ---- day pages: the file listing ------------------------------------- */
/* The schedule table's .wk cell is 104px, which is narrower than a file path.
   Same treatment, wider column, and it wraps rather than overlapping. */
table.filelist{table-layout:fixed}
table.filelist td.fn{font-family:var(--mono);font-size:.76rem;color:var(--accent);
  white-space:normal;overflow-wrap:break-word}
table.filelist th:first-child,table.filelist td.fn{width:32%}
/* A checksum is one long unbreakable token; let it wrap inside its cell. */
table.schedule td code{overflow-wrap:anywhere}

/* ---- home page: the four download blocks as a 2x2 grid ----------------- */
.dl-downloads{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:.4rem 0 1.1rem}
.dl-downloads .mat-group{margin:0;display:flex;flex-direction:column}
.dl-downloads .mat-group .mat-row{margin-top:auto}
.dl-downloads .dc-art img{max-height:150px}
@media (max-width:900px){.dl-downloads{grid-template-columns:1fr}}