/* === Boy4News global styles (with responsive comment fixes) === */
:root {
  --bg:#0b132b;
  --panel:#1f2937;
  --ink:#e5e7eb;
  --muted:#cbd5e1;
  --line:rgba(148,163,184,.25);
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:system-ui, Segoe UI, Roboto, Ubuntu, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

header{
  padding:22px 18px;
  background:#111827;
  border-bottom:1px solid var(--line);
}
.container{max-width:1000px;margin:0 auto;padding:18px}
.grid-3{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:14px
}
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  padding:16px
}
.small{font-size:12px;color:var(--muted)}
.pill{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;border:1px solid var(--line)}
.pill-ok{background:rgba(34,197,94,.15);border-color:rgba(34,197,94,.45);color:#d1fae5}
.pill-bad{background:rgba(239,68,68,.15);border-color:rgba(239,68,68,.45);color:#fecaca}

.comment{margin:12px 0}
.children{
  margin-left:20px;
  border-left:2px solid #3a4254;
  padding-left:12px
}
.bubble{
  background:#10141c;
  border:1px solid #242a36;
  border-radius:12px;
  padding:12px;
  overflow-wrap:anywhere; /* prevent layout break on long strings */
}
.header{font-size:.9rem;color:#9aa4b2;margin-bottom:6px}
.body{
  white-space:pre-wrap;
  line-height:1.45;
  overflow-wrap:anywhere; /* safe wrap */
}
.reply summary{cursor:pointer;color:#93c5fd;margin-top:8px}
.reply-form{display:grid;gap:8px;margin-top:8px}
.reply-form input,.reply-form textarea{
  width:100%;
  padding:10px;
  border-radius:8px;
  border:1px solid var(--line);
  background:#0f172a;
  color:var(--ink)
}
.btn{
  display:inline-flex;align-items:center;gap:6px;
  background:linear-gradient(180deg,#38bdf8,#0ea5e9);
  color:#001018;font-weight:600;padding:8px 12px;border-radius:10px;text-decoration:none;border:0
}

/* Collapsed deep threads */
.more-replies { margin-left:20px; border-left:2px dashed #3a4254; padding-left:12px }
.more-replies > summary { cursor:pointer; color:#93c5fd; margin:8px 0; list-style:none }
.more-replies > summary::-webkit-details-marker { display:none }
.more-replies[open] > summary { color:#cde7ff }

/* Responsive tweaks */
@media (max-width: 520px){
  header .container { padding: 12px }
  .container { padding: 14px }
  img[alt="Boy4News"] { height: 72px !important }
  .children { margin-left: 12px; padding-left: 10px }
}

/* === Boy4News: Prev/Next button border/outline fix === */
a.b4n-nav-prev.btn,
a.b4n-nav-next.btn {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background-clip: padding-box !important;
}

/* Optional accessible focus ring that blends into page background */
a.b4n-nav-prev.btn:focus,
a.b4n-nav-next.btn:focus,
a.b4n-nav-prev.btn:focus-visible,
a.b4n-nav-next.btn:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px var(--bg) !important; /* matches #0b132b */
}