/* ==========================================================
   BoyleBot — Gli Amici di Boyle
   Foglio di stile della pagina BoyleBot (hero + costellazione + ricerca).
   Le classi con prefisso "bb-" sono specifiche di BoyleBot.
   Le classi senza prefisso (.site-header, .brand, .site-nav, .container,
   .ticker...) sono copiate identiche da styles.css del sito principale,
   cosi la testata combacia con il resto di amicidiboyle.it. Se questa
   pagina viene integrata in un sito che carica gia' styles.css, queste
   regole sono ridondanti ma innocue.
   ========================================================== */

:root {
  --bb-bg:        #030f1f;
  --bb-bg-2:      #071c36;
  --bb-text:      #edf7ff;
  --bb-muted:     rgba(237,247,255,.75);
  --bb-soft:      rgba(237,247,255,.5);
  --bb-cyan:      #7be4ff;
  --bb-cyan-2:    #a8eeff;
  --bb-blue:      #4fa8ff;
  --bb-violet:    #b48bff;
  --bb-border:    rgba(120,210,255,.18);
  --bb-border-hi: rgba(160,230,255,.4);
  --bb-glass:     rgba(8,26,52,.6);

  /* variabili originali del sito, usate dall'header copiato */
  --text: #edf7ff; --muted: rgba(237,247,255,.78); --soft: rgba(237,247,255,.55);
  --cyan: #7be4ff; --cyan-2: #a8eeff; --blue: #4fa8ff;
  --border: rgba(120,210,255,.18); --border-hi: rgba(160,230,255,.36);
  --glass: rgba(8,26,52,.62); --shadow: 0 20px 55px rgba(0,0,0,.38); --max-w: 1180px;
}

html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
.boylebot-page, .boylebot-page * , .boylebot-page *::before, .boylebot-page *::after { box-sizing: border-box; }

/* ── SFONDO OCEANO — identico al resto di amicidiboyle.it ──
   Fisso su tutta la pagina (html::before/::after, non body, per non
   entrare in conflitto con gli pseudo-elementi decorativi qui sotto
   che vivono su .boylebot-page = body). L'aurora/griglia esistente
   resta sopra, semi-trasparente, come velo aggiuntivo. */
html::before {
  content: "";
  position: fixed; inset: 0; z-index: -4;
  background: url("assets/ocean-desktop.jpg") center top / cover no-repeat;
  transform: translateZ(0); backface-visibility: hidden;
}
html::after {
  content: "";
  position: fixed; inset: 0; z-index: -3;
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%, rgba(0,80,180,.22), transparent 60%),
    radial-gradient(ellipse at 0% 50%, rgba(0,40,120,.18), transparent 45%),
    radial-gradient(ellipse at 100% 80%, rgba(0,30,100,.15), transparent 40%),
    linear-gradient(180deg, rgba(2,10,24,.45) 0%, rgba(2,10,24,.25) 40%, rgba(2,10,24,.6) 100%);
  transform: translateZ(0); backface-visibility: hidden;
}
@media (max-width: 768px) {
  html::before { background: url("assets/ocean-mobile.jpg") center top / cover no-repeat; }
}

.boylebot-page {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--bb-text); background: transparent;
  position: relative; isolation: isolate; overflow-x: clip;
  margin: 0;
}
.boylebot-page a { color: inherit; text-decoration: none; }
.boylebot-page button, .boylebot-page input { font-family: inherit; }
.boylebot-page p { margin: 0; }
.boylebot-page h1, .boylebot-page h2 { margin: 0; line-height: 1.1; }
.boylebot-page ::selection { background: rgba(123,228,255,.28); color: #021830; }

.boylebot-page::before {
  content: "";
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(ellipse 75% 40% at 50% -6%, rgba(80,60,220,.28), transparent 62%),
    radial-gradient(ellipse 65% 45% at 8% 20%, rgba(0,110,200,.26), transparent 58%),
    radial-gradient(ellipse 60% 45% at 95% 55%, rgba(120,90,220,.2), transparent 58%),
    radial-gradient(ellipse 70% 50% at 30% 92%, rgba(0,90,180,.24), transparent 60%),
    linear-gradient(180deg, rgba(3,15,31,.72) 0%, rgba(7,28,54,.72) 45%, rgba(3,15,31,.82) 75%, rgba(7,28,54,.88) 100%);
}
.boylebot-page::after {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(123,228,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(123,228,255,.05) 1px, transparent 1px),
    radial-gradient(circle, rgba(214,245,255,.3) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(171,228,255,.18) 0 1.2px, transparent 1.9px);
  background-size: 64px 64px, 64px 64px, 220px 220px, 340px 340px;
  background-position: 0 0, 0 0, 10% 15%, 75% 65%;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.5) 40%, rgba(0,0,0,.9));
  mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.5) 40%, rgba(0,0,0,.9));
  opacity: .3;
}

/* ── LOGO: si disegna da solo al caricamento ── */
.bb-logo { display: inline-flex; width: 40px; height: 40px; flex-shrink: 0; }
.bb-logo svg { width: 100%; height: 100%; display: block; overflow: visible; }
.bb-logo-ring  { stroke: var(--bb-cyan); fill: rgba(123,228,255,.05); }
.bb-logo-curve {
  stroke: var(--bb-cyan-2); stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: bbDraw 1.3s cubic-bezier(.4,.1,.2,1) forwards .15s;
}
.bb-logo-node {
  fill: var(--bb-cyan-2); filter: drop-shadow(0 0 5px var(--bb-cyan-2));
  opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; transform: scale(.3);
  animation: bbNodeIn .45s ease forwards 1.35s, bbPulse 2.4s ease-in-out infinite 1.8s;
}
@keyframes bbDraw   { to { stroke-dashoffset: 0; } }
@keyframes bbNodeIn { to { opacity: 1; transform: scale(1); } }
@keyframes bbPulse  { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  .bb-logo-curve, .bb-logo-node { animation: none; stroke-dashoffset: 0; opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════════════════════
   HEADER DEL SITO — copiato 1:1 da amicidiboyle.it/styles.css
   ══════════════════════════════════════════════════════════ */
.container { width: min(var(--max-w), 100%); padding: 0 24px; margin: 0 auto; }

.site-header {
  position: sticky; top: 0; z-index: 80;
  background: rgba(4, 20, 52, 0.94);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  border-bottom: 1px solid rgba(80,170,255,.18);
  box-shadow: 0 1px 0 rgba(40,130,255,.10), 0 4px 28px rgba(0,0,0,.22);
  transition: background .3s;
}
.site-header.scrolled { background: rgba(3, 14, 38, 0.98); }
.nav-wrap { display: flex; align-items: center; justify-content: space-between; min-height: 74px; gap: 16px; }
.brand { display: flex; align-items: center; gap: 13px; min-width: 0; }
.brand img { width: 48px; height: 48px; flex-shrink: 0; overflow: hidden; object-fit: cover; filter: drop-shadow(0 0 12px rgba(123,228,255,.3)); transition: filter .3s; }
.brand:hover img { filter: drop-shadow(0 0 20px rgba(123,228,255,.55)); }
.brand-copy { display: grid; gap: 2px; min-width: 90px; overflow: hidden; }
.brand strong { font-size: .96rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand em     { font-style: normal; font-size: .7rem; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.brand-sub    { font-size: .7rem; color: var(--soft); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.site-nav { display: flex; align-items: center; gap: 4px; font-size: .88rem; }
.site-nav > a { color: var(--muted); padding: 6px 11px; border-radius: 9px; transition: color .2s, background .2s; }
.site-nav > a:hover { color: var(--text); background: rgba(123,228,255,.08); }

.nav-dropdown { position: relative; }
.nav-dropdown-btn { display: block; color: var(--muted); padding: 6px 11px; border-radius: 9px; cursor: pointer; background: none; border: none; font: inherit; transition: color .2s, background .2s; }
.nav-dropdown:hover .nav-dropdown-btn { color: var(--text); background: rgba(123,228,255,.08); }
.nav-dropdown-panel {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(-6px);
  min-width: 176px; padding: 8px; border-radius: 14px;
  background: rgba(4,14,32,.94); border: 1px solid var(--border); box-shadow: var(--shadow);
  display: grid; gap: 2px; opacity: 0; visibility: hidden; transition: opacity .18s, transform .18s, visibility .18s;
}
.nav-dropdown:hover .nav-dropdown-panel { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-dropdown-panel a { padding: 8px 12px; border-radius: 9px; display: block; color: var(--muted); font-size: .85rem; transition: background .15s, color .15s; }
.nav-dropdown-panel a:hover { background: rgba(123,228,255,.09); color: var(--text); }
.nav-badge-new {
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  font-size: .6rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #041b33; background: linear-gradient(120deg, var(--cyan-2), var(--cyan));
  border-radius: 999px; vertical-align: middle;
}
.nav-dropdown.is-open .nav-dropdown-panel { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

.nav-toggle { display: none; }
.nav-burger { display: none; }
.lang-toggle {
  display: inline-flex; align-items: center; gap: 3px; padding: 5px 12px; border-radius: 999px;
  background: rgba(123,228,255,.07); border: 1px solid rgba(123,228,255,.22); color: rgba(237,247,255,.65);
  font-size: .74rem; font-weight: 700; letter-spacing: .1em; cursor: pointer; white-space: nowrap;
}
.lang-toggle--mobile { display: none; }

.ticker { overflow: hidden; border-top: 1px solid rgba(120,210,255,.1); border-bottom: 1px solid rgba(120,210,255,.06); }
.ticker-track {
  display: inline-block; white-space: nowrap; padding: 9px 0; animation: tickerMove 28s linear infinite;
  color: rgba(180,230,255,.5); font-size: .74rem; letter-spacing: .22em;
}
@keyframes tickerMove { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker-track span { flex-shrink: 0; }
.ticker-dot { display: inline-block; color: rgba(123,228,255,.85) !important; font-size: .74rem !important; letter-spacing: 0 !important; padding: 0 .6em; }
.lang-sep { opacity: .28; font-weight: 400; }
.lang-toggle--mobile .lang-sep { opacity: .4; font-weight: 400; }
.lang-it, .lang-en { opacity: .5; transition: opacity .15s, color .15s; }
.lang-it.is-active, .lang-en.is-active { opacity: 1; color: var(--cyan-2); }

@media (max-width: 768px) {
  .brand { flex: 1; overflow: hidden; gap: 10px; }
  .brand img { width: 44px; height: 44px; }
  .brand strong { font-size: 1.02rem; font-weight: 800; white-space: nowrap; }
  .brand em:first-of-type { display: block; font-size: .62rem; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .brand-sub { display: none; }
  .lang-toggle { display: none !important; }
  .site-nav .lang-toggle--mobile { display: flex !important; margin-top: 4px !important; padding: 8px 16px !important; font-size: .8rem !important; }
  .nav-toggle:checked ~ .site-nav .lang-toggle--mobile { display: flex !important; }

  .nav-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; flex-shrink: 0; border: 1px solid rgba(123,228,255,.18); border-radius: 11px; padding: 0 10px; background: rgba(6,20,44,.7); cursor: pointer; }
  .nav-burger span { display: block; height: 2px; background: var(--text); border-radius: 2px; }
  .site-nav {
    position: absolute; top: calc(100% + 10px); right: 0; left: auto; width: 220px; min-width: 0;
    display: grid; gap: 0; background: rgba(3,14,32,.97); border: 1px solid rgba(123,228,255,.2);
    border-radius: 16px; padding: 8px; box-shadow: 0 24px 60px rgba(0,0,0,.6); backdrop-filter: blur(24px);
    opacity: 0; visibility: hidden; transform: translateY(-10px) scale(.97); transform-origin: top right;
    transition: opacity .22s cubic-bezier(.22,.68,0,1.2), transform .22s, visibility .22s;
    max-height: calc(100svh - 94px); overflow-y: auto; z-index: 200;
  }
  .nav-toggle:checked ~ .site-nav { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
  .site-nav > a { display: block; padding: 10px 16px; border-radius: 10px; font-size: .95rem; font-weight: 600; color: var(--text); text-align: left; }
  .site-nav > a:hover { background: rgba(123,228,255,.09); color: var(--cyan-2); }
  .nav-dropdown { background: rgba(123,228,255,.04); border-radius: 14px; border: 1px solid rgba(123,228,255,.1); margin: 2px 0; overflow: hidden; }
  .nav-dropdown-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 16px; border-radius: 10px; font-size: .95rem; font-weight: 600; color: var(--cyan-2); text-align: left; }
  .nav-dropdown-btn::after {
    content: ""; display: block; width: 18px; height: 18px; flex-shrink: 0;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 7l5 5 5-5' stroke='%237be4ff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
    transition: transform .22s cubic-bezier(.22,.68,0,1.2);
  }
  .nav-dropdown.is-open .nav-dropdown-btn::after { transform: rotate(180deg); }
  .nav-dropdown-panel { position: static; transform: none; opacity: 1; visibility: visible; box-shadow: none; background: none; border: none; padding: 2px 0 6px 8px; display: none; }
  .nav-dropdown.is-open .nav-dropdown-panel { display: grid; transform: none; left: auto; }
}

/* eyebrow / kicker */
.bb-kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--bb-cyan-2); margin: 0 0 16px;
  padding: 7px 16px; border-radius: 999px; background: rgba(123,228,255,.07); border: 1px solid var(--bb-border);
}
.bb-kicker::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--bb-cyan-2); box-shadow: 0 0 10px var(--bb-cyan-2);
}

/* ── HERO ── */
.bb-container { width: min(var(--max-w, 1180px), 100%); padding: 0 24px; margin: 0 auto; }
.bb-hero { position: relative; padding: 48px 0 70px; text-align: center; overflow: hidden; }
.bb-hero-inner { max-width: 880px; margin: 0 auto; position: relative; z-index: 2; }

/* Il logo a sinistra sposterebbe il centro reale del testo se fosse solo
   un elemento tra altri due: uno spaziatore invisibile della sua stessa
   larghezza sulla destra lo bilancia, così il blocco di testo resta
   sempre centrato sul vero asse della pagina (come la griglia sotto). */
.bb-hero-title-row {
  display: flex; align-items: flex-start; justify-content: center; gap: clamp(16px, 3vw, 32px);
  margin-bottom: 22px; text-align: center;
}
.bb-hero-title-row .bb-hero-logo { margin-top: 38px; }
@media (max-width: 640px) { .bb-hero-title-row .bb-hero-logo { margin-top: 0; } }
.bb-hero-logo, .bb-hero-logo-spacer { width: clamp(64px, 9vw, 112px); height: clamp(64px, 9vw, 112px); flex-shrink: 0; }
.bb-hero-logo svg { width: 100%; height: 100%; display: block; overflow: visible; }
.bb-hero-logo-spacer { visibility: hidden; }
.bb-hero-title-text { text-align: center; width: min(640px, 100%); flex-shrink: 0; }
.bb-hero-title-text .bb-kicker { justify-content: center; margin-bottom: 26px; }

.bb-hero h1 { font-size: clamp(2.4rem, 6.4vw, 4.6rem); letter-spacing: -.035em; margin: 0; }
.bb-h-abisso { color: var(--bb-text); }
.bb-h-spazio {
  background: linear-gradient(120deg, var(--bb-cyan-2) 10%, var(--bb-violet) 90%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
p.bb-hero-sub {
  font-size: clamp(1.02rem, 2vw, 1.24rem); color: var(--bb-muted);
  margin: 34px 0 0; line-height: 1.6;
}
.bb-hero-smart { color: var(--bb-cyan-2); }

@media (max-width: 640px) {
  .bb-hero-title-row { flex-direction: column; text-align: center; gap: 18px; }
  .bb-hero-logo-spacer { display: none; }
  .bb-hero-title-text { text-align: center; width: 100%; }
  .bb-hero-title-text .bb-kicker { justify-content: center; }
}

/* ask console: due campi (Autore, Argomento) sempre visibili, affiancati
   su desktop e impilati su mobile, più il pulsante di ricerca */
.bb-ask { width: min(680px, 100%); margin: 0 auto; }
.bb-fields-row { display: flex; align-items: flex-end; gap: 10px; }
.bb-field { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; text-align: left; }
.bb-field label {
  font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--bb-cyan-2); padding-left: 4px; text-shadow: 0 0 12px rgba(123,228,255,.35);
}
.bb-field input {
  background: rgba(6,20,46,.62); border: 1px solid var(--bb-border-hi); border-radius: 14px;
  color: var(--bb-text); font-size: 1rem; height: 52px; min-width: 0; padding: 0 16px;
  box-shadow: 0 0 0 5px rgba(123,228,255,.05), 0 20px 50px rgba(0,0,0,.35);
  transition: box-shadow .2s, border-color .2s;
}
.bb-field input:focus {
  outline: 2px solid transparent; border-color: var(--bb-cyan-2);
  box-shadow: 0 0 0 6px rgba(123,228,255,.1), 0 20px 50px rgba(0,0,0,.4);
}
.bb-field input::placeholder { color: var(--bb-soft); }
.bb-fields-hint {
  text-align: center; font-size: .78rem; color: var(--bb-soft);
  margin: 12px 0 0; line-height: 1.5;
}
.bb-author-hint {
  text-align: center; font-size: .76rem; color: var(--bb-soft); max-width: 620px;
  margin: 8px auto 0; line-height: 1.5;
}
.bb-ask-btn {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; border: none; cursor: pointer;
  background: linear-gradient(135deg, #7be4ff, #52a0ff); color: #021830;
  display: flex; align-items: center; justify-content: center; transition: transform .15s ease;
}
.bb-ask-btn:hover { transform: scale(1.06); }
.bb-ask-btn:active { transform: scale(.95); }
.bb-ask-btn.is-loading { cursor: wait; }
.bb-ask-btn.is-loading svg { animation: bbSpin .8s linear infinite; }
@keyframes bbSpin { to { transform: rotate(360deg); } }
@media (max-width: 640px) {
  .bb-fields-row { flex-direction: column; align-items: stretch; }
  .bb-ask-btn { align-self: center; margin-top: 4px; }
}

.bb-field-error[hidden] { display: none; }
.bb-field-error {
  font-size: .78rem; font-weight: 600; color: #ff8a95; margin: 10px auto 0; width: fit-content;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  background: rgba(255,90,106,.1); border: 1px solid rgba(255,90,106,.3);
  border-radius: 999px; padding: 6px 14px;
}
.bb-year-filter input.has-error { border-color: #ff5a6a; }

/* filtro tipo pubblicazione: compatto, chiuso di default */
.bb-pubtype-filter { margin-top: 14px; text-align: left; }
.bb-pubtype-filter summary {
  cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--bb-soft);
  list-style: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 2px; user-select: none;
}
.bb-pubtype-filter summary::-webkit-details-marker { display: none; }
.bb-pubtype-filter summary::before {
  content: "▸"; font-size: .7rem; color: var(--bb-cyan-2); transition: transform .15s;
}
.bb-pubtype-filter[open] summary::before { transform: rotate(90deg); }
.bb-pubtype-filter summary:hover { color: var(--bb-text); }
.bb-pubtype-count {
  background: rgba(123,228,255,.14); color: var(--bb-cyan-2); font-weight: 700;
  border-radius: 999px; padding: 1px 8px; font-size: .72rem;
}
.bb-pubtype-count:empty { display: none; }
.bb-pubtype-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 16px;
  margin: 10px 0 0; padding: 12px 14px; background: rgba(6,20,46,.4);
  border: 1px solid var(--bb-border); border-radius: 12px;
}
@media (max-width: 480px) { .bb-pubtype-grid { grid-template-columns: 1fr; } }
.bb-pubtype-grid label {
  display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--bb-text);
  cursor: pointer; padding: 3px 0;
}
.bb-pubtype-grid input[type="checkbox"] {
  width: 16px; height: 16px; accent-color: var(--bb-cyan-2); cursor: pointer; flex-shrink: 0;
}
.bb-pubtype-reset {
  margin-top: 10px; font-size: .76rem; font-weight: 600; color: var(--bb-soft);
  background: none; border: 1px solid var(--bb-border); border-radius: 999px;
  padding: 5px 12px; cursor: pointer; transition: color .15s, border-color .15s;
}
.bb-pubtype-reset:hover { color: var(--bb-text); border-color: var(--bb-border-hi); }
.bb-pubtype-note[hidden] { display: none; }
.bb-pubtype-note { margin: 8px 0 0; font-size: .74rem; color: var(--bb-soft); line-height: 1.5; }

p.bb-trust-badge {
  margin-top: 38px; font-size: .78rem; color: var(--bb-soft); display: flex;
  align-items: center; justify-content: center; gap: 7px;
}
.bb-trust-badge svg { color: var(--bb-cyan-2); flex-shrink: 0; }

.bb-examples {
  margin-top: 22px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px;
  font-size: .84rem; color: var(--bb-soft);
}
.bb-examples button {
  background: none; border: none; color: inherit; cursor: pointer; padding: 2px 0;
  border-bottom: 1px solid transparent;
}
.bb-examples button:hover { color: var(--bb-cyan-2); border-bottom-color: var(--bb-cyan-2); }

.bb-biblio-legend {
  margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 8px 20px; font-size: .74rem; color: var(--bb-soft);
}
/* pallino e testo restano insieme come un unico blocco: se non c'è
   spazio, va a capo tutta la coppia, non solo il testo */
.bb-legend-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.bb-legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.bb-legend-dot--oa { background: #3dffc0; box-shadow: 0 0 6px rgba(61,255,192,.6); }
.bb-legend-dot--paywall { background: #ff8a95; box-shadow: 0 0 6px rgba(255,138,149,.5); }
@media (max-width: 420px) {
  .bb-legend-item { white-space: normal; }
}


/* ── BOYLEBOT BIBLIOGRAPHY ── */
.bb-biblio {
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 620px) minmax(0, 240px);
  justify-content: center; gap: 28px; align-items: start;
}
.bb-biblio-main       { grid-column: 2; grid-row: 1; }
.bb-biblio-rules--left  { grid-column: 1; grid-row: 1; }
.bb-biblio-rules--right { grid-column: 3; grid-row: 1; }

@media (max-width: 1100px) {
  .bb-biblio { grid-template-columns: 1fr; justify-items: center; }
  .bb-biblio-main, .bb-biblio-rules--left, .bb-biblio-rules--right {
    grid-column: 1; grid-row: auto; width: 100%; max-width: 620px;
  }
}

.bb-biblio-rules {
  display: grid; gap: 14px; text-align: left;
}
.bb-rule {
  background: var(--bb-glass); border: 1px solid var(--bb-border); border-left: 3px solid var(--rule-glow, var(--bb-cyan));
  border-radius: 14px; padding: 16px 18px;
  box-shadow: -6px 0 22px -14px var(--rule-glow, transparent), 0 0 0 1px rgba(255,255,255,.02) inset;
  transition: box-shadow .25s ease, transform .25s ease;
}
.bb-rule:hover { box-shadow: -6px 0 28px -10px var(--rule-glow, transparent); transform: translateX(2px); }
.bb-rule-num {
  display: block; font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  color: var(--bb-cyan-2); margin-bottom: 6px;
}
/* un colore ed un bagliore distinti per ciascun riquadro */
.bb-rule--1 { --rule-glow: #7be4ff; }
.bb-rule--1 .bb-rule-num, .bb-rule--1 h3 { color: #7be4ff; }
.bb-rule--2 { --rule-glow: #4fd8c4; }
.bb-rule--2 .bb-rule-num, .bb-rule--2 h3 { color: #4fd8c4; }
.bb-rule--3 { --rule-glow: #a8eeff; }
.bb-rule--3 .bb-rule-num, .bb-rule--3 h3 { color: #a8eeff; }
.bb-rule--4 { --rule-glow: #4fa8ff; }
.bb-rule--4 .bb-rule-num, .bb-rule--4 h3 { color: #4fa8ff; }
.bb-rule--5 { --rule-glow: #b48bff; }
.bb-rule--5 .bb-rule-num, .bb-rule--5 h3 { color: #b48bff; }
.bb-rule--6 { --rule-glow: #ffb84d; }
.bb-rule--6 .bb-rule-num, .bb-rule--6 h3 { color: #ffb84d; }
.bb-rule--4b { --rule-glow: #6ee7b7; }
.bb-rule--4b .bb-rule-num, .bb-rule--4b h3 { color: #6ee7b7; }
.bb-rule--7 { --rule-glow: #ff7bb8; }
.bb-rule--7 .bb-rule-num, .bb-rule--7 h3 { color: #ff7bb8; }
.bb-rule h3 { font-size: .94rem; margin: 0 0 6px; letter-spacing: -.01em; }
.bb-rule p { font-size: .84rem; color: var(--bb-muted); line-height: 1.5; margin: 0; }
.bb-rule-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.bb-rule-list li {
  font-size: .82rem; color: var(--bb-muted); line-height: 1.4;
  padding-left: 15px; position: relative;
}
.bb-rule-list li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--rule-glow, var(--bb-cyan-2));
}
.bb-rule-example { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.bb-rule-good, .bb-rule-bad {
  display: inline-flex; font-size: .78rem; padding: 4px 9px; border-radius: 7px; font-style: normal;
}
.bb-rule-good { background: rgba(123,228,255,.1); color: var(--bb-cyan-2); }
.bb-rule-bad { background: rgba(255,255,255,.05); color: var(--bb-soft); text-decoration: line-through; }

.bb-biblio-main { min-width: 0; text-align: center; }
.bb-biblio-main .bb-ask { margin: 0 auto; }

.bb-biblio-status {
  margin-top: 26px; font-size: .86rem; color: var(--bb-muted); min-height: 1.2em; text-align: left;
}
.bb-compare-link[hidden] { display: none; }
.bb-compare-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
  font-size: .76rem; font-weight: 600; color: var(--bb-soft);
  border-bottom: 1px solid transparent; transition: color .15s, border-color .15s;
}
.bb-compare-link:hover { color: var(--bb-cyan-2); border-bottom-color: var(--bb-cyan-2); }
.bb-biblio-results { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; text-align: left; }
.bb-load-more[hidden] { display: none; }
.bb-load-more {
  display: block; margin: 16px auto 0; font-size: .84rem; font-weight: 600;
  color: var(--bb-cyan-2); background: rgba(123,228,255,.08); border: 1px solid var(--bb-border-hi);
  border-radius: 999px; padding: 9px 22px; cursor: pointer; transition: background .15s, transform .15s;
}
.bb-load-more:hover { background: rgba(123,228,255,.16); transform: translateY(-1px); }
.bb-load-more:disabled { opacity: .5; cursor: wait; }
.bb-biblio-item {
  background: var(--bb-glass); border: 1px solid var(--bb-border); border-radius: 14px;
  padding: 16px 18px; display: flex; flex-direction: column; gap: 10px;
  animation: bbFadeIn .35s ease both; min-width: 0; max-width: 100%; box-sizing: border-box;
}
.bb-biblio-toprow { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; min-width: 0; }
.bb-biblio-toprow > div:first-child { min-width: 0; }
.bb-biblio-item p { font-size: .89rem; color: var(--bb-text); line-height: 1.55; margin: 0; }
.bb-biblio-source {
  display: inline-block; font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; margin-bottom: 6px;
}
.bb-biblio-source--pubmed { background: rgba(123,228,255,.12); color: var(--bb-cyan-2); }
.bb-biblio-source--openalex { background: rgba(180,139,255,.14); color: var(--bb-violet); }
/* la vecchia regola generica ".bb-biblio-item a" (font-size, nowrap
   forzato...) è stata tolta: sovrascriveva i nuovi pulsanti icona+testo
   (.bb-action-btn) e rompeva la griglia su mobile, spingendo l'elenco
   fuori dal centro della pagina */

/* nome dell'autore cercato, evidenziato dentro la citazione */
.bb-author-mark {
  background: rgba(180,139,255,.28); color: var(--bb-cyan-2);
  padding: 0 3px; border-radius: 4px; font-style: normal;
}

/* anteprima abstract al passaggio del mouse */
.bb-abstract-tip {
  position: absolute; z-index: 300; max-width: 420px; max-height: 260px; overflow-y: auto;
  background: rgba(4,14,32,.97); backdrop-filter: blur(18px); border: 1px solid var(--bb-border-hi);
  border-radius: 12px; padding: 14px 16px; font-size: .82rem; line-height: 1.55; color: var(--bb-text);
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  pointer-events: none;
}
.bb-abstract-tip.is-visible { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
@media (max-width: 700px) { .bb-abstract-tip { display: none; } }

/* colonna di pulsanti su desktop, griglia a due colonne su schermi
   stretti così anche con più pulsanti restano su due righe invece di
   allungarsi in verticale */
.bb-biblio-actions {
  display: grid; grid-template-columns: repeat(2, auto); gap: 6px; justify-content: end; flex-shrink: 0; min-width: 0;
}
@media (max-width: 560px) {
  .bb-biblio-actions { grid-template-columns: repeat(3, 1fr); width: 100%; justify-content: stretch; }
}

/* stile unico per tutti i pulsanti-azione (copia, abstract, carrello,
   email, articoli simili, PDF): stessa struttura icona+testo, così si
   allineano bene in griglia invece di avere altezze/larghezze diverse */
.bb-action-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center;
  font-size: .68rem; font-weight: 600; letter-spacing: .01em; line-height: 1.2;
  background: rgba(123,228,255,.06); border: 1px solid var(--bb-border); color: var(--bb-muted);
  border-radius: 10px; padding: 8px 6px; cursor: pointer; transition: background .15s, color .15s, border-color .15s, transform .15s;
  min-width: 0; max-width: 100%; box-sizing: border-box;
}
.bb-action-btn:hover { transform: translateY(-1px); }
.bb-action-btn svg { width: 16px; height: 16px; }
@media (min-width: 561px) {
  .bb-action-btn { flex-direction: row; font-size: .72rem; padding: 7px 10px; }
  .bb-action-btn svg { width: 14px; height: 14px; }
}
.bb-action-btn svg { flex-shrink: 0; }
.bb-action-btn__label { min-width: 0; overflow-wrap: break-word; }
.bb-action-btn:hover { background: rgba(123,228,255,.12); color: var(--bb-text); border-color: var(--bb-border-hi); }
.bb-action-btn.is-copied, .bb-action-btn.is-open { background: rgba(123,228,255,.18); color: var(--bb-cyan-2); border-color: var(--bb-border-hi); }

/* pulsante abstract: alternativa cliccabile al tooltip al passaggio del
   mouse, indispensabile su mobile dove non esiste l'hover — su desktop
   il tooltip al passaggio del mouse basta da solo, il pulsante sarebbe
   ridondante */
@media (min-width: 701px) { .bb-biblio-abstract-btn { display: none; } }
.bb-abstract-inline {
  padding: 12px 14px;
  background: rgba(6,20,46,.5); border: 1px solid var(--bb-border); border-radius: 10px;
  font-size: .82rem; line-height: 1.55; color: var(--bb-text);
  animation: bbFadeIn .2s ease both;
}

/* pulsante per scrivere all'autore: mostrato solo se un'email è
   realmente presente nei metadati (mai per default) */
.bb-biblio-email-btn { background: rgba(180,139,255,.08); border-color: rgba(180,139,255,.32); color: #c7aeff; }
.bb-biblio-email-btn:hover { background: rgba(180,139,255,.16); border-color: rgba(180,139,255,.5); }

/* pulsante "Articoli simili": solo voci PubMed, calcolo già pronto.
   Il click ricarica l'elenco principale (non apre un pannello qui
   accanto), quindi lo stato di caricamento sta sul pulsante stesso */
.bb-biblio-similar-btn { background: rgba(255,196,102,.08); border-color: rgba(255,196,102,.3); color: #ffd08a; }
.bb-biblio-similar-btn:hover { background: rgba(255,196,102,.16); border-color: rgba(255,196,102,.5); }
.bb-biblio-similar-btn.is-loading-similar { opacity: .6; cursor: wait; }
.bb-biblio-similar-btn.is-loading-similar svg { animation: bbSpin .8s linear infinite; }

/* verde = accesso libero al PDF (via OpenAlex/Unpaywall), rosso = a
   pagamento (porta comunque al riferimento bibliografico). */
a.bb-biblio-pdf--oa { background: rgba(61,255,192,.1); border-color: rgba(61,255,192,.4); color: #3dffc0; }
a.bb-biblio-pdf--oa:hover { background: rgba(61,255,192,.18); border-color: rgba(61,255,192,.6); }
a.bb-biblio-pdf--paywall { background: rgba(255,90,106,.08); border-color: rgba(255,90,106,.32); color: #ff8a95; }
a.bb-biblio-pdf--paywall:hover { background: rgba(255,90,106,.15); border-color: rgba(255,90,106,.5); }

.bb-biblio-copy-all {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .82rem; font-weight: 600; color: var(--bb-cyan-2);
  background: rgba(123,228,255,.08); border: 1px solid var(--bb-border-hi); border-radius: 999px;
  padding: 8px 16px; cursor: pointer; transition: background .15s, transform .15s;
}
.bb-biblio-copy-all:hover { background: rgba(123,228,255,.16); transform: translateY(-1px); }
.bb-biblio-copy-all.is-copied { background: rgba(123,228,255,.24); }

.bb-copyall-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.bb-export-btn {
  font-size: .78rem; font-weight: 600; color: var(--bb-muted);
  background: rgba(123,228,255,.05); border: 1px solid var(--bb-border); border-radius: 999px;
  padding: 7px 14px; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.bb-export-btn:hover { background: rgba(123,228,255,.12); color: var(--bb-text); border-color: var(--bb-border-hi); }

/* pulsante "+ Aggiungi" / "✓ Aggiunta" per il carrello */
.bb-biblio-basket-btn { background: rgba(180,139,255,.07); border-color: rgba(180,139,255,.3); color: var(--bb-violet); }
.bb-biblio-basket-btn:hover { background: rgba(180,139,255,.15); border-color: rgba(180,139,255,.5); }
.bb-biblio-basket-btn.is-added { background: rgba(180,139,255,.22); color: var(--bb-cyan-2); border-color: rgba(180,139,255,.5); }

/* barra fissa in basso: appare quando il carrello ha almeno una voce */
.bb-basket-bar[hidden] { display: none; }
.bb-basket-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 24px; background: rgba(4,14,32,.96); backdrop-filter: blur(18px);
  border-top: 1px solid var(--bb-border-hi); box-shadow: 0 -12px 40px rgba(0,0,0,.4);
}
.bb-basket-count { font-size: .88rem; color: var(--bb-text); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.bb-basket-count strong { color: var(--bb-cyan-2); font-size: 1.05rem; }
.bb-basket-hint { font-size: .74rem; color: var(--bb-soft); font-weight: 400; }
@media (max-width: 700px) { .bb-basket-hint { flex-basis: 100%; } }
.bb-basket-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.bb-basket-actions button {
  font-size: .78rem; font-weight: 600; white-space: nowrap;
  background: rgba(123,228,255,.08); border: 1px solid var(--bb-border-hi); color: var(--bb-cyan-2);
  border-radius: 999px; padding: 7px 14px; cursor: pointer; transition: background .15s, transform .15s;
}
.bb-basket-actions button:hover { background: rgba(123,228,255,.16); transform: translateY(-1px); }
#bbBasketClear { color: var(--bb-muted) !important; border-color: var(--bb-border) !important; background: rgba(255,90,106,.06) !important; }
#bbBasketClear:hover { background: rgba(255,90,106,.14) !important; color: #ff8a95 !important; }

/* menu a tendina "Esporta": raggruppa i formati in un solo pulsante,
   così sulla barra mobile ne restano solo 3 invece di 6 e non si accavallano */
.bb-export-menu { position: relative; }
#bbExportToggle { display: inline-flex; align-items: center; gap: 6px; }
#bbExportToggle svg { transition: transform .15s; }
#bbExportToggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.bb-export-dropdown[hidden] { display: none; }
.bb-export-dropdown {
  position: absolute; bottom: calc(100% + 10px); right: 0; z-index: 95;
  display: flex; flex-direction: column; gap: 4px; min-width: 150px;
  background: rgba(8,20,44,.98); backdrop-filter: blur(18px);
  border: 1px solid var(--bb-border-hi); border-radius: 12px; padding: 6px;
  box-shadow: 0 12px 34px rgba(0,0,0,.45);
}
.bb-export-dropdown button {
  width: 100%; text-align: left; white-space: nowrap;
  font-size: .78rem; font-weight: 600;
  background: transparent; border: none; color: var(--bb-cyan-2);
  border-radius: 8px; padding: 8px 10px; cursor: pointer; transition: background .15s;
}
.bb-export-dropdown button:hover { background: rgba(123,228,255,.12); }

/* filtro anno nel form di ricerca */
.bb-year-filter {
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
  margin-top: 12px; font-size: .82rem; color: var(--bb-muted);
}
.bb-year-filter input {
  width: 108px; background: rgba(6,20,46,.5); border: 1px solid var(--bb-border); border-radius: 8px;
  color: var(--bb-text); padding: 6px 8px; font-size: .85rem; text-align: center;
}
.bb-year-filter input:focus { outline: none; border-color: var(--bb-border-hi); }
.bb-year-hint { color: var(--bb-soft); font-size: .74rem; }

@keyframes bbFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) {
  .bb-biblio-toprow { flex-direction: column; gap: 8px; }
  .bb-basket-bar { flex-direction: column; align-items: stretch; padding: 12px 16px; }
  .bb-basket-actions { justify-content: space-between; }
}

/* ── SEZIONI ── */
.bb-section { padding: 74px 0; position: relative; }
.bb-section-alt { background: rgba(255,255,255,.015); }
.bb-section-head { max-width: 700px; margin: 0 auto 20px; text-align: center; }
.bb-section-head h2 { font-size: clamp(1.7rem, 3.6vw, 2.3rem); letter-spacing: -.02em; margin-bottom: 16px; }
.bb-section-lead { color: var(--bb-muted); font-size: 1.02rem; line-height: 1.65; }

/* ── COSTELLAZIONE ── */
.bb-constellation-wrap { display: flex; justify-content: center; margin: 30px 0 8px; }
.bb-constellation { width: min(440px, 100%); }
.bb-constellation svg { width: 100%; height: auto; overflow: visible; }
.bb-cline {
  stroke: url(#bbLineGrad); stroke-width: 1.4; fill: none;
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s ease;
}
.bb-constellation.bb-visible .bb-cline { stroke-dashoffset: 0; }
.bb-ccore { transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; transform: scale(.6);
  transition: opacity .5s ease, transform .5s ease; }
.bb-constellation.bb-visible .bb-ccore { opacity: 1; transform: scale(1); }
.bb-cnode {
  transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; transform: scale(.3);
  transition: opacity .45s ease, transform .45s ease;
}
.bb-constellation.bb-visible .bb-cnode { opacity: 1; transform: scale(1); }
.bb-clabel { opacity: 0; transition: opacity .5s ease; fill: var(--bb-muted); font-size: 12px; }
.bb-constellation.bb-visible .bb-clabel { opacity: 1; }
.bb-ccore-label { fill: var(--bb-cyan-2); font-size: 15px; font-weight: 700; }

.bb-chips-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 30px; }
.bb-value-chip {
  font-size: .82rem; padding: 9px 16px; border-radius: 999px;
  background: rgba(123,228,255,.06); border: 1px solid var(--bb-border); color: var(--bb-muted);
}

.bb-footer { position: relative; z-index: 2; text-align: center; padding: 22px 24px 30px; font-size: .74rem; color: var(--bb-soft); }
.bb-footer a { color: var(--bb-cyan-2); }
.bb-footer a:hover { text-decoration: underline; }

.bb-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.bb-reveal.bb-visible { opacity: 1; transform: none; }

/* riquadri: ingresso più marcato — zoom leggero, molla nella curva, e
   un lampo del colore proprio del riquadro che si assesta sul bagliore
   di riposo già definito sopra */
.bb-rule.bb-reveal {
  transform: translateY(22px) scale(.92);
  box-shadow: -6px 0 40px -6px var(--rule-glow, transparent), 0 0 0 1px rgba(255,255,255,.02) inset;
  transition: opacity .6s cubic-bezier(.22,.68,0,1.3), transform .6s cubic-bezier(.22,.68,0,1.3), box-shadow .8s ease;
}
.bb-rule.bb-reveal.bb-visible {
  transform: none;
  box-shadow: -6px 0 22px -14px var(--rule-glow, transparent), 0 0 0 1px rgba(255,255,255,.02) inset;
}

@media (prefers-reduced-motion: reduce) { .bb-reveal { opacity: 1; transform: none; transition: none; box-shadow: -6px 0 22px -14px var(--rule-glow, transparent), 0 0 0 1px rgba(255,255,255,.02) inset; } }

@media (max-width: 560px) {
  .bb-hero { padding: 32px 0 48px; }
  .bb-section { padding: 44px 0; }
}