/* Base shared styles */
body{font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial}
.no-scrollbar::-webkit-scrollbar{ display:none }
.no-scrollbar{ -ms-overflow-style:none; scrollbar-width:none }
.btn-transient:hover { background-image:linear-gradient(to right,#2563eb,#7c3aed,#db2777); border-color:transparent; color:#fff; box-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) }

a.style-link { font-weight:500; text-decoration:underline dotted; text-underline-offset:0.2em; color:inherit;}
a.style-link:is(:hover, :focus) { color:#1d4ed8; /* Tailwind blue-700 */; }

/* Generic gradient text (default used on home/posts) */
.text-gradient{ background-image:linear-gradient(to right,#2563eb,#7c3aed,#db2777); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; color:transparent }

/* Posts list page specific styles */
body[data-page="posts"] .hero-bg{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(1200px 600px at -10% -10%, rgba(99,102,241,0.18), transparent 60%),
  radial-gradient(1000px 520px at 110% 0%, rgba(56,189,248,0.16), transparent 55%),
  radial-gradient(800px 420px at 50% 120%, rgba(59,130,246,0.14), transparent 60%),
  linear-gradient(180deg, #ffffff, rgba(255,255,255,0.7) 30%, transparent 100%);
}
body[data-page="posts"] .tag{display:inline-flex;align-items:center;border:1px solid rgb(212 212 216);background:#fff;padding:0.25rem 0.625rem;border-radius:9999px}
body[data-page="posts"] .btn-inbox, body[data-page="posts"] .btn-inbox { transition: background-image .3s ease, background-color .3s ease, color .3s ease, border-color .3s ease }
body[data-page="posts"] .btn-inbox:hover { background-image:linear-gradient(to right,#2563eb,#7c3aed,#db2777); border-color:transparent; color:#fff; box-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) }
body[data-page="posts"] .btn-inbox:hover svg { color:#fff }

/* Shelf page styles */
body[data-page="shelf"] .hero-bg{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(1200px 600px at -10% -10%, rgba(99,102,241,0.18), transparent 60%),
  radial-gradient(1000px 520px at 110% 0%, rgba(56,189,248,0.16), transparent 55%),
  radial-gradient(800px 420px at 50% 120%, rgba(59,130,246,0.14), transparent 60%);
}
/* Neutral bullets for Books & Signal */
body[data-page="shelf"] #books ul, body[data-page="shelf"] #signal ul { list-style: disc; padding-left: 1.25rem }
body[data-page="shelf"] #books li::marker, body[data-page="shelf"] #signal li::marker { color:#a3a3a3 }
/* Active sub-menu link */
body[data-page="shelf"] .submenu a.active-bg { background:#2563eb; color:#fff; border-color:transparent }
/* Subtle fade from hero */
body[data-page="shelf"] .content-fade { background: linear-gradient(180deg, rgba(255,255,255,0.8), rgba(255,255,255,0.9) 10%, #fff 30%) }
/* Content links */
body[data-page="shelf"] .content-link{ text-decoration:none; color:#111827 }
body[data-page="shelf"] .content-link:hover{ color:#0a0a0a; text-decoration:underline }
body[data-page="shelf"] .content-link svg{ display:none !important }
body[data-page="shelf"] .content-link::after{ content:""; display:inline-block; width:0.95em; height:0.95em; margin-left:0.35rem; vertical-align:-0.12em; background-color: currentColor; -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M14 3h7v7h-2V7.41l-8.29 8.3-1.42-1.42 8.3-8.29H14V3z"/><path d="M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7h-2v7z"/></svg>') no-repeat 50% 50% / 100% 100%; mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M14 3h7v7h-2V7.41l-8.29 8.3-1.42-1.42 8.3-8.29H14V3z"/><path d="M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7h-2v7z"/></svg>') no-repeat 50% 50% / 100% 100%; opacity:.6; transition:transform .15s ease, opacity .15s ease }
body[data-page="shelf"] .content-link:hover::after{ transform:translateY(-1px); opacity:.9 }

/* Fractional page styles */
/* Override gradient for fractional if desired */
body[data-page="fractional"] .text-gradient{ background-image:linear-gradient(to right,#3b82f6,#7c3aed,#db2777); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; color:transparent }
body[data-page="fractional"] .hero-bg{ background:
  radial-gradient(900px 400px at 15% -10%, rgba(99,102,241,.12), transparent),
  radial-gradient(700px 300px at 85% -5%, rgba(59,130,246,.10), transparent);
}
body[data-page="fractional"] .slice-dark{ background:
  radial-gradient(1000px 600px at 85% -10%, rgba(124,58,237,.25), transparent),
  radial-gradient(900px 500px at 10% 0%, rgba(59,130,246,.20), transparent),
  #0b1220;
}

/* Single post page styles */
body[data-page="post"] .tag{display:inline-flex;align-items:center;border:1px solid rgb(212 212 216);background:#fff;padding:0.25rem 0.625rem;border-radius:9999px}
body[data-page="post"] .hero-bg{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(1200px 600px at -10% -10%, rgba(99,102,241,0.18), transparent 60%),
  radial-gradient(1000px 520px at 110% 0%, rgba(56,189,248,0.16), transparent 55%),
  radial-gradient(800px 420px at 50% 120%, rgba(59,130,246,0.14), transparent 60%),
  linear-gradient(180deg, #ffffff, rgba(255,255,255,0.7) 30%, transparent 100%);
}
body[data-page="post"] .btn-rss, body[data-page="post"] .btn-inbox { transition: background-image .3s ease, background-color .3s ease, color .3s ease, border-color .3s ease }
body[data-page="post"] .btn-rss:hover { background-image:linear-gradient(to right,#2563eb,#7c3aed,#db2777); border-color:transparent; color:#fff; box-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) }
body[data-page="post"] .btn-rss:hover svg { color:#fff }
body[data-page="post"] .btn-inbox:hover { background-color:#f3f4f6 }

/* TOC styles */
body[data-page="post"] .toc a { transition: all .2s ease-in-out; position: relative }
body[data-page="post"] .toc a:hover { color:#1e40af; transform:translateX(4px) }
body[data-page="post"] .toc a.active { font-weight:600; color:#1e40af; border-left:2px solid #1e40af; padding-left:.5rem }
body[data-page="post"] .toc a.active.pl-4 { padding-left:1.5rem }
body[data-page="post"] .toc a.pl-4 { padding-left:1.5rem }

/* Reading progress bar */
body[data-page="post"] .progress-bar{ position:fixed; top:0; left:0; height:4px; background-color:#3b82f6; width:0%; transition:width .1s linear; z-index:50 }

/* Post prose heading tweaks */
body[data-page="post"] .prose h2{ font-weight:700; font-size:1.5rem; line-height:2rem; margin-top:2rem; margin-bottom:.75rem; color:#404040; scroll-margin-top:96px }
body[data-page="post"] .prose h3{ font-weight:600; font-size:1.25rem; line-height:1.75rem; margin-top:1.5rem; margin-bottom:.5rem; color:#404040; scroll-margin-top:96px }
body[data-page="post"] .prose p{ margin-bottom:1rem }
body[data-page="post"] .prose a {color: #2563eb; /* Tailwind blue-600 */ text-decoration:underline dotted; text-underline-offset:0.2em;}
body[data-page="post"] .prose a:hover { color: #1d4ed8; /* blue-700 */ }