/*
Theme Name: Solana Split Media
Theme URI: https://example.com/solana-split
Author: Custom Design
Description: App-like purple-to-teal split-pane WordPress theme with responsive post feed, centered entry titles and metadata, styled content headings, and a polished dropdown navigation.
Version: 2.13.0
Text Domain: solana-split
*/

:root {
  --bg-deep: #030108;
  --bg-purple-mid: #0a0320;
  --bg-purple-glow: #1a0742;
  --bg-card: #0b0420;
  --text-primary: #f5f3ff;
  --text-muted: #a79ec0;
  --sol-purple: #9945ff;
  --sol-purple-dim: rgba(153, 69, 255, 0.18);
  --sol-teal: #14f195;
  --sol-teal-dim: rgba(20, 241, 149, 0.14);
  --sol-gradient: linear-gradient(135deg, #9945ff 0%, #14f195 100%);
  --border-subtle: rgba(186, 148, 255, 0.16);
  --sidebar-desktop-w: 38%;
  --sidebar-mobile-w: 45%;
  --top-bar-h: 40px;
}

/* Keep the compact app layout without erasing every plugin/block's defaults.
   The old universal margin/padding reset also removed native list and
   heading spacing from WordPress content and third-party components. */
*, *::before, *::after {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  padding: 0;
}
/* Reset only the theme-owned UI elements that rely on a flush layout. */
.app-shell :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol) {
  margin-block: 0;
}
.app-shell :where(ul, ol) {
  padding-inline-start: 0;
}

html, body {
  height: 100dvh;
  width: 100vw;
  overflow: hidden;
  background-color: var(--bg-deep);
  color: var(--text-primary);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body.admin-bar .app-shell {
  height: calc(100dvh - 32px);
}
@media screen and (max-width: 782px) {
  body.admin-bar .app-shell {
    height: calc(100dvh - 46px);
  }
}

/* ============================================================
   SPLIT-PANE APP SHELL — full viewport height
   Desktop:  Left  = sidebar (top icon bar + posts feed)
            Right = scrollable reader container only
   Mobile:   Top  = top icon bar (full-width, moved by JS)
            Mid  = reader container (content)
            Bot  = horizontal post scroller
   ============================================================ */
.app-shell {
  display: flex;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  position: relative;
  background: radial-gradient(circle at 20% 0%, #170532 0%, #030108 70%);
}

/* ============================================================
   LEFT PANEL: POSTS-ONLY SIDEBAR (always visible, no minimizer)
   ============================================================ */
.left-panel {
  width: var(--sidebar-desktop-w);
  min-width: 240px;
  max-width: 85%;
  height: 100%;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(153, 69, 255, 0.34) 0%, transparent 62%),
    radial-gradient(80% 42% at 50% 108%, rgba(20, 241, 149, 0.11) 0%, transparent 58%),
    linear-gradient(180deg, #0e0426 0%, #070117 55%, #020106 100%);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.left-panel-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  /* overflow: visible so the top-icon-bar's absolute-positioned
     dropdowns can drop down into the feed-scroll area (desktop).
     The feed-scroll owns its own overflow-y: auto so its cards
     are still clipped correctly. */
  overflow: visible;
  min-width: 240px;
}

/* Scrollable Post Feed (grid on desktop, horizontal rail on mobile) */
.feed-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  grid-auto-rows: max-content;
  gap: 10px;
  align-content: start;
}

/* Solana Purple-to-Teal Gradient Scrollbars */
.feed-scroll::-webkit-scrollbar,
#readerContainer::-webkit-scrollbar {
  width: 5px;
}

.feed-scroll::-webkit-scrollbar-thumb,
#readerContainer::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(153, 69, 255, 0.75), rgba(20, 241, 149, 0.75));
  border-radius: 99px;
}

.feed-scroll::-webkit-scrollbar-thumb:hover,
#readerContainer::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #9945ff, #14f195);
}

/* ============================================================
   TEXT-BASED POST CARD
   Horizontal layout: site-icon thumbnail on the left + post title
   on the right. The icon is shown cleanly — no extra background,
   border, or shadow on the frame, so the Solana-gradient SVG icon
   is the only thing visible. Sized to balance a 2-line title.
   ============================================================ */
.post-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(21, 8, 49, 0.7) 0%, rgba(9, 2, 24, 0.78) 100%);
  box-shadow: inset 0 0 0 1px rgba(153, 69, 255, 0.14), 0 4px 14px rgba(0, 0, 0, 0.32);
  text-decoration: none;
  color: var(--text-primary);
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s ease, background 0.22s ease;
  overflow: hidden;
}

.post-card:hover,
.post-card.is-active,
.post-card:focus-visible {
  transform: translateY(-2px);
  background: linear-gradient(145deg, rgba(30, 12, 64, 0.85) 0%, rgba(14, 4, 36, 0.9) 100%);
  box-shadow:
    inset 0 0 0 1.5px var(--sol-teal),
    0 0 22px -4px rgba(153, 69, 255, 0.5),
    0 8px 22px -6px rgba(20, 241, 149, 0.28);
}

.post-card:focus-visible {
  outline: 2px solid var(--sol-teal);
  outline-offset: 2px;
}

/* Site-icon thumbnail — clean, no extra frame.
   The <img> itself carries the Solana-gradient + site-icon SVG,
   which fills the entire box so no background/border is needed. */
.post-card-icon {
  position: relative;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
}

.post-card-icon-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.post-card-body {
  flex: 1;
  min-width: 0;
  position: relative;
}

.post-card-title {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: #ffffff;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-card:hover .post-card-title,
.post-card.is-active .post-card-title,
.post-card:focus-visible .post-card-title {
  color: var(--sol-teal);
}

/* "New!" Badge in Full Solana Gradient */
.post-card-new {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--sol-gradient);
  color: #0a0114;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* ============================================================
   RIGHT PANEL: body content area = reader container only.
   The top icon bar has moved into the left sidebar / mobile
   bottom sheet, so the right panel is now scrollable reader
   content all the way to the top edge.
   ============================================================ */
.right-panel {
  flex: 1;
  height: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  background:
    radial-gradient(circle at 82% 10%, rgba(153, 69, 255, 0.42) 0%, rgba(102, 32, 204, 0.18) 38%, transparent 68%),
    radial-gradient(circle at 18% 88%, rgba(20, 241, 149, 0.13) 0%, transparent 50%),
    linear-gradient(160deg, #13062e 0%, #08021c 48%, #020108 100%);
}

/* ============================================================
   PERSISTENT TOP ICON BAR — lives at the top of the left
   sidebar (desktop) OR at the top of .app-shell (mobile, moved
   by JS). Thin tinted band that lets the native gradient show
   through; on mobile this collapses to an even thinner rail
   acting as a typical top navigation.

   v2.10.1 — the bar is now a THREE-ZONE HEADER:

     [ left icon zone | centered site identity | right icon zone ]

   Home (🏠) + Help (?) anchor the LEFT zone, Menu (☰) anchors
   the RIGHT zone, and the site icon + site title sit dead-center.
   Both side zones flex from the SAME basis (1 1 0), so they
   always split the bar's leftover space equally — which keeps
   the site identity perfectly centered no matter how many
   icons either side ends up holding. Admin-added custom icons
   auto-balance: each new icon joins whichever side currently
   has fewer icons, so the two sides never drift apart.
   ============================================================ */
.top-icon-bar {
  position: relative;
  z-index: 250;
  flex-shrink: 0;
  height: var(--top-bar-h);
  background: rgba(10, 3, 24, 0.55);
  border-bottom: 1px solid var(--border-subtle);
}

.top-icon-bar-track {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 100%;
  padding: 0 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.top-icon-bar-track::-webkit-scrollbar {
  display: none;
}

/* Side zones — equal width (identical flex basis + grow) so the
   centered site identity stays dead-center. Icons hug the outer
   edges: Home + Help (?) cluster far-left, Menu (☰) sits far-right,
   and admin-added custom icons auto-balance between the two
   (each joins the side that currently has fewer icons). */
.header-side {
  display: flex;
  align-items: center;
  height: 100%;
  flex: 1 1 0;
  gap: 2px;
}

.header-side-left {
  justify-content: flex-start;
}

.header-side-right {
  justify-content: flex-end;
}

/* Site title is a single accessible link: FIRST WORD · ICON · REST.
   The small logo is now the visual separator, not a leading avatar. */
.header-identity {
  flex: 0 1 auto;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
}

.header-identity-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  max-width: 100%;
  height: 100%;
  text-decoration: none;
}

.header-identity-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  max-width: 100%;
  font-size: 0.91rem;
  font-weight: 830;
  letter-spacing: -0.025em;
  line-height: 1;
  color: #fff;
  text-shadow: 0 0 14px rgba(186, 148, 255, 0.22);
}

.header-identity-word {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-identity-icon {
  display: block;
  flex: 0 0 auto;
  width: 23px;
  height: 23px;
  object-fit: cover;
  border-radius: 5px;
  filter: drop-shadow(0 0 5px rgba(153, 69, 255, 0.22));
  transition: transform 0.2s ease, filter 0.2s ease;
}

.header-identity-link:hover .header-identity-icon {
  transform: scale(1.09);
  filter: drop-shadow(0 0 7px rgba(20, 241, 149, 0.4));
}
.header-identity-link:hover .header-identity-word--last {
  color: #b5ffdf;
}
.header-identity-link:focus-visible {
  outline: 2px solid var(--sol-teal);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Flat Header Icon Buttons — fixed-width square hit areas
   centered inside their side zone.
   v2.9.4 — base icon color is pure white (was --text-muted). */
.top-icon-bar-track .header-icon-btn {
  flex: 0 0 auto;
  width: 40px;
  min-width: 40px;
  height: 100%;
  background: transparent;
  border: none;
  box-shadow: none;
  color: #ffffff;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.18s ease, transform 0.18s ease;
}

/* Both inlined SVGs and Lucide-injected SVGs use the same sizing. */
.top-icon-bar-track .header-icon-btn svg,
.top-icon-bar-track .header-icon-btn .header-icon-svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.top-icon-bar-track .header-icon-btn:hover,
.top-icon-bar-track .header-icon-btn[aria-expanded="true"] {
  color: var(--sol-teal);
  transform: scale(1.08);
}

.top-icon-bar-track .header-icon-btn.is-active {
  color: var(--sol-teal);
}

/* Dropdown panels drop straight down from the top bar (desktop).
   They overlay the feed-scroll below the bar. .left-panel-inner
   is overflow: visible so they can extend beyond it if needed. */
.top-icon-bar .sidebar-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 70;
  background: rgba(8, 2, 20, 0.97);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  padding: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.75);
  max-width: 520px;
  margin: 0 auto;
  border-radius: 0 0 14px 14px;
  border: 1px solid var(--border-subtle);
  border-top: none;
  max-height: 70vh;
  overflow-y: auto;
}

.top-icon-bar .sidebar-dropdown.is-open {
  display: block;
}

.top-icon-bar .sidebar-dropdown.is-open::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--sol-gradient);
  opacity: 0.85;
}

.help-explainer-text {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.help-explainer-text a {
  color: var(--sol-teal);
  text-decoration: underline;
}

.help-explainer-text p + p {
  margin-top: 8px;
}

.sidebar-dropdown ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-dropdown a {
  color: var(--text-primary);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 8px 10px;
  border-radius: 8px;
  display: block;
  transition: background 0.2s, color 0.2s;
}

.sidebar-dropdown a:hover {
  background: var(--sol-teal-dim);
  color: var(--sol-teal);
}

/* ============================================================
   HAMBURGER MENU — v2.11.0
   App-style navigation tiles for both an assigned WP menu (which has
   a .menu-* wrapper) and WordPress' default wp_list_pages fallback.
   Scoped to #sidebarDropdown: not applied to post lists or content.
   ============================================================ */
#sidebarDropdown {
  width: min(100%, 520px);
  padding: 16px;
  /* Opaque underlay: avoid reader text bleeding through the open mobile menu. */
  background: #080214;
}
#sidebarDropdown > ul,
#sidebarDropdown > div > ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 155px), 1fr));
  align-items: start;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#sidebarDropdown li { min-width: 0; list-style: none; }
#sidebarDropdown > ul > li > a,
#sidebarDropdown > div > ul > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  min-height: 45px;
  padding: 10px 12px;
  border: 1px solid rgba(186, 148, 255, 0.22);
  border-radius: 10px;
  background: linear-gradient(140deg, rgba(35, 13, 71, 0.78), rgba(12, 4, 31, 0.88));
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
  color: var(--text-primary);
  line-height: 1.35;
  overflow-wrap: anywhere;
}
#sidebarDropdown > ul > li > a::after,
#sidebarDropdown > div > ul > li > a::after {
  content: "";
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  background: var(--sol-teal);
  opacity: 0.78;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M7 7h10v10'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M7 7h10v10'/%3E%3C/svg%3E") center / contain no-repeat;
}
#sidebarDropdown a:hover,
#sidebarDropdown a:focus-visible,
#sidebarDropdown .current-menu-item > a,
#sidebarDropdown .current_page_item > a {
  color: var(--sol-teal);
  background: rgba(20, 241, 149, 0.12);
  border-color: rgba(20, 241, 149, 0.40);
  outline-offset: 2px;
}
#sidebarDropdown a:focus-visible { outline: 2px solid var(--sol-teal); }
#sidebarDropdown ul ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 7px 0 0;
  padding: 0 0 0 9px;
  border-left: 1px solid rgba(20, 241, 149, 0.28);
}
#sidebarDropdown ul ul a {
  display: block;
  padding: 7px 9px;
  font-size: 0.82rem;
  line-height: 1.4;
}

/* Scrollable body content (posts/pages/archives render here) */
#readerContainer {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 24px 44px 48px;
}

/* Homepage SEO Explainer Hero */
.seo-explainer {
  max-width: 680px;
  margin: 6vh auto 0;
  padding: 42px;
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(28, 10, 60, 0.6) 0%, rgba(9, 2, 22, 0.82) 100%);
  border: 1px solid rgba(153, 69, 255, 0.3);
  backdrop-filter: blur(16px);
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.6), 0 0 46px -10px rgba(153, 69, 255, 0.4);
}

.seo-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sol-teal);
  margin-bottom: 16px;
}

.seo-badge span {
  color: var(--sol-purple);
}

.seo-explainer h1 {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin-bottom: 18px;
  background: linear-gradient(95deg, #ffffff 20%, #b98cff 60%, #14f195 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.seo-explainer p {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--text-muted);
  margin-bottom: 28px;
}

/* Solana-styled buttons: gradient background + white bold text */
.sol-cta-btn,
.sol-btn,
button.sol-btn,
input[type="submit"].sol-btn,
input[type="button"].sol-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 10px;
  background: var(--sol-gradient);
  color: #ffffff;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: none;
  cursor: pointer;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  box-shadow: 0 8px 26px -4px rgba(153, 69, 255, 0.55), 0 8px 24px -6px rgba(20, 241, 149, 0.5);
  transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
}

.sol-cta-btn:hover,
.sol-btn:hover,
button.sol-btn:hover,
input[type="submit"].sol-btn:hover,
input[type="button"].sol-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  color: #ffffff;
  box-shadow: 0 12px 32px -4px rgba(153, 69, 255, 0.7), 0 12px 30px -4px rgba(20, 241, 149, 0.6);
}

.sol-cta-btn:active,
.sol-btn:active {
  transform: translateY(0);
  filter: brightness(0.96);
}

/* Homepage: the same text-based cards as the persistent post stream,
   repeated below the opening H1 and paragraph for touch-first browsing. */
.home-post-section {
  max-width: 920px;
  margin: 28px auto 14px;
  padding: 0 0 12px;
}

.home-post-heading {
  text-align: center;
  margin-bottom: 16px;
}

.home-post-heading h2 {
  display: inline-block;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.home-post-heading p {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 0.78rem;
}

.home-post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 10px;
}

.home-post-grid .post-card {
  min-height: 54px;
}

.post-cards-empty {
  padding: 14px;
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* Only the mobile footer rail displays the compact heading/progress. */
.mobile-feed-header,
.mobile-feed-progress {
  display: none;
}

/* Single / Page / Archive Content Area */
.reader-article {
  max-width: 920px;
  margin: 0 auto;
}

/* ============================================================
   EDITORIAL ENTRY MASTHEAD — polished glass + on-chain accents.
   Sits directly above video, image, or text without dominating the
   reading pane. The content remains the focal point.
   ============================================================ */
.reader-entry-header {
  isolation: isolate;
  position: relative;
  overflow: hidden;
  padding: clamp(22px, 3vw, 34px) clamp(21px, 3vw, 36px) 22px;
  margin: 0 0 26px;
  border-radius: 18px;
  border: 1px solid rgba(170, 119, 250, 0.25);
  background:
    radial-gradient(ellipse at 100% 0%, rgba(153, 69, 255, 0.20), transparent 52%),
    radial-gradient(ellipse at 0% 100%, rgba(20, 241, 149, 0.065), transparent 50%),
    linear-gradient(140deg, rgba(23, 10, 51, 0.96), rgba(7, 4, 22, 0.95) 76%);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

/* Gradient signal across the top, then an almost invisible wire grid. */
.reader-entry-header::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #9945ff 0%, #a070ff 44%, #14f195 100%);
}
.reader-entry-header::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
  top: 0;
  right: 0;
  width: 39%;
  height: 90%;
  background-image:
    linear-gradient(rgba(177, 132, 255, 0.042) 1px, transparent 1px),
    linear-gradient(90deg, rgba(177, 132, 255, 0.042) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(270deg, #000 0%, transparent 100%);
  -webkit-mask-image: linear-gradient(270deg, #000 0%, transparent 100%);
}

.reader-entry-overline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-bottom: 15px;
  font-size: 0.67rem;
  font-weight: 760;
  line-height: 1.45;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}
.reader-entry-overline-signal {
  display: inline-block;
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  transform: rotate(45deg);
  border-radius: 1px;
  background: var(--sol-teal);
  box-shadow: 0 0 10px rgba(20, 241, 149, 0.36);
}
.reader-entry-overline-kind { color: #a9f6d7; }
.reader-entry-overline-separator { color: #7659a5; font-weight: 600; }
.reader-entry-overline-brand {
  color: #a99ec2;
  letter-spacing: 0.09em;
  overflow-wrap: anywhere;
}

.reader-entry-title {
  display: block;
  max-width: 100%;
  margin: 0;
  text-align: left;
  font-size: clamp(1.65rem, 2.75vw, 2.6rem);
  font-weight: 830;
  letter-spacing: -0.047em;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.reader-entry-title-text {
  color: #fff; /* fallback */
  background: linear-gradient(100deg, #ffffff 0%, #f7f0ff 41%, #caa4ff 77%, #95ffe1 120%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Fine-line separation instead of loud filled chips. */
.reader-entry-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px 20px;
  padding-top: 16px;
  margin-top: 22px;
  border-top: 1px solid rgba(184, 149, 237, 0.15);
}
.reader-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  max-width: 100%;
  color: #bbb0d1;
  font-size: 0.75rem;
  font-weight: 620;
  line-height: 1.45;
  letter-spacing: 0.005em;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color 0.2s ease;
}
.reader-meta-item .reader-meta-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: #a875ef;
}
.reader-meta-icon svg {
  display: block;
  width: 14px;
  height: 14px;
  stroke-width: 1.9;
}
.reader-meta-item-category,
.reader-meta-item-author { color: #83e8c1; }
.reader-meta-item-category .reader-meta-icon,
.reader-meta-item-author .reader-meta-icon { color: var(--sol-teal); }
a.reader-meta-item:hover { color: #fff; }
a.reader-meta-item:focus-visible {
  outline: 2px solid var(--sol-teal);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ============================================================
   POST TAG PILLS — v2.10.1
   Centered row of tag pills under the post content, rendered
   only when the post actually has tags. Same pill language as
   the meta row above so the whole entry reads as one system.
   ============================================================ */
.reader-entry-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 30px;
}

.reader-entry-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(186, 148, 255, 0.07);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}

.reader-entry-tag:hover {
  color: var(--sol-teal);
  border-color: rgba(20, 241, 149, 0.35);
  background: var(--sol-teal-dim);
  transform: translateY(-1px);
}

.reader-title {
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.reader-meta {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.reader-content {
  font-size: 1.02rem;
  line-height: 1.75;
  color: #e2ddf0;
}

.reader-content > * + * {
  margin-top: 1.35em;
}

/* ============================================================
   CONTENT HEADING SYSTEM — strong hierarchy for long-form reading.
   The old tiny centered headings/identical hash icons made an article
   look like a column of repeated badges. H1 through H6 now have a
   distinct role, with Solana accents used sparingly.
   ============================================================ */
#readerContainer .reader-content :is(h1, h2, h3, h4, h5, h6) {
  display: block;
  width: auto;
  max-width: 100%;
  margin: 1.85em 0 0.7em;
  padding: 0;
  font-family: inherit;
  text-align: left;
  font-weight: 780;
  line-height: 1.3;
  letter-spacing: -0.026em;
  color: #f5f0ff;
  background: none;
  -webkit-text-fill-color: currentColor;
  overflow-wrap: anywhere;
}
#readerContainer .reader-content h1 {
  font-size: clamp(1.7rem, 2.5vw, 2.25rem);
  line-height: 1.18;
  font-weight: 820;
  padding-bottom: 0.55em;
  border-bottom: 1px solid rgba(177, 132, 255, 0.24);
  color: #fff;
  background: linear-gradient(105deg, #fff 0%, #d5b6ff 75%, #88f8d1 110%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
#readerContainer .reader-content h2 {
  position: relative;
  font-size: clamp(1.45rem, 2vw, 1.85rem);
  line-height: 1.24;
  padding-left: 18px;
  color: #fff;
  font-weight: 820;
}
#readerContainer .reader-content h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.14em;
  width: 4px;
  height: 0.93em;
  border-radius: 3px;
  background: linear-gradient(180deg, #9945ff 0%, #14f195 100%);
  box-shadow: 0 0 12px rgba(153, 69, 255, 0.2);
}
#readerContainer .reader-content h3 {
  font-size: clamp(1.2rem, 1.6vw, 1.46rem);
  color: #dfcbff;
  font-weight: 770;
}
#readerContainer .reader-content h3::before {
  content: "//";
  display: inline-block;
  margin-right: 10px;
  color: var(--sol-teal);
  font: 700 0.8em/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: -0.15em;
  vertical-align: 0.05em;
}
#readerContainer .reader-content h4 {
  font-size: 1.13rem;
  font-weight: 740;
  color: #f0eafa;
}
#readerContainer .reader-content h5 {
  font-size: 0.98rem;
  color: #9cf7d4;
  font-weight: 760;
  letter-spacing: 0.025em;
}
#readerContainer .reader-content h6 {
  font-size: 0.83rem;
  color: #afa4c8;
  font-weight: 760;
  letter-spacing: 0.095em;
  text-transform: uppercase;
}
#readerContainer .reader-content > :is(h1, h2, h3, h4, h5, h6):first-child { margin-top: 0; }
#readerContainer .reader-content :is(h1, h2, h3, h4, h5, h6) + * { margin-top: 0.7em; }

/* Restore intentional reading content spacing inside the app reset. */
#readerContainer .reader-content :is(ul, ol) {
  margin: 1em 0;
  padding-left: 1.6em;
}
#readerContainer .reader-content ul { list-style: disc outside; }
#readerContainer .reader-content ol { list-style: decimal outside; }
#readerContainer .reader-content li + li { margin-top: 0.3em; }
#readerContainer .reader-content li :is(ul, ol) { margin: 0.45em 0; }
#readerContainer .reader-content li::marker { color: var(--sol-teal); }
#readerContainer .reader-content blockquote {
  margin: 1.5em 0;
  padding: 12px 18px;
  border-left: 3px solid var(--sol-teal);
  border-radius: 0 10px 10px 0;
  background: rgba(153, 69, 255, 0.10);
  color: var(--text-primary);
}
#readerContainer .reader-content blockquote > * + * { margin-top: 0.8em; }
#readerContainer .reader-content :is(pre, .wp-block-code) {
  max-width: 100%;
  overflow-x: auto;
  margin: 1.4em 0;
  padding: 16px 18px;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: rgba(3, 1, 8, 0.68);
  font-size: 0.9em;
  line-height: 1.65;
  -webkit-text-fill-color: var(--text-primary);
}
#readerContainer .reader-content :not(pre) > code {
  padding: 0.12em 0.35em;
  border-radius: 4px;
  background: rgba(153, 69, 255, 0.16);
  color: #d5b5ff;
  overflow-wrap: anywhere;
}
#readerContainer .reader-content :is(table, .wp-block-table table) {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4em 0;
  font-size: 0.92em;
}
#readerContainer .reader-content :is(th, td) {
  padding: 10px 12px;
  border: 1px solid var(--border-subtle);
  text-align: left;
}
#readerContainer .reader-content th {
  background: rgba(153, 69, 255, 0.16);
  color: var(--text-primary);
}
#readerContainer .reader-content figcaption,
#readerContainer .reader-content .wp-element-caption {
  margin-top: 0.6em;
  color: var(--text-muted);
  font-size: 0.8em;
  text-align: center;
}
#readerContainer .reader-content hr {
  height: 1px;
  margin: 1.8em 0;
  border: 0;
  background: var(--border-subtle);
}
#readerContainer .reader-content .wp-block-button__link {
  color: #ffffff;
  text-decoration: none;
}
/* Keep WordPress alignments and embeds from overflowing the reader. */
#readerContainer .reader-content :is(figure, .wp-block-embed, .wp-block-image) {
  max-width: 100%;
}
#readerContainer .reader-content .aligncenter {
  margin-inline: auto;
  text-align: center;
}
#readerContainer .reader-content .alignright { float: right; margin: 0 0 1em 1.5em; }
#readerContainer .reader-content .alignleft { float: left; margin: 0 1.5em 1em 0; }
#readerContainer .reader-content::after { content: ""; display: table; clear: both; }

/* Teal Links Across All Posts, Pages, Meta, and Comments */
.reader-content a,
.reader-meta a,
.page-links a,
.sol-comment-content a,
.sol-comment-author a,
.logged-in-as a {
  color: var(--sol-teal);
  text-decoration: underline;
  text-decoration-color: rgba(20, 241, 149, 0.4);
  text-underline-offset: 3px;
  font-weight: 500;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.reader-content a:hover,
.reader-meta a:hover,
.page-links a:hover,
.sol-comment-content a:hover,
.sol-comment-author a:hover,
.logged-in-as a:hover {
  color: #6dffca;
  text-decoration-color: var(--sol-teal);
}

.reader-content img,
.reader-content video,
.reader-content iframe {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

/* Right-Pane Archive Grid */
.archive-header {
  margin-bottom: 28px;
}

.reader-entry-description {
  margin-top: 13px;
  text-align: left;
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.6;
}
.reader-entry-description a {
  color: var(--sol-teal);
}

.archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

/* ============================================================
   COMMENTS — glassy card design with Solana accents and lucide icons
   ============================================================ */
.sol-comments {
  margin-top: 56px;
  padding-top: 36px;
  border-top: 1px solid var(--border-subtle);
}

/* Centered section header with gradient icon badge + title + rule */
.sol-comments-header {
  text-align: center;
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.sol-comments-icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  padding: 4px;
  background: var(--sol-gradient);
  box-shadow: 0 6px 18px -4px rgba(153, 69, 255, 0.5), 0 4px 14px -6px rgba(20, 241, 149, 0.4);
}

.sol-comments-icon i[data-lucide],
.sol-comments-icon svg {
  width: 24px;
  height: 24px;
  color: #0a0114;
  stroke: #0a0114;
  display: block;
}

.sol-comments-title {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(95deg, #ffffff 20%, #b98cff 60%, #14f195 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
  line-height: 1.2;
}

.sol-comments-rule {
  width: 80px;
  height: 3px;
  border-radius: 2px;
  background: var(--sol-gradient);
  opacity: 0.55;
}

/* Comment list — flat, no bullets, each item is a card.
   On wide screens, top-level comments flow into 2 columns
   (children stay in their parent's column). */
.sol-comment-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0;
}

@media screen and (min-width: 1100px) {
  .sol-comment-list {
    column-count: 2;
    column-gap: 18px;
  }
  .sol-comment-list > .sol-comment {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 14px;
    display: inline-block;
    width: 100%;
  }
}

.sol-comment {
  position: relative;
  padding: 0;
  margin: 0;
}

/* Child comments (replies) are indented with a Solana-purple
   left rail and a slightly smaller card. */
.sol-comment--child {
  margin-left: 20px;
  border-left: 2px solid rgba(153, 69, 255, 0.32);
  padding-left: 16px;
}

@media screen and (max-width: 600px) {
  .sol-comment--child {
    margin-left: 12px;
    padding-left: 10px;
  }
}

.sol-comment-body {
  background: linear-gradient(145deg, rgba(20, 8, 46, 0.55) 0%, rgba(7, 2, 20, 0.65) 100%);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 15px 17px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sol-comment-body:hover {
  border-color: rgba(20, 241, 149, 0.28);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 18px -8px rgba(20, 241, 149, 0.45);
}

.sol-comment-header {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 11px;
}

/* Avatar with a Solana-gradient ring — slightly smaller for compactness */
.sol-comment-avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  padding: 2px;
  background: var(--sol-gradient);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 16px -6px rgba(153, 69, 255, 0.5);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sol-comment-avatar-img,
.sol-comment-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: var(--bg-card);
}

.sol-comment-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sol-comment-author {
  font-style: normal;
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--text-primary);
  text-decoration: none;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.sol-comment-author a {
  color: inherit;
  text-decoration: none;
}

.sol-comment-author a:hover {
  color: var(--sol-teal);
}

/* Date with clock icon, inline-flex for tight spacing */
.sol-comment-date {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.74rem;
  color: var(--text-muted);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: color 0.2s ease;
  line-height: 1;
}

.sol-comment-date i[data-lucide],
.sol-comment-date svg {
  width: 11px;
  height: 11px;
  opacity: 0.7;
  flex-shrink: 0;
}

.sol-comment-date:hover {
  color: var(--sol-teal);
}

.sol-comment-date:hover i[data-lucide],
.sol-comment-date:hover svg {
  opacity: 1;
}

/* Permalink icon button (right side of header) */
.sol-comment-permalink {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  color: var(--text-muted);
  background: rgba(186, 148, 255, 0.05);
  border: 1px solid rgba(186, 148, 255, 0.14);
  text-decoration: none;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.sol-comment-permalink i[data-lucide],
.sol-comment-permalink svg {
  width: 13px;
  height: 13px;
}

.sol-comment-permalink:hover {
  color: var(--sol-teal);
  background: rgba(20, 241, 149, 0.1);
  border-color: rgba(20, 241, 149, 0.32);
  transform: translateY(-1px);
}

.sol-comment-content {
  font-size: 0.96rem;
  line-height: 1.65;
  color: #d8d2ec;
}

.sol-comment-content p {
  margin: 0;
}

.sol-comment-content p + p {
  margin-top: 0.9em;
}

/* Awaiting moderation notice — now with hourglass icon */
.sol-comment-pending {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 10px;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(255, 184, 0, 0.12);
  border: 1px solid rgba(255, 184, 0, 0.32);
  color: #ffcc66;
  font-size: 0.76rem;
  font-weight: 600;
}

.sol-comment-pending i[data-lucide],
.sol-comment-pending svg {
  width: 12px;
  height: 12px;
}

/* Footer with icon action buttons (reply, edit) */
.sol-comment-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid rgba(186, 148, 255, 0.1);
}

/* Action buttons — icon-driven, compact pill style */
.sol-comment-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  background: rgba(20, 241, 149, 0.07);
  border: 1px solid rgba(20, 241, 149, 0.2);
  color: var(--sol-teal);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.sol-comment-action a {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.sol-comment-action i[data-lucide],
.sol-comment-action svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.sol-comment-action:hover {
  background: rgba(20, 241, 149, 0.16);
  border-color: rgba(20, 241, 149, 0.42);
  color: #6dffca;
  transform: translateY(-1px);
}

.sol-comment-edit {
  background: rgba(186, 148, 255, 0.06);
  border-color: rgba(186, 148, 255, 0.18);
  color: var(--text-muted);
}

.sol-comment-edit:hover {
  background: rgba(186, 148, 255, 0.16);
  border-color: rgba(186, 148, 255, 0.42);
  color: var(--text-primary);
}

/* On narrow screens, hide the text labels and show only icons */
@media screen and (max-width: 600px) {
  .sol-comment-action-label {
    display: none;
  }
  .sol-comment-action {
    padding: 6px 8px;
  }
  .sol-comment-action i[data-lucide],
  .sol-comment-action svg {
    width: 14px;
    height: 14px;
  }
}

/* Screen-reader-only utility (for accessibility of icon buttons) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Children list — reset WP default <ul class="children"> styling */
.sol-comment-list .children {
  list-style: none;
  padding: 0;
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Comments pagination */
.sol-comments .navigation,
.sol-comments .comment-navigation {
  margin: 26px 0 8px;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.sol-comments .navigation a,
.sol-comments .comment-navigation a {
  color: var(--sol-teal);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.86rem;
  padding: 8px 16px;
  border-radius: 8px;
  background: rgba(20, 241, 149, 0.06);
  border: 1px solid rgba(20, 241, 149, 0.18);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.sol-comments .navigation a:hover,
.sol-comments .comment-navigation a:hover {
  background: rgba(20, 241, 149, 0.16);
  border-color: rgba(20, 241, 149, 0.42);
  transform: translateY(-1px);
}

/* Comments closed notice */
.sol-comments-closed {
  margin-top: 16px;
  padding: 14px 18px;
  background: rgba(186, 148, 255, 0.06);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  color: var(--text-muted);
  font-size: 0.9rem;
  text-align: center;
}

/* Pingbacks / trackbacks (rendered as a minimal list) */
.sol-comment-list .pingback,
.sol-comment-list .trackback {
  padding: 10px 14px;
  background: rgba(20, 8, 46, 0.4);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.sol-comment-list .pingback a,
.sol-comment-list .trackback a {
  color: var(--sol-teal);
  text-decoration: none;
}

/* ============================================================
   COMMENT FORM — dark transparent inputs that pop on gradient
   ============================================================ */
.sol-comment-form {
  margin-top: 44px;
  padding: 32px 26px 26px;
  background: linear-gradient(145deg, rgba(20, 8, 46, 0.55) 0%, rgba(7, 2, 20, 0.7) 100%);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

/* Centered title with lucide message-circle icon + gradient bar accent.
   The .text span holds the title text; the .cancel-reply span holds
   the cancel link (hidden via :empty when not replying).
   v2.9.4 — smaller (was 1.28rem) and title-cased ("Leave A Reply").
   v2.9.5 — line-height: 1.2 to exactly match .reader-entry-title. */
.sol-comment-form-title {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 30px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  text-align: center;
}

.sol-comment-form-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.sol-comment-form-title-icon i[data-lucide],
.sol-comment-form-title-icon svg {
  width: 20px;
  height: 20px;
  color: var(--sol-teal);
  display: block;
}

.sol-comment-form-title-text {
  background: linear-gradient(95deg, #ffffff 30%, #b98cff 60%, #14f195 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* HIDE the empty cancel-reply wrapper when no reply is in progress
   (this is the fix for the "strange little pill box" the user saw).
   When visible (replying), style it as a subtle ghost pill. */
.sol-comment-cancel-reply:empty {
  display: none;
}

.sol-comment-cancel-reply {
  display: inline-flex;
  align-items: center;
  margin-left: 14px;
  font-size: 0.78rem;
  font-weight: 500;
}

.sol-comment-cancel-reply a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 11px;
  border-radius: 999px;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border-subtle);
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.sol-comment-cancel-reply a:hover {
  color: #ff7a9c;
  border-color: rgba(255, 122, 156, 0.4);
  background: rgba(255, 122, 156, 0.06);
}

/* Logged-in-as / "must be logged in" notices */
.sol-comment-form .logged-in-as,
.sol-comment-form .must-log-in {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: 16px;
  padding: 10px 14px;
  background: rgba(186, 148, 255, 0.06);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  text-align: center;
}

.sol-comment-form .must-log-in {
  color: #ff9c6b;
  background: rgba(255, 122, 91, 0.08);
  border-color: rgba(255, 122, 91, 0.22);
}

/* Field rows — author / email / website stack on narrow screens,
   3-column grid on wider screens */
.sol-comment-form-field {
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sol-comment-form-field label {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.sol-comment-form-field label .required {
  color: var(--sol-teal);
  font-size: 0.9em;
}

.sol-comment-form-field input[type="text"],
.sol-comment-form-field input[type="email"],
.sol-comment-form-field input[type="url"],
.sol-comment-form textarea,
.sol-comment-form input[type="text"],
.sol-comment-form input[type="email"],
.sol-comment-form input[type="url"],
.sol-comment-form textarea {
  width: 100%;
  padding: 11px 14px;
  background: rgba(3, 1, 8, 0.55);
  border: 1px solid var(--border-subtle);
  border-radius: 9px;
  color: var(--text-primary);
  font-size: 0.95rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.sol-comment-form-field input::placeholder,
.sol-comment-form textarea::placeholder {
  color: rgba(167, 158, 192, 0.5);
}

.sol-comment-form-field input:focus,
.sol-comment-form textarea:focus,
.sol-comment-form input:focus,
.sol-comment-form textarea:focus {
  border-color: var(--sol-teal);
  background: rgba(3, 1, 8, 0.8);
  box-shadow: 0 0 0 3px rgba(20, 241, 149, 0.16);
}

.sol-comment-form textarea {
  resize: vertical;
  min-height: 130px;
  line-height: 1.5;
}

/* Cookies consent row lays out inline */
.sol-comment-form-cookies {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
}

.sol-comment-form-cookies input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 4px;
  width: 16px;
  height: 16px;
  accent-color: var(--sol-teal);
  cursor: pointer;
}

.sol-comment-form-cookies label {
  text-transform: none;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0;
  cursor: pointer;
  line-height: 1.45;
}

/* Submit row — centered */
.sol-comment-form-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.sol-comment-submit {
  padding: 12px 24px !important;
  font-size: 0.92rem !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.sol-comment-submit i[data-lucide],
.sol-comment-submit svg {
  width: 15px;
  height: 15px;
}

/* On wider screens, lay out the name/email/website fields in a row */
@media screen and (min-width: 640px) {
  .sol-comment-form-fields-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
  }
  .sol-comment-form-fields-row .sol-comment-form-field {
    margin-bottom: 0;
  }
}

/* ============================================================
   MOBILE: top icon bar at top of page, reader in middle,
   horizontal post scroller at bottom.
   The icon bar is moved to be the first child of .app-shell by
   JavaScript (app.js :: repositionTopBar).
   ============================================================ */
@media screen and (max-width: 768px) {
  :root {
    --top-bar-h: 36px;
    /* v2.9.4 — rail is taller (78px) so cards have ~7px of inset
       top + bottom against the rail background. Cards themselves
       are leaner (icon 26px, vertical padding 7px) so the whole
       rail reads as a tight row of inset pills you can swipe,
       with no clipping at the bottom edge. */
    --footer-cards-h: 112px;
  }

  .app-shell {
    flex-direction: column;
  }

  /* Top icon bar — moved by JS to be the first child of .app-shell.
     Becomes a typical top navigation spanning the full width. */
  .app-shell > .top-icon-bar {
    order: 0;
    width: 100%;
    flex: 0 0 var(--top-bar-h);
    position: relative;
    z-index: 250;
    background: rgba(8, 2, 20, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-subtle);
    border-radius: 0;
  }

  .top-icon-bar-track {
    padding: 0 4px;
    gap: 2px;
  }

  /* Three-zone header shrinks proportionally on mobile: the site
     identity stays dead-center while the icon hit areas tighten. */
  .header-side {
    gap: 0;
  }

  .header-identity {
    padding: 0 4px;
  }

  .header-identity-title {
    gap: 5px;
    font-size: 0.8rem;
    max-width: min(60vw, 100%);
  }

  .header-identity-icon {
    width: 18px;
    height: 18px;
    border-radius: 4px;
  }

  .top-icon-bar-track .header-icon-btn {
    flex: 0 0 auto;
    width: 34px;
    min-width: 34px;
  }

  .top-icon-bar-track .header-icon-btn svg,
  .top-icon-bar-track .header-icon-btn .header-icon-svg {
    width: 16px;
    height: 16px;
  }

  /* Dropdowns drop DOWN from the top bar (typical top-nav behavior). */
  .app-shell > .top-icon-bar .sidebar-dropdown {
    position: absolute;
    top: 100%;
    left: 6px;
    right: 6px;
    bottom: auto;
    max-width: none;
    max-height: 60vh;
    overflow-y: auto;
    border-radius: 0 0 14px 14px;
    border: 1px solid var(--border-subtle);
    border-top: none;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.75);
    z-index: 1000;
  }

  /* Middle: reader content */
  .right-panel {
    order: 1;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
  }

  #readerContainer {
    padding: 14px 12px 18px;
  }

  /* Compact editorial masthead keeps videos close to the title. */
  .reader-entry-header {
    padding: 20px 18px 18px;
    margin-bottom: 20px;
    border-radius: 14px;
  }
  .reader-entry-overline {
    margin-bottom: 11px;
    font-size: 0.61rem;
    gap: 6px;
  }
  .reader-entry-title {
    font-size: clamp(1.43rem, 5.4vw, 1.9rem);
    letter-spacing: -0.035em;
  }
  .reader-entry-meta {
    margin-top: 17px;
    padding-top: 12px;
    gap: 7px 15px;
  }
  .reader-meta-item { font-size: 0.7rem; }
  .reader-meta-icon svg { width: 13px; height: 13px; }
  #readerContainer .reader-content h1 { font-size: 1.55rem; }
  #readerContainer .reader-content h2 { font-size: 1.32rem; }
  #readerContainer .reader-content h3 { font-size: 1.14rem; }

  .reader-entry-tags {
    gap: 6px;
    margin-top: 24px;
  }

  .reader-entry-tag {
    padding: 3px 10px;
    font-size: 0.68rem;
  }

  /* Mobile browsing dock: same nearly-black glass as the header,
     with a micro-heading, roomier inset cards, and a visible purple-
     to-teal horizontal track beneath the swipeable post stream. */
  .left-panel {
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --footer-current-h: calc(var(--footer-cards-h) + var(--safe-bottom));
    order: 2;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
    height: var(--footer-current-h);
    flex: 0 0 var(--footer-current-h);
    border-right: none;
    border-top: 1px solid var(--border-subtle);
    border-radius: 12px 12px 0 0;
    background: linear-gradient(180deg, rgba(8, 2, 20, 0.97), #080214);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.48);
    overflow: hidden;
    padding: 7px 10px calc(9px + var(--safe-bottom));
    z-index: 40;
    position: relative;
  }

  .left-panel::before,
  .left-panel::after {
    content: "";
    position: absolute;
    top: 25px;
    bottom: 16px;
    width: 14px;
    z-index: 5;
    pointer-events: none;
  }
  .left-panel::before {
    left: 9px;
    background: linear-gradient(to right, #080214, transparent);
  }
  .left-panel::after {
    right: 9px;
    background: linear-gradient(to left, #080214, transparent);
  }

  .left-panel-inner {
    flex-direction: column;
    min-width: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .mobile-feed-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex: 0 0 17px;
    padding: 0 4px;
    color: #f5f3ff;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.105em;
    text-transform: uppercase;
    line-height: 1;
  }

  .mobile-feed-swipe-cue {
    color: rgba(183, 169, 211, 0.8);
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
  }
  .mobile-feed-swipe-cue span {
    color: var(--sol-teal);
    margin-left: 2px;
  }

  .feed-scroll {
    display: flex;
    flex-direction: row;
    grid-template-columns: none;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 7px 3px 9px;
    gap: 9px;
    height: auto;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
  }

  /* Visual progress is custom so it stays visible on iOS too, where
     native WebKit scrollbars are otherwise very hard to discover. */
  .feed-scroll::-webkit-scrollbar {
    display: none;
  }

  .mobile-feed-progress {
    display: block;
    position: relative;
    flex: 0 0 4px;
    margin: 0 4px;
    border-radius: 99px;
    overflow: hidden;
    background: rgba(153, 69, 255, 0.22);
    box-shadow: inset 0 0 0 1px rgba(186, 148, 255, 0.08);
    transition: opacity 0.2s ease;
  }

  .mobile-feed-progress.is-static {
    opacity: 0.12;
  }

  .mobile-feed-progress-thumb {
    display: block;
    position: absolute;
    inset: 0 auto 0 0;
    width: 25%;
    border-radius: inherit;
    background: linear-gradient(90deg, #9945ff, #14f195);
    box-shadow: 0 0 12px rgba(20, 241, 149, 0.3);
    will-change: transform;
  }

  .post-card {
    flex: 0 0 188px;
    width: 188px;
    min-height: 51px;
    padding: 9px 11px;
    gap: 8px;
    scroll-snap-align: start;
    border-radius: 10px;
  }

  .post-card:hover,
  .post-card.is-active {
    transform: translateY(-1px);
  }

  .post-card-icon {
    width: 19px;
    height: 19px;
    border-radius: 5px;
  }

  .post-card-title {
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.005em;
    -webkit-line-clamp: 2;
    white-space: normal;
    text-overflow: ellipsis;
  }

  .post-card-new {
    display: none;
  }

  /* Homepage cards remain a full-width vertical list on phones,
     not horizontally clipped like the always-visible footer rail. */
  .home-post-section {
    margin-top: 25px;
    padding-bottom: 20px;
  }

  .home-post-grid {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .home-post-grid .post-card {
    flex: auto;
    width: 100%;
    min-height: 54px;
  }

  .home-post-grid .post-card-icon {
    width: 24px;
    height: 24px;
  }

  .home-post-grid .post-card-title {
    font-size: 0.86rem;
    -webkit-line-clamp: 2;
    white-space: normal;
  }

  .home-post-grid .post-card-new {
    display: inline-block;
  }

  /* Reader & Homepage Responsive Adjustments */
  .seo-explainer {
    margin-top: 1vh;
    padding: 22px 18px;
  }

  .seo-explainer p {
    font-size: 0.92rem;
  }

  /* Comments collapse the form's 3-column row on narrow screens */
  .sol-comment-form-fields-row {
    grid-template-columns: 1fr !important;
    gap: 0;
  }

  /* Comment form gets tighter padding on mobile */
  .sol-comment-form {
    padding: 24px 16px 22px;
  }

  /* Comment cards reduce avatar size and padding */
  .sol-comment-avatar {
    width: 38px;
    height: 38px;
  }

  .sol-comment-body {
    padding: 13px 14px;
  }

  /* Comment section header icon gets a bit smaller on mobile */
  .sol-comments-icon {
    width: 42px;
    height: 42px;
  }
  .sol-comments-icon i[data-lucide],
  .sol-comments-icon svg {
    width: 21px;
    height: 21px;
  }

  /* Disable 2-column comment list on mobile (always single column) */
  .sol-comment-list {
    column-count: 1 !important;
  }
}