/* AI x Media Corpus to Dataset tutorial: language switch, prompt blocks, file lists, buttons, two-column
   grids, TBD tags, compact tables and the top-of-page "On this page" card. Loaded after tutorial-chapter.css
   by labsite/tutorial/corpus-to-dataset/base.html. */
.tutorial-series .prompt-note { margin: 0 0 6px; font-size: var(--type-code); color: var(--muted, #5b6b80); font-style: italic; }
/* ---- workshop additions (port with the tutorial) ---- */
.tutorial-series pre.prompt {
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-left: 4px solid var(--link);
  padding: 16px 18px; font-family: var(--font-mono); font-size: var(--type-code); line-height: 1.6;
  white-space: pre-wrap; overflow-wrap: anywhere; margin: 0;
}
.tutorial-series .prompt-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 6px; }
.tutorial-series .prompt-head .pill { margin: 0; }
.tutorial-series .prompt-head a { font-size: var(--type-small); }
.tutorial-series td.num, .tutorial-series th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tutorial-series ul.files { list-style: none; padding: 0; margin: 0; }
.tutorial-series ul.files li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--border); align-items: baseline; }
.tutorial-series ul.files li:first-child { border-top: 2px solid var(--panel); }
.tutorial-series ul.files .f-name { font-family: var(--font-mono); font-size: var(--type-code); }
.tutorial-series ul.files .f-desc { display: block; color: var(--muted); font-size: var(--type-small); margin-top: 2px; }
.tutorial-series ul.files .f-meta { color: var(--muted); font-family: var(--font-mono); font-size: var(--type-label); white-space: nowrap; }
.tutorial-series .btn {
  display: inline-block; padding: 9px 16px; background: var(--action, #0b6fb3); color: #fff; text-decoration: none;
  font-family: var(--font-mono); font-size: var(--type-code); letter-spacing: .04em; border: 0; cursor: pointer;
}
.tutorial-series .btn.btn--ghost { background: transparent; color: var(--link); border: 1px solid var(--border-strong, var(--border)); }
.tutorial-series .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.tutorial-series .fig-body img { display: block; width: 100%; height: auto; }
.tutorial-series .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-s); }
@media (max-width: 720px) { .tutorial-series .two-col { grid-template-columns: 1fr; } }
.tutorial-series .tbd { background: var(--amber-soft, #fdf3e0); color: #6b4e0a; font-family: var(--font-mono); font-size: var(--type-label); padding: 1px 6px; letter-spacing: .06em; }
.tutorial-series .steps-figure svg { width: 100%; height: auto; display: block; }
.tutorial-series table.compact td, .tutorial-series table.compact th { padding: 5px 8px; font-size: var(--type-small); }
/* keep code-style cells on one line in wide tables */
table.compact td.mono, table.compact th { white-space: nowrap; }
/* round 3/4: "On this page" sits at the top of each step page (nav.page-toc, styled in
   design-system.css like every other page); no sticky rail; single-column layout */
.tutorial-series .document-layout.tutorial-layout.document-layout--no-index { display: block; max-width: none; }
.tutorial-series .tutorial-layout .document-content { max-width: none; }
/* The translated overviews still use .howto blocks; their headings take the style of the English
   index's .section-title from tutorial-index.css. The "On this page" card is in tutorial-chapter.css. */
.tutorial-series .howto { margin: var(--gap-l) 0 0; padding: 0; border-left: 0; background: transparent; }
.tutorial-series .howto h2:not(:first-child) { margin-top: var(--gap-l); }
/* Workshops section on the index: one entry per workshop run, with the slides shown as a 16:9 card
   in the style of the site's video embeds (.media-embed). */
.tutorial-series .workshop-entry__text p:last-child { margin-top: 10px; }
.tutorial-series .slides-card { display: block; color: inherit; text-decoration: none; }
.tutorial-series .slides-card__frame { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; border-top: 3px solid var(--panel); background: #000; }
.tutorial-series .slides-card__frame img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.15s ease; }
.tutorial-series .slides-card__badge { position: absolute; right: 12px; bottom: 12px; padding: 4px 10px; background: var(--panel); color: #fff; font-family: var(--mono-font); font-size: var(--type-label); letter-spacing: 0.06em; text-transform: uppercase; }
.tutorial-series .slides-card:hover .slides-card__frame img, .tutorial-series .slides-card:focus-visible .slides-card__frame img { opacity: 0.85; }
.tutorial-series .slides-card__caption { display: block; margin-top: 8px; color: var(--muted); font-size: var(--type-small); }