/* Guided practice labs: /labs/ and /labs/<course>/ (29 Oct 2026). The pages are generated by site/packs/gen.mjs from
   the Shared-folder snapshot. v3 (research/v2/DESIGN-v3.md): two themes, so colour and type come only from the tokens
   in patch.css (no hard-coded colour, font or light-only shadow); left-aligned heads with the real workspace; crisp
   cards (--r-card, --c-line, --shadow-card) with the hosted EVE-NG colour on the top edge; mono tags for technical
   labels. Every lab is a card in a grid that wraps down to one column at 320 px. */

.pg-labs{--k:var(--k-blue)}
.nw{white-space:nowrap}
.pg-labs .link--more{color:var(--c-signal)}

/* ---------- Mono tags for technical labels ---------- */
.pk-tag{display:inline-flex;align-items:center;gap:8px;margin:0;font:600 13px/1.2 var(--f-mono);letter-spacing:.02em;color:var(--c-ink-3)}
.pk-tag__dot{flex:none;width:8px;height:8px;border-radius:2px;background:var(--k)}

/* ---------- Page head: words left, the real workspace right; a spec strip below ---------- */
.pk-head{padding:clamp(36px,5vw,72px) 0 clamp(48px,5.5vw,80px)}
.pk-head__grid{display:grid;gap:var(--s-8);align-items:center}
.pk-head--media .pk-head__grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.pk-head .crumbs{margin-bottom:var(--s-5)}
.pk-head .t-title{max-width:16em}
.pk-head .t-lede{margin-top:var(--s-5);max-width:38em}
.pk-head__actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-6)}
.pk-head__meta{margin-top:var(--s-4);max-width:38em;font-size:15px;line-height:1.55;color:var(--c-ink-3)}
.pk-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin:clamp(36px,4.5vw,56px) 0 0;border:1px solid var(--c-line);border-radius:var(--r-card);background:var(--c-line);box-shadow:var(--shadow-card);overflow:hidden}
.pk-facts>div{display:flex;flex-direction:column;gap:5px;min-width:0;padding:18px 22px;background:var(--c-surface)}
.pk-facts dt{font-size:13.5px;color:var(--c-ink-3)}
.pk-facts dd{margin:0;font-size:16.5px;font-weight:600;color:var(--c-ink);overflow-wrap:anywhere}

/* ---------- Section heads ---------- */
.pk-sec__head{display:grid;gap:var(--s-4);max-width:46em;margin-bottom:var(--s-7)}
.pk-sec__head .t-lede{max-width:44em}

/* ---------- Who it's for, and the plan card ---------- */
.pk-intro{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-8);align-items:start}
.pk-intro__text{display:grid;gap:var(--s-5)}
.pk-intro .prose{font-size:17px;color:var(--c-ink-2)}
.pk-plan{position:relative;display:grid;gap:var(--s-3);padding:clamp(24px,2.6vw,32px);border:1px solid var(--c-line);border-radius:var(--r-card);background:var(--c-surface);box-shadow:var(--shadow-card);overflow:hidden}
.pk-plan::before,.pk-card::before,.pk-cta::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--k)}
.pk-plan__title{font-size:22px;line-height:1.25;font-weight:600;letter-spacing:-.012em}
.pk-plan__spec{font:600 15px/1.4 var(--f-mono);color:var(--c-ink)}
.pk-plan__price{font-size:16px;color:var(--c-ink-2)}
.pk-plan__why{font-size:15px;line-height:1.55;color:var(--c-ink-3)}
.pk-plan__go{margin-top:var(--s-2)}
/* The Lab Tasks pane card beside "How to open" (30 Oct 2026, in place of the retired courses' stills). */
.pk-pane__list{display:grid;gap:var(--s-3);margin:var(--s-2) 0 0;padding-left:1.25em;font-size:15.5px;line-height:1.5;color:var(--c-ink-2)}
.pk-pane__list strong{color:var(--c-ink);font-weight:600}
.pk-pane__note{margin-top:var(--s-2);font-size:14px;line-height:1.55;color:var(--c-ink-3)}

/* ---------- The labs: a set per Shared folder, a card per lab ---------- */
.pk-sets{display:grid;gap:var(--s-8)}
.pk-set{display:grid;gap:var(--s-5);min-width:0}
.pk-set__head{display:grid;gap:var(--s-3);max-width:52em}
.pk-set__title{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;font-size:22px;line-height:1.25;font-weight:600;letter-spacing:-.012em}
.pk-set__count{font:500 14px/1 var(--f-mono);color:var(--c-ink-3)}
.pk-set__where{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0}
.pk-folder{font-size:13.5px;white-space:normal;overflow-wrap:anywhere}
.pk-set__about{font-size:16px;line-height:1.6;color:var(--c-ink-2)}
.pk-labs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:var(--s-3);margin:0;padding:0;list-style:none}
/* A card per lab: cards in a row share a height, and the vCPU/RAM line with the plan sits on the bottom edge. */
.pk-lab{display:flex;flex-direction:column;gap:var(--s-2);min-width:0;padding:18px 20px;border:1px solid var(--c-line);border-radius:var(--r-card);background:var(--c-surface);box-shadow:var(--shadow-card)}
.pk-lab__title{display:flex;align-items:baseline;gap:10px;font-size:16.5px;line-height:1.35;font-weight:600;letter-spacing:-.006em}
.pk-lab__n{flex:none;font:600 13px/1.6 var(--f-mono);font-variant-numeric:tabular-nums;color:var(--c-signal);white-space:nowrap}
.pk-lab__name{min-width:0;overflow-wrap:anywhere}
.pk-lab__topic{font-size:15px;line-height:1.55;color:var(--c-ink-2)}
.pk-lab__mix{font-size:13.5px;line-height:1.5;color:var(--c-ink-3)}
.pk-lab__warn{padding:8px 12px;border-radius:8px;background:var(--c-note-warn);color:var(--c-note-warn-ink);font-size:14px;line-height:1.5}
.pk-lab__res{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;margin-top:auto;padding-top:12px;border-top:1px solid var(--c-line);font-size:13.5px;color:var(--c-ink-2)}
.pk-fit{display:inline-flex;align-items:center;padding:3px 9px;border:1px solid var(--c-line-2);border-radius:var(--r-ctl);background:var(--c-surface-2);font-size:12.5px;font-weight:600;color:var(--c-ink);white-space:nowrap}
.pk-fit--demo{border-color:color-mix(in srgb,var(--c-up) 45%,transparent);background:color-mix(in srgb,var(--c-up) 10%,transparent);color:var(--c-up)}

/* ---------- Devices and images; what each plan runs ---------- */
.pk-table{border-color:var(--c-line);border-radius:var(--r-card);box-shadow:var(--shadow-card)}
.pk-table .table th[scope=row]{font-weight:600;min-width:10em}
.pk-table .table td{color:var(--c-ink-2)}
.pk-table .table td code{font-size:13px;white-space:normal;overflow-wrap:anywhere}
.pk-table tr.is-off th,.pk-table tr.is-off td{color:var(--c-ink-3)}
.pk-table__more{margin-top:var(--s-4);font-size:15px}

/* ---------- How to open them ---------- */
.pk-open{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s-8);align-items:center}
.pk-open__text{display:grid;gap:var(--s-5)}
.pk-open .sequence code{white-space:normal;overflow-wrap:anywhere}
.pk-open .note{max-width:36em}

/* ---------- Hub: a card per course ---------- */
.pk-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:var(--s-5);margin:0;padding:0;list-style:none}
.pk-card{position:relative;display:grid;align-content:start;gap:var(--s-3);min-width:0;padding:clamp(22px,2.4vw,28px);border:1px solid var(--c-line);border-radius:var(--r-card);background:var(--c-surface);box-shadow:var(--shadow-card);overflow:hidden;transition:border-color .14s}
.pk-card__title{font-size:21px;line-height:1.25;font-weight:600;letter-spacing:-.012em}
.pk-card__link{color:var(--c-ink);text-decoration:none}
/* The whole card takes the click; the focus ring stays on the title link. */
.pk-card__link::after{content:'';position:absolute;inset:0}
.pk-card:hover{border-color:var(--c-line-3)}
.pk-card:hover .pk-card__link{color:var(--c-signal)}
.pk-card__link:focus-visible{outline:2px solid var(--c-focus);outline-offset:3px;border-radius:4px}
.pk-card__exam{font-size:15px;font-weight:560;color:var(--c-ink-2)}
.pk-card__topic{font-size:15px;line-height:1.55;color:var(--c-ink-3)}
.pk-card__facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3);margin:var(--s-2) 0 0;padding-top:var(--s-4);border-top:1px solid var(--c-line)}
.pk-card__facts dt{font-size:13px;color:var(--c-ink-3)}
.pk-card__facts dd{margin:2px 0 0;font-weight:600;color:var(--c-ink)}

/* ---------- The demo, as a crisp left-aligned card ---------- */
.pk-cta-band{padding:var(--s-9) 0}
.pk-cta{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s-3) var(--s-8);padding:clamp(28px,3.6vw,44px);border:1px solid var(--c-line);border-radius:var(--r-card);background:var(--c-surface);box-shadow:var(--shadow-card);overflow:hidden}
.pk-cta>*{grid-column:1}
.pk-cta .t-lede{max-width:36em}
.pk-cta__actions{grid-column:2;grid-row:1/span 3;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--s-3)}
.pk-cta__meta{font-size:15px;color:var(--c-ink-3)}

/* ---------- Questions, the way on ---------- */
.pk-faq .t-h2{margin-bottom:var(--s-6)}
.pk-faq__list,.pk-faq .t-h2{max-width:880px}
.pk-faq .disclosure__body code{white-space:normal;overflow-wrap:anywhere}
.pk-indep{margin-top:var(--s-7);max-width:60em;font-size:13.5px;line-height:1.55;color:var(--c-ink-3)}
.pk-end .t-h3{margin-bottom:var(--s-4)}
.pk-end__links{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-6);margin:0;padding:0;list-style:none}
.pk-end .pk-indep{margin-top:var(--s-6)}

/* ---------- Responsive ---------- */
@media (max-width:1023px){
 .pk-head--media .pk-head__grid,.pk-intro,.pk-open{grid-template-columns:1fr;gap:var(--s-6)}
 .pk-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
 .pk-cta{grid-template-columns:1fr}
 .pk-cta__actions{grid-column:1;grid-row:auto;justify-content:flex-start;margin-top:var(--s-2)}
}
@media (max-width:760px){
 /* Tables stack: a card per row, each value under its label. */
 .pk-table{border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
 .pk-table table,.pk-table tbody,.pk-table tr,.pk-table th,.pk-table td{display:block}
 .pk-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
 .pk-table tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;margin-bottom:var(--s-3);padding:var(--s-4);border:1px solid var(--c-line);border-radius:var(--r-card);background:var(--c-surface);box-shadow:var(--shadow-card)}
 .pk-table .table th[scope=row]{grid-column:1/-1;padding:0;border:0;min-width:0}
 .pk-table .table td,.pk-table .table td.n{padding:0;border:0;text-align:left;white-space:normal}
 .pk-table td[data-label=Image],.pk-table td[data-label="Set to"],.pk-table td[data-label=Price],.pk-table td[data-label="Every lab in"]{grid-column:1/-1}
 .pk-table td::before{content:attr(data-label);display:block;margin-bottom:2px;font-size:12.5px;color:var(--c-ink-3)}
 .pk-table tr:last-child{margin-bottom:0}
}
@media (max-width:520px){
 .pk-head__actions .btn,.pk-cta__actions .btn{flex:1 1 100%}
 .pk-facts{grid-template-columns:1fr}
 .pk-lab{padding:16px}
 .pk-set__title{font-size:20px}
}
@media (forced-colors:active){
 .pk-tag__dot{forced-color-adjust:none;background:CanvasText}
 .pk-card,.pk-lab,.pk-plan,.pk-cta,.pk-facts,.pk-table tr{border:1px solid CanvasText}
}