/* Public "about JollyDrivers" pages. Plain static HTML, no Blazor, no script — written to be read by
   people and by AI crawlers that never execute JavaScript. Dark only, like the app. */
:root { --bg:#121212; --surface:#1e1e1e; --text:#e0e0e0; --muted:#9e9e9e; --accent:#ffb300; --line:rgba(255,255,255,.12); color-scheme:dark; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:17px/1.6 Roboto, system-ui, -apple-system, "Segoe UI", sans-serif; }
header, main, footer { max-width:760px; margin:0 auto; padding:0 16px; }
header { padding-top:20px; display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; border-bottom:1px solid var(--line); padding-bottom:14px; }
header .brand { font-weight:700; color:var(--accent); text-decoration:none; margin-right:auto; font-size:1.1rem; }
nav a { color:var(--text); text-decoration:none; display:inline-block; padding:10px 4px; min-height:44px; }
nav a[aria-current="page"] { color:var(--accent); }
h1 { font-size:1.9rem; line-height:1.25; margin:28px 0 8px; }
h2 { font-size:1.3rem; margin:32px 0 8px; color:var(--accent); }
h3 { font-size:1.08rem; margin:22px 0 4px; }
.lede { font-size:1.15rem; color:var(--text); }
p, li { color:var(--text); }
.muted { color:var(--muted); }
a { color:var(--accent); }
ul { padding-left:1.2em; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:4px 16px 12px; margin:14px 0; }
.status { font-size:.85rem; color:var(--muted); }
/* Markdig wraps each changelog entry in <p>; without this /releases double-spaces its lists. */
.card li p { margin:0; }
.cta { display:inline-block; background:var(--accent); color:#000; font-weight:600; padding:12px 18px; border-radius:8px; text-decoration:none; margin:8px 0; min-height:44px; }
footer { border-top:1px solid var(--line); margin-top:40px; padding-top:14px; padding-bottom:30px; font-size:.9rem; color:var(--muted); }

/* The blog (PublicBlogHtml): the index's post cards, a post's reading column, and the social row
   the footer carries once an admin has entered any accounts. */
.post-list { list-style:none; padding:0; margin:18px 0; display:grid; gap:12px; }
.post-card { display:flex; flex-direction:column; gap:4px; padding:16px; border-radius:14px; border:1px solid var(--line); background:var(--surface); text-decoration:none; color:var(--text); min-height:44px; }
.post-card:hover { border-color:rgba(255,179,0,.5); }
.post-card b { font-size:1.12rem; color:var(--text); }
.post-card span:last-child { color:var(--muted); }
.post-meta { font-size:.85rem; color:var(--muted); }
.post-meta a { color:var(--accent); }
.post h1 { margin-top:10px; }
.prose { font-size:1.05rem; }
.prose h2 { margin-top:34px; }
.prose p, .prose li { line-height:1.75; }
.prose blockquote { margin:18px 0; padding:4px 16px; border-left:3px solid var(--accent); color:var(--muted); }
.prose code { font:.92em ui-monospace, Consolas, monospace; background:rgba(255,255,255,.07); padding:2px 6px; border-radius:6px; word-break:break-all; }
.prose img { max-width:100%; height:auto; border-radius:12px; }
.socials { list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px; padding:0; }
.socials a { width:44px; height:44px; display:grid; place-items:center; border-radius:12px; border:1px solid var(--line); background:var(--surface); color:var(--text); }
.socials a:hover { color:var(--accent); border-color:rgba(255,179,0,.5); }