/* Shared styles for server-rendered pages (/browse, /p/:slug, /signin, /library).
   The landing page keeps its own inline CSS so it stays a single self-contained file.
   Design system: white ground, slate ink, one indigo accent. Inter 400/500/600. */
:root{
  --bg:#ffffff; --bg-soft:#f6f7f9;
  --line:#e6e8ec; --line-2:#d8dbe2;
  --ink:#12151c; --ink-2:#4b5263; --ink-3:#656b7e;
  --accent:#3b5bdb; --accent-deep:#2f49b8; --accent-soft:#eef1fd;
  /* The logo's own blue. Used ONLY inside the wordmark so the lockup is
     internally consistent. Do not spread it to buttons, links or chips: the
     page is deliberately calmer than the mark. */
  --logo-blue:#1c00ff;
  --err:#b42318;
  --radius:12px; --maxw:1060px;
  --shadow-sm:0 1px 2px rgba(18,21,28,.05);
  --shadow-md:0 1px 2px rgba(18,21,28,.04), 0 8px 24px rgba(18,21,28,.07);
  --font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font:400 16px/1.65 var(--font);-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
a{color:inherit}
h1,h2,h3{letter-spacing:-.025em;line-height:1.2}

/* ---------- nav ---------- */
nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:62px;gap:20px}
/* Wordmark. The mark is a wide glyph, so it is sized by HEIGHT and left to find
   its own width. gap, letter-spacing and word-spacing are all pulled in so the
   lockup reads as one object rather than an icon sitting next to some words. */
.logo{display:flex;align-items:center;gap:7px;text-decoration:none;font-weight:600;
  font-size:16.5px;letter-spacing:-.032em;word-spacing:-1px}
.logo .mark{height:21px;width:auto;display:block;flex-shrink:0}
.logo em{font-style:italic;font-weight:500;color:var(--logo-blue);margin:0 -.5px}
.navlinks{display:flex;gap:24px;align-items:center;font-size:14.5px;color:var(--ink-2)}
.navlinks a{text-decoration:none;transition:color .15s}
.navlinks a:hover{color:var(--ink)}
.btn-sm{padding:8px 17px;border-radius:999px;background:var(--accent);color:#fff;font-weight:500;
  text-decoration:none;font-size:14px;transition:background .18s;flex-shrink:0}
.btn-sm:hover{background:var(--accent-deep);color:#fff}
/* Narrow screens: shed nav links rather than let the Sign in button run off the edge. */
@media(max-width:620px){
  nav .wrap{gap:12px}
  .navlinks{gap:16px}
  .navlinks a:not(.btn-sm){display:none}
  .logo{font-size:15.5px}
  .logo .mark{height:19px}
}

/* ---------- page header ---------- */
header{padding:52px 0 28px}
h1{font-size:clamp(29px,4.4vw,42px);font-weight:600;letter-spacing:-.03em;margin-bottom:12px}
.lede{color:var(--ink-2);max-width:640px;font-size:16.5px}

/* ---------- filters ---------- */
.filters{display:flex;flex-wrap:wrap;gap:9px;margin:26px 0 8px}
.chip{padding:8px 15px;border:1px solid var(--line-2);border-radius:999px;background:#fff;
  color:var(--ink-2);font-size:14px;text-decoration:none;transition:.15s;white-space:nowrap}
.chip:hover{border-color:var(--accent);color:var(--ink)}
.chip.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-deep)}
.count{color:var(--ink-3);font-size:13.5px;margin:18px 0 22px}

/* ---------- cards ---------- */
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));padding-bottom:70px}
.card{display:flex;flex-direction:column;padding:22px;border:1px solid var(--line);border-radius:var(--radius);
  background:#fff;box-shadow:var(--shadow-sm);text-decoration:none;
  transition:border-color .18s,box-shadow .18s,transform .18s}
.card:hover{border-color:var(--line-2);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.card .top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:9px}
.card h3{font-size:15.5px;font-weight:600;line-height:1.38;letter-spacing:-.012em;flex:1}
.price{font-size:14.5px;font-weight:600;color:var(--accent-deep);white-space:nowrap}
.price.paid{color:var(--ink)}
.card p{color:var(--ink-2);font-size:13.5px;line-height:1.6;margin-bottom:14px;flex:1}
.meta{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.tag{padding:4px 10px;border:1px solid var(--line);border-radius:999px;background:#fff;
  color:var(--ink-3);font-size:11.5px}
.tag.kind{color:var(--accent-deep);border-color:var(--accent-soft);background:var(--accent-soft)}

/* ---------- listing detail ---------- */
.detail{display:grid;grid-template-columns:1.55fr .95fr;gap:52px;padding:44px 0 90px;align-items:start}
@media(max-width:900px){.detail{grid-template-columns:1fr;gap:32px}}
.detail h1{font-size:clamp(25px,3.4vw,35px);margin-bottom:14px}
.summary{font-size:17.5px;color:var(--ink-2);margin-bottom:26px}
.section{margin-bottom:34px}
.section h2{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  font-weight:600;margin-bottom:13px}
.section p{color:var(--ink-2);margin-bottom:12px}
.section ul{color:var(--ink-2);margin:0 0 12px 20px}
.section li{margin-bottom:6px}
pre{background:var(--bg-soft);border:1px solid var(--line);border-radius:10px;padding:20px;overflow-x:auto;
  color:var(--ink-2);font:400 13.5px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;
  word-wrap:break-word}
.buybox{position:sticky;top:86px;padding:28px;border:1px solid var(--line);border-radius:var(--radius);
  background:#fff;box-shadow:var(--shadow-md)}
.buybox .amt{font-size:34px;font-weight:600;letter-spacing:-.03em;margin-bottom:6px}
.buybox .sub{color:var(--ink-3);font-size:14px;margin-bottom:20px}
button.buy{width:100%;padding:13px 20px;border:1px solid transparent;border-radius:999px;font:500 15px/1.2 var(--font);
  background:var(--accent);color:#fff;cursor:pointer;
  transition:background .18s,transform .16s}
button.buy:hover:not(:disabled){background:var(--accent-deep);transform:translateY(-1px)}
button.buy:disabled{opacity:.55;cursor:not-allowed}
.soon{margin-top:12px;font-size:13.5px;color:var(--ink-3);text-align:center}
.facts{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.fact{display:flex;justify-content:space-between;gap:14px;padding:7px 0;font-size:14px}
.fact span{color:var(--ink-3)}
.fact b{font-weight:500;text-align:right}
.back{display:inline-block;margin:26px 0 0;color:var(--ink-2);text-decoration:none;font-size:14.5px}
.back:hover{color:var(--ink)}
.empty{padding:70px 0;text-align:center;color:var(--ink-2)}

/* ---------- forms (signin) ---------- */
.row{display:flex;gap:9px}
@media(max-width:560px){.row{flex-direction:column}}
input[type=email]{flex:1;min-width:0;padding:13px 17px;border-radius:999px;border:1px solid var(--line-2);
  background:#fff;color:var(--ink);font:400 15px/1.2 var(--font);box-shadow:var(--shadow-sm);
  transition:border-color .15s,box-shadow .15s}
input[type=email]::placeholder{color:var(--ink-3)}
input[type=email]:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
form button[type=submit]{padding:13px 24px;border:1px solid transparent;border-radius:999px;cursor:pointer;white-space:nowrap;
  background:var(--accent);color:#fff;font:500 15px/1.2 var(--font);transition:background .18s,transform .16s}
form button[type=submit]:hover:not(:disabled){background:var(--accent-deep);transform:translateY(-1px)}
form button[type=submit]:disabled{opacity:.55;cursor:not-allowed}
.note{margin-top:13px;font-size:13.5px;color:var(--ink-3);min-height:20px}
.note.ok{color:var(--accent-deep)}
.note.err{color:var(--err)}

/* ---------- panels (library banner) ---------- */
.panel{padding:24px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow-sm)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:34px 0 44px;color:var(--ink-3);font-size:13.5px}
footer .wrap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center}
footer a{color:var(--ink-2);text-decoration:none;margin-right:18px}
footer a:hover{color:var(--ink)}

/* ---------- composer form controls ----------
   Only input[type=email] was styled before, because the waitlist box was the only
   form on the site. The listing composer adds text inputs, textareas and selects,
   which would otherwise render as browser defaults next to everything else.
   Kept on the indigo accent, never the logo blue. */
.fieldrow input[type=text],
.fieldrow textarea,
.fieldrow select{
  width:100%;
  padding:11px 14px;
  border:1px solid var(--line-2);
  border-radius:10px;
  background:#fff;
  color:var(--ink);
  font:400 15.5px/1.55 var(--font);
  transition:border-color .15s, box-shadow .15s;
}
.fieldrow textarea{resize:vertical;min-height:64px;line-height:1.6}
/* The prompt body is code-adjacent: people paste structured text into it and
   need to see alignment, so it gets a mono face while the prose fields do not. */
.fieldrow textarea#prompt_body{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:14px;
}
.fieldrow select{
  appearance:none;
  padding-right:38px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%23656b7e' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
}
.fieldrow input[type=text]:focus,
.fieldrow textarea:focus,
.fieldrow select:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.fieldrow label{font-size:14.5px;color:var(--ink)}
/* Save draft sits next to Publish and must read as the quieter of the two. */
button.buy[value=""]{background:var(--ink-2)}
button.buy[value=""]:hover:not(:disabled){background:var(--ink)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:.001ms !important;animation-duration:.001ms !important}
  .card:hover,button.buy:hover:not(:disabled),form button[type=submit]:hover:not(:disabled){transform:none}
}