/* vault.toca.io · on top of the shared site.css (never edit that file here: it is toca.io's).
   Navy throughout, as toca.io's dark default and the news site's customer page. Hairlines, cards lifted one step
   off the page with a 10px radius, pink only where something is live under the pointer. */

/* ---- chrome: toca.io's strip, nav, sub-nav and footer, so the Vault reads as part of the same site.
   The markup is build.py chrome(), which mirrors news-toca-io build.py chrome() (itself toca-io-rebuild gen.py
   chrome() and FOOT); these rules are the "chrome" block of news-toca-io css/news.css. Change them together. */
.skip { position: absolute; left: var(--page-gutter); top: -100px; } .skip:focus { top: .5rem; z-index: var(--z-sticky); background: var(--color-paper-3); padding: .4rem .6rem; }
:root { --frame: 120rem; }
.family > .band-narrow, .nav > .band-narrow, .foot > .band-narrow { max-width: calc(var(--frame) - 2 * var(--page-gutter)); }
.family { padding: 0 var(--page-gutter); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .04em; border-bottom: var(--rule-hair) solid var(--color-rule); color: var(--color-muted); }
.family > .band-narrow { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); min-height: 2.1rem; }
.family ul { display: flex; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; }
.family a { color: inherit; text-decoration: none; padding: .4rem 0; }
.family a:hover, .family a[aria-current] { color: var(--color-ink); }
.nav { display: block; }
.nav > .band-narrow { display: flex; justify-content: space-between; align-items: center; gap: var(--space-lg); }
/* the header comes back when you scroll up, as on toca.io (NAV_JS in build.py) */
body > .nav { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--color-paper); transition: transform .28s var(--ease-out), box-shadow .28s ease; }
body > .nav.nav--hidden { transform: translateY(-100%); }
html.nav-stuck body > .nav:not(.nav--hidden) { box-shadow: 0 12px 30px -20px rgba(2,4,12,.45); }
@media (prefers-reduced-motion: reduce) { body > .nav { transition: none; } }
.nav-links .has-menu { position: relative; display: flex; align-items: center; }
.nav-links .has-menu > a::after { content: ""; display: inline-block; width: .4em; height: .4em; margin-left: .4em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-.2em) rotate(45deg); }
.menu { position: absolute; top: 100%; left: -1rem; min-width: 15rem; margin: 0; padding: .5rem 0; list-style: none; background: var(--color-paper-3); border: var(--rule-hair) solid var(--color-rule); border-radius: 10px; box-shadow: 0 18px 40px -14px rgba(2,4,12,.6); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 120ms, transform 120ms, visibility 0s 120ms; }
.has-menu:hover .menu, .has-menu:focus-within .menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.menu li a { display: block; padding: .45rem 1rem; border: 0; font-weight: 400; color: var(--color-ink-2); }
.menu li a:hover { background: var(--color-paper-2); color: var(--color-ink); }
.menu li.sep { border-top: var(--rule-hair) solid var(--color-rule); margin: .4rem 0; }
.menu li small { display: block; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); margin-top: .1rem; }
@media (max-width: 64rem) {
  .nav-links .has-menu { display: block; }
  .menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding-left: 1rem; }
  .nav-links .has-menu > a::after { display: none; }
  .nav-links { max-width: calc(100% - 2 * var(--page-gutter)); } .nav-links .menu a { white-space: normal; }
  .nav-links { max-height: var(--menu-room, calc(100svh - 7rem)); overflow-y: auto; overscroll-behavior: contain; }
}
@media (max-width: 64rem) and (max-height: 40rem) { .nav-links .menu li small { display: none; } }
.subnav { padding: var(--space-md) var(--page-gutter); border-bottom: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); }
.subnav > .band-narrow { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }
.subnav a { color: var(--color-ink-2); text-decoration: none; padding: .3rem 0; border-bottom: 1px solid transparent; }
.subnav a[aria-current] { color: var(--color-ink); border-bottom-color: var(--color-accent); }
.subnav a:hover { color: var(--color-ink); }
.subnav .lbl { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--color-muted); margin-right: .5rem; align-self: center; }
.foot { margin-top: var(--space-xl); }
.foot > .band-narrow { display: block; }
@font-face { font-family:'Barlow'; font-style:normal; font-weight:600; font-display:swap;
  src:url(../assets/fonts/barlow-600.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
.foot-line { font-family: "Barlow", "Barlow Condensed", "Arial Narrow", sans-serif; }
.foot-links--small { gap: var(--space-xs) var(--space-lg); margin-bottom: var(--space-md); }
.foot-links--small a { font-size: var(--text-xs); color: var(--color-muted); }
.foot-meta { align-items: center; }
.foot-meta .foot-social { display: flex; gap: .25rem; margin: 0 0 0 auto; padding: 0; list-style: none; }
.foot-meta .foot-social a { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%; color: var(--color-ink-2); transition: color .15s ease, background-color .15s ease; }
.foot-meta .foot-social a:hover { color: var(--color-ink); background: var(--color-paper-2); }
.foot-social svg { display: block; width: 1.25rem; height: 1.25rem; }
@media (max-width: 40rem) { .foot-meta .foot-social { order: 3; flex-basis: 100%; margin: 0 0 0 -.625rem; } }
@media (prefers-reduced-motion: reduce) { .foot-meta .foot-social a { transition: none; } }

/* ---- navy: the news site's customer-page tokens, which are toca.io's dark mode. Pink stays the only accent. */
body.dark {
  --color-paper: #0b1020;        /* the page */
  --color-paper-2: #121933;      /* tinted panels (the family strip) */
  --color-paper-3: #141c3a;      /* cards: the page lifted one step */
  --color-rule: #283157;         /* hairlines */
  --color-ink: #f4f3ee;          /* headings */
  --color-ink-2: #d9dbe6;        /* reading text */
  --color-muted: #9aa3c4;        /* labels, kickers */
  --color-accent-text: #ff4d86;  /* pink as text or link, lifted so it clears 4.5:1 on navy */
  --color-accent-deep: #ff6f9c;  /* hover and pressed */
  --color-focus: #ff4d86;
}
body.dark .family { background: var(--color-paper-2); }
body.dark .chip--solid:hover { background: #d81b60; border-color: #d81b60; }
body.dark img { opacity: .96; }

.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.page-head h1 { max-width: 22ch; }
.page-head .support { max-width: 44rem; }
.page-head .support a.tlink { color: var(--color-ink); }

/* ---- the catalogue: search, then the filter rows, then one ledger line and grid per level */
.vault { padding-top: var(--space-xl); }
html:not(.js) .tools { display: none; }   /* search and the filter rows need js/vault.js; without it the whole list shows */
.search { display: flex; align-items: center; gap: 1rem; margin: 0; }
.search input { flex: 1; max-width: 32rem; font: inherit; font-size: var(--text-base); color: var(--color-ink); background: var(--color-paper-3); border: var(--rule-hair) solid var(--color-rule); border-radius: 10px; padding: .7rem 1rem; outline: none; -webkit-appearance: none; appearance: none; }
.search input::placeholder { color: var(--color-muted); }
.search input:focus { border-color: var(--color-ink); }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.count { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); letter-spacing: .04em; margin: 0; white-space: nowrap; }

.filters { margin: var(--space-md) 0 0; border-top: var(--rule-hair) solid var(--color-rule); }
.frow { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1.2rem; padding: .45rem 0; border-bottom: var(--rule-hair) solid var(--color-rule); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; }
.frow[hidden] { display: none; }
.flab { color: var(--color-muted); letter-spacing: .14em; min-width: 3.5rem; }
/* buttons, not links: they change what is shown and go nowhere. 2.75rem tall so a thumb can hit them. */
.filters button { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--color-ink-2); background: none; border: 0; border-radius: 0; padding: 0; min-height: 2.75rem; cursor: pointer; display: inline-flex; align-items: center; }
.filters button span { padding-bottom: .15rem; border-bottom: 1.5px solid transparent; }
.filters button:hover { color: var(--color-ink); }
.filters button[aria-pressed="true"] { color: var(--color-ink); }
.filters button[aria-pressed="true"] span { border-color: var(--color-accent); }
.filters button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.filters .n { color: var(--color-muted); margin-left: .45em; letter-spacing: .04em; }

.group[hidden], .story[hidden], .empty[hidden] { display: none; }
.year { display: flex; justify-content: space-between; font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); letter-spacing: -.005em; color: var(--color-ink); margin: var(--space-xl) 0 var(--space-md); padding-top: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); }
.year .n { font-family: var(--font-mono); font-weight: 400; font-size: var(--text-xs); color: var(--color-muted); letter-spacing: .08em; align-self: center; text-transform: uppercase; }
.all-head { margin-bottom: var(--space-lg); }
.tools + .group .year { border-top: 0; margin-top: var(--space-lg); padding-top: 0; }   /* the last filter row already draws the line */
.empty { color: var(--color-muted); padding: var(--space-xl) 0; margin: 0; }
.empty button { font: inherit; color: var(--color-ink); background: none; border: 0; border-bottom: 1px solid var(--color-rule); padding: 0; cursor: pointer; }
.empty button:hover { border-bottom-color: var(--color-accent); }

/* ---- cards: the thumbnail YouTube made, the title, one line on what the video covers */
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.story { display: flex; flex-direction: column; text-decoration: none; color: var(--color-ink); background: var(--color-paper-3); border: var(--rule-hair) solid var(--color-rule); border-radius: 10px; overflow: hidden; transition: border-color var(--dur-short) var(--ease-out); }
.story:hover { border-color: #4a557f; }
.story:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.story .pic { display: block; position: relative; aspect-ratio: 16/9; background: var(--color-paper-2); border-bottom: var(--rule-hair) solid var(--color-rule); overflow: hidden; }
.story .pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.story .play { position: absolute; left: 50%; top: 50%; width: 2.9rem; height: 2.9rem; margin: -1.45rem 0 0 -1.45rem; border-radius: 50%; background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); opacity: .92; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.story .play::after { content: ""; position: absolute; left: 1.15rem; top: .9rem; border-style: solid; border-width: .55rem 0 .55rem .9rem; border-color: transparent transparent transparent var(--color-ink); }
.story:hover .play { background: var(--color-accent); border-color: var(--color-accent); opacity: 1; }
.story:hover .play::after { border-left-color: #fff; }
.story .body { display: block; padding: .9rem 1rem 1.1rem; }
.story .meta { display: flex; flex-wrap: wrap; gap: .3rem .8rem; margin: 0 0 .45rem; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .06em; color: var(--color-muted); text-transform: uppercase; }
.story .meta .flags { margin-left: auto; display: flex; gap: .8rem; }
.story .meta .saved { color: var(--color-accent-text); }
.story .meta .watched { color: var(--color-ink); }
.story .meta .saved[hidden], .story .meta .watched[hidden] { display: none; }
.story h3 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; line-height: 1.1; letter-spacing: -.005em; color: var(--color-ink); }
.story p { margin: .4rem 0 0; font-size: var(--text-sm); color: var(--color-ink-2); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.story:hover h3 { color: var(--color-accent-text); }
@media (prefers-reduced-motion: reduce) { .story, .story .play { transition: none; } }

.outro { padding-top: 0; }
.outro p { max-width: 44rem; color: var(--color-ink-2); margin: 0; }

/* ---- a video's own page */
.watch { padding: var(--space-2xl) var(--page-gutter) var(--space-xl); }
.watch .band-narrow { max-width: 64rem; }
.watch .kicker a { color: inherit; text-decoration: none; border-bottom: var(--rule-hair) solid var(--color-rule); }
.watch .kicker a:hover { color: var(--color-ink); border-bottom-color: var(--color-accent); }
.watch h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-display-2); line-height: 1.02; letter-spacing: -.01em; margin: var(--space-sm) 0 var(--space-md); max-width: 24ch; }
.watch .lead { font-size: 1.2rem; color: var(--color-ink-2); max-width: 44rem; margin: 0; }
.film-wrap { position: relative; aspect-ratio: 16/9; margin: var(--space-lg) 0 var(--space-md); border-radius: 10px; overflow: hidden; border: var(--rule-hair) solid var(--color-rule); background: #05070f; }
.film-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.film-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem var(--space-lg); }
.film-actions .tlink { color: var(--color-ink); font-size: var(--text-sm); }
.save { font: inherit; font-size: var(--text-sm); font-weight: 500; color: var(--color-ink); background: var(--color-paper-3); border: var(--rule-hair) solid var(--color-rule); border-radius: 999px; padding: .55rem 1.1rem; min-height: 2.75rem; cursor: pointer; transition: border-color var(--dur-short) var(--ease-out); }
.save[hidden] { display: none; }
.save:hover { border-color: var(--color-ink); }
.save[aria-pressed="true"] { border-color: var(--color-accent); }
.save:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.tags { display: flex; flex-wrap: wrap; gap: .4rem .5rem; margin: var(--space-lg) 0 0; padding: 0; list-style: none; }
.tags a { display: inline-block; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--color-ink-2); text-decoration: none; padding: .4rem .75rem; border: var(--rule-hair) solid var(--color-rule); border-radius: 999px; }
.tags a:hover { color: var(--color-ink); border-color: var(--color-muted); }
.back { margin: var(--space-lg) 0 0; } .back .tlink { color: var(--color-ink); }

.more { padding-top: var(--space-xl); }
.strip-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 0 0 var(--space-md); padding-top: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); }
.strip-head h2 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); letter-spacing: -.005em; color: var(--color-ink); }
.strip-head .tlink { color: var(--color-ink); font-size: var(--text-sm); }

/* ---- progress: how far through a video, a lesson or a course this browser has got (js/vault.js fills these in).
   Off-white, not pink: a page can show dozens of these at once, and pink is kept for the one thing to press. */
.bar { display: block; height: 3px; border-radius: 2px; background: rgba(244,243,238,.16); overflow: hidden; }
.bar[hidden] { display: none; }
.bar i { display: block; height: 100%; width: 0; background: var(--color-ink); border-radius: inherit; }
.story .pic .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; border-radius: 0; background: rgba(5,7,15,.6); }

/* ---- the strips above the catalogue: where you left off, then the courses */
.resume { padding-top: var(--space-xl); padding-bottom: 0; }
.resume[hidden] { display: none; }
.courses-strip { padding-top: var(--space-xl); padding-bottom: 0; }
/* the shared site.css rules off the band under the page head; when that band (Continue watching) is hidden, the next one takes the line */
.resume[hidden] + .courses-strip { border-top: var(--rule-hair) solid var(--color-rule); }
.resume .strip-head, .courses-strip .strip-head { border-top: 0; padding-top: 0; }

/* ---- course cards */
.cgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.course { display: flex; flex-direction: column; min-height: 12rem; text-decoration: none; color: var(--color-ink); background: var(--color-paper-3); border: var(--rule-hair) solid var(--color-rule); border-radius: 10px; padding: 1.2rem 1.3rem 1.25rem; transition: border-color var(--dur-short) var(--ease-out); }
.course:hover { border-color: #4a557f; }
.course:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.course .meta, .course .cfoot { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); }
.course h2, .course h3 { margin: .55rem 0 0; font-family: var(--font-display); font-weight: 600; font-size: 1.7rem; line-height: 1.05; letter-spacing: -.005em; color: var(--color-ink); }
.course:hover h2, .course:hover h3 { color: var(--color-accent-text); }
.course p { margin: .5rem 0 0; font-size: var(--text-sm); line-height: 1.45; color: var(--color-ink-2); }
.course .cfoot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; margin-top: auto; padding-top: 1.2rem; }
.course .cprog { color: var(--color-ink); } .course .cprog[hidden] { display: none; }
.course .bar { margin-top: .7rem; }
.cgrid--big .course { min-height: 15rem; padding: 1.5rem 1.6rem; } .cgrid--big .course h2 { font-size: 2.1rem; }
.courses { padding-top: var(--space-xl); }
.forget { font: inherit; color: var(--color-ink); background: none; border: 0; border-bottom: 1px solid var(--color-rule); padding: 0; cursor: pointer; }
.forget[hidden] { display: none; } .forget:hover { border-bottom-color: var(--color-accent); }
@media (prefers-reduced-motion: reduce) { .course { transition: none; } }

/* ---- a course's own page: its status line, then each lesson as a heading beside its numbered videos */
.page-head .kicker a { color: inherit; text-decoration: none; border-bottom: var(--rule-hair) solid var(--color-rule); }
.page-head .kicker a:hover { color: var(--color-ink); border-bottom-color: var(--color-accent); }
.course-head { padding-bottom: var(--space-xl); }
.course-status { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.3rem; margin-top: var(--space-lg); }
.course-status .cmeta, .course-status .cprog { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); }
.course-status .cprog { color: var(--color-ink); } .course-status .cprog[hidden] { display: none; }
.course-status .bar { flex-basis: 100%; max-width: 26rem; }
.lessons { padding-top: 0; }
.lesson { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-lg) var(--space-xl); padding: var(--space-xl) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.lhead .lnum, .lhead .lcount { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--color-muted); margin: 0; }
.lhead h2 { margin: .5rem 0 0; font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); line-height: 1.05; letter-spacing: -.005em; color: var(--color-ink); }
.lhead .ldesc { margin: .6rem 0 0; font-size: var(--text-sm); line-height: 1.5; color: var(--color-ink-2); max-width: 26rem; }
.lhead .lcount { margin-top: .9rem; }
.playlist { list-style: none; margin: 0; padding: 0; }
.step { display: grid; grid-template-columns: 1.4rem 8rem minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: .75rem 0; border-top: var(--rule-hair) solid var(--color-rule); text-decoration: none; color: var(--color-ink); }
.playlist li:first-child .step { border-top: 0; padding-top: 0; }
.step:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.step .tick { position: relative; width: 1.3rem; height: 1.3rem; border-radius: 50%; border: 1.5px solid var(--color-rule); }
.step.is-part .tick { border-color: var(--color-ink-2); background: linear-gradient(90deg, var(--color-ink-2) 50%, transparent 50%); }
.step.is-done .tick { border-color: var(--color-ink); background: var(--color-ink); }
.step.is-done .tick::after { content: ""; position: absolute; left: .38rem; top: .16rem; width: .32rem; height: .62rem; border: solid var(--color-paper); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.step .pic { display: block; aspect-ratio: 16/9; border-radius: 6px; overflow: hidden; border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); }
.step .pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.step .stxt { display: block; min-width: 0; }
.step .st { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; line-height: 1.12; letter-spacing: -.005em; }
.step .sd { margin-top: .25rem; font-size: var(--text-sm); line-height: 1.4; color: var(--color-ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.step .sstate { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); white-space: nowrap; }
.step .sstate[hidden] { display: none; }
.step.is-done .sstate { color: var(--color-ink); }
.step:hover .st { color: var(--color-accent-text); }
.lessons .back { margin-top: var(--space-xl); }

/* ---- on a video's page: mark as watched, and the way to the videos either side of it in its course */
.seen { font: inherit; font-size: var(--text-sm); font-weight: 500; color: var(--color-ink); background: var(--color-paper-3); border: var(--rule-hair) solid var(--color-rule); border-radius: 999px; padding: .55rem 1.1rem; min-height: 2.75rem; cursor: pointer; transition: border-color var(--dur-short) var(--ease-out); }
.seen[hidden] { display: none; }
.seen:hover { border-color: var(--color-ink); }
.seen[aria-pressed="true"] { border-color: var(--color-ink); }
.seen:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.resume-note { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .04em; color: var(--color-muted); }
.resume-note[hidden] { display: none; }
.course-nav { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1rem; margin: var(--space-lg) 0 0; padding: .9rem 0; border-top: var(--rule-hair) solid var(--color-rule); border-bottom: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); }
.course-nav a { color: var(--color-ink); text-decoration: none; }
.course-nav a:hover { color: var(--color-accent-text); }
.course-nav .next { text-align: right; }
.course-nav .pos { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); white-space: nowrap; }

/* ---- small screens */
@media (max-width: 60rem) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cgrid { grid-template-columns: 1fr; } .course, .cgrid--big .course { min-height: 0; }
  .lesson { grid-template-columns: 1fr; gap: var(--space-md); padding: var(--space-lg) 0; }
}
@media (max-width: 40rem) {
  .step { grid-template-columns: 1.3rem 5.5rem minmax(0, 1fr); gap: .75rem; }
  .step .sstate { grid-column: 3; }
  .step .sd { display: none; }
  .course-nav { grid-template-columns: 1fr 1fr; } .course-nav .pos { grid-column: 1 / -1; grid-row: 1; }
  .grid { grid-template-columns: 1fr; }
  .search { flex-wrap: wrap; } .search input { flex-basis: 100%; max-width: none; }
  .watch { padding-top: var(--space-xl); }
}

/* ---- Docs: the platform documentation (docs.py builds it from the toca-docs repository). The sidebar lists every
   article; the article reads at a comfortable measure. The articles are Toca's in-product help, so their screenshots
   are light: they sit in a frame rather than fighting the navy. */
.doc-wrap { padding: var(--space-xl) var(--page-gutter) var(--space-2xl); }
.doc-layout { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: var(--space-2xl); align-items: start; }
.doc-side { position: sticky; top: 5rem; max-height: calc(100vh - 6rem); overflow-y: auto; overscroll-behavior: contain; font-size: var(--text-sm); padding-right: .5rem; }
.doc-sec { border-bottom: var(--rule-hair) solid var(--color-rule); }
.doc-sec summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; padding: .6rem 0; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--color-muted); }
.doc-sec summary::-webkit-details-marker { display: none; }
.doc-sec summary::after { content: ""; width: .4em; height: .4em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .15s ease; }
.doc-sec[open] summary::after { transform: rotate(45deg); }
.doc-sec summary:hover { color: var(--color-ink); }
.doc-side ul, .doc-group ul { list-style: none; margin: 0; padding: 0 0 .6rem; }
.doc-side li a, .doc-side li span { display: block; padding: .28rem 0 .28rem .7rem; border-left: 1.5px solid transparent; line-height: 1.3; }
.doc-side li a { color: var(--color-ink-2); text-decoration: none; }
.doc-side li a:hover { color: var(--color-ink); }
.doc-side li a[aria-current] { color: var(--color-ink); border-left-color: var(--color-accent); }
.doc-side li.d1 a, .doc-side li.d1 span { padding-left: 1.5rem; } .doc-side li.d2 a, .doc-side li.d2 span { padding-left: 2.3rem; }
.doc-side li.doc-fold > span, .doc-side li.doc-fold > a { color: var(--color-ink); font-weight: 500; margin-top: .3rem; }
.doc-mobile { display: none; }

.doc-main { max-width: 46rem; min-width: 0; }
.doc-head .kicker a { color: inherit; text-decoration: none; border-bottom: var(--rule-hair) solid var(--color-rule); }
.doc-head .kicker a:hover { color: var(--color-ink); border-bottom-color: var(--color-accent); }
.doc-head h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.2rem, 2.6vw + 1rem, 3.4rem); line-height: 1.04; letter-spacing: -.01em; margin: var(--space-sm) 0 var(--space-md); }
.doc-src { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; align-items: center; margin: 0; font-size: var(--text-sm); }
.doc-src a { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; color: var(--color-ink-2); text-decoration: none; }
.doc-src a:first-child { padding: 0 .9rem; border: var(--rule-hair) solid var(--color-rule); border-radius: 999px; color: var(--color-ink); }
.doc-src a:first-child:hover { border-color: var(--color-ink); }
.doc-src a:last-child span, .doc-src a:last-child { border-bottom: 1px solid transparent; }
.doc-src a:last-child:hover { color: var(--color-ink); }
.doc-toc { margin: var(--space-lg) 0 0; padding: .9rem 1.1rem; border: var(--rule-hair) solid var(--color-rule); border-radius: 10px; font-size: var(--text-sm); }
.doc-toc p { margin: 0 0 .4rem; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--color-muted); }
.doc-toc ul { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 2rem; }
.doc-toc li { break-inside: avoid; padding: .15rem 0; }
.doc-toc a { color: var(--color-ink-2); text-decoration: none; } .doc-toc a:hover { color: var(--color-ink); }

.doc-body { margin-top: var(--space-lg); color: var(--color-ink-2); line-height: 1.65; }
.doc-body > :first-child { margin-top: 0; }
.doc-body h2, .doc-body h3, .doc-body h4, .doc-body h5, .doc-body h6 { font-family: var(--font-display); font-weight: 600; color: var(--color-ink); letter-spacing: -.005em; line-height: 1.15; scroll-margin-top: 6rem; }
.doc-body h2 { font-size: var(--text-xl); margin: var(--space-xl) 0 var(--space-sm); padding-top: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); }
.doc-body h3 { font-size: 1.35rem; margin: var(--space-lg) 0 .5rem; }
.doc-body h4, .doc-body h5, .doc-body h6 { font-size: 1.1rem; margin: var(--space-md) 0 .4rem; }
.doc-body p, .doc-body ul, .doc-body ol { margin: 0 0 1rem; }
.doc-body ul, .doc-body ol { padding-left: 1.4rem; }
.doc-body li { margin: .25rem 0; } .doc-body li > ul, .doc-body li > ol { margin: .3rem 0 0; }
.doc-body a { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-rule); text-underline-offset: .2em; }
.doc-body a:hover { text-decoration-color: var(--color-accent); }
.doc-body strong { color: var(--color-ink); font-weight: 600; }
.doc-body code { font-family: var(--font-mono); font-size: .88em; background: var(--color-paper-3); border: var(--rule-hair) solid var(--color-rule); border-radius: 4px; padding: .05em .35em; overflow-wrap: anywhere; }
.doc-code { margin: 0 0 1.2rem; padding: 1rem 1.1rem; background: #070b17; border: var(--rule-hair) solid var(--color-rule); border-radius: 10px; overflow-x: auto; font-size: var(--text-sm); line-height: 1.5; }
.doc-code code { background: none; border: 0; padding: 0; font-size: inherit; overflow-wrap: normal; white-space: pre; color: var(--color-ink-2); }
.doc-body img, .doc-video { display: block; max-width: 100%; height: auto; margin: 1.2rem 0; border-radius: 8px; border: var(--rule-hair) solid var(--color-rule); background: #fff; }
.doc-video { width: 100%; background: #05070f; }
.doc-body hr { border: 0; border-top: var(--rule-hair) solid var(--color-rule); margin: var(--space-lg) 0; }
.doc-body blockquote { margin: 0 0 1rem; padding-left: 1rem; border-left: 2px solid var(--color-rule); }
.doc-table { overflow-x: auto; margin: 0 0 1.2rem; border: var(--rule-hair) solid var(--color-rule); border-radius: 10px; }
.doc-table table { border-collapse: collapse; width: 100%; font-size: var(--text-sm); line-height: 1.45; }
.doc-table th, .doc-table td { text-align: left; vertical-align: top; padding: .55rem .8rem; border-bottom: var(--rule-hair) solid var(--color-rule); }
.doc-table th { color: var(--color-ink); font-weight: 600; background: var(--color-paper-2); }
.doc-table tr:last-child td { border-bottom: 0; }
.doc-note { margin: 0 0 1.2rem; padding: .8rem 1.1rem .1rem; background: var(--color-paper-3); border: var(--rule-hair) solid var(--color-rule); border-left: 3px solid var(--color-ink-2); border-radius: 8px; }
.doc-note--warning, .doc-note--caution, .doc-note--important { border-left-color: var(--color-accent); }
.doc-note-k { margin: 0 0 .3rem !important; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--color-muted); }
/* datachips as the platform draws them: variable pink, action green, datastore blue */
.doc-chip { display: inline-flex; align-items: baseline; gap: .35em; padding: .05em .55em; border-radius: 999px; font-size: .88em; font-weight: 500; color: #fff; white-space: nowrap; }
.doc-chip small { font-size: .8em; opacity: .8; font-weight: 400; }
.doc-chip--var { background: #c2185b; } .doc-chip--act { background: #2e7d32; } .doc-chip--ds { background: #1565c0; }
.doc-ref { color: var(--color-ink); border-bottom: 1px dotted var(--color-muted); }
.doc-foot { margin-top: var(--space-2xl); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); }
.doc-foot a { color: var(--color-ink); }

/* the index: every section as a column of links, a filter above */
.doc-index { padding-top: var(--space-xl); }
html:not(.js) .doc-search { display: none; }
.doc-groups { columns: 3 16rem; column-gap: var(--space-xl); margin-top: var(--space-lg); }
.doc-group { break-inside: avoid; margin: 0 0 var(--space-lg); }
.doc-group[hidden] { display: none; }
.doc-group h2 { margin: 0 0 .4rem; padding-top: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--color-ink); }
.doc-group li[hidden] { display: none; }
.doc-group li a, .doc-group li span { display: block; padding: .22rem 0; font-size: var(--text-sm); line-height: 1.35; }
.doc-group li a { color: var(--color-ink-2); text-decoration: none; } .doc-group li a:hover { color: var(--color-accent-text); }
.doc-group li.d1 { padding-left: .9rem; } .doc-group li.d2 { padding-left: 1.8rem; }
.doc-group li.doc-fold > span, .doc-group li.doc-fold > a { color: var(--color-ink); font-weight: 500; margin-top: .3rem; }
.doc-about { margin: var(--space-xl) 0 0; padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); max-width: 44rem; }
.doc-about a { color: var(--color-ink); }

@media (max-width: 60rem) {
  .doc-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .doc-layout > .doc-side { display: none; }
  .doc-mobile { display: block; border: var(--rule-hair) solid var(--color-rule); border-radius: 10px; padding: 0 1rem; }
  .doc-mobile > summary { cursor: pointer; padding: .8rem 0; min-height: 2.75rem; color: var(--color-ink); font-size: var(--text-sm); }
  .doc-mobile .doc-side { position: static; max-height: none; padding: 0; }
  .doc-toc ul { columns: 1; }
}