/* dev.css — the AxForge developer hub (the forum, the docs, the catalogue, For AI).
 *
 * Loaded AFTER site.css, on the developer-hub host only (community-web renders it).
 * It adds what a forum and a documentation site need and changes nothing the
 * marketing pages use: the header, the buttons, the chips, the code blocks and the
 * .docs__body prose are site.css's, untouched, so the logo and the two header
 * buttons sit exactly where they sit on axforge.ai.
 *
 * jose 2026-09-18: "it can look more like a forum … a centered design so not full
 * width … a typical left menu in there, with help and tutorials and all."
 */

/* ---------------------------------------------------------------- the frame -- */
/* Centered, narrower than the marketing grid: a reading column with a menu beside
   it, the shape every forum and every docs site has. */
.dev {
  max-width: 74rem; margin-inline: auto; padding-inline: var(--gut);
  padding-block: var(--s5) var(--s7);
  display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: var(--s4);
}
.dev--wide { max-width: 80rem; }
.dev--solo { grid-template-columns: minmax(0, 1fr); max-width: 56rem; }
@media (max-width: 960px) {
  .dev, .dev--wide { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
}

/* ------------------------------------------------------------- the left menu -- */
.side { position: sticky; top: 5.5rem; align-self: start; min-width: 0; }
.side .lab { display: block; margin: var(--s4) 0 var(--s2); }
.side .lab:first-child { margin-top: 0; }
.side a {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  color: var(--dim); font-size: var(--t-1); line-height: 1.35;
  padding: .36rem .6rem; border-radius: var(--r-in);
}
.side a:hover { color: var(--strong); background: var(--wash); text-decoration: none; }
.side a.is-active { color: var(--blue-300); background: var(--wash); font-weight: 650; }
.side a .n {
  font-family: var(--mono); font-size: var(--t-2); color: var(--dim);
  border: 1px solid var(--hair); border-radius: 999px; padding: 0 .4rem;
}
.side__foot { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--hair);
  font-size: var(--t-2); color: var(--dim); }
.side__foot a { display: inline; padding: 0; color: var(--blue-300); }
/* the menu collapses to one button on a phone — declared BEFORE the query that shows
   it, or the later rule would hide it at every width */
.side__burger { display: none; }
@media (max-width: 960px) {
  .side { position: static; border: 1px solid var(--hair); border-radius: var(--r);
    background: var(--sur); padding: var(--s3) var(--s4); }
  .side__list { display: none; }
  .side.is-open .side__list { display: block; margin-top: var(--s3); }
  .side__burger { display: flex; align-items: center; justify-content: space-between;
    width: 100%; background: none; border: 0; color: var(--strong); font: inherit;
    font-weight: 650; padding: .2rem 0; cursor: pointer; }
}

/* ------------------------------------------------------- the account dropdown -- */
/* The header keeps the marketing markup: brand left, nav centred, .hact right.
   Signed out it is Sign in + Get started, exactly as on axforge.ai. Signed in the
   pair becomes one control: the name, an avatar, and this menu under it. */
.acct { position: relative; }
.acct__btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .3rem .7rem .3rem .35rem; border: 1px solid var(--hair-2); border-radius: 999px;
  background: transparent; color: var(--strong); font: inherit; font-size: var(--t-1);
  font-weight: 650; cursor: pointer; line-height: 1;
}
.acct__btn:hover { border-color: var(--blue-500); background: var(--wash); }
.acct__av {
  width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--blue-500); color: #04101f; font-size: .68rem; font-weight: 700;
  letter-spacing: .02em; flex: none;
}
.acct__caret { width: .7rem; height: .7rem; color: var(--dim); flex: none; }
.acct[data-open="1"] .acct__caret { transform: rotate(180deg); }
.acct__menu {
  position: absolute; right: 0; top: calc(100% + .55rem); min-width: 13rem; z-index: 60;
  background: #060c19; border: 1px solid var(--hair-2); border-radius: var(--r);
  box-shadow: 0 18px 50px rgba(1, 5, 15, .7); padding: .35rem;
}
.acct__menu[hidden] { display: none; }
.acct__who { padding: .5rem .65rem .55rem; border-bottom: 1px solid var(--hair); margin-bottom: .35rem; }
.acct__who b { display: block; color: var(--strong); font-size: var(--t-1); }
.acct__who span { display: block; color: var(--dim); font-size: var(--t-2); font-family: var(--mono); }
.acct__menu a {
  display: flex; align-items: center; gap: .55rem; padding: .5rem .65rem;
  border-radius: var(--r-in); color: var(--text); font-size: var(--t-1);
}
.acct__menu a:hover { background: var(--wash); color: var(--strong); text-decoration: none; }
.acct__menu a svg { width: 1rem; height: 1rem; color: var(--dim); flex: none; }
.acct__menu a:hover svg { color: var(--blue-300); }
.acct__sep { height: 1px; background: var(--hair); margin: .35rem 0; }
.acct__out { color: var(--amber-400); }
.acct__out svg { color: var(--amber-400); }

/* ------------------------------------------------------------------ the forum -- */
.ftop { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: var(--s4); margin-bottom: var(--s4); }
.ftop h1 { font-size: clamp(var(--t2), 1rem + 1.8vw, var(--t4)); }
.ftop .lead { max-width: 52ch; margin-top: var(--s2); font-size: var(--t0); }

.topics { border: 1px solid var(--hair); border-radius: var(--r); background: var(--sur); overflow: hidden; }
.topics__h {
  display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem 8rem; gap: var(--s3);
  padding: .6rem var(--s4); background: rgba(46, 155, 255, .04);
  border-bottom: 1px solid var(--hair);
  font-family: var(--mono); font-size: var(--t-2); text-transform: uppercase;
  letter-spacing: var(--caps); color: var(--dim); font-weight: 600;
}
.topics__h span:nth-child(2), .topics__h span:nth-child(3) { text-align: right; }
.topic {
  display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem 8rem; gap: var(--s3);
  align-items: center; padding: .75rem var(--s4); border-top: 1px solid var(--hair);
}
.topic:first-of-type { border-top: 0; }
.topic:hover { background: var(--wash); }
.topic__m { min-width: 0; }
.topic__t { color: var(--strong); font-weight: 650; font-size: var(--t0); letter-spacing: -.01em; }
.topic__t:hover { color: var(--blue-300); text-decoration: none; }
.topic__x { display: block; color: var(--dim); font-size: var(--t-1); margin-top: .12rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topic__n { text-align: right; font-family: var(--mono); font-size: var(--t-1); color: var(--text); }
.topic__n small { display: block; font-size: var(--t-2); color: var(--dim); text-transform: uppercase;
  letter-spacing: var(--caps); }
.topic__w { text-align: right; font-size: var(--t-2); color: var(--dim); font-family: var(--mono); }
.topics--saved .topic { grid-template-columns: minmax(0, 1fr) 8rem; }
.topic--empty { display: block; color: var(--dim); padding: var(--s5) var(--s4); text-align: center; }
@media (max-width: 640px) {
  .topics__h { display: none; }
  .topic { grid-template-columns: minmax(0, 1fr) auto; }
  .topic__w { display: none; }
}

/* the one category tag: a dot + the word, per area */
.cat {
  display: inline-flex; align-items: center; gap: .35rem; margin-right: .5rem;
  font-family: var(--mono); font-size: var(--t-2); text-transform: uppercase;
  letter-spacing: var(--caps); font-weight: 600; color: var(--dim); white-space: nowrap;
}
.cat::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; }
.cat--announcements { color: var(--blue-300); }
.cat--models { color: var(--cyan-300); }
.cat--gpus { color: var(--green-400); }
.cat--docs { color: var(--amber-400); }
.cat--console { color: var(--ink-300, #b8c4d6); }

/* a topic page: the opening post, then the replies */
.tpc__head { border-bottom: 1px solid var(--hair); padding-bottom: var(--s4); margin-bottom: var(--s4); }
.tpc__head h1 { font-size: clamp(var(--t2), 1rem + 1.6vw, var(--t4)); margin: .3rem 0 .4rem; }
.tpc__meta { display: flex; flex-wrap: wrap; gap: .4rem var(--s4); align-items: center;
  font-size: var(--t-2); color: var(--dim); font-family: var(--mono);
  text-transform: uppercase; letter-spacing: var(--caps); }
.tpc__meta a { color: var(--dim); }
.tpc__meta a:hover { color: var(--blue-300); }

/* ----------------------------------------------------------------- the posts -- */
.post { border-top: 1px solid var(--hair); padding: var(--s4) 0; display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr); gap: var(--s3); }
.post:first-child { border-top: 0; padding-top: 0; }
.post--reply { margin-left: var(--s5); }
.post__av { width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center;
  background: rgba(46, 155, 255, .14); color: var(--blue-300); border: 1px solid var(--hair-2);
  font-size: .7rem; font-weight: 700; }
.post__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: .55rem; font-size: var(--t-1); color: var(--dim); }
.post__h b { color: var(--strong); font-weight: 650; }
.post__h .badge { font-family: var(--mono); font-size: var(--t-2); text-transform: uppercase;
  letter-spacing: var(--caps); color: var(--cyan-300); border: 1px solid var(--hair-2);
  border-radius: 999px; padding: 0 .4rem; }
.post__b { margin-top: .3rem; color: var(--text); white-space: pre-wrap; word-break: break-word; line-height: 1.55; }
.post__b--md { white-space: normal; }
.post__gone { color: var(--dim); font-style: italic; margin-top: .3rem; }
.post__act { margin-top: .35rem; font-size: var(--t-2); font-family: var(--mono);
  text-transform: uppercase; letter-spacing: var(--caps); }
.post__act a { color: var(--dim); }
.post__act a:hover { color: var(--blue-300); }

/* -------------------------------------------------------------- the composer -- */
.reply { margin-top: var(--s5); border: 1px solid var(--hair); border-radius: var(--r);
  background: var(--sur); padding: var(--s4); }
.reply h2 { font-size: var(--t0); margin-bottom: var(--s3); }
.form { display: grid; gap: var(--s3); }
.form label { font-family: var(--mono); font-size: var(--t-2); text-transform: uppercase;
  letter-spacing: var(--caps); color: var(--dim); }
.form input, .form textarea, .form select {
  width: 100%; background: var(--well); border: 1px solid var(--hair-2); border-radius: var(--r-in);
  color: var(--strong); padding: .65rem .85rem; font: inherit; font-size: var(--t0);
}
.form input:focus, .form textarea:focus { outline: none; border-color: var(--blue-500); }
.form textarea { min-height: 7rem; resize: vertical; font-family: inherit; }
.form textarea.md { min-height: 22rem; font-family: var(--mono); font-size: var(--t-1); }
.form .row { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); align-items: center; }
.form .acts { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.form .two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
@media (max-width: 700px) { .form .two { grid-template-columns: 1fr; } }
.form .err { color: var(--amber-400); }
.signin { border: 1px dashed var(--hair-2); border-radius: var(--r); padding: var(--s4);
  margin-top: var(--s5); display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); align-items: center; }
.signin p { color: var(--dim); font-size: var(--t-1); margin: 0; }

/* ------------------------------------------------------------------- notices -- */
.notice { border: 1px solid var(--hair-2); background: var(--wash); border-radius: var(--r-in);
  padding: var(--s3) var(--s4); margin-bottom: var(--s4); color: var(--text); font-size: var(--t-1); }
.notice--warn { border-color: rgba(230, 174, 66, .45); background: rgba(230, 174, 66, .07); }

/* ------------------------------------------------------------- the catalogue -- */
.tblwrap { overflow-x: auto; }
table.dev-t { width: 100%; border-collapse: collapse; font-size: var(--t-1); }
table.dev-t th {
  font-family: var(--mono); font-size: var(--t-2); text-transform: uppercase;
  letter-spacing: var(--caps); color: var(--dim); font-weight: 600; text-align: left;
  padding: .5rem .6rem; border-bottom: 1px solid var(--hair-2); white-space: nowrap;
}
table.dev-t td { padding: .6rem .6rem; border-bottom: 1px solid var(--hair); vertical-align: top; }
table.dev-t tr:hover td { background: var(--wash); }
table.dev-t td.r, table.dev-t th.r { text-align: right; }
table.dev-t a.t { color: var(--strong); font-weight: 650; }
table.dev-t a.t:hover { color: var(--blue-300); text-decoration: none; }
table.dev-t .x { display: block; color: var(--dim); font-size: var(--t-2); margin-top: .1rem; }
table.dev-t.dev-t--tight td, table.dev-t.dev-t--tight th { padding: .35rem .5rem; }
code, .devblock code, table.dev-t code { font-family: var(--mono); font-size: .92em; color: var(--cyan-300); }
.cnt { display: inline-block; min-width: 1.7rem; text-align: center; border: 1px solid var(--hair-2);
  border-radius: 999px; padding: .05rem .45rem; font-family: var(--mono); font-size: var(--t-2); color: var(--dim); }
.cnt:hover { color: var(--blue-300); border-color: var(--blue-500); text-decoration: none; }
.cnt--on { color: var(--blue-300); border-color: var(--blue-500); }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--s4); }
.card { border: 1px solid var(--hair); border-radius: var(--r); background: var(--sur);
  padding: var(--s4); display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.card:hover { border-color: var(--hair-2); }
.card h3 { font-size: var(--t0); }
.card h3 a { color: var(--strong); }
.card h3 a:hover { color: var(--blue-300); text-decoration: none; }
.card p { color: var(--dim); font-size: var(--t-1); margin: 0; }
.card__row { display: flex; flex-wrap: wrap; gap: .4rem var(--s3); align-items: center;
  font-size: var(--t-2); font-family: var(--mono); color: var(--dim); margin-top: auto; padding-top: .4rem; }
.card__row b { color: var(--text); font-weight: 600; }

.devblock { margin-top: var(--s4); border: 1px solid var(--hair); border-radius: var(--r);
  background: var(--sur); padding: var(--s4); }
.devblock .lab { margin-bottom: var(--s2); }
.devblock p { margin-bottom: var(--s2); font-size: var(--t-1); color: var(--text); }
.devblock p:last-child { margin-bottom: 0; }
.devblock pre.code { margin: var(--s3) 0; white-space: pre; overflow-x: auto; background: var(--well);
  border: 1px solid var(--hair); border-radius: var(--r-in); padding: var(--s3) var(--s4);
  font-family: var(--mono); font-size: var(--t-1); line-height: 1.55; }
dl.spec { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .35rem var(--s4); font-size: var(--t-1); }
.spec dt { font-family: var(--mono); font-size: var(--t-2); text-transform: uppercase;
  letter-spacing: var(--caps); color: var(--dim); }
.spec dd { margin: 0; color: var(--text); }
.tagl { display: inline-flex; flex-wrap: wrap; gap: .3rem; }
.tagl span, .tagl a { border: 1px solid var(--hair-2); border-radius: 999px; padding: .05rem .55rem;
  font-family: var(--mono); font-size: var(--t-2); color: var(--cyan-300); }
.tagl a:hover { border-color: var(--blue-500); text-decoration: none; }

/* --------------------------------------------------------------- the docs UX -- */
/* The page body comes from the site's own docs HTML, so .docs__body (site.css)
   styles it exactly as it is styled on axforge.ai. Here we add the two things a
   documentation UI needs and the marketing page has no room for: a per-page
   "on this page" rail and the page tools. */
.doc { display: grid; grid-template-columns: minmax(0, 1fr) 13rem; gap: var(--s5); }
/* site.css gives .docs__body order:1 for the marketing layout, where the rail is on the
   right of a two-column grid. Inside .doc the rail is a separate element, so without
   these two lines the body is ordered AFTER it and lands in the 13rem column. */
.doc .docs__body { order: 0; }
.doc .onthis { order: 1; }
@media (max-width: 1100px) { .doc { grid-template-columns: minmax(0, 1fr); } }
.doc .docs__body { max-width: 46rem; }
.onthis { position: sticky; top: 5.5rem; align-self: start; border-left: 1px solid var(--hair);
  padding-left: var(--s4); }
.onthis .lab { display: block; margin-bottom: var(--s2); }
.onthis a { display: block; color: var(--dim); font-size: var(--t-2); padding: .22rem 0; line-height: 1.35; }
.onthis a:hover { color: var(--text); text-decoration: none; }
@media (max-width: 1100px) { .onthis { display: none; } }
.doctools { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center;
  margin: var(--s5) 0 0; padding-top: var(--s4); border-top: 1px solid var(--hair);
  font-size: var(--t-2); font-family: var(--mono); text-transform: uppercase; letter-spacing: var(--caps); }
.doctools a { color: var(--dim); display: inline-flex; align-items: center; gap: .3rem; }
.doctools a:hover { color: var(--blue-300); text-decoration: none; }
.crumbs { font-size: var(--t-2); color: var(--dim); font-family: var(--mono);
  text-transform: uppercase; letter-spacing: var(--caps); margin-bottom: var(--s3); }
.crumbs a { color: var(--dim); }
.crumbs a:hover { color: var(--blue-300); }

/* ------------------------------------------------------------------- for AI -- */
.ai-raw { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin-bottom: var(--s4); }
.copy { border: 1px solid var(--hair-2); background: transparent; color: var(--strong);
  border-radius: var(--r-in); padding: .4rem .8rem; font: inherit; font-size: var(--t-1);
  font-weight: 600; cursor: pointer; }
.copy:hover { border-color: var(--blue-500); background: var(--wash); }

/* the cross-link icon (a page of text with an arrow into it) */
.ico-page { width: 1em; height: 1em; vertical-align: -.15em; color: var(--blue-400); flex: none; }
a.ext { display: inline-flex; align-items: center; gap: .35rem; }
a.ext:hover .ico-page { color: var(--cyan-300); }

/* headings and spacing the pages ask for by name, so no page carries a style attribute */
.h-sec { font-size: var(--t1); margin: var(--s6) 0 var(--s3); }
.h-sec--first { margin-top: 0; }
.h-sec .cnt { vertical-align: .15em; }
.read-w { max-width: 60ch; }
.tpc__head--after { margin-top: var(--s6); }
.tpc__head h1.sm { font-size: var(--t1); }
.tagl--after { margin-top: var(--s3); }
.post .tagl { margin-top: var(--s3); }
.post__b.docs__body h2 { font-size: var(--t0); margin: var(--s4) 0 var(--s2); padding-top: 0; border-top: 0; }
.post__b.docs__body h1 { font-size: var(--t1); }
.note { font-size: var(--t-1); color: var(--dim); margin-top: var(--s5); }

/* The docs tables are sized for the marketing column (a 14rem row-header). In the hub's
   narrower reading column the row header takes it and the code in the last cell spills,
   so here the header sizes itself and long ids wrap. */
.doc .docs__body table.spec th { width: auto; }
.doc .docs__body table.spec code,
.doc .docs__body table.spec td { word-break: break-word; }
.doc .docs__body table { table-layout: auto; width: 100%; }

/* ---- lab logos on a thread aside (sprites/labs.png, 128px cells) ---------------
   Generated from sprites.json so the sheet stays the single source of truth. A lab
   with no logo of its own gets a generic mark, picked deterministically in
   catalog.rs::lab_logo so the same lab always looks the same. */
.lab-logo { display:inline-block; width:28px; height:28px; flex:none; border-radius:6px;
  background-image:url('/assets/img/sprites/labs.png'); background-repeat:no-repeat;
  background-size:280px auto; }
.lab-logo--openai { background-position:0.0px 0.0px; }
.lab-logo--anthropic { background-position:-28.0px 0.0px; }
.lab-logo--google-deepmind { background-position:-56.0px 0.0px; }
.lab-logo--meta { background-position:-84.0px 0.0px; }
.lab-logo--xai { background-position:-112.0px 0.0px; }
.lab-logo--mistral { background-position:-140.0px 0.0px; }
.lab-logo--cohere { background-position:-168.0px 0.0px; }
.lab-logo--stability-ai { background-position:-196.0px 0.0px; }
.lab-logo--midjourney { background-position:-224.0px 0.0px; }
.lab-logo--runway { background-position:-252.0px 0.0px; }
.lab-logo--perplexity { background-position:0.0px -28.0px; }
.lab-logo--huggingface { background-position:-28.0px -28.0px; }
.lab-logo--azure { background-position:-56.0px -28.0px; }
.lab-logo--aws { background-position:-84.0px -28.0px; }
.lab-logo--ibm-watson { background-position:-112.0px -28.0px; }
.lab-logo--character-ai { background-position:-140.0px -28.0px; }
.lab-logo--ai21 { background-position:-168.0px -28.0px; }
.lab-logo--elevenlabs { background-position:-196.0px -28.0px; }
.lab-logo--alibaba { background-position:-224.0px -28.0px; }
.lab-logo--nvidia { background-position:-252.0px -28.0px; }
.lab-logo--logo-blue-white-dots { background-position:0.0px -56.0px; }
.lab-logo--deepseek { background-position:-28.0px -56.0px; }
.lab-logo--groq { background-position:-56.0px -56.0px; }
.lab-logo--baidu { background-position:-84.0px -56.0px; }
.lab-logo--logo-pink-waveform { background-position:-112.0px -56.0px; }
.lab-logo--kimi-moonshot { background-position:-140.0px -56.0px; }
.lab-logo--qwen { background-position:-168.0px -56.0px; }
.lab-logo--databricks { background-position:-196.0px -56.0px; }
.lab-logo--snowflake { background-position:-224.0px -56.0px; }
.lab-logo--fireworks-ai { background-position:-252.0px -56.0px; }
.lab-logo--replicate { background-position:0.0px -84.0px; }
.lab-logo--logo-purple-two-spheres { background-position:-28.0px -84.0px; }
.lab-logo--logo-blue-double-hexagon { background-position:-56.0px -84.0px; }
.lab-logo--logo-orange-nested-s { background-position:-84.0px -84.0px; }
.lab-logo--logo-blue-arch { background-position:-112.0px -84.0px; }
.lab-logo--ollama { background-position:-140.0px -84.0px; }
.lab-logo--openai-2 { background-position:-168.0px -84.0px; }
.lab-logo--anthropic-2 { background-position:-196.0px -84.0px; }
.lab-logo--google-deepmind-2 { background-position:-224.0px -84.0px; }
.lab-logo--meta-2 { background-position:-252.0px -84.0px; }
.lab-logo--xai-2 { background-position:0.0px -112.0px; }
.lab-logo--mistral-2 { background-position:-28.0px -112.0px; }
.lab-logo--google { background-position:-56.0px -112.0px; }
.lab-logo--cohere-2 { background-position:-84.0px -112.0px; }
.lab-logo--stability-ai-2 { background-position:-112.0px -112.0px; }
.lab-logo--midjourney-2 { background-position:-140.0px -112.0px; }
.lab-logo--runway-2 { background-position:-168.0px -112.0px; }
.lab-logo--huggingface-2 { background-position:-196.0px -112.0px; }
.lab-logo--microsoft { background-position:-224.0px -112.0px; }
.lab-logo--amazon { background-position:-252.0px -112.0px; }
.lab-logo--aws-2 { background-position:0.0px -140.0px; }
.lab-logo--ibm-watson-2 { background-position:-28.0px -140.0px; }
.lab-logo--perplexity-2 { background-position:-56.0px -140.0px; }
.lab-logo--character-ai-2 { background-position:-84.0px -140.0px; }
.lab-logo--ai21-2 { background-position:-112.0px -140.0px; }
.lab-logo--logo-white-waveform { background-position:-140.0px -140.0px; }
.lab-logo--logo-blue-arch-2 { background-position:-168.0px -140.0px; }
.lab-logo--logo-blue-bubble-share { background-position:-196.0px -140.0px; }
.lab-logo--replicate-2 { background-position:-224.0px -140.0px; }
.lab-logo--together-ai { background-position:-252.0px -140.0px; }
.lab-logo--ollama-2 { background-position:0.0px -168.0px; }
.lab-logo--nvidia-2 { background-position:-28.0px -168.0px; }
.lab-logo--groq-2 { background-position:-56.0px -168.0px; }
.lab-logo--deepseek-2 { background-position:-84.0px -168.0px; }
.lab-logo--databricks-2 { background-position:-112.0px -168.0px; }
.lab-logo--snowflake-2 { background-position:-140.0px -168.0px; }
.lab-logo--logo-blue-hexagon-c { background-position:-168.0px -168.0px; }
.lab-logo--fal { background-position:-196.0px -168.0px; }
.lab-logo--fireworks-ai-2 { background-position:-224.0px -168.0px; }
.lab-logo--logo-white-node-network { background-position:-252.0px -168.0px; }
.lab-logo--langchain { background-position:0.0px -196.0px; }
.lab-logo--kaggle { background-position:-28.0px -196.0px; }

/* ---- a model / GPU thread: the opening comment left, the facts right -----------
   jose 2026-09-21: "the message is at the left and the data and links on the right in
   a small table ... only for the like first phrase. then the rest of the users comments
   can go in under that as a regular post." The aside sits beside the whole reply list
   at desktop width and drops ABOVE it on a phone, where a column of facts you have to
   scroll past to reach the conversation would be the wrong order. */
.tpc__hero { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: var(--s5); align-items: start; }
.tpc__hero-main { min-width: 0; }

.tpc-aside { border: 1px solid var(--hair); border-radius: var(--r); background: var(--well);
  padding: var(--s4); position: sticky; top: var(--s4); }
.tpc-aside__top { display: flex; gap: var(--s3); align-items: center; margin-bottom: var(--s3); }
.tpc-aside__title { margin: 0; font-weight: 600; font-size: .95rem; line-height: 1.25; word-break: break-word; }
.tpc-aside__sub { margin: .1rem 0 0; font-size: .78rem; color: var(--dim); }
.tpc-aside__facts { width: 100%; border-collapse: collapse; font-size: .8rem; }
.tpc-aside__facts th { text-align: left; font-weight: 500; color: var(--dim); padding: .28rem .6rem .28rem 0;
  vertical-align: top; white-space: nowrap; }
.tpc-aside__facts td { padding: .28rem 0; word-break: break-word; }
.tpc-aside__links { list-style: none; margin: var(--s3) 0 0; padding: var(--s3) 0 0;
  border-top: 1px solid var(--hair); display: grid; gap: .35rem; font-size: .82rem; }
.tpc-aside__links a { color: var(--blue-300); }

@media (max-width: 900px) {
  .tpc__hero { grid-template-columns: 1fr; }
  .tpc-aside { position: static; order: -1; }
}

/* ===================================================================
   The forum, 2026-09-21 — boards, votes, answers, people, badges.
   jose: "add all kinds of things forums normally have. this is to be a
   proper thing not a crappy comments page."
   =================================================================== */

/* the topic table gained a Views column */
.topics__h, .topic { grid-template-columns: minmax(0, 1fr) 4.5rem 4.5rem 8rem; }
.topics__h span:nth-child(4) { text-align: right; }
.topic--pin { background: rgba(46, 155, 255, .035); }

/* the boards: what this place is made of, visible on arrival */
.boards { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s4) 0 var(--s3); }
.board {
  display: inline-flex; align-items: baseline; gap: .45rem;
  padding: .4rem .7rem; border: 1px solid var(--hair); border-radius: 999px;
  background: var(--sur); font-size: var(--t-1); color: var(--text);
}
.board:hover { border-color: var(--blue-500); text-decoration: none; }
.board--on { background: var(--blue-900, rgba(46,155,255,.12)); border-color: var(--blue-500); color: var(--strong); }
.board__n { font-weight: 600; }
.board__c { font-family: var(--mono); font-size: var(--t-2); color: var(--dim); }
.board--on .board__c { color: var(--blue-300); }

/* sort + search, one row */
.fbar { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center;
  justify-content: space-between; margin-bottom: var(--s3); }
.tabs--sort { display: inline-flex; gap: .15rem; border: 1px solid var(--hair);
  border-radius: var(--r); padding: .2rem; background: var(--sur); }
.tabs--sort a { padding: .3rem .65rem; border-radius: calc(var(--r) - .2rem);
  font-size: var(--t-1); color: var(--dim); }
.tabs--sort a:hover { color: var(--strong); text-decoration: none; }
.tabs--sort a.is-on { background: var(--wash); color: var(--strong); font-weight: 600; }
.fsearch { display: inline-flex; gap: .35rem; }
.fsearch input[type="search"] { min-width: 12rem; padding: .35rem .6rem;
  border: 1px solid var(--hair); border-radius: var(--r); background: var(--sur); color: var(--text); }

/* state tags: pinned, solved, locked. Distinct from .cat, which is the board. */
.tag { display: inline-block; padding: .05rem .4rem; border-radius: .3rem;
  font-size: var(--t-2); font-family: var(--mono); letter-spacing: var(--caps);
  text-transform: uppercase; border: 1px solid var(--hair); color: var(--dim);
  vertical-align: middle; }
.tag--solved { color: #7ee3a6; border-color: rgba(126, 227, 166, .4); background: rgba(126, 227, 166, .08); }
.tag--pin { color: #ffd479; border-color: rgba(255, 212, 121, .4); background: rgba(255, 212, 121, .08); }
.tag--lock { color: var(--dim); }

/* a topic page: the conversation left, the facts right */
.tpc-head h1 { font-size: clamp(var(--t1), 1rem + 1.2vw, var(--t3)); margin-bottom: .3rem; }
.tpc-meta { color: var(--dim); font-size: var(--t-1); }
.tpc-body { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: var(--s5); margin-top: var(--s4); }
.tpc-main { min-width: 0; }
@media (max-width: 900px) { .tpc-body { grid-template-columns: 1fr; } }

.post { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: var(--s3);
  padding: var(--s3) 0; border-top: 1px solid var(--hair); }
.post--op { border-top: 0; padding-top: var(--s2); }
.post--answer { background: rgba(126, 227, 166, .05); border-left: 2px solid rgba(126, 227, 166, .5);
  padding-left: var(--s3); border-radius: var(--r); }
.post__b { min-width: 0; }
.post__h { color: var(--dim); font-size: var(--t-1); margin-bottom: .3rem; }
.post__empty { color: var(--dim); font-style: italic; }
.post__act { margin-top: .4rem; }

/* votes: the one control that says "this helped" */
.votes { display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.vote { background: none; border: 0; cursor: pointer; color: var(--dim);
  font-size: var(--t0); line-height: 1; padding: .1rem .2rem; border-radius: .25rem; }
.vote:hover { color: var(--blue-300); background: var(--wash); }
.vote--up:hover { color: #7ee3a6; }
.vote__n { font-family: var(--mono); font-size: var(--t-1); color: var(--text); }

.reply { margin-top: var(--s5); display: grid; gap: var(--s2); }
.reply textarea, .compose textarea, .compose input, .compose select {
  width: 100%; padding: .55rem .7rem; border: 1px solid var(--hair);
  border-radius: var(--r); background: var(--sur); color: var(--text);
  font: inherit; }
.reply textarea, .compose textarea { font-family: var(--mono); font-size: var(--t-1); }
.reply button { justify-self: start; }

.compose { display: grid; gap: var(--s2); max-width: 46rem; margin-top: var(--s4); }
.compose .lab { margin-top: var(--s3); }
.compose__ref { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: var(--s2); }
.compose__acts { display: flex; gap: var(--s2); margin-top: var(--s4); }
.hint { color: var(--dim); font-size: var(--t-2); }

.modbox { border: 1px solid var(--hair); border-radius: var(--r); padding: var(--s3);
  background: var(--sur); display: grid; gap: .4rem; margin-top: var(--s3); }

/* people */
.av { display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; border-radius: 50%; margin-right: .4rem;
  font-family: var(--mono); font-size: var(--t-2); font-weight: 700;
  background: var(--wash); color: var(--strong); vertical-align: middle; }
.av--lg { width: 3.2rem; height: 3.2rem; font-size: var(--t1); margin-right: 0; }
.av--bronze { background: rgba(205, 127, 50, .18); color: #e0a066; }
.av--silver { background: rgba(190, 200, 214, .18); color: #cdd6e3; }
.av--gold   { background: rgba(255, 212, 121, .18); color: #ffd479; }
.place { display: inline-block; min-width: 1.6rem; font-family: var(--mono);
  font-size: var(--t-2); color: var(--dim); }
.topic__n--pts { color: var(--strong); font-weight: 650; }

.who { display: flex; align-items: center; gap: var(--s4); margin-bottom: var(--s4); }
.who h1 { font-size: clamp(var(--t1), 1rem + 1vw, var(--t3)); }
.who__r { color: var(--dim); font-size: var(--t-1); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: var(--s2); margin-bottom: var(--s5); }
.stat { border: 1px solid var(--hair); border-radius: var(--r); background: var(--sur);
  padding: var(--s3); text-align: center; }
.stat__n { display: block; font-family: var(--mono); font-size: var(--t2); color: var(--strong); }
.stat__k { display: block; font-size: var(--t-2); color: var(--dim);
  text-transform: uppercase; letter-spacing: var(--caps); }

.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: var(--s2); margin-bottom: var(--s5); }
.badge { display: grid; grid-template-columns: 1.8rem minmax(0, 1fr); gap: .5rem;
  align-items: start; border: 1px solid var(--hair); border-radius: var(--r);
  padding: var(--s3); background: var(--sur); }
.badge i { font-size: var(--t2); grid-row: span 2; }
.badge--bronze i { color: #e0a066; }
.badge--silver i { color: #cdd6e3; }
.badge--gold i { color: #ffd479; }
.badge__n { font-weight: 650; color: var(--strong); font-size: var(--t-1); }
.badge__b { color: var(--dim); font-size: var(--t-2); }

.rules { border: 1px solid var(--hair); border-radius: var(--r); background: var(--sur);
  padding: var(--s4); margin-top: var(--s5); max-width: 34rem; }
.rules__t { width: 100%; margin: var(--s2) 0; }
.rules__t th { text-align: left; font-weight: 400; color: var(--text); padding: .2rem 0; }
.rules__t td { text-align: right; font-family: var(--mono); color: #7ee3a6; }

.lead-strip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3);
  margin-top: var(--s5); padding: var(--s3) var(--s4); border: 1px solid var(--hair);
  border-radius: var(--r); background: var(--sur); }
.lead-strip__l { display: flex; flex-wrap: wrap; gap: var(--s4); list-style: none;
  margin: 0; padding: 0; flex: 1 1 auto; }
.lead-strip__l li { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--t-1); }
.lead-strip__l .pts { font-family: var(--mono); font-size: var(--t-2); color: var(--dim); }
.lead-strip__all { font-size: var(--t-1); white-space: nowrap; }

@media (max-width: 640px) {
  .topics__h, .topic { grid-template-columns: minmax(0, 1fr) auto; }
  .topic__n:nth-of-type(3) { display: none; }
  .compose__ref { grid-template-columns: 1fr; }
}

/* Up to three conversations about this model, on its catalogue page. */
.talk { border: 1px solid var(--hair); border-radius: var(--r); background: var(--sur);
  padding: var(--s4); margin-top: var(--s5); }
.talk__l { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; gap: .55rem; }
.talk__l li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s3);
  align-items: baseline; }
.talk__t { color: var(--strong); font-weight: 600; font-size: var(--t-1); }
.talk__m { font-family: var(--mono); font-size: var(--t-2); color: var(--dim); white-space: nowrap; }
.talk__go { display: inline-block; margin-top: var(--s3); font-size: var(--t-1); }

/* The model / GPU picker on the composer — closed by construction, 2026-09-21.
   jose: "the input should absolutly NOT be open ... and that one has to be required." */
.pick { display: grid; gap: .35rem; position: relative; }
.pick label { display: flex; align-items: baseline; gap: .5rem; }
.pick__req { font-size: var(--t-2); color: #ffd479; font-family: var(--mono);
  text-transform: uppercase; letter-spacing: var(--caps); }
.pick__q { width: 100%; padding: .55rem .7rem; border: 1px solid var(--hair);
  border-radius: var(--r); background: var(--sur); color: var(--text); font: inherit; }
.pick--req .pick__q { border-color: rgba(255, 212, 121, .45); }
.pick--bad .pick__q { border-color: #ff8f8f; box-shadow: 0 0 0 2px rgba(255, 143, 143, .15); }

.pick__list { position: absolute; z-index: 30; top: 100%; left: 0; right: 0;
  margin: .2rem 0 0; padding: .25rem; list-style: none; max-height: 19rem; overflow: auto;
  border: 1px solid var(--hair); border-radius: var(--r); background: var(--sur);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.pick__opt { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .5rem;
  align-items: baseline; padding: .4rem .55rem; border-radius: calc(var(--r) - .2rem);
  cursor: pointer; }
.pick__opt.is-on, .pick__opt:hover { background: var(--wash); }
.pick__optn { color: var(--strong); font-weight: 600; font-size: var(--t-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick__opts { font-family: var(--mono); font-size: var(--t-2); color: var(--dim); }
.pick__ours { font-size: var(--t-2); font-family: var(--mono); color: #7ee3a6;
  border: 1px solid rgba(126, 227, 166, .35); border-radius: .3rem; padding: 0 .3rem; }

.pick__chosen { display: inline-flex; align-items: center; gap: .6rem;
  padding: .45rem .7rem; border: 1px solid rgba(126, 227, 166, .4);
  background: rgba(126, 227, 166, .07); border-radius: var(--r); width: fit-content; }
.pick__name { color: var(--strong); font-weight: 600; font-size: var(--t-1); }
.pick__clear { background: none; border: 0; color: var(--blue-300); cursor: pointer;
  font: inherit; font-size: var(--t-2); text-decoration: underline; padding: 0; }
.pick__miss { margin-top: .1rem; }

/* ===================================================================
   The topic banner, the side cards and the writing toolbar — 2026-09-21,
   from jose's mock-up.
   =================================================================== */

/* (A per-topic banner that zoomed into the model's card image used to be here.
   Those cards are OpenGraph images with the copy baked in, so it showed giant
   fragments of a sentence. Replaced by .cban + .thead — see below.) */

.btn--on { background: rgba(126, 227, 166, .12); border-color: rgba(126, 227, 166, .45);
  color: #7ee3a6; }

.crumbs { font-size: var(--t-2); color: var(--dim); display: flex; flex-wrap: wrap;
  gap: .4rem; align-items: baseline; }
.crumbs em { font-style: normal; color: var(--text); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; max-width: 24rem; }
.crumbs span { opacity: .45; }

/* The right rail's cards. */
.scard { border: 1px solid var(--hair); border-radius: var(--r); background: var(--sur);
  padding: var(--s4); margin-bottom: var(--s3); }
.scard__h { font-family: var(--mono); font-size: var(--t-2); text-transform: uppercase;
  letter-spacing: var(--caps); color: var(--dim); margin-bottom: var(--s2); }
.scard__k { font-size: var(--t-2); color: var(--dim); margin: var(--s3) 0 .3rem; }
.scard__p { color: var(--dim); font-size: var(--t-1); margin-bottom: var(--s3); }
.scard__t { width: 100%; font-size: var(--t-1); }
.scard__t th { text-align: left; font-weight: 400; color: var(--dim); padding: .22rem 0; white-space: nowrap; }
.scard__t td { text-align: right; color: var(--text); font-family: var(--mono); font-size: var(--t-2); }
.guide { list-style: none; margin: 0 0 var(--s3); padding: 0; display: grid; gap: .3rem; }
.guide li { position: relative; padding-left: .95rem; color: var(--dim); font-size: var(--t-2); line-height: 1.4; }
.guide li::before { content: ""; position: absolute; left: .1rem; top: .5em; width: .3rem; height: .3rem;
  border-radius: 50%; background: var(--dim); }
.guide__n { margin: 0; padding-top: var(--s2); border-top: 1px solid var(--hair);
  color: var(--dim); font-size: var(--t-2); line-height: 1.4; }
.pst__tags { margin: -.2rem 0 var(--s3); }
.scard--help { background: linear-gradient(140deg, rgba(46, 155, 255, .08), var(--sur)); }
.chips { display: flex; flex-wrap: wrap; gap: .3rem; }

.rel { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.rel__t { display: block; color: var(--strong); font-weight: 600; font-size: var(--t-1); }
.rel__m { display: block; font-family: var(--mono); font-size: var(--t-2); color: var(--dim); }

/* The writing toolbar. */
.wbar { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center;
  justify-content: space-between; padding: .3rem .4rem;
  border: 1px solid var(--hair); border-bottom: 0;
  border-radius: var(--r) var(--r) 0 0; background: rgba(46, 155, 255, .035); }
.wbar__g { display: flex; flex-wrap: wrap; gap: .1rem; }
.wbar__g button { background: none; border: 0; cursor: pointer; color: var(--dim);
  min-width: 1.9rem; height: 1.8rem; border-radius: .3rem; font: inherit;
  font-size: var(--t-1); line-height: 1; }
.wbar__g button:hover { background: var(--wash); color: var(--strong); }
.wbar__r { display: inline-flex; gap: .1rem; }
.wbar__tab { background: none; border: 0; cursor: pointer; color: var(--dim);
  padding: .25rem .6rem; border-radius: .3rem; font: inherit; font-size: var(--t-2); }
.wbar__tab.is-on { background: var(--wash); color: var(--strong); font-weight: 600; }
.reply .wbar + textarea, .compose .wbar + textarea { border-radius: 0 0 var(--r) var(--r); }
.wprev { border: 1px solid var(--hair); border-top: 0; border-radius: 0 0 var(--r) var(--r);
  background: var(--sur); padding: var(--s3) var(--s4); min-height: 8rem; }
.wprev > :first-child { margin-top: 0; }

@media (max-width: 900px) {
  .tban__in { padding: var(--s4); }
  .tban__art { background-size: 400% auto; }
}

/* ===================================================================
   Header search, the bell, the console card, notifications — 2026-09-21.
   =================================================================== */

.brand__sub { margin-left: .3rem; padding: .05rem .3rem; border-radius: .25rem;
  font-family: var(--mono); font-size: .62em; letter-spacing: var(--caps);
  text-transform: uppercase; color: var(--blue-300);
  background: rgba(46, 155, 255, .14); border: 1px solid rgba(46, 155, 255, .3);
  vertical-align: middle; }

.hsearch { position: relative; display: inline-flex; align-items: center; }
.hsearch svg { position: absolute; left: .6rem; width: .95rem; height: .95rem; color: var(--dim); }
.hsearch input { width: clamp(9rem, 22vw, 17rem); padding: .4rem 3.2rem .4rem 2rem;
  border: 1px solid var(--hair); border-radius: 999px; background: var(--sur);
  color: var(--text); font: inherit; font-size: var(--t-1); }
.hsearch input:focus { border-color: var(--blue-500); outline: none; }
.hsearch kbd { position: absolute; right: .45rem; font-family: var(--mono);
  font-size: var(--t-3, .62rem); color: var(--dim); border: 1px solid var(--hair);
  border-radius: .25rem; padding: .05rem .3rem; pointer-events: none; }
@media (max-width: 860px) { .hsearch kbd { display: none; } .hsearch input { padding-right: .8rem; } }

.bell { position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 50%; color: var(--dim); }
.bell:hover { background: var(--wash); color: var(--strong); }
.bell svg { width: 1.1rem; height: 1.1rem; }
.bell--on { color: var(--blue-300); }
.bell__n { position: absolute; top: -.1rem; right: -.1rem; min-width: 1.05rem; height: 1.05rem;
  padding: 0 .2rem; border-radius: 999px; background: #ff6b6b; color: #fff;
  font-family: var(--mono); font-size: .6rem; line-height: 1.05rem; text-align: center; }

/* The console card at the foot of the left nav. jose: "a bit more dynamic. more
   interesting." A card that says what is on the other side, not a nav link. */
.ccard { display: grid; gap: .35rem; margin-top: var(--s5); padding: var(--s4);
  border: 1px solid rgba(46, 155, 255, .25); border-radius: var(--r);
  background: radial-gradient(120% 120% at 20% 0%, rgba(46, 155, 255, .16), transparent 70%), var(--sur);
  position: relative; overflow: hidden; }
.ccard:hover { border-color: var(--blue-500); text-decoration: none; }
.ccard:hover .ccard__go { color: var(--blue-300); }
.ccard::after { content: ""; position: absolute; inset: -40% -60% auto auto; width: 12rem; height: 12rem;
  border-radius: 50%; background: radial-gradient(circle, rgba(125, 249, 255, .12), transparent 65%);
  transition: transform .6s ease; }
.ccard:hover::after { transform: translate(-1.5rem, 1.5rem); }
.ccard__ico { width: 2.2rem; height: 2.2rem; color: var(--blue-300); }
.ccard__ico svg { width: 100%; height: 100%; }
.ccard__t { color: var(--strong); font-weight: 650; font-size: var(--t-1); line-height: 1.25; }
.ccard__b { color: var(--dim); font-size: var(--t-2); }
.ccard__go { margin-top: .3rem; color: var(--text); font-size: var(--t-2); font-weight: 600; }

/* Notifications. */
.notes { border: 1px solid var(--hair); border-radius: var(--r); background: var(--sur); overflow: hidden; }
/* a.note only: the docs have their own <p class="note"> and this grid squeezed it to
   one word per line (2026-09-22). */
a.note { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--s3);
  align-items: start; padding: .7rem var(--s4); border-top: 1px solid var(--hair); }
a.note:first-of-type { border-top: 0; }
a.note:hover { background: var(--wash); text-decoration: none; }
.note--new { background: rgba(46, 155, 255, .05); }
.note__k { display: inline-flex; align-items: center; justify-content: center;
  width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--wash);
  color: var(--dim); font-family: var(--mono); font-size: var(--t-1); }
.note__k--mention { color: #ffd479; }
.note__k--answer { color: #7ee3a6; }
.note__k--badge { color: #cdd6e3; }
.note__b { min-width: 0; }
.note__t { display: block; color: var(--text); font-size: var(--t-1); }
.note__t b { color: var(--strong); }
.note__w { display: block; color: var(--dim); font-size: var(--t-2); font-family: var(--mono); }

/* ===================================================================
   Second pass on jose's mock-up, 2026-09-21 — the per-topic zoom banner
   is gone (it cropped into OpenGraph images with copy baked in), the
   posts get a header and a footer, and the console card is fixed.
   =================================================================== */

/* The console card was rendering as a horizontal mess because `.side a` sets
   display:flex + space-between and beats a bare `.ccard` on specificity. It needed to
   be `.side a.ccard`, not `.ccard` — my mistake for styling it without looking at the
   rendered page. */
.side a.ccard {
  display: grid; justify-items: start; gap: .3rem; text-align: left;
  margin-top: var(--s5); padding: var(--s4);
  border: 1px solid rgba(46, 155, 255, .25); border-radius: var(--r);
  background: radial-gradient(120% 120% at 20% 0%, rgba(46, 155, 255, .16), transparent 70%), var(--sur);
  position: relative; overflow: hidden; color: var(--text);
}
.side a.ccard:hover { background: radial-gradient(120% 120% at 20% 0%, rgba(46, 155, 255, .24), transparent 70%), var(--sur);
  border-color: var(--blue-500); }
.ccard__ico { width: 2.1rem; height: 2.1rem; color: var(--blue-300); }
.ccard__ico svg { width: 100%; height: 100%; }
.ccard__t { color: var(--strong); font-weight: 650; font-size: var(--t-1); line-height: 1.25; }
.ccard__b { color: var(--dim); font-size: var(--t-2); line-height: 1.35; }
.ccard__go { margin-top: .45rem; padding: .32rem .7rem; border-radius: var(--r-in);
  border: 1px solid rgba(46, 155, 255, .45); background: rgba(46, 155, 255, .1);
  color: var(--blue-300); font-size: var(--t-2); font-weight: 650; width: 100%; text-align: center; }

/* The community banner. CSS art: a horizon and a glow. We have no photograph of a
   planet, and a stock one would belong to somebody else's product. */
.cban { position: relative; overflow: hidden; border: 1px solid var(--hair);
  border-radius: var(--r); margin-bottom: var(--s4); min-height: 6.5rem;
  background: linear-gradient(105deg, #06101f 12%, #0a1a33 55%, #0d2a4d 100%); }
.cban__art { position: absolute; inset: 0; pointer-events: none; }
.cban__globe { position: absolute; right: -6rem; top: -10rem; width: 26rem; height: 26rem;
  border-radius: 50%; background:
    radial-gradient(circle at 34% 34%, rgba(125, 249, 255, .32), transparent 42%),
    radial-gradient(circle at 60% 60%, rgba(46, 155, 255, .35), rgba(4, 10, 22, .95) 72%);
  box-shadow: 0 0 6rem 1rem rgba(46, 155, 255, .22); }
.cban__grid { position: absolute; inset: 0; opacity: .5;
  background-image: radial-gradient(rgba(125, 249, 255, .25) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(100deg, transparent 20%, #000 62%, transparent 98%);
  -webkit-mask-image: linear-gradient(100deg, transparent 20%, #000 62%, transparent 98%); }
.cban__in { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: var(--s4);
  align-items: center; justify-content: space-between; padding: var(--s4) var(--s5); }
.cban__t { font-size: clamp(var(--t1), .9rem + 1vw, var(--t3)); color: #fff; margin: 0; }
.cban__s { color: rgba(226, 238, 255, .72); font-size: var(--t-1); margin: .15rem 0 0; }
.cban__stats { display: flex; gap: var(--s5); margin: 0; }
.cban__stats div { text-align: left; }
.cban__stats dt { color: rgba(226, 238, 255, .6); font-size: var(--t-2);
  text-transform: uppercase; letter-spacing: var(--caps); }
.cban__stats dd { margin: 0; color: #fff; font-weight: 700; font-size: var(--t1); font-family: var(--mono); }
@media (max-width: 720px) { .cban__stats { gap: var(--s4); } .cban__stats dd { font-size: var(--t0); } }

/* The topic's own header row: render, title, actions. */
.thead { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s4);
  align-items: center; padding: var(--s4); margin-bottom: var(--s3);
  border: 1px solid var(--hair); border-radius: var(--r); background: var(--sur); }
.thead__art { width: 6rem; height: auto; border-radius: var(--r-in); background: rgba(255, 255, 255, .02); }
.thead__m { min-width: 0; }
.thead__m h1 { font-size: clamp(var(--t0), .9rem + .7vw, var(--t2)); margin: 0 0 .2rem; }
.thead__s { color: var(--dim); font-size: var(--t-1); }
.thead__a { display: flex; gap: var(--s2); }
@media (max-width: 720px) {
  .thead { grid-template-columns: auto minmax(0, 1fr); }
  .thead__a { grid-column: 1 / -1; }
}

/* ---- a post: header, body, footer ---- */
.pst { border: 1px solid var(--hair); border-radius: var(--r); background: var(--sur);
  margin-bottom: var(--s3); overflow: visible; }
.pst--answer { border-color: rgba(126, 227, 166, .45);
  background: linear-gradient(180deg, rgba(126, 227, 166, .06), var(--sur) 40%); }
.pst--op { border-color: rgba(46, 155, 255, .3); }

.pst__h { display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: .6rem var(--s4); border-bottom: 1px solid var(--hair); }
.pst__who { display: inline-flex; align-items: center; gap: .55rem; color: inherit; min-width: 0; }
.pst__who:hover { text-decoration: none; }
.pst__who:hover .pst__handle { color: var(--blue-300); }
.av--img { border-radius: 50%; object-fit: cover; }
.pst__names { display: grid; line-height: 1.2; min-width: 0; }
.pst__handle { color: var(--strong); font-weight: 650; font-size: var(--t-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pst__title { font-size: var(--t-2); color: var(--dim); }
.pst__title--staff, .pst__title--moderator { color: #7df9ff; }
.pst__title--bot { color: #cdd6e3; }

.pst__when { position: relative; color: var(--dim); font-size: var(--t-2);
  font-family: var(--mono); white-space: nowrap; }
.pst__when--edited { border-bottom: 1px dotted var(--hair); cursor: help; }
.pst__edits { position: absolute; right: 0; top: 1.4rem; z-index: 20; display: none;
  min-width: 13rem; padding: .5rem .6rem; border: 1px solid var(--hair);
  border-radius: var(--r-in); background: #0a1120; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.pst__edits b, .pst__edits span { display: block; font-size: var(--t-2); color: var(--dim); }
.pst__edits b { color: var(--text); margin-bottom: .2rem; }
.pst__when--edited:hover .pst__edits, .pst__when--edited:focus .pst__edits,
.pst__when--edited:focus-within .pst__edits { display: block; }

.pst__b { padding: var(--s4); }
.pst__b > :first-child { margin-top: 0; }
.pst__b > :last-child { margin-bottom: 0; }

.pst__f { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem;
  padding: .45rem var(--s4); border-top: 1px solid var(--hair); }
.pst__vote { display: inline-flex; align-items: center; gap: .1rem; margin-right: .4rem; }
.vbtn { background: none; border: 0; cursor: pointer; color: var(--dim);
  width: 1.7rem; height: 1.7rem; border-radius: .3rem; display: inline-flex;
  align-items: center; justify-content: center; }
.vbtn svg { width: 1rem; height: 1rem; }
.vbtn:hover { background: var(--wash); color: var(--strong); }
.vbtn__n { min-width: 1.1rem; text-align: center; font-family: var(--mono);
  font-size: var(--t-1); color: var(--text); }
.pbtn { display: inline-flex; align-items: center; gap: .32rem; background: none;
  border: 0; cursor: pointer; color: var(--dim); font: inherit; font-size: var(--t-2);
  padding: .3rem .55rem; border-radius: .3rem; }
.pbtn svg { width: .95rem; height: .95rem; }
.pbtn:hover { background: var(--wash); color: var(--strong); }
.pbtn--acc { color: #7ee3a6; }
.pst__acc { margin-left: auto; }

.pmenu { position: relative; margin-left: auto; }
.pst__acc + .pmenu { margin-left: 0; }
.pmenu > summary { list-style: none; cursor: pointer; color: var(--dim);
  padding: .2rem .5rem; border-radius: .3rem; font-size: var(--t0); line-height: 1; }
.pmenu > summary::-webkit-details-marker { display: none; }
.pmenu > summary:hover { background: var(--wash); color: var(--strong); }
.pmenu__m { position: absolute; right: 0; top: 1.9rem; z-index: 25; min-width: 14rem;
  padding: .25rem; border: 1px solid var(--hair); border-radius: var(--r-in);
  background: #0a1120; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); display: grid; }
.pmenu__m button, .pmenu__m a { display: block; width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer; color: var(--text); font: inherit;
  font-size: var(--t-2); padding: .4rem .55rem; border-radius: .25rem; }
.pmenu__m button:hover, .pmenu__m a:hover { background: var(--wash); text-decoration: none; }

/* A reply to a reply sits under it, one step in (2026-09-22). The same steps indent
   the writing box that Reply opens under a post. */
.pst--d1 { margin-left: 1.5rem; }
.pst--d2 { margin-left: 3rem; }
.pst--d3 { margin-left: 4.5rem; }
.pst--in.pst { border-left: 2px solid rgba(46, 155, 255, .35); }
@media (max-width: 720px) {
  .pst--d1 { margin-left: .75rem; } .pst--d2 { margin-left: 1.5rem; } .pst--d3 { margin-left: 2.25rem; }
}
.reply--inline { margin-top: 0; margin-bottom: var(--s3); }
.pst__re { display: inline-flex; align-items: center; gap: .3rem; margin: .5rem var(--s4) 0;
  font-size: var(--t-2); color: var(--dim); }
.pst__re svg { width: .85rem; height: .85rem; }
.pst__re b { color: var(--text); font-weight: 600; }
.pst__save { display: inline; margin: 0; }
.pbtn--on { color: var(--blue-300); }
.pbtn--nod.pbtn--on { color: #7ee3a6; }
.pst__nods { font-size: var(--t-2); color: #7ee3a6; padding: .15rem .5rem; border-radius: 99px;
  background: rgba(126, 227, 166, .08); border: 1px solid rgba(126, 227, 166, .25); }

.reply__f { display: flex; align-items: center; gap: var(--s3); }
.reply__to { color: var(--dim); font-size: var(--t-2); }
.reply__to b { color: var(--strong); }

/* Edit your own post, in place (2026-09-21). The summary sits in the footer row with
   Reply and Share; opened, the form takes the full width underneath. */
.pedit > summary { list-style: none; }
.pedit > summary::-webkit-details-marker { display: none; }
.pedit[open] { flex-basis: 100%; order: 10; }
.pedit[open] > summary { color: var(--strong); }
.pedit__f { display: grid; gap: .45rem; margin-top: .45rem; }
.pedit__f textarea { width: 100%; padding: .55rem .7rem; border: 1px solid var(--hair);
  border-radius: var(--r); background: var(--bg, #050b16); color: var(--text);
  font-family: var(--mono); font-size: var(--t-1); }
.pedit__a { display: flex; align-items: center; gap: var(--s3); }

/* Your forum identity (profile page, 2026-09-21). */
.idgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--s3); align-items: start; }
.idpic { display: flex; align-items: center; gap: var(--s4); }
.idpic__a { display: grid; gap: .4rem; justify-items: start; }
.av--xl { width: 6rem; height: 6rem; font-size: var(--t2); margin-right: 0; }
.idname { display: flex; gap: var(--s2); }
.idname input { flex: 1; min-width: 0; padding: .45rem .65rem; border: 1px solid var(--hair);
  border-radius: var(--r); background: var(--sur); color: var(--text); font: inherit; }
.idacts { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }

/* What you are here, beside your forum name in the header (2026-09-22). */
.acct__role { margin-left: .35rem; padding: .02rem .38rem; border-radius: .3rem; font-size: .66rem;
  font-family: var(--mono); letter-spacing: var(--caps); text-transform: uppercase;
  color: #7df9ff; border: 1px solid rgba(125, 249, 255, .4); background: rgba(125, 249, 255, .08); }
.acct__av--img { border-radius: 50%; object-fit: cover; }

/* Anything marked hidden STAYS hidden. A component that sets its own display (flex,
   grid, inline-flex) otherwise beats the browser's [hidden] rule, which is how the
   picker's empty "Change" chip showed before anything was chosen (2026-09-22). */
[hidden] { display: none !important; }
.pick__clear { text-decoration: none; font-size: var(--t-1); line-height: 1; padding: .1rem .3rem;
  border-radius: .25rem; color: var(--dim); }
.pick__clear:hover { background: var(--wash); color: var(--strong); }
.compose .wbar + textarea { border-radius: 0 0 var(--r) var(--r); margin-top: 0; }

/* The banner says what the page is (2026-09-22): the front page, a board, or a topic. */
.cban__id { min-width: 0; }
.cban__k { margin: 0 0 .15rem; font-family: var(--mono); font-size: var(--t-2);
  letter-spacing: var(--caps); text-transform: uppercase; color: rgba(125, 249, 255, .8); }
h1.cban__t { font-size: clamp(var(--t1), .9rem + 1vw, var(--t3)); color: #fff; margin: 0;
  overflow-wrap: anywhere; }
.cban__s a { color: rgba(226, 238, 255, .82); }
.cban__s a:hover { color: #fff; }
.cban--topic .cban__s { font-family: var(--mono); font-size: var(--t-1); }
.cban__stats dd.cban__d--long { font-size: var(--t-1); padding-top: .25rem; }
.cban--topic .cban__stats { gap: var(--s4); }

/* Follow / Bookmark, at the top of the topic's right column. */
.tacts { display: flex; gap: var(--s2); margin-bottom: var(--s3); }
.tacts form { flex: 1; }
.tacts .btn { width: 100%; justify-content: center; }

/* The index keeps only its action row under the banner. */
.ftop--acts { justify-content: flex-end; margin-bottom: var(--s2); }

/* The topic's title, at the top of its first post (2026-09-22). */
.pst__topic { font-size: clamp(var(--t0), .9rem + .6vw, var(--t2)); color: var(--strong);
  margin: 0 0 var(--s3); line-height: 1.25; overflow-wrap: anywhere; }

/* ---- code blocks in posts (2026-09-22) -------------------------------------------
   Built on the server by highlight.rs: a header with the language the POSTER chose and
   a Copy button, then the code, coloured. Commands (bash, PowerShell) get the terminal
   look. The same classes colour the Preview, which is rendered by the same function. */
.codeb { margin: var(--s3) 0; border: 1px solid var(--hair); border-radius: var(--r-in);
  background: #060b16; overflow: hidden; }
.codeb__h { display: flex; align-items: center; gap: .5rem; padding: .3rem .4rem .3rem .75rem;
  border-bottom: 1px solid var(--hair); background: rgba(46, 155, 255, .05); }
.codeb__l { font-family: var(--mono); font-size: var(--t-2); color: var(--dim);
  text-transform: uppercase; letter-spacing: .06em; }
.codeb__copy { margin-left: auto; background: none; border: 1px solid transparent; cursor: pointer;
  color: var(--dim); font: inherit; font-size: var(--t-2); padding: .15rem .55rem; border-radius: .3rem; }
.codeb__copy:hover { color: var(--strong); background: var(--wash); }
.codeb__copy.is-done { color: #7ee3a6; }
/* One box that scrolls both ways, at most twelve rows tall. A block never widens the
   post or the preview — min-width: 0 all the way up, or a grid child grows to fit the
   longest line (jose's screenshot: the preview ran off to the right). */
.codeb { min-width: 0; max-width: 100%; --code-lh: 1.5; --code-fs: .8rem; }
.pst__b, .wprev, .reply > *, .compose > * { min-width: 0; }
.codeb__b { display: grid; grid-template-columns: auto minmax(0, 1fr); overflow: auto;
  max-height: calc(12 * var(--code-fs) * var(--code-lh) + 1.2rem); }
.codeb pre { margin: 0; padding: .6rem .9rem .6rem .7rem; background: none; border: 0;
  font-family: var(--mono); font-size: var(--code-fs); line-height: var(--code-lh); overflow: visible; }
.codeb pre.codeb__n { position: sticky; left: 0; z-index: 1; padding-right: .6rem !important; padding-left: .7rem !important;
  text-align: right; color: #45536b; background: #060b16; border-right: 1px solid var(--hair);
  user-select: none; }
.codeb--term pre.codeb__n { background: #03060d; }
.codeb code { font-family: inherit; font-size: inherit; line-height: inherit; color: #d6deeb;
  white-space: pre; background: none; padding: 0; }
.codeb__b::-webkit-scrollbar { width: .55rem; height: .55rem; }
.codeb__b::-webkit-scrollbar-thumb { background: #243149; border-radius: .3rem; }
.codeb__b::-webkit-scrollbar-corner { background: transparent; }
.codeb__b { scrollbar-width: thin; scrollbar-color: #243149 transparent; }
.codeb--term { background: #03060d; }
.codeb--term .codeb__h { background: #0b1220; }
.codeb__dots { display: inline-flex; gap: .3rem; margin-right: .2rem; }
.codeb__dots i { width: .55rem; height: .55rem; border-radius: 50%; background: #3a4558; }
.codeb__dots i:nth-child(1) { background: #ff5f57; } .codeb__dots i:nth-child(2) { background: #febc2e; }
.codeb__dots i:nth-child(3) { background: #28c840; }
.tk-k { color: #c792ea; }                 /* keyword: if, while, from, import */
.tk-s { color: #c3e88d; }                 /* string */
.tk-c { color: #697a94; font-style: italic; }  /* comment */
.tk-n { color: #f78c6c; }                 /* number */
.tk-f { color: #82aaff; }                 /* call, command */
.tk-b { color: #ff9cac; }                 /* True, null, self */
.tk-y { color: #ffcb6b; }                 /* a Type */
.tk-a { color: #7df9ff; }                 /* key, attribute */
.tk-v { color: #ffcb6b; }                 /* $variable */
.tk-o { color: #89ddff; }                 /* --option */
.tk-t { color: #f07178; }                 /* <tag> */
.tk-p { color: #697a94; user-select: none; }   /* $ prompt — not copied */

/* The language list under the code-block button. */
.wlang { position: absolute; z-index: 30; width: 14rem; max-height: 18rem; display: flex; flex-direction: column;
  border: 1px solid var(--hair); border-radius: var(--r-in); background: #0a1120;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45); overflow: hidden; }
.wlang input { margin: .35rem; padding: .35rem .5rem; font: inherit; font-size: var(--t-1);
  background: var(--well); color: var(--text); border: 1px solid var(--hair-2); border-radius: .3rem; }
.wlang ul { list-style: none; margin: 0; padding: 0 .25rem .3rem; overflow-y: auto; }
.wlang li button { display: flex; justify-content: space-between; width: 100%; text-align: left; background: none;
  border: 0; cursor: pointer; color: var(--text); font: inherit; font-size: var(--t-1); padding: .35rem .5rem;
  border-radius: .25rem; }
.wlang li button small { color: var(--dim); font-family: var(--mono); font-size: var(--t-2); }
.wlang li button:hover, .wlang li button.is-on { background: var(--wash); }
.wbar { position: relative; }
.wbar__g .wbar__code { font-family: var(--mono); font-size: var(--t-2); width: auto; padding: 0 .5rem;
  border: 1px solid var(--hair-2); color: var(--text); }

/* Tags (2026-09-22): chips in the composer, and small links on topic rows. */
.tagin { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem;
  padding: .3rem .4rem; background: var(--well); border: 1px solid var(--hair-2); border-radius: var(--r-in); }
.tagin input { flex: 1 1 10rem; min-width: 8rem; border: 0 !important; background: none !important;
  padding: .25rem .2rem !important; margin: 0 !important; outline: none; }
.tagin__chips { display: contents; }
.tagin__chip { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .25rem .15rem .55rem;
  border-radius: 99px; background: rgba(46, 155, 255, .12); border: 1px solid rgba(46, 155, 255, .3);
  color: var(--strong); font-family: var(--mono); font-size: var(--t-2); }
.tagin__chip button { background: none; border: 0; cursor: pointer; color: var(--dim); font-size: .7rem;
  padding: 0 .2rem; line-height: 1; }
.tagin__chip button:hover { color: var(--strong); }
.tagin .pick__list { top: 100%; left: 0; right: 0; }
.tagc { font-family: var(--mono); font-size: var(--t-2); color: var(--blue-300); margin-left: .45rem;
  opacity: .85; }
.tagc:hover { opacity: 1; text-decoration: none; }
.pick__soon { font-size: var(--t-2); color: #febc2e; border: 1px solid rgba(254, 188, 46, .35);
  border-radius: 99px; padding: 0 .45rem; margin-left: .4rem; }
.pick__opt--bad { cursor: not-allowed; opacity: .8; }
.pick__opt--bad .pick__opts { color: #ff8a80; }

/* A post's own Markdown: paragraphs apart, lists that look like lists (2026-09-22 — the
   pinned request topics read as one block with bare lines). */
.pst__b p, .wprev p { margin: 0 0 .85em; }
.pst__b ul, .pst__b ol, .wprev ul, .wprev ol { margin: 0 0 .85em; padding-left: 1.4em; }
.pst__b ul, .wprev ul { list-style: disc; }
.pst__b ol, .wprev ol { list-style: decimal; }
.pst__b li, .wprev li { margin: .2em 0; }
.pst__b blockquote, .wprev blockquote { margin: 0 0 .85em; padding: .2em 0 .2em .9em;
  border-left: 3px solid var(--hair-2); color: var(--dim); }

/* A docs page's link into the forum, where its questions live (2026-09-22). */
.docforum { margin-top: var(--s6, 3rem); padding: var(--s4); border: 1px solid var(--hair);
  border-radius: var(--r); background: var(--sur); }
.docforum h2 { font-size: var(--t1, 1.15rem); margin: 0 0 .3rem; }
.docforum p { color: var(--dim); margin: 0 0 var(--s3); }
.docforum .topics { margin-bottom: var(--s3); }

/* Header, signed out: one Sign in, never wrapped, clear of the search (2026-09-22). */
.hact__signin { white-space: nowrap; margin-left: var(--s3); }