/* Wat alleen de cockpit heeft, naast ui.css: de inlogpagina en de lijst met runs. */

/* ── Inloggen: links het merk op inkt, rechts de knop ───────────────────── */
body.inlog{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100svh;background:var(--vlak)}
.inlog-l{display:flex;flex-direction:column;justify-content:space-between;gap:2.5rem;padding:2.5rem 4rem;color:#fff;background:linear-gradient(to top,transparent 0%,rgb(23 23 26/.55) 28%,#17171a 50%),var(--snede) right bottom/75rem 56.25rem no-repeat,#17171a}
.inlog-l .zij-top{color:#fff;padding:0}
.inlog-l .zij-top small{color:var(--merk-op-inkt)}
.inlog-l .b-eyebrow{color:#e95858}
.inlog-l h2{max-width:14ch;color:#fff;font-size:clamp(1.75rem,1.15rem + 1.85vw,3.125rem);font-weight:400;line-height:1.06;letter-spacing:-.035em}
.inlog-l ul{display:grid;gap:.5rem;margin:0;padding:0;list-style:none;font-size:var(--klein)}
.inlog-l li{display:flex;gap:.625rem;align-items:center}
.inlog-l li::before{content:"";width:.5rem;height:.5rem;flex:none;background:#de0909}
.inlog-r{align-content:center;justify-content:center;max-width:34rem;padding:2.5rem 0}
.inlog-r>*{margin-inline:4rem}
.inlog-r>.b-head{margin:0;padding:0 4rem 1rem;border:0;background:none}
#google{min-height:44px}
@media (max-width:63.99rem){body.inlog{grid-template-columns:minmax(0,1fr)}.inlog-l{gap:1.5rem;padding:2rem 1.5rem}.inlog-r>*{margin-inline:1.5rem}.inlog-r>.b-head{padding-inline:1.5rem}}

/* ── Runs: filterbalk en lijst ─────────────────────────────────────────── */
.r-balk{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1.5rem}
.r-zoek{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:0}
.r-zoek input[type=search]{width:min(26rem,70vw)}
.r-zoek input[name=wie]{width:14rem}
.r-lijst{display:grid}
.r-run{display:grid;grid-template-columns:2.5rem minmax(0,1fr) auto;gap:.25rem 1rem;align-items:center;padding:.875rem 1.5rem;color:inherit;text-decoration:none;border-top:1px solid var(--rand);transition:background-color .2s var(--rustig)}
.r-run:first-child{border-top:0}
.r-run:hover{background:var(--vlak-zachtst)}
.r-run:hover b{text-decoration:underline;text-underline-offset:3px}
.r-tegel{display:grid;place-items:center;width:2.5rem;height:2.5rem;color:var(--vlak);background:var(--inkt);font-size:var(--mini);font-weight:600;clip-path:polygon(0 0,calc(100% - var(--hoek-tegel)) 0,100% var(--hoek-tegel),100% 100%,0 100%)}
.r-tegel.loopt{background:var(--groen)}
.r-tegel.wacht{color:var(--inkt);background:var(--geel-zacht)}
.r-tegel.fout{background:var(--merk)}
.r-tegel.stil{color:var(--inkt-zacht);background:var(--vlak-zacht)}
.r-run b{display:block;overflow:hidden;font-weight:500;color:var(--inkt);text-overflow:ellipsis;white-space:nowrap}
.r-sub{display:flex;flex-wrap:wrap;gap:.125rem .875rem;margin-top:.125rem;font-size:var(--mini);color:var(--tekst-zwak)}
.r-sub .b-mono{font-size:.75rem}
.r-d{display:grid;justify-items:end;gap:.25rem;font-size:var(--mini);color:var(--inkt-zacht);white-space:nowrap;text-align:right}
.r-d small{color:var(--tekst-zwak);font-variant-numeric:tabular-nums}
.r-dag{padding:1.25rem 1.5rem .375rem;font-size:var(--mini);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tekst-zwak);border-top:1px solid var(--rand)}
.r-dag:first-child{border-top:0}
.r-dag+.r-run{border-top:0}
.r-meer{display:flex;justify-content:center;padding:1rem}
@media (max-width:47.99rem){.r-run{grid-template-columns:2.5rem minmax(0,1fr)}.r-d{grid-column:2;justify-items:start;text-align:left;display:flex;gap:.75rem}}

/* ── Een run: knoppen en gegevens ──────────────────────────────────────── */
.r-acties{display:flex;flex-wrap:wrap;gap:.5rem;align-items:flex-start}
.r-twee{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:1.25rem;align-items:start}
@media (max-width:1100px){.r-twee{grid-template-columns:minmax(0,1fr)}}
.r-rechts{display:grid;gap:1rem;justify-items:end}
.r-rechts .kop-meta{justify-content:flex-end}
.b-head .b-lede.b-mono{margin-top:.375rem;font-size:var(--mini);color:var(--tekst-zwak)}
.b-eyebrow a{text-decoration:none}.b-eyebrow a:hover{text-decoration:underline}
@media (max-width:63.99rem){.r-rechts{justify-items:start}.r-rechts .kop-meta{justify-content:flex-start}}

/* ── De startprompt ────────────────────────────────────────────────────── */
.t-regels{display:grid;gap:.75rem;padding:1.25rem 1.5rem}
.t-regels pre{max-height:32rem;overflow:auto;padding:.875rem 1rem;background:var(--vlak-zachtst);border:1px solid var(--rand);white-space:pre-wrap;word-break:break-word}
.t-regels pre.t-tekst{font-family:var(--letter);font-size:var(--klein);line-height:1.6;color:var(--inkt)}
.t-regels details summary{cursor:pointer;font-size:var(--klein);font-weight:500;color:var(--inkt)}
.t-regels details[open] summary{margin-bottom:.5rem}