/* ─── Published run pages (/m and /m/<id>) ───────────────────────────────────
 *
 * A separate stylesheet rather than inline critical CSS, which is the opposite
 * of what every other page here does. The reason is that this is the one page
 * type with an unbounded number of instances: inlining 6 KB into every run page
 * means paying for it on every visit to every run, while one cached file is
 * fetched once and then serves all of them. The pages are also read rather than
 * skimmed, so a first paint one round trip later costs less here than it would
 * on a landing page.
 *
 * Shared with mesh.php, the listing.
 * ──────────────────────────────────────────────────────────────────────────── */

:root{
  --bg:#1f1e1d; --surface:#262624; --fg:#f5f3ef;
  --fg2:rgba(245, 243, 239, 0.70); --fg3:rgba(245, 243, 239, 0.45);
  --line:rgba(255,255,255,0.09); --line2:rgba(255,255,255,0.055);
  --panel:rgba(255,255,255,0.035);
  /* --accent2 is historical: it named the second stop of the old gradient and
     is referenced across the run pages, so it now resolves to the accent. */
  --accent:#cf9e8e; --accent2:#cf9e8e; --mint:#709a76;
  --amber:#c09b64;
  --font:'Inter','Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --mono:'SFMono-Regular',ui-monospace,Menlo,Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);font-size:16px;line-height:1.7;
     -webkit-font-smoothing:antialiased}
/* The two ambient washes painted here are gone. These pages are read rather
   than skimmed, and a background that changes colour under a long answer is a
   distraction with no job. */

.nav{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:14px 22px;background:rgba(31, 30, 29, 0.82);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line)}
.nav a{color:var(--fg);text-decoration:none;font-size:15px;display:flex;align-items:center;gap:9px}
/* The mark, on every page that carries this bar. Empty alt: the wordmark next
   to it says the same thing in text. */
.nav__mark{width:26px;height:26px;border-radius:7px;flex:none}
.nav a.back{color:var(--fg2);font-size:14px}
.nav a.back:hover{color:var(--fg)}
.nav em{font-style:normal;background: #cf9e8e;-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent;font-weight:700}
.nav strong{font-weight:700;letter-spacing:.01em}

.wrap{position:relative;z-index:1;max-width:820px;margin:0 auto;padding:0 22px 96px}
/* The footer is its own landmark outside <main>, so the padding follows it
   rather than being paid twice. */
main.wrap{padding-bottom:0}
.wrap--foot{padding-bottom:72px}
.crumbs{font-size:13px;color:var(--fg3);padding:22px 0 0}
.crumbs a{color:var(--fg3);text-decoration:none}
.crumbs a:hover{color:var(--fg2)}

/* ── Run header ── */
.rhead{padding:34px 0 8px;border-bottom:1px solid var(--line);margin-bottom:36px}
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--fg3);border:1px solid var(--line);border-radius:999px;padding:6px 14px}
.kicker i{width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 10px var(--mint);flex:none}
h1{font-size:clamp(26px,3.9vw,38px);line-height:1.22;letter-spacing:-0.025em;margin:20px 0 0;font-weight:700}
.meta{font-size:13.5px;color:var(--fg3);margin:14px 0 26px;font-family:var(--mono);letter-spacing:.01em}

/* ── The converged answer: the thing the reader came for, so it leads ── */
.answer{border:1px solid rgba(99, 159, 107, 0.26);border-radius:18px;
  background:rgba(99, 159, 107, 0.05);padding:26px 28px;margin-bottom:16px}
.answer h2{margin:0 0 14px;font-size:15px;letter-spacing:.13em;text-transform:uppercase;color:var(--mint);
  font-weight:700}

h2.sect{font-size:clamp(20px,2.6vw,26px);letter-spacing:-0.02em;margin:56px 0 6px;font-weight:700}
.sect-sub{color:var(--fg2);margin:0 0 22px;font-size:15px}

/* ── Model turns ── */
.turns{display:grid;gap:14px}
.turn{border:1px solid var(--line);border-radius:16px;background:var(--panel);padding:20px 22px}
.turn--crit{border-color:rgba(200, 168, 119, 0.20);background:rgba(200, 168, 119, 0.035)}
.turn__head{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.model{font-weight:600;font-size:15px;letter-spacing:-0.01em}
.tag{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;border-radius:999px;
  padding:3px 9px;border:1px solid var(--line);color:var(--fg3)}
.tag--crit{border-color:rgba(200, 168, 119, 0.34);color:var(--amber)}

/* Model output is printed, not parsed. pre-wrap keeps the line breaks the
   model intended without letting anything else in the text mean anything. */
.body{white-space:pre-wrap;overflow-wrap:anywhere;font-size:15.5px;color:var(--fg2);line-height:1.72}
.answer .body{color:var(--fg);font-size:16.5px}

/* ── Listing (mesh.php) ── */
.lead{font-size:clamp(16px,1.9vw,18.5px);color:var(--fg2);max-width:620px;margin:18px 0 0}
.cards{display:grid;gap:14px;margin-top:34px}
.card{display:block;text-decoration:none;color:inherit;border:1px solid var(--line);border-radius:16px;
  background:var(--panel);padding:20px 22px;transition:border-color .25s ease,transform .25s ease}
.card:hover{border-color:rgba(224, 195, 184, 0.34);transform:translateY(-2px)}
/* h2, not h3: each card is a question, and the listing has nothing between
   its own h1 and them. Skipping a level is what an outline reader hears as a
   missing section. */
.card h2{margin:0 0 8px;font-size:18px;font-weight:600;letter-spacing:-0.015em;line-height:1.35}
.card p{margin:0;color:var(--fg2);font-size:14.5px;line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .meta{margin:12px 0 0;font-size:12px}
.empty{border:1px dashed var(--line);border-radius:16px;padding:40px 24px;text-align:center;color:var(--fg3);
  margin-top:34px}
.pager{display:flex;gap:12px;justify-content:center;margin-top:38px}
.pager a{color:var(--fg2);text-decoration:none;border:1px solid var(--line);border-radius:10px;
  padding:9px 18px;font-size:14px}
.pager a:hover{color:var(--fg);border-color:rgba(224, 195, 184, 0.4)}

/* ── Call to action ── */
.cta{margin-top:64px;text-align:center;border:1px solid var(--line);border-radius:20px;padding:40px 26px;
  background:rgba(224, 195, 184, 0.09)}
.cta h2{margin:0 0 10px;font-size:clamp(20px,2.6vw,26px);letter-spacing:-0.02em}
.cta p{color:var(--fg2);max-width:520px;margin:0 auto;font-size:15px}
.btn{display:inline-flex;align-items:center;gap:9px;padding:13px 26px;border-radius:12px;text-decoration:none;
  font-weight:600;font-size:15.5px;background:#ce9f8d;color:#fff;
  transition:transform .2s ease,box-shadow .2s ease;margin:20px 6px 0}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 38px -14px rgba(224, 195, 184, 0.7);color:#fff}
.btn--ghost{background:transparent;border:1px solid var(--line);color:var(--fg2)}
.btn--ghost:hover{color:var(--fg);border-color:rgba(224, 195, 184, 0.4);box-shadow:none}

.foot{border-top:1px solid var(--line);margin-top:64px;padding:26px 0 0;font-size:13.5px;color:var(--fg3);
  display:flex;gap:18px;flex-wrap:wrap;justify-content:center}
.foot a{color:var(--fg3);text-decoration:none}
.foot a:hover{color:var(--fg)}

@media (max-width:560px){
  .wrap{padding:0 18px 72px}
  .answer{padding:22px 18px}
  .turn{padding:18px 16px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .card:hover,.btn:hover{transform:none}
}

/* ─── Comparison pages (/compare) ─────────────────────────────────────────────
 *
 * Sharing this stylesheet with the run pages rather than inlining a second
 * copy. They are the two page types on this site with an unbounded number of
 * instances, they use the same tokens and the same furniture, and one cached
 * file across both is cheaper than critical CSS repeated on every one.
 * ──────────────────────────────────────────────────────────────────────────── */

main.wrap p{margin:0 0 16px;color:var(--fg2)}
/* Underlined, not just blue. A link inside a paragraph that is distinguished
   only by colour fails for anyone who cannot separate those two colours, and
   the rule is not decorative: it is the difference between reading a sentence
   and knowing part of it is clickable. Kept subtle with a faded underline and
   an offset, so a page of prose does not turn into a page of ruled lines. */
main.wrap p a,main.wrap li a,main.wrap dd a{
  color:#e0c3b8;
  text-decoration:underline;
  text-decoration-color:rgba(224, 195, 184, 0.45);
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
main.wrap p a:hover,main.wrap li a:hover,main.wrap dd a:hover{
  color:#e0c3b8;text-decoration-color:rgba(224, 195, 184, 0.9)
}
main.wrap em{font-style:italic;color:var(--fg)}

/* The two models, side by side. Grid rather than flex so both cards are the
   height of the taller one: a comparison where one side is visibly shorter
   reads as a verdict before anything has been read. */
.mcards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:32px}
.mcard{border:1px solid var(--line);border-radius:16px;background:var(--panel);padding:22px 24px}
.mcard__head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:14px;
  padding-bottom:12px;border-bottom:1px solid var(--line2)}
.mcard__side{font-family:var(--mono);font-size:11px;color:var(--fg3);letter-spacing:.12em}
.mcard h2{margin:0;font-size:22px;font-weight:700;letter-spacing:-0.02em}
.mcard__vendor{font-size:12.5px;color:var(--fg3)}
.mcard dl{margin:0}
.mcard dt{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg3);margin-top:14px}
.mcard dt:first-child{margin-top:0}
.mcard dd{margin:5px 0 0;font-size:14.5px;line-height:1.62;color:var(--fg2)}

/* The disagreement, in the same frame as a converged answer on a run page but
   without the green: nothing has been agreed here. */
.answer--plain{border-color:var(--line);background:var(--panel)}

.tablewrap{overflow-x:auto;margin-top:22px;border:1px solid var(--line);border-radius:14px}
.tablewrap table{border-collapse:collapse;width:100%;min-width:560px;font-size:14.5px}
.tablewrap th,.tablewrap td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line2);
  vertical-align:top;color:var(--fg2)}
.tablewrap th{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg3);
  font-weight:600;background:rgba(255,255,255,0.03)}
.tablewrap tr:last-child td{border-bottom:none}
.tablewrap td b{font-weight:600;color:var(--fg)}
/* A row label is a header cell, so it is <th scope="row">. Left-aligned and
   unshaded, because the column-header treatment on a row label reads as a
   second header row. */
.tablewrap th[scope="row"]{font-size:14.5px;letter-spacing:normal;text-transform:none;
  color:var(--fg);font-weight:600;background:transparent}

.faq{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:22px}
.faq details{border-bottom:1px solid var(--line2)}
.faq details:last-child{border-bottom:none}
.faq summary{cursor:pointer;padding:16px 20px;font-weight:600;font-size:15.5px;list-style:none;
  display:flex;justify-content:space-between;gap:16px;align-items:center;color:var(--fg)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--fg3);font-size:19px;font-weight:400;flex:none}
.faq details[open] summary::after{content:'\2212'}
.faq p{padding:0 20px 18px;margin:0;color:var(--fg2);font-size:15px}

/* Cross-links between comparisons. Every page reaching every other one is what
   turns six pages into a section rather than six orphans. */
.pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.pills a{text-decoration:none;color:var(--fg2);border:1px solid var(--line);border-radius:999px;
  padding:9px 16px;font-size:14px;transition:border-color .2s ease,color .2s ease}
.pills a:hover{color:var(--fg);border-color:rgba(224, 195, 184, 0.42)}


/* ── Provider key guides (/api-keys/<provider>) ──────────────────────────────
   Generated by tools/build-apikeys.mjs. Three additions to what the run and
   comparison pages already use: a numbered step list, a callout for the one
   trap each provider has, and two more tag colours for the billing model. */

.steps{margin:22px 0 0;padding:0;list-style:none;counter-reset:s}
.steps li{counter-increment:s;position:relative;padding:0 0 16px 38px;font-size:15.5px;color:var(--fg2)}
.steps li::before{content:counter(s);position:absolute;left:0;top:1px;width:24px;height:24px;
  border-radius:8px;display:grid;place-items:center;font-size:11.5px;font-weight:700;
  font-family:var(--mono);background:rgba(255,255,255,0.07);color:var(--fg);
  border:1px solid var(--line)}
.steps li:last-child{padding-bottom:0}
.steps b{color:var(--fg);font-weight:600}

/* The one thing about this provider that costs people an afternoon. Left
   border rather than a full box: it is an aside in the flow, not a section. */
.note{border:1px solid var(--line);border-left:3px solid var(--amber);
  border-radius:0 12px 12px 0;background:rgba(200, 168, 119, 0.05);
  padding:18px 22px;margin:30px 0 0;font-size:15px;color:var(--fg2)}
.note b{color:var(--fg)}

.tag--free{border-color:rgba(99, 159, 107, 0.38);color:var(--mint)}
.tag--paid{border-color:rgba(200, 168, 119, 0.34);color:var(--amber)}
.tag--mixed{border-color:rgba(224, 195, 184, 0.40);color:#e0c3b8}

/* The fact table at the top of a key guide has no header row: the first cell
   of each row is the label, so it needs the weight a <th> in a header would
   have carried. */
.tablewrap td code{white-space:nowrap}
th[scope="row"]{color:var(--fg);font-weight:600;white-space:nowrap}

@media (max-width:640px){
  .mcards{grid-template-columns:1fr}
}