/* Public blog pages (/blog/posts/...), rendered by blog/post.php and blog/archive.php.
   Colours are CSS variables so the reader panel (blog/reader.js) can switch themes,
   text colour, brightness, font size and font family. */

:root,
html[data-theme="midnight"] {
  --bg: #030308; --bg-top: #0f1026; --surface: rgba(10,10,20,.6); --code-bg: #090914;
  --text: #cbd5e1; --heading: #ffffff; --muted: #94a3b8;
  --accent: #b366ff; --link: #00f0ff; --amber: #ffb800; --line: rgba(179,102,255,.18);
  --mark: rgba(255,184,0,.35); --inline-code-bg: rgba(179,102,255,.12); --inline-code: #e9d5ff;
  --scheme: dark;
}
html[data-theme="slate"] {
  --bg: #0f172a; --bg-top: #1e293b; --surface: rgba(30,41,59,.6); --code-bg: #0b1222;
  --text: #e2e8f0; --heading: #f8fafc; --muted: #94a3b8;
  --accent: #818cf8; --link: #38bdf8; --line: rgba(148,163,184,.22);
  --inline-code-bg: rgba(129,140,248,.15); --inline-code: #c7d2fe;
}
html[data-theme="oled"] {
  --bg: #000000; --bg-top: #000000; --surface: #0a0a0a; --code-bg: #0a0a0a;
  --text: #c9c9c9; --heading: #f2f2f2; --muted: #8a8a8a;
  --accent: #a78bfa; --link: #5eead4; --line: rgba(255,255,255,.12);
  --inline-code-bg: rgba(255,255,255,.08); --inline-code: #e5e5e5;
}
html[data-theme="terminal"] {
  --bg: #050a05; --bg-top: #0b160b; --surface: rgba(12,24,12,.7); --code-bg: #071007;
  --text: #a7f3a7; --heading: #d9ffd9; --muted: #6fae6f;
  --accent: #4ade80; --link: #86efac; --amber: #facc15; --line: rgba(74,222,128,.22);
  --inline-code-bg: rgba(74,222,128,.12); --inline-code: #d9ffd9;
}
html[data-theme="sepia"] {
  --bg: #f4ecd8; --bg-top: #f8f1e1; --surface: rgba(255,250,238,.75); --code-bg: #2b2620;
  --text: #4a3b2c; --heading: #2e2116; --muted: #7a6650;
  --accent: #9a4d1f; --link: #8a3b12; --amber: #a16207; --line: rgba(122,102,80,.25);
  --mark: rgba(214,158,46,.35); --inline-code-bg: rgba(122,102,80,.14); --inline-code: #5b3a1e;
  --scheme: light;
}
html[data-theme="paper"] {
  --bg: #fbfbf8; --bg-top: #ffffff; --surface: #ffffff; --code-bg: #1f2430;
  --text: #1f2937; --heading: #0b1220; --muted: #6b7280;
  --accent: #6d28d9; --link: #0e7490; --amber: #b45309; --line: rgba(15,23,42,.12);
  --mark: rgba(250,204,21,.45); --inline-code-bg: rgba(109,40,217,.08); --inline-code: #5b21b6;
  --scheme: light;
}

/* Reader preferences (set inline on <html> by reader.js) */
html { --font-size: 16px; --font-body: 'JetBrains Mono', 'Noto Sans Bengali', ui-monospace, Menlo, Consolas, monospace; }
html[data-font="sans"] { --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', 'Noto Sans Bengali', sans-serif; }
html[data-font="serif"] { --font-body: 'Literata', Georgia, 'Noto Serif Bengali', 'Noto Sans Bengali', serif; }

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; background:var(--bg); color-scheme:var(--scheme, dark); }
/* Brightness: a non-interactive overlay instead of a page-wide CSS filter (a filter on <html>
   can stop real iPhones repainting when the theme colours change). Values set by reader.js. */
body::after { content:""; position:fixed; top:0; right:0; bottom:0; left:0; pointer-events:none; z-index:39; background:var(--dim-color, #000); opacity:var(--dim, 0); mix-blend-mode:var(--dim-blend, normal); }
body { margin:0; background:radial-gradient(ellipse at top, var(--bg-top) 0%, var(--bg) 60%) fixed; color:var(--text); font:var(--font-size)/1.75 var(--font-body); }
a { color:var(--link); text-decoration:none; border-bottom:1px dashed var(--line); border-bottom:1px dashed color-mix(in srgb, var(--link) 45%, transparent); }
a:hover { color:var(--accent); border-color:var(--accent); }
mark { background:var(--mark); color:inherit; border-radius:3px; padding:0 2px; }
.wrap { max-width:760px; margin:0 auto; padding:28px 16px 64px; }
.crumbs { font-size:13px; color:var(--muted); margin-bottom:28px; display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; }
.reader-inline { margin-left:auto; display:inline-flex; align-items:center; gap:4px; border:1px solid var(--line); background:var(--surface); color:var(--text); border-radius:999px; padding:4px 12px; font:inherit; font-size:12px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.reader-inline .aa { font:700 13px 'Outfit', system-ui, sans-serif; color:var(--accent); }
.reader-inline:hover, .reader-inline[aria-expanded="true"] { border-color:var(--accent); }
.crumbs b { color:var(--amber); font-weight:400; }
h1 { font-family:'Outfit', 'Noto Sans Bengali', system-ui, sans-serif; font-size:clamp(28px, 5vw, 40px); line-height:1.2; margin:0 0 12px; color:var(--heading); }
.meta { font-size:13px; color:var(--muted); margin-bottom:8px; }
.tags { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 28px; padding:0; list-style:none; }
.tags li { font-size:12px; color:var(--accent); border:1px solid var(--line); border-radius:999px; padding:1px 10px; }
.tags a { border:0; color:inherit; } .tags a:hover { color:var(--link); }
article h2, article h3, article h4 { font-family:'Outfit', 'Noto Sans Bengali', system-ui, sans-serif; color:var(--heading); margin:2em 0 .5em; line-height:1.3; }
article h2 { font-size:1.62em; } article h3 { font-size:1.31em; } article h4 { font-size:1.12em; }
article [data-md]::before { color:var(--accent); }
article [data-md="1"]::before { content:'# '; }
article [data-md="2"]::before { content:'## '; }
article [data-md="3"]::before { content:'### '; }
article [data-md="4"]::before { content:'#### '; }
article p, article li { color:var(--text); }
article strong { color:var(--heading); }
article code { background:var(--inline-code-bg); color:var(--inline-code); padding:1px 6px; border-radius:4px; font-size:.92em; font-family:'JetBrains Mono', ui-monospace, monospace; }
article pre { background:var(--code-bg) !important; border:1px solid var(--line); border-radius:10px; padding:16px !important; overflow-x:auto; font-size:14px; }
article pre code { background:none; padding:0; color:#e2e8f0; }
article blockquote { margin:1.5em 0; padding:4px 18px; border-left:3px solid var(--accent); color:var(--muted); }
article img { max-width:100%; height:auto; border-radius:8px; }
article figure { margin:1.75em 0; display:flex; flex-direction:column; align-items:center; }
article figure img { max-height:min(80vh, 720px); width:auto; }
article figcaption { font-size:13px; color:var(--muted); text-align:center; margin-top:6px; }
article table { border-collapse:collapse; width:100%; font-size:.88em; margin:1.5em 0; display:block; overflow-x:auto; }
article th, article td { border:1px solid var(--line); padding:6px 10px; text-align:left; }
article hr { border:0; border-top:1px solid var(--line); margin:2em 0; }
.card { border:1px solid var(--line); background:var(--surface); border-radius:12px; padding:18px 20px; margin:14px 0; }
.card h2 { font-size:19px; margin:0 0 4px; font-family:'Outfit', 'Noto Sans Bengali', system-ui, sans-serif; }
.card h2 a { border:0; color:var(--heading); } .card h2 a:hover { color:var(--link); }
.card p { margin:6px 0 0; color:var(--muted); font-size:14px; }
.more { margin-top:48px; padding-top:20px; border-top:1px solid var(--line); font-size:14px; }
.more h2 { font-size:15px; color:var(--muted); font-weight:400; margin:0 0 8px; }
.more ul { margin:0; padding-left:18px; }
footer { margin-top:48px; font-size:12px; color:var(--muted); }
.draft-banner { position:sticky; top:0; z-index:5; background:#3b2a00; color:#ffb800; border:1px solid rgba(255,184,0,.4); border-radius:8px; padding:8px 14px; font-size:13px; margin-bottom:20px; }
.draft-banner a { color:#fff; }

/* archive: title + language switch + search */
.archive-head { display:flex; align-items:center; justify-content:space-between; gap:12px 16px; flex-wrap:wrap; margin-bottom:12px; }
.archive-head h1 { margin:0; }
.lang-toggle { display:inline-flex; padding:3px; gap:2px; border:1px solid var(--line); border-radius:999px; background:var(--surface); }
.lang-toggle a { border:0; color:var(--muted); font-size:13px; padding:5px 12px; border-radius:999px; white-space:nowrap; }
.lang-toggle a span { font-size:11px; opacity:.6; margin-left:2px; }
.lang-toggle a:hover { color:var(--heading); }
.lang-toggle a.on { background:var(--accent); color:#0b0614; font-weight:700; }
html[data-theme="sepia"] .lang-toggle a.on, html[data-theme="paper"] .lang-toggle a.on { color:#fff; }
.lang-toggle a.on span { opacity:.75; }
.lang-toggle a[lang="bn"] { font-family:'Noto Sans Bengali', 'JetBrains Mono', sans-serif; }

.search { position:relative; margin:18px 0 6px; }
.search input { width:100%; font:inherit; font-size:15px; color:var(--heading); background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px 44px 12px 42px; outline:none; transition:border-color .15s, box-shadow .15s; }
.search input::placeholder { color:var(--muted); }
.search input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--line); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.search .icon { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none; font-size:16px; }
.search .clear { position:absolute; right:10px; top:50%; transform:translateY(-50%); border:0; background:none; color:var(--muted); font-size:20px; cursor:pointer; padding:4px 8px; line-height:1; }
.search .clear:hover { color:var(--heading); }
.search-hint { font-size:12px; color:var(--muted); min-height:18px; margin-bottom:6px; }
.search-hint kbd { font-family:inherit; border:1px solid var(--line); border-radius:4px; padding:0 5px; font-size:11px; }
.card[hidden] { display:none; }
.empty { color:var(--muted); padding:24px 0; }

/* reader settings */
.reader-btn { position:fixed; right:18px; bottom:calc(18px + env(safe-area-inset-bottom, 0px)); z-index:40; width:48px; height:48px; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--heading); font:700 17px 'Outfit', system-ui, sans-serif; cursor:pointer; box-shadow:0 8px 24px rgba(0,0,0,.35); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.reader-btn:hover, .reader-btn[aria-expanded="true"] { border-color:var(--accent); color:var(--accent); }
.reader-panel { position:fixed; right:18px; bottom:calc(76px + env(safe-area-inset-bottom, 0px)); z-index:41; width:min(320px, calc(100vw - 32px)); max-height:calc(100vh - 100px); overflow:auto; background:var(--bg); color:var(--text); border:1px solid var(--line); border-radius:14px; padding:16px; box-shadow:0 16px 48px rgba(0,0,0,.45); font:14px/1.4 system-ui, -apple-system, 'Segoe UI', 'Noto Sans Bengali', sans-serif; }
.reader-panel[hidden] { display:none; }
.reader-panel h3 { margin:0 0 12px; font:700 15px 'Outfit', system-ui, sans-serif; color:var(--heading); display:flex; justify-content:space-between; align-items:center; }
.reader-panel h3 button { border:0; background:none; color:var(--muted); font-size:20px; cursor:pointer; line-height:1; }
.reader-panel .group { margin:0 0 14px; }
.reader-panel .label { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:0 0 7px; display:flex; justify-content:space-between; }
.swatches { display:flex; flex-wrap:wrap; gap:8px; }
.swatch { width:34px; height:34px; border-radius:50%; border:2px solid var(--line); cursor:pointer; padding:0; position:relative; }
.swatch[aria-pressed="true"] { border-color:var(--accent); box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.swatch.theme { border-radius:10px; width:44px; height:34px; font:700 13px/30px 'Outfit', system-ui, sans-serif; }
.seg { display:flex; border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.seg button { flex:1; border:0; background:none; color:var(--text); padding:7px 4px; cursor:pointer; font:inherit; font-size:13px; }
.seg button + button { border-left:1px solid var(--line); }
.seg button[aria-pressed="true"] { background:var(--accent); color:#fff; }
.reader-panel input[type=range] { width:100%; accent-color:var(--accent); }
.reader-panel .reset { width:100%; border:1px solid var(--line); background:none; color:var(--muted); border-radius:9px; padding:8px; cursor:pointer; font:inherit; font-size:13px; }
.reader-panel .reset:hover { color:var(--heading); border-color:var(--accent); }
@media (prefers-reduced-motion: reduce) { * { transition:none !important; } }