/* THE SITE'S ONE STYLE SHEET (spec 014 phase D3, T151, FR-033).
   Every static page in this directory links it and holds no style block of its own,
   so one edit restyles the whole site.

   The tokens are lifted verbatim from TYPE_TOKENS, RADIUS_STEPS and SPACE_STEPS in
   agentic-os/brain/src/theme.ts and from STYLES in src/workspace/render.ts, by way of
   specs/014-stranger-pays/mockups/changelog.html. The site and the desk are therefore
   the same product to look at. Dark tokens are deliberately absent: these pages are
   read once, before an install, and a second palette is a second thing to keep true. */

:root{--sans:"Instrument Sans",ui-sans-serif,system-ui,sans-serif;--fs-label:11px;--fs-body:13px;--fs-title:14px;--fs-head:18px;--fs-display:26px;--lh:1.5;--lh-tight:1.45;--r-2:2px;--r-4:4px;--r-6:6px;--r-8:8px;--r-10:10px;--r-12:12px;--r-16:16px;--r-pill:999px;--s-2:2px;--s-4:4px;--s-6:6px;--s-8:8px;--s-10:10px;--s-12:12px;--s-16:16px;--s-20:20px;--s-24:24px;--s-32:32px;--s-48:48px;--bg:#fbfbfa;--panel:#fff;--panel-2:#f5f5f3;--border:#e3e2e0;--border-2:#d6d5d2;--text:#191918;--muted:#6b6a67;--faint:#9b9a97;--accent:#2f6f4e;--accent-deep:#24573d;--agent-bg:#f1f6f2;--agent-border:#cfe0d5;--warn-bg:#fdf6e3;--warn-border:#e6cf8b;--warn-text:#6b5310;--danger:#a8342a;--danger-bg:#fbf1f0;--danger-border:#e9c6c2;--amber-border:#ead9b8;--amber-bg:#fdf8ee;--shadow:0 1px 2px rgba(25,25,24,.05),0 4px 14px rgba(25,25,24,.06)}

*{box-sizing:border-box}
b,strong,h1,h2,h3,h4,h5,h6{font-weight:600}
button,input,optgroup,select,textarea{font-family:inherit;font-size:inherit}
code,kbd,pre,samp{font-family:var(--sans)}
html,body{margin:0;background:var(--bg);color:var(--text)}
body{font:var(--fs-title)/var(--lh) var(--sans);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;padding:var(--s-32) 0 var(--s-48)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
p{margin:0}
.mono{font-family:var(--sans);font-size:var(--fs-body)}
.muted{color:var(--muted)}

/* the page shell every page on this site is built from */
.wrap{max-width:880px;margin:0 auto;padding:0 var(--s-20)}
.site{border:1px solid var(--border);border-radius:var(--r-12);background:var(--panel);overflow:hidden;box-shadow:var(--shadow)}
.sitetop{height:48px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:var(--s-12);padding:0 var(--s-20)}
.sitetop .home{display:flex;align-items:center;gap:var(--s-12);color:var(--text);text-decoration:none}
.sitetop .mark{width:24px;height:24px;border-radius:var(--r-6);background:var(--accent);color:#fff;display:grid;place-items:center;font-size:var(--fs-label);font-weight:600}
.sitetop b{font-size:var(--fs-title);font-weight:600}
.sitetop nav{margin-left:auto;display:flex;gap:var(--s-16);font-size:var(--fs-body);color:var(--muted)}
.sitetop nav a{color:var(--muted)}
.sitetop nav a.on{color:var(--text);font-weight:600}
.pagebody{padding:var(--s-24)}
h1.pg{margin:0 0 var(--s-4);font-size:var(--fs-display);font-weight:600;letter-spacing:-.01em}
h2.sec{margin:var(--s-24) 0 var(--s-8);font-size:var(--fs-head);font-weight:600}
.lede{color:var(--muted);font-size:var(--fs-body);margin-bottom:var(--s-24);max-width:60ch}
.prose{font-size:var(--fs-body);max-width:70ch}
.prose p+p{margin-top:var(--s-10)}

/* one release on the changelog page */
.rel{border-top:1px solid var(--border);padding-top:var(--s-16);margin-top:var(--s-24)}
.rel:first-of-type{border-top:0;margin-top:0;padding-top:0}
.relhead{display:flex;align-items:baseline;gap:var(--s-10);flex-wrap:wrap}
.ver{font-size:var(--fs-head);font-weight:600}
.date{color:var(--muted);font-size:var(--fs-body)}
.tag{font-size:var(--fs-label);font-weight:600;padding:1px 8px;border-radius:var(--r-pill);border:1px solid var(--agent-border);background:var(--agent-bg);color:var(--accent-deep)}
.entry{margin-top:var(--s-8);font-size:var(--fs-body);max-width:70ch}
.sum{margin-top:var(--s-12);border:1px solid var(--border);border-radius:var(--r-8);background:var(--bg);padding:var(--s-10) var(--s-12);font-size:var(--fs-label);color:var(--muted);display:grid;gap:var(--s-4)}
.sum .k{font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.sum .h{font-family:var(--sans);color:var(--text);word-break:break-all}

/* the verdict table. No cell is ever empty: PASS, FAIL or NOT TESTED, always. */
table{width:100%;border-collapse:collapse;margin-top:var(--s-12)}
caption{text-align:left;font-size:var(--fs-label);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-weight:600;padding-bottom:var(--s-6)}
th,td{text-align:left;padding:var(--s-6) var(--s-10);border:1px solid var(--border);font-size:var(--fs-body)}
th{background:var(--panel-2);font-weight:600;font-size:var(--fs-label);letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
th.rowhead{background:var(--bg);text-transform:none;letter-spacing:0;font-size:var(--fs-body);color:var(--text)}
td.v{font-weight:600}
td.pass{color:var(--accent-deep);background:var(--agent-bg)}
td.fail{color:var(--danger);background:var(--danger-bg)}
td.nt{color:var(--warn-text);background:var(--warn-bg)}

/* the two states a page reaches when it has nothing to list */
.empty{border:1px dashed var(--border);border-radius:var(--r-10);background:var(--bg);padding:var(--s-24);text-align:center}
.empty h2{margin:0 0 var(--s-6);font-size:var(--fs-title);font-weight:600}
.empty p{color:var(--muted);font-size:var(--fs-body);max-width:52ch;margin:0 auto}
.empty.warn{border-color:var(--warn-border);background:var(--warn-bg)}
.empty.warn p{color:var(--warn-text)}
/* `font: 500 13px/1 inherit` is INVALID CSS — `inherit` is not a font family inside the
   shorthand — so the whole declaration was dropped and every button drew at the body's
   14px/1.5. The longhands say the same thing and are applied. The family already
   inherits from the reset above. */
.btn{height:34px;padding:0 var(--s-16);border-radius:var(--r-6);border:1px solid var(--border);background:var(--panel);color:var(--text);font-size:var(--fs-body);font-weight:600;line-height:1;display:inline-flex;align-items:center;cursor:pointer;margin-top:var(--s-12)}
.btn.primary{background:var(--accent);border-color:var(--accent-deep);color:#fff}

@media (max-width:520px){
  body{padding:var(--s-16) 0 var(--s-32)}
  .sitetop{height:auto;padding:var(--s-10) var(--s-16);flex-wrap:wrap}
  .sitetop nav{margin-left:0;width:100%;gap:var(--s-12);flex-wrap:wrap}
  .pagebody{padding:var(--s-16)}
  table,caption,thead,tbody,tr,th,td{display:block}
  thead{display:none}
  tr{border:1px solid var(--border);border-radius:var(--r-8);margin-top:var(--s-10);overflow:hidden}
  th,td{border:0;border-bottom:1px solid var(--border)}
  tr td:last-child{border-bottom:0}
  /* the column header the stacked table lost: a verdict with no mail path beside it
     is a value a person cannot place */
  td.v::before{content:attr(data-mail);display:block;font-size:var(--fs-label);letter-spacing:.03em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:var(--s-2)}
}

/* ------------------------------------------------------------------------------------
   THE PRICE PAGE, AND THE TWO PAGES RENDERED FROM MARKDOWN (spec 014 phase E3, T172).
   Appended, not woven in: everything above this line is the changelog page's, and one
   stylesheet with two clearly separated halves is easier to keep true than two files.
   The tokens are the same ones. No new colour is invented here.
   ------------------------------------------------------------------------------------ */

/* the price page is wider than a page of prose, because five cards stand side by side */
.wrap.wide{max-width:1020px}
.wide .pagebody{padding:var(--s-32) var(--s-24) var(--s-24)}
.wide h1.pg{text-align:center}
.wide .lede{margin:0 auto var(--s-24);text-align:center;font-size:var(--fs-title);max-width:62ch}

/* the founding line. It carries a count, or it carries the offer and no count. */
.founding{max-width:66ch;margin:0 auto var(--s-24);border:1px solid var(--amber-border);background:var(--amber-bg);color:var(--warn-text);border-radius:var(--r-8);padding:var(--s-10) var(--s-16);font-size:var(--fs-body);text-align:center}
.founding b{color:var(--warn-text)}

/* the shop's own notice, shown only when Polar did not answer.
   `ch` resolves against the element's OWN font size, so the notice needs the founding
   line's 13px too. At the inherited 14px its 66ch was 44px wider, and the two amber
   boxes stood one inside the other with a ragged edge. */
.shopnote{max-width:66ch;margin:0 auto var(--s-24);font-size:var(--fs-body)}

.tiers{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s-10)}
.tier{position:relative;border:1px solid var(--border);border-radius:var(--r-10);background:var(--panel);padding:var(--s-16) var(--s-12);display:flex;flex-direction:column;gap:var(--s-8)}
.tier.pick{border-color:var(--accent);box-shadow:var(--shadow)}
.tier .nm{font-size:var(--fs-title);font-weight:600}
.tier .tagline{font-size:var(--fs-label);color:var(--muted);min-height:30px}
.tier .pr{font-size:var(--fs-head);font-weight:600}
.tier .pr .per{font-size:var(--fs-label);color:var(--muted);font-weight:400}
.tier .was{font-size:var(--fs-label);color:var(--muted);text-decoration:line-through}
.tier ul{margin:0;padding-left:var(--s-16);display:grid;gap:var(--s-4);font-size:var(--fs-body);color:var(--muted)}
.tier ul b{color:var(--text);font-weight:600}
/* A fixed height cut the label off. "The shop is unavailable" wraps to two lines in a
   card 151px wide, and 34px of box held 37px of text, so the second line sat outside
   the button. The height is a floor now, and the label decides the rest. */
.tier .buy{margin-top:auto;min-height:34px;padding:var(--s-6) var(--s-10);border-radius:var(--r-6);border:1px solid var(--accent);background:var(--accent);color:#fff;font-size:var(--fs-body);font-weight:600;line-height:1.25;display:inline-flex;align-items:center;justify-content:center;text-align:center;cursor:pointer}
.tier .buy:hover{text-decoration:none}
.tier .buy.ghost{background:var(--panel);color:var(--text);border-color:var(--border);font-weight:600}
/* the shop did not answer. The button is not a link, and it says why. */
.tier .buy.off{background:var(--warn-bg);border-color:var(--warn-border);color:var(--warn-text);font-weight:600;cursor:not-allowed}
.badge{position:absolute;top:-10px;left:var(--s-12);font-size:var(--fs-label);font-weight:600;padding:1px 8px;border-radius:var(--r-pill);border:1px solid var(--agent-border);background:var(--agent-bg);color:var(--accent-deep)}

/* the three sentences of SC-010, side by side under the tiers */
.words{margin-top:var(--s-32);border-top:1px solid var(--border);padding-top:var(--s-24);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-16)}
.word{border:1px solid var(--border);border-radius:var(--r-10);background:var(--bg);padding:var(--s-16)}
.word h3{margin:0 0 var(--s-6);font-size:var(--fs-title);font-weight:600}
.word p{font-size:var(--fs-body);color:var(--muted)}
.word p b{color:var(--text)}

.defs{margin-top:var(--s-24);border-top:1px solid var(--border);padding-top:var(--s-16);display:grid;grid-template-columns:190px 1fr;gap:var(--s-10) var(--s-20);font-size:var(--fs-body)}
.defs .k{color:var(--muted);font-weight:600}

/* every page's footer names the other seven pages */
.foot{margin-top:var(--s-24);border-top:1px solid var(--border);padding-top:var(--s-12);font-size:var(--fs-body);color:var(--muted);display:flex;gap:var(--s-16);flex-wrap:wrap}

/* the two pages rendered from a markdown document in docs/ */
.prose.doc{max-width:74ch}
.prose.doc h2{margin:var(--s-24) 0 var(--s-8);font-size:var(--fs-head);font-weight:600}
.prose.doc h3{margin:var(--s-16) 0 var(--s-6);font-size:var(--fs-title);font-weight:600}
.prose.doc h4{margin:var(--s-12) 0 var(--s-4);font-size:var(--fs-body);font-weight:600}
.prose.doc p{margin:var(--s-10) 0}
.prose.doc ul,.prose.doc ol{margin:var(--s-10) 0;padding-left:var(--s-20);display:grid;gap:var(--s-6)}
.prose.doc li>p:first-child{margin-top:0}
.prose.doc pre{margin:var(--s-10) 0;padding:var(--s-10) var(--s-12);border:1px solid var(--border);border-radius:var(--r-8);background:var(--panel-2);overflow-x:auto}
.prose.doc pre code{font-size:var(--fs-label);line-height:1.6}
.prose.doc code{background:var(--panel-2);border:1px solid var(--border);border-radius:var(--r-4);padding:0 4px;font-size:var(--fs-label)}
.prose.doc pre code{background:none;border:0;padding:0}
.prose.doc blockquote{margin:var(--s-10) 0;padding:var(--s-8) var(--s-12);border-left:3px solid var(--border-2);background:var(--bg);color:var(--muted)}
.prose.doc hr{border:0;border-top:1px solid var(--border);margin:var(--s-24) 0}
.prose.doc table{margin:var(--s-10) 0}
/* a wide table scrolls inside its own box. The page body never scrolls sideways. */
.scroll{overflow-x:auto;max-width:100%}

@media (max-width:900px){
  .tiers{grid-template-columns:repeat(2,1fr)}
  .words{grid-template-columns:1fr}
  .defs{grid-template-columns:1fr;gap:var(--s-2) 0}
  .defs .k{margin-top:var(--s-10)}
}
@media (max-width:520px){
  .tiers{grid-template-columns:1fr}
  .wide .pagebody{padding:var(--s-16)}
}