/* 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;
  --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}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:600;font-size:16.5px;letter-spacing:-.022em}
.logo .mark{width:27px;height:27px;border-radius:7px;background:var(--accent);display:grid;place-items:center;flex-shrink:0;box-shadow:var(--shadow-sm)}
.logo .mark svg{width:16px;height:16px;display:block}
.logo em{font-style:italic;font-weight:500;color:var(--accent)}
.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}
}

/* ---------- 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)}

@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}
}