/* The model library (/model-library/): two tables, Served today and Ready to serve, one row to a model.
 *
 * A row is a name with a sentence under it, one cell each for parameters, context, size, VRAM and price, and the model id. Each fact is
 * stated once, in its cell; what no cell holds (what the model can do, aliases, build, licence, where to read more) is in a panel the
 * chevron opens. The rows are generated (scripts/model-catalogue.mjs), so this file is the whole of what they look like.
 *
 * THEMES. Nothing here is a colour: every value is one of the site's tokens (--card, --card2, --line, --line2, --txt, --dim, --dim2 and
 * the pillar hues), and every tint is `color-mix(in srgb, <hue> 12%, transparent)`, which composites over whatever is behind it. So day,
 * dusk and night are one definition, and a re-tuned palette moves this page with the rest. test/model-catalogue.test.mjs fails on a
 * literal colour in this file. Colour means something and is used sparingly: the Models blue marks what is served and what is chosen,
 * the Governance amber marks per-tile locking, and everything else is the quiet of the page.
 *
 * LAYOUT. Wide (1200px and up): the table, the id in its own column. Medium (880 to 1199): the same table without the id column; the id
 * sits under the name. Narrow: each row is a card, the figures in a grid with their labels, because a table that scrolls sideways hides
 * the price. The labels are in the markup at every width and hidden from sight where the column heads say the same.
 *
 * With scripts off the page is complete: every row is there with its panel open, and the search box, the tabs, the chips, the chevrons
 * and the copy buttons, which can do nothing without script, stay hidden.
 *
 * The same file draws the row of served-model links on /models/, which carries none of the list itself.
 */
.mlib{padding:30px 0 64px;border-top:none}

/* ---- search, status tabs, chips ----------------------------------------------------------- */
.mtools{display:flex;flex-wrap:wrap;align-items:center;gap:12px 10px}
.msearch{position:relative;flex:1 1 260px;order:1;min-width:0}
.msearch[hidden]{display:none}
.msearch input{
  width:100%;box-sizing:border-box;height:40px;font:inherit;font-size:calc((14.5px) * var(--ts));
  color:var(--txt);background:var(--card);border:1px solid var(--line2);border-radius:10px;padding:0 14px 0 38px;
}
.msearch input::placeholder{color:var(--dim2)}
.msearch input:focus-visible{outline:2px solid var(--p-models);outline-offset:2px}
/* The icons are masks, so they take the text colour of whichever theme is on. */
.msearch::before,.mfilters::before{
  content:"";position:absolute;left:13px;top:50%;width:15px;height:15px;transform:translateY(-50%);background:var(--dim2);pointer-events:none;
  -webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat;
}
.msearch{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M16 16l5 5'/%3E%3C/svg%3E")}
.mfilters{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M3 8h18M3 16h18'/%3E%3Ccircle cx='9' cy='8' r='2.6' fill='black'/%3E%3Ccircle cx='15' cy='16' r='2.6' fill='black'/%3E%3C/svg%3E")}

/* The status tabs: one segmented control, the chosen one raised on the card behind it. The ring keeps it visible in a theme where --card2
   sits close to --card (dusk). A label takes a second line only when the row has no room for it on one (a 320px phone with Larger text),
   so the tabs stay inside the control and the page does not scroll sideways. */
.mtabs{order:2;display:flex;gap:2px;padding:3px;border:1px solid var(--line2);border-radius:10px;background:var(--card);max-width:100%}
.mtabs[hidden]{display:none}
.mtabs button{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:32px;padding:0 13px;border:0;border-radius:7px;
  font:inherit;font-size:calc((13.5px) * var(--ts));text-wrap:balance;color:var(--dim);background:transparent;cursor:pointer;
}
.mtabs button:hover{color:var(--txt)}
.mtabs button[aria-pressed="true"]{background:var(--card2);color:var(--txt);font-weight:550;box-shadow:inset 0 0 0 1px var(--line2)}
.mtabs button:focus-visible{outline:2px solid var(--p-models);outline-offset:1px}
.mc{font-family:var(--mono);font-size:calc((11px) * var(--ts));font-weight:400;color:var(--dim2)}

.mfbar{order:3;flex:1 0 100%;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.mfbar[hidden]{display:none}
.mfbar button[data-tag]{
  height:30px;padding:0 12px;border-radius:999px;font:inherit;font-size:calc((13px) * var(--ts));cursor:pointer;
  color:var(--dim);background:transparent;border:1px solid var(--line2);
}
.mfbar button[data-tag]:hover{color:var(--txt);border-color:var(--line-deep)}
.mfbar button[data-tag][aria-pressed="true"]{
  color:var(--p-models);border-color:color-mix(in srgb,var(--p-models) 50%,transparent);background:color-mix(in srgb,var(--p-models) 12%,transparent);
}
.mfbar button:focus-visible,.mclear:focus-visible{outline:2px solid var(--p-models);outline-offset:2px}
.mclear{height:30px;padding:0 10px;border:0;background:transparent;color:var(--dim);font:inherit;font-size:calc((13px) * var(--ts));cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}
.mclear:hover{color:var(--txt)}
.mclear[hidden]{display:none}

.mfilters{
  display:none;position:relative;order:2;font:inherit;font-size:calc((14px) * var(--ts));color:var(--txt);height:40px;
  background:transparent;border:1px solid var(--line2);border-radius:10px;padding:0 16px 0 38px;cursor:pointer;
}
.mfilters::before{left:13px;background:var(--txt)}
.mfilters[hidden]{display:none}
.mfilters.on{background:var(--hl);color:var(--on-hl);border-color:transparent}
.mfilters.on::before{background:var(--on-hl)}
.mfilters:focus-visible{outline:2px solid var(--p-models);outline-offset:2px}

/* The tabs and the tables say how many there are; this line says it again to a screen reader and to nobody else. */
.mcount{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mcount[hidden]{display:none}

/* ---- the tables ----------------------------------------------------------------------------- */
.mlist{display:flex;flex-direction:column;gap:34px;margin-top:20px}
.mgroup{display:flex;flex-direction:column;gap:12px}
.mgroup[hidden]{display:none}

.mgh{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px}
.mdot{align-self:center;width:8px;height:8px;border-radius:50%;background:var(--dim2)}
.mgroup.served .mdot{background:var(--p-models)}
.mgh h2{margin:0;font-size:calc((17px) * var(--ts));line-height:1.3;font-weight:600;letter-spacing:-.005em}
.mgn{font-family:var(--mono);font-size:calc((12px) * var(--ts));color:var(--dim2)}
.mgnote{margin:0 0 0 auto;font-size:calc((13.5px) * var(--ts));color:var(--dim)}

/* One definition of the columns, used by the heads and by every row, so they cannot disagree. */
.mtable{
  --cols:minmax(190px,2fr) minmax(84px,.8fr) 60px 72px 80px 92px minmax(118px,1fr) minmax(236px,2.2fr) 24px;
  --areas:"name params ctx enc size vram price id tog" "more more more more more more more more more";
  border:1px solid var(--line2);border-radius:14px;background:var(--card);overflow:hidden;
}
.mcols,.mrow{display:grid;grid-template-columns:var(--cols);column-gap:14px;padding-left:18px;padding-right:18px}
.mcols{padding-top:11px;padding-bottom:11px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:calc((10px) * var(--ts));letter-spacing:.08em;text-transform:uppercase;color:var(--dim2)}

.mrow{
  grid-template-areas:var(--areas);align-items:center;row-gap:0;padding-top:16px;padding-bottom:16px;
  border-top:1px solid var(--line);position:relative;
}
.mcols + .mrow{border-top:0}
.mrow[hidden],.mrow[data-nomatch]{display:none}
.mrow:target{background:color-mix(in srgb,var(--p-models) 9%,transparent)}
/* A row script can open is a row you can press anywhere on; one with nothing behind it is not. */
.mrow.mx{cursor:pointer}
.mrow.mx:hover{background:color-mix(in srgb,var(--dim2) 9%,transparent)}
.mrow.mx.open{background:color-mix(in srgb,var(--dim2) 7%,transparent)}

.mname{grid-area:name;min-width:0;display:flex;flex-direction:column;gap:4px}
.mrow h3{margin:0;font-size:calc((14.5px) * var(--ts));line-height:1.3;font-weight:650;letter-spacing:-.005em}
.mrow .mbase{margin:0;color:var(--dim);font-size:calc((12.5px) * var(--ts));min-width:0}

/* The figures. In a table they are cells in the row's own grid; the labels stay in the markup for a screen reader. */
.mcells{display:contents}
.mm{display:flex;flex-direction:column;gap:3px;min-width:0}
.mm[data-k="params"]{grid-area:params}
.mm[data-k="ctx"]{grid-area:ctx}
.mm[data-k="enc"]{grid-area:enc}
.mm[data-k="size"]{grid-area:size}
.mm[data-k="vram"]{grid-area:vram}
.mm[data-k="price"]{grid-area:price}
.mm b{font-weight:500;font-size:calc((13.5px) * var(--ts));font-variant-numeric:tabular-nums;color:var(--txt);overflow-wrap:anywhere}
.mm small{font-size:calc((12px) * var(--ts));color:var(--dim2)}
/* The encoding is a name, as MXFP4 or NVFP4 is: set like the id, in the monospace, so it reads as a token and not as a word. */
.mm[data-k="enc"] b:not(.mnil){font-family:var(--mono);font-size:calc((12.5px) * var(--ts));letter-spacing:.01em}
.mm b.mnil,.mm b.mute{font-weight:400;color:var(--dim2)}
.mm b.mute{color:var(--dim)}
.ml{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* The id is what a request has to spell, so it is drawn as one thing: the id and, on a model that can be called, Copy. */
.mid{
  grid-area:id;display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;min-height:30px;padding:3px 8px 3px 10px;
  border:1px solid var(--line2);border-radius:8px;background:var(--card2);
}
.mid code{font-family:var(--mono);font-size:calc((12px) * var(--ts));color:var(--txt);overflow-wrap:anywhere;min-width:0}
.mid.cp{cursor:pointer}
.mid.cp:hover{border-color:var(--p-models)}

/* The chevron opens the panel. It keeps its word for a screen reader and drops it from the page. */
.mtoggle{
  grid-area:tog;justify-self:end;position:relative;z-index:1;font-size:0;color:var(--dim2);background:none;border:0;
  padding:10px 6px;cursor:pointer;display:inline-flex;align-items:center;border-radius:6px;
}
.mtoggle[hidden]{display:none}
.mtoggle::after{content:"";width:8px;height:8px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:translateY(-3px) rotate(45deg);transition:transform .15s}
.mtoggle[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg)}
.mtoggle:hover{color:var(--txt)}
.mtoggle:focus-visible{outline:2px solid var(--p-models);outline-offset:3px}

/* The panel the chevron opens: only what no cell holds. */
.mmore{grid-area:more;margin-top:16px;padding-top:16px;border-top:1px dotted var(--line2);cursor:default}
.mmore[hidden]{display:none}
.mmore .mspec{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px 24px;font-size:calc((13.5px) * var(--ts))}
.mspec dt{
  color:var(--dim2);font-family:var(--mono);font-size:calc((10px) * var(--ts));letter-spacing:.08em;text-transform:uppercase;
}
.mspec dd{margin:6px 0 0;color:var(--txt);overflow-wrap:anywhere}
.mspec code{font-family:var(--mono);font-size:calc((12px) * var(--ts))}
.mspec a{color:inherit;text-decoration:underline dotted;text-underline-offset:3px}
.mspec a:hover{color:var(--p-models)}
.mspec ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.mspec li{display:inline-flex;align-items:center;gap:2px;padding:2px 4px 2px 8px;border:1px solid var(--line);border-radius:6px;background:var(--card2)}
.mcaps{display:flex;flex-wrap:wrap;gap:6px}
.mlinks{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.mrow .more{margin-top:0;font-size:calc((13.5px) * var(--ts))}

/* Chips in a panel are what a model can do: quiet, in sentence case, and coloured only where the colour means something. */
.mrow .mtag{
  font-family:var(--sans);font-size:calc((12.5px) * var(--ts));letter-spacing:0;text-transform:none;font-weight:500;
  padding:3px 9px;border:0;border-radius:6px;color:var(--dim);background:color-mix(in srgb,var(--dim2) 13%,transparent);
}
.mrow .mtag[data-tag="locking"]{background:color-mix(in srgb,var(--p-gov) 13%,transparent);color:var(--p-gov)}

/* Copy reads as text, not as a primary action. */
.mcopy{
  font:inherit;font-size:calc((11px) * var(--ts));color:var(--dim2);background:transparent;border:0;border-radius:6px;
  padding:3px 6px;cursor:pointer;flex:none;
}
.mcopy[hidden]{display:none}
.mcopy:hover{color:var(--txt)}
.mcopy:focus-visible{outline:2px solid var(--p-models);outline-offset:2px}
.mcopy.done{color:var(--p-models)}

.mnote{margin:24px 0 0;color:var(--dim);font-size:calc((13.5px) * var(--ts));max-width:78ch}
.mnote code{font-family:var(--mono);font-size:.95em;color:var(--txt);background:var(--card2);padding:2px 6px;border-radius:6px}
.mask{
  margin:22px 0 0;padding:20px 22px;border:1px solid var(--line2);border-radius:14px;background:var(--card);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 20px;
}
.mask p{margin:0;max-width:560px;color:var(--txt);font-size:calc((15px) * var(--ts))}
.mask-btns{display:flex;flex-wrap:wrap;gap:10px}
.mask .btn{padding:8px 16px;font-size:calc((14.5px) * var(--ts))}
.mnone-found{margin:18px 0 0;color:var(--dim)}
.mnone-found[hidden]{display:none}

/* ---- the served models, as links, on /models/ ------------------------------------------------ */
.mserved{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0}
a.mtag{text-decoration:none}
a.mtag:hover{border-color:var(--p-models);color:var(--p-models)}
a.mtag:focus-visible{outline:2px solid var(--p-models);outline-offset:2px}
.mserved .mtag{font-family:var(--sans);font-size:calc((14px) * var(--ts));text-transform:none;letter-spacing:0;padding:6px 14px}

/* ---- medium: the same table, without the id column; the id sits under the name -------------- */
@media(max-width:1199px){
  .mtable{
    --cols:minmax(180px,2fr) minmax(80px,.8fr) 56px 68px 76px 88px minmax(110px,1fr) 24px;
    --areas:"name params ctx enc size vram price tog" "id id . . . . . ." "more more more more more more more more";
  }
  .mcols span:nth-child(8){display:none}
  .mid{margin-top:10px;justify-self:start;max-width:100%}
  .mrow:not(:has(.mid)){--areas:"name params ctx enc size vram price tog" "more more more more more more more more"}
}
@media(max-width:999px){
  .mfilters{display:inline-flex;align-items:center}
  .mfilters[hidden]{display:none}
  .mtools[data-filters="closed"] .mfbar{display:none}
}

/* ---- narrow: each row is a card, the figures in a grid with their labels --------------------- */
@media(max-width:879px){
  .mcols{display:none}
  .mtable{--cols:minmax(0,1fr) 28px;--areas:"name tog" "facts facts" "id id" "more more"}
  .mrow{padding-top:18px;padding-bottom:18px;align-items:start}
  .mtoggle{align-self:start;margin-top:-6px}
  .mcells{display:grid;grid-area:facts;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:14px 16px;margin-top:14px}
  /* The wide layout's area names do not exist in this grid; left on, each cell would get a column of its own. */
  .mm[data-k]{grid-area:auto}
  .mm .ml{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal;
    font-family:var(--mono);font-size:calc((10px) * var(--ts));letter-spacing:.08em;text-transform:uppercase;color:var(--dim2)}
  .mid{margin-top:14px;justify-self:stretch}
  .mrow:not(:has(.mid)){--areas:"name tog" "facts facts" "more more"}
  .mgnote{margin-left:0;flex:1 0 100%}
  .mmore .mspec{grid-template-columns:1fr}
}
@media(max-width:560px){
  .mtabs{flex:1 1 100%}
  .mtabs button{flex:1 1 auto;padding:0 8px;font-size:calc((13px) * var(--ts))}
  .mask{padding:18px}
}