/* ==========================================================================
   The server page: its masthead, its tab strip and the twelve panels under it.

   This was a <style> block inside server.html — 11 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: the two things this page owns and no other page has — a manifest
   diff between two releases, and the plan the reader has chosen. Both live here
   rather than in views.css so the shared sheet stays shared. */
.mdiff {
  white-space: normal; padding: 12px 13px; margin-top: 12px; max-width: 92ch;
  font-size: 12px; line-height: 1.6;
}
.mdiff .hd { display: block; color: var(--panel-ink2); margin-bottom: 8px; }
.mdiff .dr { display: grid; grid-template-columns: 11px 170px minmax(0,1fr); gap: 10px; padding: 1px 0; }
.mdiff .dr .d { color: var(--panel-ink2); }
.mdiff .add > .s, .mdiff .add > .n { color: #7FD8A8; }
.mdiff .del > .s, .mdiff .del > .n { color: #E8A08B; }
.mdiff .chg > .s, .mdiff .chg > .n { color: #E4C77A; }
.mdiff .nil { color: var(--panel-ink2); display: block; }
@media (max-width: 620px) {
  .mdiff .dr { grid-template-columns: 11px minmax(0,1fr); }
  .mdiff .dr .d { grid-column: 2; }
}
/* the chosen plan is ink-bordered so it never reads as the same signal as the
   accent ring on "most installed" — one is your state, the other is a fact */
.plan.chosen { border-color: var(--ink); box-shadow: 0 0 0 3px var(--surface-3); }
.ver.target { background: var(--surface-2); border-radius: var(--r2); }

/* the install command in the rail is set smaller than the quickstart because
   the rail is 336px wide; declared here rather than inline so the phone can
   raise it without an !important */
#srvCodeBox { font-size: 11.5px; }

/* The two figures this page leads with: the rating at the head of the reviews
   tab, and the per-call price at the head of the pricing card. Both were inline
   font-sizes on the elements themselves, which is a size no media query can
   reach — so on a phone the rating was a 44px numeral in a 358px column. Here
   they are one named pair, at exactly the desktop sizes they had. */
.srv-fig { font-size: 44px; letter-spacing: -.05em; line-height: 1; }
.srv-fig-sm { font-size: 28px; letter-spacing: -.04em; }

/* The install card's action row. On a free listing it is one button and two
   icons and fits; on a paid one it gains the money action, and four controls
   in a 336px rail cannot share a line. The money action takes the first line
   to itself, the command and the two icons share the second. */
.srv-acts #srvInstall { flex: 1 1 100%; }
.srv-acts #srvCopyCmd { flex: 1 1 auto; }

/* ==========================================================================
   THE PHONE  (<= 620px)

   Four things on this page are desktop idioms that do not survive a 288px
   column: the tool row, which is a name and three chips on one line; the
   client strip in the install card, which hid eight of its eleven tabs behind
   an invisible scrollbar; three tables whose rows are objects rather than a
   league; and two text buttons drawn against a cursor.
   ========================================================================== */
@media (max-width: 620px) {

  /* ---------- the install card ------------------------------------------
     .demo-clients is a scroller with `scrollbar-width: none`, which is right
     for the six-client demo on the home page and thin for twelve tabs on the
     page whose purpose is to install: at 320px it showed Claude Code, Claude
     Desktop and half of ChatGPT. Letting them wrap showed all twelve — and
     cost 175px, four rows of tabs between the card's head and the command the
     reader came for.

     One line that scrolls sideways is the phone form of a tab strip: the
     chosen client is always the first thing in it, the cut-off next tab is
     what says there are more, and it costs 44px instead of 175. It sits where
     a tab strip belongs — above the thing it changes — so the command below it
     is the answer to the tab above it. */
  #srvClients {
    flex-wrap: nowrap; overflow-x: auto; gap: 4px;
    scrollbar-width: none; scroll-snap-type: x proximity;
  }
  #srvClients::-webkit-scrollbar { display: none; }
  #srvClients button { flex: none; min-height: 34px; padding: 0 11px; scroll-snap-align: start; }
  #srvClients button.on { padding: 0 10px; }
  /* the command is what the reader copies; 11.5px is a rail size, not a phone
     one */
  #srvCodeBox { font-size: 12.5px; }

  /* ---------- code blocks stop scrolling sideways -------------------------
     Every code block on this page is a command or a config entry with a URL
     in it. Measured at 320px, the twelve panels on the Installation tab run
     308 to 857px inside a 248px box — the VS Code entry is three and a half
     screens — and the quickstart and the tool examples do the same. Two
     things go wrong at once: the reader drags a terminal sideways to read one
     string, and on the way the middle of it passes underneath the opaque copy
     button sitting in the top-right corner.

     They wrap instead, with `overflow-wrap: anywhere` so a 60-character URL
     breaks rather than setting the width — the treatment .code.soft already
     gives the command in the install card. The 54px gutter core.css reserves
     for the button then stays empty, and the whole entry is on screen. */
  .code { white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: visible; }
  /* ---------- the action row ---------------------------------------------
     A wide button and two 38px squares. `.grow` is flex:1 with a 0% basis, so
     the button claimed the whole line and pushed the second square onto a line
     of its own with a 200px hole beside it; forcing it to 100% instead cost a
     second line at every width — 86px of action row on a 390px screen, where
     all three fit one line with 48px to spare. An auto basis is what the row
     actually wants: one line while the label fits, and the two squares pairing
     up underneath only at the width where it no longer does. */
  #srvInstall { flex: 1 1 auto; }

  /* ---------- the two figures --------------------------------------------
     44px and 28px are the sizes these numbers take beside a 780px measure. In
     a 358px column a 44px numeral is a headline, and the headline of this page
     is the server's name. They step down to the sizes the shared stat blocks
     use at this width, and stay the largest thing in the block they lead. */
  .srv-fig { font-size: 26px; letter-spacing: -.04em; }
  .srv-fig-sm { font-size: 22px; letter-spacing: -.035em; }

  /* ---------- the tool row ------------------------------------------------
     The summary is already dropped at this width, which left the name, the
     risk chip, the unit chip and the chevron on one line — measured at 320px
     the row ran to 355px inside a 288px column, and because the body clips at
     overflow-x:hidden the unit price was not merely off the edge, it was
     unreachable. The name takes the first line with the chevron, and the two
     chips take the second. */
  #toolList .tool-h { flex-wrap: wrap; row-gap: 8px; }
  #toolList .tool-h .nm { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
  #toolList .tool-h .ch { order: 2; }
  #toolList .tool-h .badge { order: 3; }

  /* ---------- two tables that stop being tables ---------------------------
     core.css turns any table inside a card into a sideways scroller at 860px.
     That is the right default for a wide comparison and the wrong one for a
     row that is read on its own: measured at 320px the scan report was 1078px
     inside a 286px box — nearly four screens sideways, with the finding
     itself, the only column anyone opens the panel for, entirely off the
     right-hand edge; the drift table was 780px. Each row becomes a block
     instead, headed by the check or the release it belongs to. Nothing is
     dropped and the desktop table is untouched. */
  /* `.card > .tbl` is the rule being overridden, so these have to match its
     specificity or better — a bare `.drift-tbl` loses and the row stays nowrap */
  #reportPanel > .tbl, .card > .drift-tbl,
  #reportPanel > .tbl tbody, .drift-tbl tbody { display: block; }
  #reportPanel > .tbl, .card > .drift-tbl { white-space: normal; overflow-x: visible; }
  #reportPanel > .tbl thead, .drift-tbl thead { display: none; }
  #reportPanel > .tbl tr, .drift-tbl tr {
    display: block; padding: 14px 15px; border-bottom: 1px solid var(--line);
  }
  #reportPanel > .tbl tr:last-child, .drift-tbl tr:last-child { border-bottom: 0; }
  #reportPanel > .tbl td, .drift-tbl td {
    display: block; padding: 0; border: 0;
  }
  /* .tbl .r is (0,2,0) and would keep the verdict pinned to a right edge that
     no longer has a column against it */
  #reportPanel > .tbl td.r, .drift-tbl td.r { text-align: left; }
  #reportPanel > .tbl td + td, .drift-tbl td + td { margin-top: 5px; }
  /* the column heading is gone, so each cell that needs one carries it */
  #reportPanel > .tbl td[data-l]::before, .drift-tbl td[data-l]::before {
    content: attr(data-l) ' '; color: var(--ink-3);
  }
  /* the check and the release are the row's own heading */
  #reportPanel > .tbl td:first-child, .drift-tbl td:first-child {
    font-weight: 600; font-size: 14px;
  }

  /* ---------- one table that stays a table --------------------------------
     What a call costs is read across rows, not down one — the reader is
     comparing $0.0024 against $0.0048 against free. So it keeps the scroller
     and pins the column that says which tool the figure belongs to. */
  .bill-tbl th:first-child, .bill-tbl td:first-child {
    position: sticky; left: 0; z-index: 1; background: var(--surface);
    box-shadow: 1px 0 0 var(--line-2);
  }
  /* the widest thing in the table was its own heading: "Cost at $2.40/1k" is
     180px of nowrap. Wrapping the headings takes 131px off the scroll. */
  .bill-tbl th { white-space: normal; }

  /* ---------- two text buttons -------------------------------------------- */
  /* Both were drawn against a cursor: the repository name in the glance rail
     was a 20px slice of a 14px line, and every "diff" in the drift table was
     21 x 22. A .link carries its underline on the box, so growing the box to
     40px would leave the rule floating ten pixels under the words — they take
     a hairline box on all four sides instead, which is what .tag already is. */
  #repoBtn, .drift-tbl button.link {
    display: inline-flex; align-items: center; min-height: 40px; padding: 0 10px;
    border: 1px solid var(--line-2); border-radius: var(--r1);
    background: var(--surface);
  }
  .drift-tbl button.link { margin-left: 4px; }

  /* ---------- the review form ---------------------------------------------
     Only this page renders .rw-*, so the phone sizes are here rather than in
     views.css. Three faults, all of them the same fault — a form drawn for a
     mouse:

     the rating is five 30px squares 2px apart, which is the smallest control
     on the page and the one every review starts with; the headline field is
     38px; and both text inputs carry their own font-size, which beats the
     bare `input`/`textarea` selectors core.css uses to hold every field at
     16px — so focusing either one makes iOS Safari zoom the whole page and
     leave the reader panned sideways.

     The star glyph stays 21px. What grows is the box around it — to 40px, the
     height a button takes on this site, and the headline field to 42px, the
     height a text field takes. Both were 44, which is a number the shared scale
     does not have and which put the one form on this page a notch above every
     control around it. */
  .rw-star { width: 40px; height: 40px; }
  .rw-stars { gap: 8px; margin-left: -6px; }
  .rw-in { height: 42px; font-size: 16px; }
  .rw-body { font-size: 16px; line-height: 1.55; }
}