/* ---- "Copy your agent’s setup prompt" -----------------------------------------------------
   A capsule that copies one line for a coding agent to run. Two hosts: the /docs/ hero and the
   homepage hero, directly above "Start free (no card").

   WHY THIS IS ITS OWN FILE, and not a block in app.css. The two hosts do not share a stylesheet.
   /docs/ loads app.css; the homepage loads home.css and nothing else. Shipping the component in
   app.css means a second copy in home.css, and two copies of a tuned component drift -- the same
   argument home.css makes for --p-models-soft, which it keeps in one file precisely so it cannot.
   One file, loaded by both pages, is the only shape with one copy in it.

   THE TWO VOCABULARIES, and how one authored block renders under either. app.css and home.css
   name the same roles differently. Measured, not assumed -- these are the values each file
   actually sets, day / dusk / night:

     ROLE           app.css                                home.css                       same?
     ink            --txt    191917 191917 E8EEF3          --ink       191917 191917 E8EEF3  YES
     hairline       --line2  D2CEC4 B6B0A0 33445A          --rule-strong D2CEC4 B6B0A0 33445A YES
     secondary text --dim    4F4C46 403D37 B9C4CE          --muted     6E6B64 57544C 8593A1   NO
     card surface   --card2  F4F2EC D8D3C6 1B2734          (none)                             NO
     paper          --bg     -- identical in both, both var(--paper-*)                        YES
     product green  --p-context / --on-mint / --amber -- byte-identical in both                YES
     focus green    --mint   0E7A62 0C6551 5FCFB4          --mint      0E7A62 0D6D57 5FCFB4  dusk

   So only three things actually change across the two pages: the note's text colour, the card
   surface, and the focus ring on dusk. Everything that carries the component's identity -- the
   fill, the label, the hover, the status -- is the same number on both. That is worth knowing
   before reading the ratios below, because it means one table mostly covers both pages.

   THE BRIDGE IS ONE BLOCK, not a fallback repeated at twenty use sites. var(--txt, var(--ink))
   inline everywhere would put the mapping in twenty places and hide it in none of them; here the
   mapping IS the thing a reader needs, so it gets its own block and everything downstream reads
   an --ap-* name. Scoped to .agentpill-wrap rather than :root so this file declares nothing
   globally in a stylesheet two other pages' components share.

   THE FALLBACK FIRES ON ABSENCE, WHICH IS THE FRAGILE PART. var(--txt, X) uses X only when --txt
   is unset. home.css sets none of --txt/--dim/--card2/--line2 today (grepped: zero matches). If
   someone later adds a --txt to home.css meaning something else, this component silently follows
   it and nothing errors. That is the failure mode to look for if the pill ever goes wrong on the
   homepage only. */
.agentpill-wrap{
  --ap-ink:  var(--txt,   var(--ink));
  --ap-dim:  var(--dim,   var(--muted));
  --ap-rule: var(--line2, var(--rule-strong));
  /* home.css has no opaque card surface at all -- its soft family (--mint-soft, --amber-soft,
     --tier-hi) is tinted or translucent, and a translucent fill is the one thing this component
     may not have (see the opacity note below). So it is derived: 6% of the theme's own ink into
     the theme's own paper, which lifts on the light papers and, because night's ink is pale,
     lifts on night too -- the same direction night's --mint-soft moves. Measured against paper
     it lands at 1.12 / 1.12 / 1.14, beside app.css's --card2 at 1.07 / 1.11 / 1.22. The same
     step, arrived at two ways. */
  --ap-well: var(--card2, color-mix(in srgb, var(--ap-ink) 6%, var(--bg)));
  margin-top:calc(22px * var(--ts));
}
.agentpill-row{ display:flex;flex-wrap:wrap;align-items:center;
  gap:calc(10px * var(--ts)) calc(14px * var(--ts)) }

/* THE DEFAULT DOCUMENT HAS NO BUTTON. With scripts off the .agentpill-line below is what shows;
   .agentpill-js on <html> flips the pair. This is the opposite of app.css's .term-cp treatment,
   which hides its copy buttons until terminal.js runs and leaves a no-JS reader with nothing;
   here the fallback IS the string, so a reader with scripts off loses the click and keeps
   everything the click was going to give them.
   The class is set by a one-line inline snippet in each page's <head>, not by agent-pill.js at
   the foot of the body, otherwise there is a frame where the mono line has painted and the
   button has not, which is a visible swap and a layout shift in the hero on every load. Same
   reasoning, and the same shape, as the inline snippet that sets data-theme before the
   stylesheet. agent-pill.js still calls classList.add as a belt-and-braces; it is idempotent. */
.agentpill{ display:none }
html.agentpill-js .agentpill{ display:inline-flex }

/* OPAQUE, and that is a correctness decision rather than a style one. Both hosts are frosted
   panels over a live wave canvas -- .plate is color-mix(in srgb, var(--bg) 32%, transparent) and
   .ctahero is rgba(var(--surface),.34), which is the same construction at almost the same alpha.
   A translucent control on either has no contrast RATIO, only a range that depends on where the
   strands happen to be that frame. home.css records exactly this finding for .ctapill, which was
   rebuilt opaque for it. Every ratio quoted here is therefore fixed. The two that remain a range
   are the edge and the focus ring, measured outward against the panel; they are quoted against
   --bg, which is what both panels are roughly a third of.

   QUIET AT REST, AND THIS IS THE LOAD-BEARING DECISION. The first build of this was a --txt slab
   -- .btn-p's construction -- on the argument that it is the primary action of the /docs/ hero.
   That does not survive the second host. home.css's .btn-p is background:var(--ink), the same
   near-black slab, and on the homepage it sits about 14px BELOW this capsule as "Start free (no
   card"). Two near-black slabs stacked, the wider one on top, and the wider one is not the page's
   conversion CTA. The fix is not a per-host override of the fill: it is that the slab was the
   wrong weight for a control that is never the most important thing on either page. So the rest
   state is a quiet lifted surface with a saturated 1px edge, which reads as a control everywhere
   and outranks nothing.

   THE EDGE IS --p-context, and it does three jobs at once. It clears SC 1.4.11 on BOTH sides,
   which is the thing --line-deep could not do: that token is solved to 3.03/3.04/3.05:1 against
   PAPER and measures 2.82/2.74/2.49 against this fill, so it would have passed the check anyone
   would run and failed the one that matters -- the same trap app.css writes up for the eval tag
   swatches, which passed against paper and measured 2.40:1 in place. It names the product the
   copied line installs, which is Tileward Context and nothing else. And it is what separates
   this capsule from the other one in the homepage hero: .ctapill is --p-models blue with a chip
   and an arrow, this is --p-context green with a mark row and no link affordance at all.
                                          day    dusk   night
     label  ink on the fill        docs  15.73  11.78  12.95      home  15.01  11.67  13.87
     edge   --p-context, inward    docs   5.54   5.32   7.99      home   5.29   5.27   8.55
     edge   --p-context, outward   both   5.94   5.92   9.75
   Border stays 1px unscaled: a hairline is a hairline, and neither stylesheet scales one.

   PADDING AND RADIUS SCALE WITH --ts, which most of both stylesheets does not do (.btn is a flat
   padding:11px 22px in home.css and 10px 18px in app.css). It has to here. The label is a
   30-character sentence with fixed furniture beside it, so at --ts 1.5 a flat padding leaves the
   type touching the rim and moves the wrap point several characters earlier. Scaling the box
   with the type keeps the number of lines the label takes constant across the whole 0.8-1.5
   range, which is what stops the geometry note further down from becoming a live problem on a
   desktop at large text. */
.agentpill{
  align-items:center;text-align:left;
  gap:calc(14px * var(--ts));
  max-width:100%;
  background:var(--ap-well);border:1px solid var(--p-context);color:var(--ap-ink);
  border-radius:999px;
  padding:calc(11px * var(--ts)) calc(16px * var(--ts)) calc(11px * var(--ts)) calc(20px * var(--ts));
  font-family:var(--sans);font-size:calc((15.5px) * var(--ts));font-weight:500;
  line-height:1.35;letter-spacing:-.005em;
  cursor:pointer;-webkit-appearance:none;appearance:none;
  transition:background-color .2s,border-color .2s,color .2s,transform .2s;
}

/* HOVER FLOODS THE EDGE'S OWN COLOUR ACROSS THE SHAPE. The colour is already on the element, so
   the escalation needs no third token and reads as the same object getting louder rather than as
   a different one appearing. It is .ctapill's documented behaviour -- rest tinted, hover the full
   pillar fill -- at the hue of the product this installs.
   --on-mint is the paired ink token. It is authored for a --mint fill rather than a --p-context
   one, and the two are a shade apart on the light papers (identical on night, where --p-context
   IS night's mint), so the pairing was re-measured rather than assumed. Both files set the same
   values, so one row covers both pages:
     label --on-mint on --p-context   6.20  7.95  9.75 */
.agentpill:hover{
  background:var(--p-context);border-color:var(--p-context);color:var(--on-mint);
  transform:translateY(-1px);
}

/* FOCUS DOES NOT TAKE THE HOVER FILL, and that is why these are two rules and not one selector
   list. --mint is the focus colour every other control in both stylesheets uses (.menubtn,
   .appearance-btn, .ap-reset, .itabs button), and --p-context is a shade of the same green: a
   mint ring drawn around a flooded mint capsule is not an indicator. Holding the quiet rest state
   under the ring is what makes it one -- and the quiet state is now the better ground anyway,
   which the slab version could not claim.
     --mint vs --bg   docs  5.06  5.22  9.75      home  5.06  4.68  9.75
   Dusk is the one row where the two files disagree: app.css sets --mint #0C6551 and home.css
   #0D6D57, each walked to AA against its own set of surfaces. Both clear the 3:1 SC 1.4.11 asks
   of a focus indicator with room to spare, so the divergence costs nothing and is left alone.
   offset 3px rather than the 2px used elsewhere, for the reason home.css records for the same
   silhouette: a straight-edged outline crowds a 999px radius at 2, and the wider band keeps the
   ring's neighbour the paper rather than the capsule it encircles. */
.agentpill:focus-visible{ outline:2px solid var(--mint);outline-offset:3px }

/* THE VISIBLE LABEL IS THE VERB, and it did not start that way. The first build read "Onboard
   your agent to Tileward" and kept "copy the one-line setup prompt" in the .vh tail, which put
   the one word naming the action -- copy -- where a screen reader hears it and a sighted reader
   never does. On a control this file deliberately made quiet, with no link affordance and a mark
   row that reads as decoration, that left the capsule looking like an announcement: a reader
   could take in the whole block and still not know there was anything to press, or what pressing
   it would leave them holding. The tail now carries the OUTCOME -- " (one line that onboards it
   to Tileward" -- and the visible string carries the instruction, which is the way round that
   serves both readers).
   STILL EXACTLY 30 CHARACTERS. That is the number the narrow-screen block at the foot of this
   file is measured against, so a future label that changes the wrap point invalidates it.
   The visible text is still a prefix of the accessible name, which is what SC 2.5.3 asks for.
   .vh is defined in BOTH stylesheets (app.css and home.css), so the same markup works on either
   host. */
.agentpill-label{ min-width:0 }

/* THE MARK ROW IS DECORATION. aria-hidden on the container, so none of it reaches the accessible
   name, and the four marks are generic geometry -- an asterisk, a hexagon, a speech bubble, a row
   of dots -- rather than traces of anyone's logo. They stand for "whichever agent you are in",
   and the fourth is explicitly "and others"; the /docs/ table is what states which clients are
   actually supported.
   opacity rather than a colour, and that is what makes one number cover every state on both
   pages: the fill beneath is always opaque, so .82 over the well and .82 over --p-context are
   ordinary composites, and the marks track the label through the hover flood with nothing
   restated and no second token.
     rest    docs  9.29  7.61  9.15      home  9.00  7.54  9.71
     hover   both  4.74  5.95  6.77
   All above 4.5:1, which decoration does not owe -- SC 1.4.11 asks 3:1 of a meaningful graphic
   and nothing of this one -- but a mark row that needs squinting at is not worth the width. */
.agentpill-marks{ display:flex;align-items:center;flex:none;
  gap:calc(7px * var(--ts));opacity:.82 }
.agentpill-marks svg{ display:block;width:calc(16px * var(--ts));height:calc(16px * var(--ts)) }

/* The confirmation. Its own element rather than a swap of the button's label, so the accessible
   name never changes while the button is focused, and so role="status" has somewhere stable to
   live. Empty at rest, which is why it takes no space until it says something. Both files set the
   same --p-context and --amber, so one row covers both pages:
     --p-context on --bg   5.94  5.92  9.75
     --amber     on --bg   5.67  5.59  8.27
   Both clear 4.5:1 as text. The failure line is amber rather than red because a blocked clipboard
   is a condition to work around -- the string is right there -- and not an error in anything the
   reader did. */
.agentpill-status{ font-size:calc((14px) * var(--ts));font-weight:500;line-height:1.35 }
.agentpill-status.ok{ color:var(--p-context) }
.agentpill-status.bad{ color:var(--amber) }

/* The note is the honesty line: the copied string makes an agent fetch and execute a remote file,
   and a reader is entitled to know that before pressing. --dim on /docs/, --muted on the homepage
   -- the one place the two vocabularies differ in a way a reader could see, and correctly so:
   --muted is what .ctasub directly above it already uses, so the note sits at the homepage's own
   secondary level rather than importing app.css's darker one.
     dim/muted on --bg   docs  8.20  8.06 10.44      home  5.10  5.63  5.89
   Both clear 4.5:1. Alignment is inherited, not set: .ctahero is text-align:center and the /docs/
   plate is left, and the note should agree with the hero it is in. */
.agentpill-note{ margin:calc(10px * var(--ts)) 0 0;color:var(--ap-dim);
  font-size:calc((14px) * var(--ts));line-height:1.5;max-width:calc(560px * var(--ts)) }
/* Self-contained rather than borrowing app.css's .mono, which does not exist in home.css. A
   component with two hosts may not depend on a class only one of them defines. */
.agentpill-note code{
  font-family:var(--mono);font-size:.92em;
  background:var(--ap-well);border:1px solid var(--ap-rule);border-radius:5px;padding:1px 5px;
}

/* The line itself. Visible by default (see the no-JS note above), hidden once the button exists,
   and shown again only when a copy actually failed. user-select is left alone on purpose: this
   element is the manual path, and agent-pill.js puts the document selection on it so the reader's
   own copy shortcut works. It shares the pill's own fill, so the revealed string reads as the
   capsule's contents made visible rather than as an unrelated code block.
     ink on the fill   docs  15.73 11.78 12.95      home  15.01 11.67 13.87
   word-break, because the URL at the end has no space in it and this box is about 295px wide
   inside either hero on a 375px phone. */
.agentpill-line{
  display:block;margin-top:calc(10px * var(--ts));text-align:left;
  background:var(--ap-well);border:1px solid var(--ap-rule);border-radius:calc(10px * var(--ts));
  padding:calc(10px * var(--ts)) calc(12px * var(--ts));
  font-family:var(--mono);font-size:calc((12.5px) * var(--ts));line-height:1.6;
  color:var(--ap-ink);white-space:pre-wrap;word-break:break-word;
}
html.agentpill-js .agentpill-line{ display:none }
html.agentpill-js .agentpill-line.show{ display:block }

/* ---- host adaptation, and it is spacing only ------------------------------------------------
   .ctahero is a centred flex COLUMN with a uniform 22px gap, so the wrap's own margin-top would
   stack on top of that gap and open a 44px hole between the sub and the capsule that nothing
   else in that hero has. The margin is right for /docs/, where the plate has no gap of its own.
   Centring the row matters for the same reason: .ctahero sets align-items:center, so the wrap
   sizes to its widest child -- the note -- and without this the capsule would sit left-aligned
   inside a centred block, which reads as a layout bug rather than as a choice.
   Deliberately NO colour in this block. An earlier draft put the quiet fill here as a homepage-
   only override and left the slab on /docs/; that is two visual identities for one component and
   a per-host exception to maintain. The weight question was settled in the base rule instead. */
.ctahero .agentpill-wrap{ margin-top:0 }
.ctahero .agentpill-row{ justify-content:center }

/* NARROW: the capsule stops being a capsule. The label is a 30-character sentence and the mark
   row is fixed furniture beside it, so inside either hero on a 375px phone -- about 295px of
   inner width once the wrap and the panel have taken their padding -- the label wraps to two or
   three lines and a 999px radius resolves to half the BOX height, leaving a tall stadium with two
   empty lobes either side of the text. Same geometry, and same fix, as .ctapill: at this width it
   is a notice card and should be shaped like one.
   The row is KEPT rather than stacked. The marks are what says "this is for your agent" before
   the sentence is read, and moving them under the label costs that and buys a line of height. */
@media(max-width:640px){
  .agentpill{ border-radius:calc(16px * var(--ts));
    padding:calc(12px * var(--ts)) calc(14px * var(--ts)) }
  .agentpill-marks{ gap:calc(6px * var(--ts)) }
}

/* Reduced and off are treated alike, which is what every other component transition in both
   stylesheets does (.fig, .key, .themeswitch, .term-cur, .ctapill). Only the TWEEN goes: the
   hover still floods the capsule to --p-context and the focus ring still appears, they just
   arrive rather than travel. The 1px lift is removed outright, since a transform with no
   duration is a jump.
   THE NO-JS NET IS THE HOSTS', NOT THIS FILE'S. Both app.css and home.css end with a
   @media (prefers-reduced-motion:reduce) block keyed html:not([data-motion]) * that zeroes every
   transition-duration on the page, which covers this component on either host with scripting off.
   Restating it here would be a third copy of a rule that already reaches these selectors. */
:where(html[data-motion="reduced"],html[data-motion="off"]) .agentpill{ transition:none }
:where(html[data-motion="reduced"],html[data-motion="off"]) .agentpill:hover{ transform:none }