/* EVE-NG image catalogue: /images/ and /images/<product>/ (lane C; v3, 29 Oct 2026: research/v2/DESIGN-v3.md).
   The pages are generated by site/catalogue/gen.mjs. The real names are the picture: exact Add Node names set in mono,
   newest first, with a lit port LED (status only) beside the ones the node tips record.
   Two themes, so colour comes only from the tokens in patch.css (never a hard-coded light colour or light-only
   shadow). Crisp cards (--r-card, --c-line, --shadow-card) with the hosted EVE-NG colour on the edge where a card
   belongs to the product; normal-width type; mono tags for technical labels such as template names. */

.pg-images{--k:var(--k-blue)}
.nw{white-space:nowrap}

/* ---------- Mono tags for technical labels (the .card__tag pattern) ---------- */
.cat-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)}
.cat-tag__dot{flex:none;width:8px;height:8px;border-radius:2px;background:var(--k)}

/* ---------- Page head ---------- */
.cat-head{padding:clamp(36px,5vw,72px) 0 clamp(48px,5.5vw,80px)}
.cat-head .crumbs{margin-bottom:var(--s-5)}
.cat-head .t-title{max-width:16em}
.cat-head .t-lede{margin-top:var(--s-5);max-width:40em}
.cat-head__actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-6)}
/* Where it is, as a spec strip: one crisp card, hairline cells (the gap shows the line colour behind them). */
.cat-spec{margin-top:clamp(36px,4.5vw,56px)}
.cat-spec__facts{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,2fr) minmax(0,3fr) minmax(0,5fr);gap:1px;margin:0;border:1px solid var(--c-line);border-radius:var(--r-card);background:var(--c-line);box-shadow:var(--shadow-card);overflow:hidden}
.cat-spec__facts>div{display:flex;flex-direction:column;gap:5px;min-width:0;padding:18px 22px;background:var(--c-surface)}
.cat-spec__facts dt{font-size:13.5px;color:var(--c-ink-3)}
.cat-spec__facts dd{margin:0;font-size:16.5px;font-weight:600;color:var(--c-ink);overflow-wrap:anywhere}
.cat-spec__facts dd code{padding:0;background:none;font-size:14.5px;font-weight:550;white-space:normal;overflow-wrap:anywhere}

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

/* ---------- Installed versions: a card per template ---------- */
.cat-legend{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-5);margin:calc(var(--s-3) * -1) 0 var(--s-6);font-size:14px;color:var(--c-ink-3)}
.cat-legend__item{display:inline-flex;align-items:center;gap:8px;color:var(--c-ink-2);font-weight:560}
/* Port LEDs: status only. In dark they glow (--k-glow is 1 there, 0 in light). */
.cat-led{flex:none;display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--c-line-3)}
.is-ok>.cat-led{background:var(--c-led);box-shadow:0 0 0 3px var(--c-led-glow),0 0 calc(8px * var(--k-glow)) var(--c-led)}
.is-bad>.cat-led{background:var(--c-down);box-shadow:0 0 0 3px color-mix(in srgb,var(--c-down) 24%,transparent),0 0 calc(8px * var(--k-glow)) var(--c-down)}
.vers-grid{display:grid;gap:var(--s-5)}
.vers{display:grid;gap:var(--s-4);min-width:0;padding:clamp(20px,2.4vw,28px) clamp(20px,2.6vw,32px);border:1px solid var(--c-line);border-radius:var(--r-card);background:var(--c-surface);box-shadow:var(--shadow-card)}
.vers__head{display:grid;gap:6px}
.vers__title{font-size:20px;line-height:1.3;font-weight:600;letter-spacing:-.012em}
.vers__meta{font-size:14.5px;color:var(--c-ink-3)}
.vers__meta--sub{margin-top:var(--s-2)}
/* The names: real Add Node strings, mono, in as many columns as fit; each wraps rather than overflow. */
.vers__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:0 var(--s-6);list-style:none;border-top:1px solid var(--c-line)}
.vers__list li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-width:0;padding:11px 0;border-bottom:1px solid var(--c-line)}
.vers__list code{padding:0;background:none;font-size:13.5px;line-height:1.45;color:var(--c-ink);white-space:normal;overflow-wrap:anywhere;min-width:0}
.vers__list li.is-ok,.vers__list li.is-bad{font-weight:520}
.vers__flag{font-size:12.5px;font-weight:600;text-decoration:none;white-space:nowrap}
.is-ok>.vers__flag{color:var(--c-up)}
.is-bad>.vers__flag{color:var(--c-down)}
.vers__flag:hover{text-decoration:underline;text-underline-offset:.2em}
.vers__more>summary{display:inline-flex;align-items:center;gap:8px;min-height:40px;margin-top:var(--s-3);padding:0 14px;border:1px solid var(--c-line-2);border-radius:var(--r-ctl);background:var(--c-surface-2);font-weight:600;font-size:14.5px;color:var(--c-ink);cursor:pointer;list-style:none}
.vers__more>summary::-webkit-details-marker{display:none}
.vers__more>summary::after{content:'';width:9px;height:9px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .16s var(--ease)}
.vers__more[open]>summary::after{transform:translateY(2px) rotate(225deg)}
.vers__more>summary:hover{border-color:var(--c-line-3)}
.vers__more[open]>summary{margin-bottom:var(--s-2)}

/* ---------- Add Node defaults ---------- */
.cat-table{border-color:var(--c-line);border-radius:var(--r-card);box-shadow:var(--shadow-card)}
.cat-table .table td code{font-size:13px}
.cat-table .table th[scope=row]{font-weight:600;min-width:9em}
.cat-table .table td{color:var(--c-ink-2)}
.cat-notes{display:grid;gap:var(--s-3);margin-top:var(--s-5);max-width:52em}
.cat-notes .note code{white-space:normal}
.cat-notes__more{display:flex;flex-wrap:wrap;gap:6px 10px;font-size:15px;color:var(--c-ink-3)}

/* ---------- What you can build: the lab as a product card ---------- */
.cat-build{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--s-8);align-items:start}
.cat-build__text{display:grid;gap:var(--s-4)}
.cat-build__text .t-lede{max-width:34em}
.cat-build__text .cat-notes{margin-top:var(--s-2)}
.cat-lab{position:relative;display:grid;gap:var(--s-5);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}
.cat-lab::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--k)}
.cat-lab__nodes{display:grid;list-style:none;border-top:1px solid var(--c-line)}
.cat-lab__nodes li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;gap:4px 12px;padding:12px 0;border-bottom:1px solid var(--c-line)}
.cat-lab__n{font-weight:600;font-size:18px;color:var(--c-signal)}
.cat-lab__what{font-weight:560;min-width:0}
.cat-lab__what code{margin-left:4px;font-size:12.5px}
.cat-lab__res{font:500 13px/1.4 var(--f-mono);color:var(--c-ink-3);white-space:nowrap}
.cat-lab__sum{font-size:16px;line-height:1.6;color:var(--c-ink-2)}
.cat-lab__sum strong{color:var(--c-ink);font-weight:600}
.cat-lab__go{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-4)}

/* ---------- Licences, questions, the way on ---------- */
.cat-licence{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-5) var(--s-8);align-items:start}
.cat-licence .prose{font-size:17px;color:var(--c-ink-2)}
.cat-faq .t-h2{margin-bottom:var(--s-6)}
.cat-faq__list,.cat-faq .t-h2{max-width:880px}
.cat-faq .disclosure__body code{white-space:normal;overflow-wrap:anywhere}
.cat-faq .disclosure__body .t-meta{margin-top:var(--s-2)}
.cat-indep{margin-top:var(--s-7);max-width:60em;font-size:13.5px;color:var(--c-ink-3)}
.cat-end .t-h3{margin-bottom:var(--s-4)}
.cat-end__links{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-6);list-style:none}
.cat-end .cat-indep{margin-top:var(--s-6)}
/* Link-coloured text uses the signal token: the same blue as the button in light, a lighter one on dark. */
.pg-images .link--more{color:var(--c-signal)}

/* ---------- Hub head: the words, then the search in a card ---------- */
.cat-head--hub{padding-bottom:clamp(56px,6.5vw,96px)}
.cat-hub{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-8);align-items:start}
.cat-hub__text{display:grid;padding-top:var(--s-2)}
.cat-hub__meta{margin-top:var(--s-5);font-size:15.5px;color:var(--c-ink-3)}
.cat-hub__meta .link{margin-left:4px}
.cat-hub__find .finder{padding:var(--s-6)}
.cat-hub__find .finder__big strong{font-stretch:100%;font-weight:600;letter-spacing:-.012em}
.cat-hub__find .finder__groups{max-height:440px}

/* ---------- Directory: a card per group, a hairline per product ---------- */
.dir__jump{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);margin-bottom:var(--s-7);font-size:15px}
.dir__jump a{color:var(--c-ink-2);font-weight:560;text-decoration:underline;text-decoration-color:var(--c-line-3);text-underline-offset:.24em}
.dir__jump a:hover{color:var(--c-ink);text-decoration-color:currentColor}
.dir__tools{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:var(--s-4) var(--s-5);margin-bottom:var(--s-7)}
.dir__cats{max-width:100%}
.dir__cats label{height:36px;padding:0 13px;font-size:14px}
.dir__vendor-field{display:grid;gap:6px;min-width:220px}
.dir__vendor-field label{font-size:14px;font-weight:600}
.dir__vendor-field .select{height:44px;cursor:pointer}
.dir__status{grid-column:1/-1;margin-top:calc(var(--s-2) * -1)}
.dir{display:grid;gap:var(--s-7)}
.dir__head{display:flex;align-items:baseline;gap:12px;margin-bottom:var(--s-3);font-size:20px;line-height:1.3;font-weight:600;letter-spacing:-.012em}
.dir__head span{font:500 14px/1 var(--f-mono);color:var(--c-ink-3)}
.dir__list{list-style:none;border:1px solid var(--c-line);border-radius:var(--r-card);background:var(--c-surface);box-shadow:var(--shadow-card);overflow:hidden}
.dir__row{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr);align-items:center;gap:6px var(--s-5);padding:14px 20px;border-top:1px solid var(--c-line);transition:background-color .14s}
.dir__row:first-child{border-top:0}
.dir__main{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;min-width:0}
.dir__name{font-size:16.5px;font-weight:600;color:var(--c-ink);text-decoration:none}
.dir__vendor{font-size:14px;color:var(--c-ink-3)}
.dir__codes{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.dir__codes code{font-size:12.5px;white-space:normal;overflow-wrap:anywhere}
.dir__end{display:flex;align-items:center;justify-content:flex-end;gap:var(--s-3)}
.dir__count{font:500 13.5px/1 var(--f-mono);color:var(--c-ink-3);white-space:nowrap}
.dir__go{display:inline-flex;color:var(--c-signal)}
.dir__find{position:relative;z-index:1;flex:none;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border:0;border-radius:var(--r-ctl);background:transparent;color:var(--c-signal);font:600 13.5px/1 var(--f-sans);cursor:pointer}
.dir__find:hover{background:var(--c-signal-wash)}
.dir__find .i{width:14px;height:14px}
/* A product with a page is one link: the whole row takes the click; the focus ring stays on the name itself. */
.has-page .dir__name::after{content:'';position:absolute;inset:0}
.has-page:hover{background:var(--c-surface-2)}
.has-page:hover .dir__name{color:var(--c-signal)}
.has-page .dir__name:focus-visible{outline:2px solid var(--c-focus);outline-offset:3px;border-radius:4px}
.dir__empty{padding:var(--s-6) 0;color:var(--c-ink-2)}

/* ---------- From the list to a running node ---------- */
.cat-how{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-8);align-items:center}
.cat-how__text{display:grid;gap:var(--s-6)}
.cat-how__text .sequence code{white-space:normal}
.cat-how__shot .fig-cap{padding:0 var(--s-4) var(--s-4)}
.cat-how__shot.footage .fig-cap{padding:0}

/* ---------- The demo: a crisp, left-aligned card (not a tinted panel) ---------- */
.pg-images .cta{padding:var(--s-10) 0 0}
.cta__panel.cat-cta{position:relative;grid-template-columns:minmax(0,1fr) auto;justify-items:start;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);text-align:left;overflow:hidden}
.cat-cta::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--k)}
.cat-cta>*{grid-column:1}
.cat-cta .t-lede{max-width:36em}
.cat-cta__actions{grid-column:2;grid-row:1/span 3;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--s-3)}
.cat-cta__meta{font-size:15px;color:var(--c-ink-3)}

/* ---------- Below the fold skips work while far off screen ---------- */
.pg-images main>section:not(:first-child){content-visibility:auto;contain-intrinsic-size:auto 900px}
@media print{.pg-images main>section{content-visibility:visible}}

/* ---------- Responsive ---------- */
@media (max-width:1023px){
 .cat-build,.cat-licence,.cat-hub,.cat-how{grid-template-columns:1fr}
 .cat-build,.cat-hub,.cat-how{gap:var(--s-6)}
 .cat-spec__facts{grid-template-columns:repeat(2,minmax(0,1fr))}
 .cat-licence{gap:var(--s-4)}
 .dir__tools{grid-template-columns:1fr}
 .dir__vendor-field{max-width:360px}
 .cta__panel.cat-cta{grid-template-columns:1fr}
 .cat-cta__actions{grid-column:1;grid-row:auto;justify-content:flex-start;margin-top:var(--s-2)}
}
@media (max-width:760px){
 .dir__row{grid-template-columns:minmax(0,1fr);gap:8px;padding:14px 16px}
 .dir__end{justify-content:flex-start;gap:var(--s-2)}
 .dir__find{margin-left:auto}
 /* The defaults table stacks: a card per template, each value under its label. */
 .cat-table{border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
 .cat-table table,.cat-table tbody,.cat-table tr,.cat-table th,.cat-table td{display:block}
 .cat-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
 .cat-table tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 14px;padding:var(--s-4);margin-bottom:var(--s-3);border:1px solid var(--c-line);border-radius:var(--r-card);background:var(--c-surface);box-shadow:var(--shadow-card)}
 .cat-table th[scope=row]{grid-column:1/-1;padding:0;border:0;min-width:0}
 .cat-table td,.cat-table td.n{padding:0;border:0;text-align:left}
 .cat-table td[data-label=Interfaces]{grid-column:1/-1}
 .cat-table td::before{content:attr(data-label);display:block;margin-bottom:2px;font-size:12.5px;color:var(--c-ink-3)}
 .cat-table tr:last-child{margin-bottom:0}
}
@media (max-width:520px){
 .cat-head__actions .btn{flex:1 1 100%}
 .cat-spec__facts{grid-template-columns:1fr}
 .cat-lab__nodes li{grid-template-columns:auto minmax(0,1fr)}
 .cat-lab__res{grid-column:2;white-space:normal}
 .cat-cta__actions .btn{flex:1 1 100%}
 .cat-hub__find .finder{padding:var(--s-4)}
 .dir__cats{display:flex}
 .dir__cats label{flex:1 1 auto;justify-content:center}
 .dir__vendor-field{min-width:0;max-width:none}
 .vers__list{grid-template-columns:1fr}
}
@media (max-width:380px){
 .cat-table tr{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (forced-colors:active){
 .cat-led,.cat-tag__dot{forced-color-adjust:none;background:CanvasText}
 .is-ok>.cat-led,.is-bad>.cat-led{background:Highlight}
 .cat-lab,.vers,.cat-spec__facts,.dir__list,.cta__panel.cat-cta,.vers__more>summary,.dir__find,.cat-table tr{border:1px solid CanvasText}
}