/* Probability for Robotics: additions on top of site.css, theory.css and slam.css (which supply the page, lesson and lab layout). */
.pr-page .sl-how.pr-shift { border-left-color: var(--orange); }
.pr-page .sl-how.pr-shift h2 { margin-top: 12px; }

/* course hub: stages group the modules */
.pr-page .pr-stage { margin: 46px 0 0; padding: 10px 14px; font-size: 20px; background: var(--panel); border: 1px solid var(--rule); border-left: 4px solid var(--cobalt); border-radius: 8px; scroll-margin-top: 12px; }
.pr-page .pr-stage + .sl-mod { border-top: 0; margin-top: 8px; }
.pr-page .pr-mod-h { font-size: clamp(22px, 2.6vw, 28px); margin: 4px 0 6px; }
.pr-page .sl-cols h4 { font-size: 16px; margin: 6px 0; }
.pr-page .sl-mod-pre { margin: 4px 0 6px; font-size: 14px; color: var(--ink-2); max-width: 760px; }
.pr-page .sl-mod-done { margin: 0 0 10px; font-size: 14px; color: var(--ink-2); }
.pr-page .sl-mod-done summary { cursor: pointer; font-weight: 600; }
.pr-page .sl-mod-done ul { margin: 6px 0 0 18px; padding: 0; }

/* display equations (KaTeX, rendered at build time) */
.pr-tex { margin: .9rem 0; padding: .7rem 1rem .8rem; background: var(--panel); border: 1px solid var(--rule); border-left: 4px solid var(--cobalt); border-radius: 10px; overflow-x: auto; }
.pr-tex-label { font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .2rem; }
.pr-tex-eq { font-size: 1.12rem; overflow-x: auto; overflow-y: hidden; padding: .15rem 0; }
.pr-tex-eq .katex-display { margin: .3rem 0; text-align: left; }
.pr-tex-eq .katex-display > .katex { text-align: left; }
.pr-tex-note { font-size: .92rem; color: var(--ink-2); margin-top: .25rem; }
.pr-tex:focus-visible, .pr-tex-eq:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }
.pr-page .th-article .katex { font-size: 1.06em; }

/* a derivation: numbered steps, each an equation and the reason it is allowed */
.pr-derive { list-style: none; counter-reset: prstep; padding: 0 !important; margin: 14px 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.pr-derive > li { counter-increment: prstep; position: relative; min-width: 0; padding: 10px 14px 8px 52px; background: var(--panel); border: 1px solid var(--rule); border-radius: 10px; }
.pr-derive > li::before { content: counter(prstep); position: absolute; left: 12px; top: 12px; width: 28px; height: 28px; border-radius: 50%; background: var(--cobalt); color: #fff; font: 700 13px/28px var(--mono); text-align: center; }
.pr-derive > li > p { margin: 2px 0 0 !important; font-size: 15.5px !important; color: var(--ink-2) !important; }

/* runnable Python with its printed output */
.pr-codefig { margin: 14px 0; }
.pr-codefig figcaption { font-size: 14px; color: var(--ink-2); margin-top: 6px; }
pre.pr-code, pre.pr-out { margin: 0; padding: 12px 14px; overflow-x: auto; border: 1px solid var(--rule); font: 13px/1.55 var(--mono); tab-size: 4; }
pre.pr-code { background: var(--code-bg); border-radius: 6px; }
pre.pr-code::before { content: 'python · robotprob'; display: block; font: 700 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
pre.pr-code:has(+ pre.pr-out) { border-radius: 6px 6px 0 0; }
pre.pr-out { background: var(--panel); border-top: 0; border-radius: 0 0 6px 6px; color: var(--ink-2); }
pre.pr-out::before { content: 'output'; display: block; font: 700 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }

/* the bench log that opens every lab */
.pr-incident { border: 1px solid var(--rule); border-left: 4px solid var(--orange); border-radius: 8px; background: var(--orange-2); padding: 4px 16px 6px; margin: 14px 0 18px; }
.pr-incident p { line-height: 1.55; }
.pr-incident .pr-incident-tag { margin: 8px 0 2px; font: 700 11.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--orange); }
.pr-page .sw-gold { background: var(--gold, #B8860B); }
.pr-page .sw-red { background: #C0392B; }
.pr-codefig { min-width: 0; max-width: 100%; }
@media (max-width: 520px) { .pr-derive > li { padding-left: 44px; } .pr-derive > li::before { left: 8px; } .pr-tex { padding: .6rem .7rem; } }
pre.pr-code code { display: block; padding: 0; border: 0; background: none; font: inherit; white-space: pre; }

/* resources page */
.pr-page .pr-reslink { margin: 6px 0 18px; }
.pr-resources .sl-how ul { margin: 6px 0 10px; padding-left: 0; list-style: none; display: grid; gap: 8px; }
.pr-resources .sl-how li { line-height: 1.6; }
.pr-res-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 980px) { .pr-res-list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.pr-res { min-width: 0; padding: 14px 16px 12px; background: var(--panel); border: 1px solid var(--rule); border-radius: 10px; overflow-wrap: anywhere; }
.pr-res h3 { margin: 0 0 2px; font-size: 17px; }
.pr-res p { margin: 6px 0; font-size: 15px; line-height: 1.55; }
.pr-res .pr-res-by { margin-top: 0; font-size: 13.5px; color: var(--ink-2); }
.pr-res-parts { margin: 6px 0; padding-left: 1.1em; font-size: 14.5px; }
.pr-res-parts li { margin: 2px 0; }
.pr-res .pr-res-tags { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-top: 10px; }
.pr-res .pr-res-mods { font-size: 13.5px; color: var(--ink-2); }
.pr-res .pr-res-lic { font-size: 13.5px; color: var(--ink-2); }
.pr-tag { display: inline-block; padding: 2px 9px; border: 1px solid var(--rule); border-radius: 999px; font: 700 12px/1.5 var(--font); background: var(--paper); color: var(--ink); white-space: nowrap; }
.pr-tag-free, .pr-tag-ok { border-color: var(--green); background: var(--green-2); }
.pr-tag-nc { border-color: var(--cobalt); }
.pr-tag-no, .pr-tag-paid { border-color: var(--orange); background: var(--orange-2); }
.pr-tag-unk { border-style: dashed; }
.pr-resources .th-table td { vertical-align: top; }
.pr-page .pr-reslink .btn { white-space: normal; }
.pr-page .pr-reslink-note { margin-left: 8px; font-size: 14.5px; color: var(--ink-2); }