/* ==========================================================================
   The catalogue page: its masthead, its compare tray and its ten-column table.

   This was a <style> block inside catalog.html — 6 KB of page-local rules, and
   of commentary about them, in the markup of every response. It is the same CSS
   in the same order; what changed is that a reader who opens the page source
   sees the page rather than a stylesheet, and a browser that has been here
   before does not fetch these rules again.
   ========================================================================== */

/* Page-local: three things only this page has — its masthead, its compare tray
   and its ten-column table. skills.html keeps the equivalents in skills.css and
   stacks.html in stacks.css; this page has no sheet of its own, and none of
   these belong in the shared one. */
.cat-tbl { min-width: 920px; }
.tray-cap { gap: 8px; flex: none; }
.tray-cap b { font-size: 13.5px; }
#trayItems { min-width: 0; overflow-x: auto; scrollbar-width: none; }
#trayItems::-webkit-scrollbar { display: none; }
#openCmp, #clearCmp { flex: none; }
#clearCmp { color: var(--panel-ink2); }

@media (max-width: 620px) {
  /* ---- order --------------------------------------------------------------
     At 390px the first server card began at 577px on a 780px screen, and 64px
     of what stood in front of it was two buttons that lead away from this page:
     Stacks is in the header nav and studio.html is the header's Publish. The
     column is re-ordered so they follow the results they are an alternative to.
     .catpage is the flex column; .cat-mast dissolves so its two halves can take
     separate places in it. */
  .catpage { display: flex; flex-direction: column; }
  .catpage .cat-mast { display: contents; }
  .catpage > .crumbs { order: 0; }
  .catpage .cat-mast-t { order: 1; }
  .catpage > .cat-layout { order: 2; }
  .catpage .cat-mast-acts { order: 3; width: 100%; gap: 10px; padding-bottom: 40px; }
  .catpage .cat-mast-acts .btn { flex: 1 1 0; min-width: 0; }

  /* ---- the compare tray ---------------------------------------------------
     The strip of picks was the flexible child of a one-line bar, and at 320px
     the two buttons and the caption used all of it: the strip measured 0px
     wide, so three ticked servers were held by a tray that showed none of them
     and offered no way to drop one. It takes its own line now and scrolls, the
     caption goes (the button below says the same word), and the two controls
     come back to 44px from the 36px the shared phone rule gives them. */
  #tray { flex-wrap: wrap; gap: 8px 10px; padding: 12px; }
  #tray > .tray-cap { display: none; }
  #trayItems { flex: 1 1 100%; padding-bottom: 1px; }
  #tray .ti { flex: none; max-width: 78vw; min-height: 34px; white-space: nowrap; }
  /* the x is the only way to drop one pick — Clear drops all three — so it
     takes the 40px floor. The negative margin keeps the chip 40px rather than
     46: the target overlaps the chip's own padding instead of adding to it. */
  #tray .ti button { width: 40px; height: 40px; margin: -6px -6px -6px 0; }
  body #openCmp { flex: 1 1 auto; height: 44px; }
  body #clearCmp { height: 44px; }

  /* ---- the list view ------------------------------------------------------
     A ten-column league table has no phone form. Pinning two columns and
     dragging the rest through a 154px window was the last attempt: it kept
     every figure but showed one at a time, and the rows it produced were 112px
     of mostly empty cells. So below 620 the table stops being a table.

     Each row folds into the two lines a list actually needs — the mark, the
     name and its publisher against the price, then one quiet meta line of
     category, tools, latency and rating. Success rate and install count go
     (both are on the listing itself, and neither decides which row to open),
     and so does the action group: on a phone the row IS the affordance, and
     three 34px buttons per row is a second toolbar repeated forty times.
     Nothing scrolls sideways and the whole list is one column. */
  .results-tbl { overflow-x: visible !important; }
  .cat-tbl { min-width: 0; }
  .cat-tbl thead { display: none; }
  .cat-tbl tbody, .cat-tbl tr, .cat-tbl td { display: block; }
  .cat-tbl tr {
    display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px;
    padding: 10px 12px; border-bottom: 1px solid var(--line);
  }
  /* the two pinned columns and the hairline that marked the scroll go with the
     table they belonged to — both are written with a :nth-child in views.css,
     so they need at least as much specificity to be undone */
  .results-tbl .cat-tbl td, .results-tbl .cat-tbl td:nth-child(1),
  .results-tbl .cat-tbl td:nth-child(2) {
    padding: 0; border: 0; width: auto; min-width: 0; max-width: none;
    white-space: normal; position: static; box-shadow: none; background: none;
  }
  /* the tick and the identity are the first line, and nothing else: a name, a
     verified mark, a promoted tag and a per-call rate could not share 358px
     without one of them being cut off at the viewport edge */
  .cat-tbl td[data-c="pick"] { order: 1; flex: none; }
  .cat-tbl td[data-c="pick"] > .check { width: 32px; height: 32px; justify-content: center; }
  .cat-tbl td[data-c="name"] { order: 2; flex: 1 1 auto; }
  .cat-tbl td[data-c="name"] .nm > div { min-width: 0; }
  /* the second line carries the facts, and the price closes it on the right —
     the one figure a scanning reader is looking for is the last thing on the
     row rather than the thing that overflows it */
  .cat-tbl tr::after { content: ''; order: 3; flex: 1 0 100%; height: 0; }
  .cat-tbl td[data-c="cat"], .cat-tbl td[data-c="tools"],
  .cat-tbl td[data-c="p95"], .cat-tbl td[data-c="rate"] {
    order: 4; flex: none; font-size: 11.5px; color: var(--ink-3); text-align: left;
  }
  .cat-tbl td[data-c="cat"] { margin-left: 38px; }
  .cat-tbl td[data-c="tools"]::before, .cat-tbl td[data-c="p95"]::before { content: "· "; }
  .cat-tbl td[data-c="rate"]::before { content: "· \2605 "; }
  .cat-tbl td[data-c="tools"]::after { content: " tools"; }
  .cat-tbl td[data-c="price"] {
    order: 5; flex: none; margin-left: auto; align-self: baseline;
    font-size: 12px; color: var(--ink); white-space: nowrap;
  }
  .cat-tbl td[data-c="ok"], .cat-tbl td[data-c="inst"], .cat-tbl td[data-c="act"] { display: none; }
  /* the name block loses the desktop's fixed cell width and wraps on its own */
  .cat-tbl .nm { gap: 9px; align-items: flex-start; }
  .cat-tbl .nm .tile { flex: none; }
  /* the promoted disclosure is an annotation on a row, not a control the size
     of one: the same 24px tag the cards carry */
  .promo-tag.inline {
    display: inline-flex; align-items: center; min-height: 22px;
    margin: 2px 0 0; padding: 0 7px; font-size: 10.5px;
  }
}