/* The program switch on /map/ and /inside/: a button with the program shown, under it a list of all five, each with a
   bar to scale of its length: the writing part, the picture part (picture program only), then the engine as dark tip. */
.progpick { --pp-pic: color-mix(in srgb, var(--d2) 30%, #c8283a); position: relative; flex: 0 1 auto; min-width: 0; margin: 0; }
.progpick details { position: relative; }
.progpick summary { display: flex; align-items: center; gap: var(--s2); min-height: var(--target); padding: 0 var(--s3); list-style: none; cursor: pointer; border: var(--edge) solid var(--ink); background: var(--bg); color: var(--ink); font: var(--ctl); white-space: nowrap; user-select: none; }
.progpick summary::-webkit-details-marker { display: none; }
.progpick summary:hover { background: var(--hot); }
.progpick details[open] > summary { background: var(--ink); color: var(--bg); }
.progpick .pp-cur, .progpick .pp-len { display: inline-flex; min-width: 0; }
.progpick .pp-cur > *, .progpick .pp-len > * { display: none; overflow: hidden; text-overflow: ellipsis; }
.progpick .pp-len { font-weight: 400; color: var(--muted); }
.progpick details[open] > summary .pp-len { color: inherit; }
/* the program shown, by the attribute that the head of the page sets */
:root[data-model="small"] .progpick summary [data-m="small"], :root[data-model="0.5b"] .progpick summary [data-m="0.5b"], :root[data-model="1.5b"] .progpick summary [data-m="1.5b"],
:root[data-model="0.8b"] .progpick summary [data-m="0.8b"], :root[data-model="0.8b-vision"] .progpick summary [data-m="0.8b-vision"],
:root[data-model="train-attn"] .progpick summary [data-m="train-attn"], :root[data-model="train-mlp"] .progpick summary [data-m="train-mlp"], :root[data-model="train-bigram"] .progpick summary [data-m="train-bigram"] { display: inline; }
.progpick .pp-caret { flex: 0 0 auto; width: 0; height: 0; border: 5px solid transparent; border-top: 6px solid currentColor; border-bottom: 0; transition: transform var(--ease); }
.progpick details[open] .pp-caret { transform: rotate(180deg); }

.progpick .pp-menu { position: absolute; left: 0; top: calc(100% + 4px); z-index: 40; width: min(27rem, calc(100vw - 24px)); padding: var(--s3) 0 var(--s2); background: var(--panel); color: var(--ink); border: var(--edge) solid var(--ink); box-shadow: var(--drop); }
.progpick .pp-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s1) var(--s3); margin: 0 var(--s3) var(--s2); color: var(--muted); font: 400 .75rem/1.3 var(--mono); }
.progpick .pp-key { display: inline-flex; align-items: center; gap: var(--s1); white-space: nowrap; }
.progpick .pp-key i { display: inline-block; width: 12px; height: 8px; background: var(--rule); }
.progpick .pp-key i.e { background: var(--ink); margin-left: var(--s2); }
.progpick .pp-key i.p { background: var(--pp-pic); margin-left: var(--s2); }
.progpick ul { list-style: none; margin: 0; padding: 0; }
.progpick li { margin: 0; }
.progpick ul a { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name n" "bar bar"; gap: 5px var(--s3); padding: 7px var(--s3) 9px; color: var(--ink); text-decoration: none; font: var(--ctl); border-left: 4px solid transparent; }
.progpick ul a:hover { background: var(--hot); }
.progpick ul a:focus-visible { outline-offset: -4px; }
.progpick ul a[aria-current] { border-left-color: var(--ink); background: var(--sunk); }
.progpick ul a[aria-current] .pp-name::after { content: " \2713"; }
.progpick .pp-name { grid-area: name; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.progpick .pp-n { grid-area: n; font-weight: 400; color: var(--muted); white-space: nowrap; }
/* --w: program length as a share of the longest; --e: where the engine starts, --p..--q: the picture part (shares) */
.progpick .pp-bar { grid-area: bar; display: block; height: 8px; background: color-mix(in srgb, var(--line) 45%, transparent); }
.progpick .pp-bar i { display: block; height: 100%; width: var(--w); min-width: 2px; background: linear-gradient(to right, var(--rule) var(--p, var(--e)), var(--pp-pic) var(--p, var(--e)) var(--q, var(--e)), var(--ink) var(--q, var(--e))); }
.progpick .pp-away { grid-column: 1 / -1; font-weight: 400; color: var(--muted); font-size: .75rem; }

@media (max-width: 30em) {
  .progpick .pp-len { display: none; }
  .progpick summary { padding: 0 var(--s2); }
  .progpick ul a { grid-template-areas: "name name" "bar n"; align-items: center; }
  .progpick .pp-away { grid-row: 3; }
}
@media (prefers-reduced-motion: reduce) { .progpick .pp-caret { transition: none; } }
@media print { .progpick details { display: none; } }
/* the programs that train a network: a second list under the first, at the same scale; their map is on train/ */
.progpick .pp-group { margin: 0 var(--s3) var(--s1); color: var(--ink); font: var(--lab); letter-spacing: var(--ls-lab); text-transform: uppercase; }
.progpick .pp-sub { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); }