/* ==========================================================================
   mcprush — stack-page.css   (stack.html only)

   server.html is a datasheet: one subject, a sidebar, tabs. A stack page is a
   plan, so the shape is deliberately different — one column at full width,
   numbered sections divided by hairlines, and an assembly block wide enough
   for a sentence of reasoning next to every part.

   Everything here is prefixed .pl- (plan) so it cannot collide with the
   shared stack-card primitive in stacks.css or with views.css.
   ========================================================================== */

/* ---------- unknown-id notice --------------------------------------------- */
.pl-note {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; margin-bottom: 20px;
  border: 1px solid var(--warn-line); border-radius: var(--r2);
  background: var(--warn-soft);
}
.pl-note .ic { color: var(--warn); display: inline-flex; padding-top: 1px; }
.pl-note .ic svg { width: 17px; height: 17px; }
.pl-note > div { flex: 1 1 auto; min-width: 0; }
.pl-note .btn { flex: none; }

/* ---------- masthead ------------------------------------------------------- */
.pl-head { padding-bottom: 10px; }
.pl-top {
  display: grid; grid-template-columns: minmax(0, 1fr) 306px;
  gap: 48px; align-items: start;
}
.pl-top > * { min-width: 0; }
.pl-id h1 {
  font-size: clamp(30px, 3.6vw, 42px); line-height: 1.04;
  letter-spacing: -.038em; margin: 14px 0 16px;
}
.pl-id .lead { max-width: 66ch; }
.pl-for {
  margin-top: 14px; font-size: 14px; line-height: 1.55;
  color: var(--ink-3); max-width: 78ch;
}
.pl-for b { color: var(--ink-2); font-weight: 550; }
.pl-acts { display: grid; gap: 9px; }
.pl-acts .small { margin-top: 4px; line-height: 1.5; }

/* the assembly, read as a chain rather than a list. It scrolls inside its own
   box so ten parts never widen the page. */
.pl-chainwrap {
  margin-top: 30px; padding-top: 22px;
  border-top: 1px solid var(--line);
}
.pl-chain {
  display: flex; align-items: flex-start;
  overflow-x: auto; scrollbar-width: thin; padding-bottom: 6px;
}
.pl-node {
  flex: 0 0 auto; width: 104px;
  display: grid; justify-items: center; gap: 9px; text-align: center;
}
.pl-node .tile { width: 46px; height: 46px; border-radius: 11px; font-size: 15px; transition: .14s; }
.pl-node-n {
  font: 400 11.5px/1.35 var(--mono); color: var(--ink-3);
  letter-spacing: -.01em; overflow-wrap: anywhere;
}
.pl-node:hover .tile { border-color: var(--accent); color: var(--accent); }
.pl-node:hover .pl-node-n { color: var(--ink); }
.pl-node.k .tile { color: var(--skill); background: var(--skill-soft); border-color: var(--skill-line); }
.pl-node.k:hover .tile { border-color: var(--skill); }
/* the connector sits on the tile's centre line, 23px = half a 46px tile */
.pl-join { flex: 0 0 auto; width: 16px; height: 1px; background: var(--line-2); margin-top: 23px; }
.pl-plus {
  flex: 0 0 auto; width: 22px; height: 22px; margin: 12px 10px 0;
  display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--line-2); background: var(--surface);
  font: 500 12px/1 var(--mono); color: var(--ink-3);
}
.pl-plus b { font-weight: 500; }
/* both of these only speak under 720px, where the chain becomes a grid */
.pl-plus i, .pl-node-i { display: none; }

/* the two numbers that decide the purchase, plus the two that qualify them */
.pl-nums {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line); border-radius: var(--r2);
  background: var(--surface); overflow: hidden; margin-top: 24px;
}
.pl-num { padding: 17px 18px; border-left: 1px solid var(--line); }
.pl-num:first-child { border-left: 0; }
.pl-num .v { font: 600 30px/1 var(--mono); letter-spacing: -.045em; }
.pl-num .v small { font: 400 13px/1 var(--sans); color: var(--ink-3); letter-spacing: 0; }
.pl-num .k { font-size: 12.5px; line-height: 1.45; color: var(--ink-2); margin-top: 10px; }

/* ---------- section index (phone only) -------------------------------------
   Hidden here, switched on in the phone block at the foot of this file. */
.pl-jump { display: none; }

/* ---------- sections ------------------------------------------------------- */
.pl-sec {
  padding-block: 36px; border-top: 1px solid var(--line);
  /* the index and the chain both jump here, and the header is sticky */
  scroll-margin-top: calc(var(--nav-h) + 12px);
}
.pl-sec-last { padding-bottom: 64px; }
.pl-sechead {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 24px;
}
.pl-sechead > div { min-width: 0; }
.pl-sechead h2 { font-size: 24px; letter-spacing: -.028em; line-height: 1.15; margin-top: 12px; }
.pl-sechead p { font-size: 14px; line-height: 1.55; color: var(--ink-2); margin-top: 9px; max-width: 84ch; }

/* ---------- 01 what it can do ---------------------------------------------- */
.pl-can { display: grid; }
.pl-can li {
  display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 14px;
  padding: 17px 0; border-top: 1px dashed var(--line);
}
.pl-can li:first-child { border-top: 0; padding-top: 2px; }
.pl-can .n { font: 500 12px/1.7 var(--mono); letter-spacing: .06em; color: var(--accent); }
.pl-can p { font-size: 16.5px; line-height: 1.5; letter-spacing: -.014em; max-width: 96ch; }

/* ---------- 02 the assembly ------------------------------------------------- */
.pl-asm {
  border: 1px solid var(--line); border-radius: var(--r3);
  background: var(--surface); overflow: hidden;
}
.pl-part {
  display: grid; grid-template-columns: 66px minmax(0, 1fr) 178px;
  gap: 20px; padding: 20px 22px;
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--nav-h) + 16px);
  transition: background .3s;
}
.pl-part:first-child { border-top: 0; }
.pl-part.lit { background: var(--accent-soft); }
.pl-part.k.lit { background: var(--skill-soft); }
.pl-mark { display: grid; justify-items: center; align-content: start; gap: 8px; }
.pl-mark .tile { width: 46px; height: 46px; border-radius: 11px; font-size: 15px; }
.pl-part.k .pl-mark .tile { color: var(--skill); background: var(--skill-soft); border-color: var(--skill-line); }
.pl-n { font: 500 11px/1 var(--mono); letter-spacing: .08em; color: var(--ink-3); }

.pl-nameline { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.pl-name {
  font-size: 16.5px; font-weight: 600; letter-spacing: -.022em;
  display: inline-flex; align-items: center; gap: 6px;
}
.pl-name:hover { color: var(--accent); }
.pl-part.k .pl-name:hover { color: var(--skill); }
.pl-why {
  font-size: 14.5px; line-height: 1.6; color: var(--ink-2);
  margin: 10px 0 12px; max-width: 88ch;
}
.pl-part-facts {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px;
  font: 400 11.5px/1 var(--mono); color: var(--ink-3);
}
.pl-scope {
  display: inline-flex; align-items: center; height: 21px; padding: 0 7px;
  border: 1px solid var(--line); border-radius: 5px; background: var(--surface-2);
  font: 500 11.5px/1 var(--mono); color: var(--ink-2); white-space: nowrap;
}
.pl-scope.w { color: var(--warn); background: var(--warn-soft); border-color: var(--warn-line); }
.pl-scope.n { color: var(--info); background: var(--info-soft); border-color: var(--info-line); }
.pl-scope.ok { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); }
.pl-scope.k { color: var(--skill); background: var(--skill-soft); border-color: var(--skill-line); }
.pl-price { text-align: right; }
.pl-price .v { font: 500 13.5px/1.4 var(--mono); color: var(--ink); }
.pl-price .s { font-size: 12px; color: var(--ink-3); margin-top: 6px; line-height: 1.4; }

.pl-asm-div {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 13px 22px; background: var(--surface-2); border-top: 1px solid var(--line);
}
.pl-asm-div .spec::before { background: var(--skill); }
.pl-asm-div .small { max-width: 74ch; }

/* ---------- 03 cost ---------------------------------------------------------- */
.pl-tbl-div td { background: var(--surface-2); padding-block: 8px; }
.pl-tbl-total td { border-top: 1px solid var(--line-2); background: var(--surface-2); }
.pl-freelist { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r2); overflow: hidden; }
.pl-freeitem {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px;
  background: var(--surface); font-size: 13.5px;
}
.pl-freeitem .tile { width: 24px; height: 24px; font-size: 10px; border-radius: 6px; }
.pl-freeitem:hover { background: var(--surface-2); }
.pl-freeitem.k .tile { color: var(--skill); background: var(--skill-soft); border-color: var(--skill-line); }
.pl-droplist { display: grid; gap: 10px; }
.pl-droplist li { display: grid; gap: 3px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.pl-droplist .mono { font-family: var(--mono); font-size: 12px; color: var(--ink); }

/* two cards that answer the same question from different sides. They are never
   the same length, and a stretched card with a third of it empty reads as a
   missing paragraph — so each one is as tall as what it has to say. */
.pl-pair { align-items: start; }

/* ---------- 04 setup ---------------------------------------------------------- */
/* minmax(0,1fr) rather than the implicit auto track: the client switcher is a
   wide strip, and an auto track would let its min-content widen the column
   past the page and bring back a horizontal scrollbar */
.pl-cmd { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; }
.pl-cmd > * { min-width: 0; }
.pl-checklist { display: grid; gap: 9px; margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.pl-checklist li { display: flex; gap: 8px; }
.pl-checklist li::before { content: '—'; color: var(--ink-3); flex: none; }
/* the one command, set small because the setup block is a two-column split */
#stCodeBox { font-size: 11.5px; }

/* ---------- 05 permissions ------------------------------------------------------ */
.pl-blast {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line); border-radius: var(--r2);
  background: var(--surface); overflow: hidden;
}
.pl-blast > div { padding: 18px 20px; border-left: 1px solid var(--line); }
.pl-blast > div:first-child { border-left: 0; }
.pl-blast .v { font: 600 28px/1 var(--mono); letter-spacing: -.045em; }
.pl-blast .v.w { color: var(--warn); }
.pl-blast .v.n { color: var(--info); }
.pl-blast .k { font-size: 13.5px; color: var(--ink); margin-top: 10px; }
.pl-blast .h { font-size: 12.5px; line-height: 1.5; color: var(--ink-3); margin-top: 6px; }
.pl-wbar { display: block; max-width: 220px; }
.pl-wbar > span { background: var(--warn); }

/* ---------- 06 swaps -------------------------------------------------------------- */
.pl-swap {
  display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 26px;
  padding: 20px 0; border-top: 1px dashed var(--line);
}
.pl-swap:first-child { border-top: 0; padding-top: 2px; }
.pl-swap p { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); max-width: 88ch; }
.pl-swap-pair { display: flex; align-items: center; gap: 10px; }
.pl-swap-side { display: flex; align-items: center; gap: 9px; min-width: 0; }
.pl-swap-side .tile { width: 34px; height: 34px; font-size: 12.5px; border-radius: 9px; }
.pl-swap-side b { display: block; font-size: 13.5px; font-weight: 600; letter-spacing: -.015em; }
.pl-swap-side i { display: block; font: 400 11.5px/1.4 var(--mono); font-style: normal; color: var(--ink-3); margin-top: 3px; }
.pl-swap-side.to b { color: var(--ink); }
.pl-swap-side:hover b { color: var(--accent); }
.pl-swap-arrow { color: var(--ink-3); display: inline-flex; flex: none; }
.pl-swap-arrow svg { width: 16px; height: 16px; }

/* ---------- 07 limits -------------------------------------------------------------- */
.pl-limits { display: grid; }
.pl-limits li {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 14px; align-items: start;
  padding: 15px 0; border-top: 1px dashed var(--line);
}
.pl-limits li:first-child { border-top: 0; padding-top: 2px; }
.pl-limits .ic {
  width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-3);
}
.pl-limits .ic svg { width: 12px; height: 12px; }
.pl-limits p { font-size: 15px; line-height: 1.55; color: var(--ink-2); max-width: 92ch; }

/* ---------- 08 maintenance ---------------------------------------------------------- */
.pl-meta {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid var(--line); border-radius: var(--r2);
  background: var(--surface); overflow: hidden;
}
.pl-meta > div { padding: 17px 18px; border-left: 1px solid var(--line); }
.pl-meta > div:first-child { border-left: 0; }
.pl-meta .k { font: 400 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }
.pl-meta .v { font-size: 16px; font-weight: 600; letter-spacing: -.02em; margin: 11px 0 6px; display: flex; align-items: center; gap: 7px; }
.pl-meta .v .mono { font-size: 14px; font-weight: 500; }
.pl-meta .h { font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }

/* related stacks reuse the shared .stack-card primitive; only the heading
   inside it needs to behave like a link */
#planRelated .stack-card h3 a:hover { color: var(--accent); }

/* ---------- responsive ---------------------------------------------------------- */
@media (max-width: 1180px) {
  .pl-top { grid-template-columns: minmax(0, 1fr) 280px; gap: 32px; }
  .pl-part { grid-template-columns: 60px minmax(0, 1fr) 158px; gap: 16px; }
  .pl-swap { grid-template-columns: 290px minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 1000px) {
  .pl-top { grid-template-columns: 1fr; gap: 26px; }
  .pl-acts { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .pl-acts .small { grid-column: 1 / -1; margin-top: 0; }
  .pl-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-num:nth-child(3) { border-left: 0; }
  .pl-num:nth-child(n+3) { border-top: 1px solid var(--line); }
  .pl-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pl-meta > div:nth-child(4) { border-left: 0; }
  .pl-meta > div:nth-child(n+4) { border-top: 1px solid var(--line); }
}
@media (max-width: 860px) {
  .pl-part { grid-template-columns: 56px minmax(0, 1fr); }
  /* the price stops being a column and becomes the last line of the row */
  .pl-price { grid-column: 2; text-align: left; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .pl-price .s { margin-top: 0; }
  .pl-blast { grid-template-columns: 1fr; }
  .pl-blast > div { border-left: 0; border-top: 1px solid var(--line); }
  .pl-blast > div:first-child { border-top: 0; }
  .pl-swap { grid-template-columns: 1fr; gap: 14px; }
  .pl-sechead h2 { font-size: 21px; }
}
/* core.css makes any table inside a card a horizontal scroller at 860px. These
   two are not scrollers: the money is the last of the three columns and would
   be the first thing off the right-hand edge. They wrap here and reflow into
   blocks at 620px, so this rule has to come before that one.

   That rule sets three properties, and for a long time this one undid two.
   The third, `white-space: nowrap`, inherits into every cell — so the total
   row's basis, "$124 of servers plus $15 of skills, at 5k tool calls a month",
   stayed on one line and set a 344px minimum on the document at a 320px
   viewport. Measured: 344 vs 320, which also threw every position:fixed
   element on the page 24px past the right edge. */
@media (max-width: 860px) {
  .pl-costcard > .tbl, .pl-write-tbl {
    display: table; overflow-x: visible; white-space: normal;
  }
}

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

   Two things on this page are desktop idioms that do not degrade: the chain,
   which is a row of tiles joined by hairlines, and the cost table, whose third
   column is the money and therefore the first thing a horizontal scroller
   hides. Both are rebuilt rather than squeezed. 720px is the width at which
   the chain can no longer hold three parts and a name on one line.
   ========================================================================== */
@media (max-width: 720px) {

  /* ---------- masthead order ----------------------------------------------
     On a desktop the chain sits between the title and the numbers because all
     three are on one screen. On a phone they are three screens, so they go in
     the order they are wanted: what it is and how to install it, what it
     costs, then which nine parts it is made of. */
  .pl-head { display: flex; flex-direction: column; }
  .pl-top { order: 1; }
  .pl-nums { order: 2; }
  .pl-chainwrap { order: 3; }

  /* ---------- the chain becomes an index of the parts ----------------------
     A scroller showed three of nine parts and gave no sign that six more
     existed. As a grid it shows all of them at once, each numbered with the
     row it jumps to in section 02, and the hairline joins go: there is no
     chain to read left to right when the line breaks every four tiles. */
  .pl-chain {
    /* 74px is chosen so both 390px and 360px give four columns: at three the
       grid runs to four rows and the index is taller than the screen */
    display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
    gap: 12px 8px; overflow-x: visible; padding-bottom: 0;
  }
  /* The same monogram appears three times on this page — here, on every row of
     the assembly, and on both sides of a swap — and it is one mark, so it is
     one size. 34px is what the swap rows and the stack card already use; the
     46px box was drawn for a chain read left to right on a desk. */
  .pl-node { width: auto; gap: 6px; }
  .pl-node .tile { width: 34px; height: 34px; border-radius: 9px; font-size: 12.5px; }
  .pl-join { display: none; }
  .pl-node-i { display: block; color: var(--ink-3); font-style: normal; letter-spacing: .06em; }
  /* the one thing the grid loses is where the servers stop, so the divider
     stops being a glyph and says it */
  .pl-plus {
    grid-column: 1 / -1; width: auto; height: auto; margin: 2px 0 0;
    padding-top: 16px; border: 0; border-top: 1px solid var(--line);
    border-radius: 0; background: none;
    display: flex; align-items: center; justify-content: flex-start; gap: 8px;
    font: 400 11.5px/1.3 var(--mono); color: var(--ink-3);
  }
  .pl-plus i { display: inline; font-style: normal; }

  /* ---------- the section index --------------------------------------------
     Eight section names wrapped to four rows of 40px chips — 157px of index
     for a page whose first section starts immediately under it. A strip of
     tabs on a phone is one line that scrolls sideways: the reader sees where
     they are, the cut-off next name says there are more, and it costs 52px.
     Same idiom as the client strip in the install card on server.html and the
     contents rail on skill.html, so all three read as one control. */
  .pl-jump {
    display: flex; flex-wrap: nowrap; gap: 8px;
    overflow-x: auto; scrollbar-width: none;
    padding: 14px 0 4px; border-top: 1px solid var(--line); margin-top: 18px;
  }
  .pl-jump::-webkit-scrollbar { display: none; }
  .pl-jump a {
    flex: none;
    display: inline-flex; align-items: center; min-height: 34px; padding: 0 11px;
    border: 1px solid var(--line); border-radius: var(--r1);
    background: var(--surface); color: var(--ink-2);
    font: 500 12px/1 var(--mono); white-space: nowrap;
  }
  .pl-jump a:hover { border-color: var(--ink-3); color: var(--ink); }

  /* ---------- setup: the client switcher ----------------------------------
     Six clients on one line that scrolls sideways, the same form the section
     index above and the install card on server.html take: wrapped, the strip
     was three rows of tabs sitting between the setup steps and the command
     they produce. The chosen client is always first in the strip, so what the
     command belongs to is on screen without a scroll. */
  #stClients {
    flex-wrap: nowrap; overflow-x: auto; gap: 4px;
    scrollbar-width: none; scroll-snap-type: x proximity;
  }
  #stClients::-webkit-scrollbar { display: none; }
  #stClients button { flex: none; min-height: 34px; padding: 0 11px; scroll-snap-align: start; }
  #stClients button.on { padding: 0 11px; }
  /* the command under it is what the reader copies; 11.5px is a split-column
     size, not a phone one */
  #stCodeBox { font-size: 12.5px; }

  .pl-freeitem { min-height: 40px; padding: 10px 12px; }
  .pl-droplist .mono { overflow-wrap: anywhere; }
}

@media (max-width: 620px) {
  /* ---------- the money comes before the note that explains it ------------
     The masthead ends with three buttons and then a paragraph about what the
     checkout does. Measured at 390px that paragraph is 146px tall and the
     first figure on the page — $124/mo, the number a stack is bought or not
     bought on — started at 770px while the note started at 606. Both wrappers
     drop their own box so .pl-head's column holds the parts directly, and the
     numbers take the slot straight under the buttons. The note keeps its
     words and follows them. Above 620 nothing moves: the masthead is still
     two columns with the buttons in the right-hand one. */
  .pl-top, .pl-acts { display: contents; }
  .pl-id { order: 1; }
  .pl-acts > .btn { order: 2; margin-top: 9px; }
  .pl-acts > .btn:first-child { margin-top: 24px; }
  .pl-nums { order: 3; }
  .pl-acts > .small { order: 4; margin-top: 16px; }
  .pl-chainwrap { order: 5; }

  /* The title is not .display, so core.css's phone clamp does not reach it and
     it stayed at its own desktop floor of 30px. It takes the shared clamp here
     for the one reason that clamp exists: the site has a single headline size
     on a phone, and a stack's name is not a bigger idea than a server's. */
  .pl-id h1 { font-size: clamp(26px, 7.2vw, 32px); margin: 10px 0 12px; }

  .pl-nums, .pl-meta { grid-template-columns: 1fr; }
  .pl-num, .pl-meta > div { border-left: 0; border-top: 1px solid var(--line); }
  .pl-num:first-child, .pl-meta > div:first-child { border-top: 0; }
  /* Stacked into one column, the four numbers are four cells 110px tall, and
     the 30px mono figure inside each is the reason: on a 358px column that is
     a headline, and it is competing with the actual headline four lines above
     it. 22px still reads as the largest thing in the cell, which is all a
     figure has to do. The box comes in to the shared card padding with it. */
  .pl-num { padding: 12px 14px; }
  .pl-num .v { font-size: 22px; letter-spacing: -.035em; }
  .pl-meta > div { padding: 12px 14px; }
  .pl-meta .v { font-size: 15px; margin: 8px 0 5px; }
  .pl-part { padding: 14px; gap: 11px; }
  .pl-can li { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; padding: 13px 0; }
  .pl-can p { font-size: 15px; }
  .pl-limits li { padding: 12px 0; }
  .pl-swap { padding: 14px 0; }
  .pl-sec { padding-block: 26px; }
  .pl-sechead { margin-bottom: 14px; gap: 14px; }
  .pl-sechead h2 { margin-top: 9px; }
  .pl-sechead p { margin-top: 7px; }
  /* the chain is the last block of the masthead and the section index follows
     it, so the two rules under it were 52px of hairline and air */
  .pl-chainwrap { margin-top: 20px; padding-top: 16px; }

  /* The mark column was 56px of tile beside a 14px gutter — 70px of a 326px
     row given to a two-letter monogram, which is why every part's sentence ran
     to five lines. At 34px it is the same mark the stack card and the swap
     rows already use on a phone, and the prose gets 25px of measure back. */
  .pl-part { grid-template-columns: 34px minmax(0, 1fr); }
  .pl-mark .tile { width: 34px; height: 34px; border-radius: 9px; font-size: 12.5px; }
  .pl-mark { gap: 6px; }

  /* three cells of blast radius, each led by a 28px mono count: same reasoning
     as the masthead figures, and they sit in the same column */
  .pl-blast > div { padding: 13px 14px; }
  .pl-blast .v { font-size: 22px; letter-spacing: -.035em; }
  .pl-blast .k { margin-top: 7px; }

  /* the notice's escape hatch stops competing with its own sentence for the
     width and takes the row under it */
  .pl-note { flex-wrap: wrap; }
  .pl-note .btn { width: 100%; height: 40px; }

  /* ---------- 03 the cost table -------------------------------------------
     The row is what matters here, not the column: a part, what you are paying
     for, and the figure. As three columns on a 390px screen the figure is off
     the right-hand edge — the reader scrolls a table sideways to find the one
     number they came for. Each row becomes a block: name and money on the
     first line where they can be compared down the column, the basis on the
     second. */
  .pl-costcard > .pl-cost-tbl, .pl-cost-tbl tbody { display: block; }
  .pl-cost-tbl thead { display: none; }
  .pl-cost-tbl tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
    gap: 3px 12px; padding: 11px 14px; border-bottom: 1px solid var(--line);
  }
  .pl-cost-tbl tr:last-child { border-bottom: 0; }
  .pl-cost-tbl td { display: block; padding: 0; border: 0; }
  /* the part name is the row's only link and an 18px line is a poor target */
  .pl-cost-tbl td:nth-child(1) a { display: inline-block; padding-block: 6px; }
  .pl-cost-tbl td:nth-child(1) { grid-area: 1 / 1; font-weight: 550; }
  .pl-cost-tbl td:nth-child(3) { grid-area: 1 / 2; }
  .pl-cost-tbl td:nth-child(2) { grid-area: 2 / 1 / 3 / 3; font-size: 12.5px; line-height: 1.45; }
  /* the two shaded rows carried their background on the cells, which no longer
     fill the row */
  .pl-cost-tbl tr.pl-tbl-div { padding-block: 9px; background: var(--surface-2); }
  .pl-cost-tbl tr.pl-tbl-div td { background: none; grid-area: auto / 1 / auto / 3; }
  .pl-cost-tbl tr.pl-tbl-total { background: var(--surface-2); border-top: 1px solid var(--line-2); }
  .pl-cost-tbl tr.pl-tbl-total td { background: none; }

  /* ---------- 05 who grants the write access ------------------------------
     Same treatment, one row deeper: member and count on the first line, the
     share bar across the second where it has the width to mean something. */
  .pl-write-tbl, .pl-write-tbl tbody { display: block; }
  .pl-write-tbl thead { display: none; }
  .pl-write-tbl tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
    gap: 9px 12px; padding: 13px 15px; border-bottom: 1px solid var(--line);
  }
  .pl-write-tbl tr:last-child { border-bottom: 0; }
  .pl-write-tbl td { display: block; padding: 0; border: 0; }
  .pl-write-tbl td:nth-child(1) a { display: inline-block; padding-block: 6px; }
  .pl-write-tbl td:nth-child(1) { grid-area: 1 / 1; }
  .pl-write-tbl td:nth-child(3) { grid-area: 1 / 2; }
  .pl-write-tbl td:nth-child(2) { grid-area: 2 / 1 / 3 / 3; }
  /* the column heading is gone, so the number carries it */
  .pl-write-tbl td[data-l]::after {
    content: ' ' attr(data-l); color: var(--ink-3); font-size: 12px;
  }
  .pl-wbar { max-width: none; }
}

/* ---------- the 12px floor -------------------------------------------------
   core.css raises the shared micro-labels to 12px at phone width. This page
   has its own set, and every one of them carries a fact rather than a
   decoration: the scope chips are the permissions ("9 write", "22 network"),
   the index numerals are what section 02 is navigated by, and the sentence
   under the chain — "and the skills that drive them" — is the only thing that
   says where the servers stop.

   At the end of the file because .pl-node-n, .pl-plus, .pl-n, .pl-part-facts
   and .pl-meta .k are all set in a `font:` shorthand above; a later font-size
   is the only declaration that reaches them. Desktop sizes are untouched. */
@media (max-width: 620px) {
  .pl-node-n,
  .pl-plus,
  .pl-n,
  .pl-part-facts,
  .pl-scope,
  .pl-meta .k,
  .pl-swap-side i,
  .pl-price .s { font-size: 12px; }
  /* the chip was 21px tall around an 11.5px line */
  .pl-scope { height: 23px; }
  /* the facts row is set at line-height 1 because on a desk it is one line.
     Here "v5.0.1 · updated 9 days ago" wraps, and two 12px lines a single
     em apart read as one crushed paragraph. The gaps come in with it: 8 and 14
     were the space between items on one line, and they are now the leading of
     a five-line block that repeats nine times down the page. */
  .pl-part-facts { line-height: 1.45; gap: 6px 11px; }
}