/* Pagina articolo news (IT/EN) — estratto da news/article.php (prima era <style> inline in ogni pagina) */
.news-article-page {
  padding-top: calc(var(--header-height) + 2rem);
  padding-bottom: 6rem;
}

.news-article-page .container {
  max-width: 800px;
}

.article-footer-note {
  margin-top: 3rem;
  padding: 0.875rem 1.25rem;
  font-size: 0.8125rem;
  color: var(--white-dim);
  line-height: 1.6;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-md);
}
.article-footer-note .ai-icon {
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.35rem;
  border-radius: 2px;
}
.article-ai-disclaimer {
  margin: 0.75rem 0 0;
  padding: 0.5rem 0.875rem;
  font-size: 0.8125rem;
  color: var(--white-dim);
  line-height: 1.5;
  background: rgba(255,255,255,0.03);
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.article-ai-disclaimer .ai-icon {
  flex-shrink: 0;
  display: inline-block;
  border-radius: 2px;
}
.article-ai-disclaimer .ai-disclaimer-text {
  opacity: 0.85;
}
.article-author {
  font-size: 0.8125rem;
  color: var(--brand);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--white-dim);
  opacity: 0.82;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}
.breadcrumbs a {
  color: var(--white-dim);
  transition: color 0.2s var(--ease-smooth);
}
@media (hover: hover) { .breadcrumbs a:hover {
  color: var(--brand);
} }

.article-header {
  margin-bottom: 3rem;
}

.article-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--white-dim);
  opacity: 0.88;
}

.article-sources {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 0.875rem;
  line-height: 1.7;
}
.article-sources-label {
  font-weight: 700;
  color: var(--white-dim);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.article-sources-text {
  color: var(--white-dim);
}
.article-sources-sep {
  color: rgba(255,255,255,0.15);
}
.article-sources-link {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(0,212,255,0.35);
  transition: all 0.2s var(--ease-smooth);
}
@media (hover: hover) { .article-sources-link:hover {
  color: var(--white);
  text-decoration-color: var(--white);
} }
.article-sources-name {
  color: var(--white-dim);
}

.post-updated {
  padding: 0.125rem 0.5rem;
  background: var(--accent-subtle);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  color: var(--accent);
}

.article-title {
  font-size: clamp(2.3rem, 4vw, 3.75rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.03em;
  text-wrap: balance;
  color: var(--white);
}

.article-subtitle {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--white-dim);
  opacity: 0.88;
  margin-top: 1rem;
  text-wrap: balance;
  border-left: 3px solid var(--brand);
  padding-left: 1.25rem;
}

.article-cover {
  margin-top: 2rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
  aspect-ratio: 16 / 9;
}
.article-cover img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: top;
}
.cover-credit {
  margin: 0;
  padding: 0.15rem 0 0 0;
  font-size: 0.625rem;
  line-height: 1.3;
  text-align: start;
  color: rgba(255,255,255,0.55);
}
.post-content > p:has(> picture) {
  text-align: center;
  margin-bottom: 0 !important;
  line-height: 0;
  font-size: 0;
}
.post-content > p:has(> picture) picture {
  display: inline-block;
  margin: 1.5rem 0 0.75rem 0;
}
.post-content > p:has(> picture) img {
  display: block;
  margin: 0;
}

.post-content > p:has(> picture) + p {
  margin-top: 0 !important;
}
.post-content > p:has(> picture) + p em {
  display: block;
  margin: 0;
  padding: 0.15rem 0 0 0;
  font-size: 0.625rem;
  line-height: 1.3;
  text-align: start;
  color: rgba(255,255,255,0.55);
  font-style: normal;
}

.post-content {
  font-size: 1.125rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.78);
}
.post-content h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--white);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}
.post-content h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--white);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}
.post-content p {
  margin-bottom: 1.25rem;
}
.post-content strong {
  color: var(--white);
  font-weight: 600;
}
.post-content a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(0, 212, 255, 0.3);
  transition: all 0.2s var(--ease-smooth);
}
@media (hover: hover) { .post-content a:hover {
  text-decoration-color: var(--brand);
} }
.post-content ul,
.post-content ol {
  margin-bottom: 1.25rem;
  padding-left: 1.5rem;
}
.post-content li {
  margin-bottom: 0.5rem;
}
.post-content blockquote {
  border-left: 3px solid var(--brand);
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  background: var(--surface);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--white-dim);
  font-style: italic;
}
.post-content pre {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.6;
  margin: 1.5rem 0;
}
.post-content code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: rgba(255,255,255,0.06);
  padding: 0.15em 0.35em;
  border-radius: 3px;
}
.post-content pre code {
  background: none;
  padding: 0;
  border-radius: 0;
}
.post-content hr {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.06);
  margin: 2.5rem 0;
}
.post-content img {
  display: block;
  margin: 1.5rem auto;
  border-radius: var(--radius-md);
}

/* ── AI stat block (StatisticalVariable) ── */
.ai-stat-block {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-md);
}
.ai-stat-caption { font-style: normal; }
.ai-stat-label { display: block; font-size: 0.8125rem; color: var(--white-dim); margin-bottom: 0.25rem; }
.ai-stat-value { display: block; font-size: 1.75rem; font-weight: 700; color: var(--white); line-height: 1.2; }
.ai-stat-source { display: block; margin-top: 0.5rem; font-size: 0.75rem; color: var(--white-dim); opacity: 0.7; }
.ai-stat-source a { color: var(--brand-dim); text-decoration: none; }
@media (hover: hover) { .ai-stat-source a:hover { text-decoration: underline; } }

/* ── Expert quote block ── */
.expert-quote {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  border-left: 3px solid var(--accent);
  background: rgba(255,255,255,0.02);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.expert-quote p { font-size: 1.0625rem; font-style: italic; color: var(--white); margin-bottom: 0.75rem; }
.expert-quote-footer { font-size: 0.8125rem; color: var(--white-dim); }
.expert-quote-footer a { color: var(--brand-dim); text-decoration: none; }
@media (hover: hover) { .expert-quote-footer a:hover { text-decoration: underline; } }

/* ── Google source banner: fumetto "Psst!" ──
   Sequenza unica (~2,6 s) quando entra in vista (.is-in, aggiunta da uno script accanto al link);
   poi resta fermo: la vita torna solo su hover. Niente animazioni con prefers-reduced-motion. */
a.google-source-banner {
  --gsb-yellow: #fbbc05;
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  width: min(100%, 580px);
  margin: 2.25rem auto 2.5rem;
  padding: 0.875rem 0.875rem 0.875rem 1rem;
  border: 1.5px solid rgba(0,212,255,0.35);
  border-radius: 20px;
  background: linear-gradient(135deg, #10202b 0%, #0c161e 100%);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,0.6), 0 0 0 4px rgba(0,212,255,0.04);
  color: #e5f6ff;
  text-decoration: none;
  box-sizing: border-box;
  transform-origin: 12% 100%;
  transition: transform 0.35s var(--ease-spring), border-color 0.25s var(--ease-smooth), box-shadow 0.25s var(--ease-smooth);
}
/* codina del fumetto */
a.google-source-banner::after {
  content: "";
  position: absolute;
  left: 34px;
  bottom: -9px;
  width: 16px;
  height: 16px;
  background: #0c161e;
  border-right: 1.5px solid rgba(0,212,255,0.35);
  border-bottom: 1.5px solid rgba(0,212,255,0.35);
  border-bottom-right-radius: 4px;
  transform: skewX(-18deg) rotate(45deg);
  transition: border-color 0.25s var(--ease-smooth);
}
/* riflesso che attraversa il fumetto */
.google-source-banner-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}
.google-source-banner-shine::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 35%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.12) 45%, rgba(0,229,255,0.18) 55%, transparent);
  transform: translateX(-120%) skewX(-18deg);
}
/* bollino "Psst!" */
.google-source-banner-kicker {
  position: absolute;
  top: -0.8rem;
  left: 1.25rem;
  padding: 0.125rem 0.5rem 0.1rem;
  border-radius: 6px;
  background: var(--gsb-yellow);
  color: #1a1400;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.3;
  box-shadow: 0 3px 0 rgba(0,0,0,0.35);
  transform: rotate(-6deg);
  transform-origin: 30% 80%;
}
/* G + stella */
.google-source-banner-badge {
  position: relative;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
}
a.google-source-banner img.google-source-banner-icon {
  width: 26px;
  height: 26px;
  margin: 0;
  border-radius: 0;
}
.google-source-banner-star {
  position: absolute;
  top: -5px;
  right: -6px;
  width: 18px;
  height: 18px;
  fill: var(--gsb-yellow);
  stroke: #0c161e;
  stroke-width: 1.6;
  stroke-linejoin: round;
  transition: transform 0.4s var(--ease-spring);
}
/* scintille attorno alla stella */
.google-source-banner-badge i {
  position: absolute;
  top: 4px;
  right: 3px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gsb-yellow);
  opacity: 0;
  pointer-events: none;
}
.google-source-banner-badge i:nth-of-type(1) { --dx: 0px;   --dy: -14px; }
.google-source-banner-badge i:nth-of-type(2) { --dx: 13px;  --dy: -6px; }
.google-source-banner-badge i:nth-of-type(3) { --dx: 11px;  --dy: 9px; }
.google-source-banner-badge i:nth-of-type(4) { --dx: -10px; --dy: -11px; }
.google-source-banner-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  line-height: 1.25;
  text-align: left;
}
.google-source-banner-sub {
  font-size: 0.9375rem;
  color: #a3cad8;
}
.google-source-banner-main {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: #fff;
}
/* evidenziatore sotto il titolo */
.google-source-banner-main > span {
  padding: 0 0.15em;
  background: linear-gradient(transparent 60%, rgba(251,188,5,0.32) 60%, rgba(251,188,5,0.32) 92%, transparent 92%) no-repeat 0 0 / 100% 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.google-source-banner-cta {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--brand);
  color: #00111a;
  transition: transform 0.3s var(--ease-spring), background 0.25s var(--ease-smooth);
}
.google-source-banner-cta svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (hover: hover) {
  a.google-source-banner:hover {
    border-color: rgba(0,229,255,0.8);
    box-shadow: 0 14px 34px -12px rgba(0,0,0,0.65), 0 0 0 4px rgba(0,212,255,0.1);
    transform: translateY(-2px) rotate(-0.6deg);
  }
  a.google-source-banner:hover::after { border-color: rgba(0,229,255,0.8); }
  a.google-source-banner:hover .google-source-banner-star { transform: rotate(72deg) scale(1.2); }
  a.google-source-banner:hover .google-source-banner-cta { transform: translateX(3px); background: #5ce8ff; }
}
a.google-source-banner:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 4px;
}
html[data-theme="light"] .google-source-banner-badge { background: #fff; }
html[data-theme="light"] .google-source-banner-kicker { color: #1a1400; }
html[data-theme="light"] .google-source-banner-cta { color: #00111a; }

/* ── Sequenza d'ingresso ── */
@keyframes gsbBoing {
  0%   { transform: scale(1); }
  30%  { transform: scale(0.95) rotate(-1deg); }
  60%  { transform: scale(1.025) rotate(0.5deg); }
  80%  { transform: scale(0.995); }
  100% { transform: scale(1); }
}
@keyframes gsbWiggle {
  0%, 100% { transform: rotate(-6deg) scale(1); }
  20% { transform: rotate(8deg) scale(1.18); }
  40% { transform: rotate(-12deg) scale(1.1); }
  60% { transform: rotate(4deg) scale(1.04); }
  80% { transform: rotate(-8deg) scale(1); }
}
@keyframes gsbHop {
  0%, 100% { transform: translateY(0); }
  35% { transform: translateY(-7px) rotate(-8deg); }
  65% { transform: translateY(1px) rotate(3deg); }
}
@keyframes gsbStamp {
  0%   { transform: scale(0) rotate(-120deg); }
  60%  { transform: scale(1.45) rotate(20deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes gsbSpark {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.5); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1); }
}
@keyframes gsbMarker {
  from { background-size: 0% 100%; }
  to   { background-size: 100% 100%; }
}
@keyframes gsbShine {
  from { transform: translateX(-120%) skewX(-18deg); }
  to   { transform: translateX(520%) skewX(-18deg); }
}
@keyframes gsbNudge {
  0%, 100% { transform: translateX(0); }
  25%, 75% { transform: translateX(5px); }
  50% { transform: translateX(0); }
}
@media (prefers-reduced-motion: no-preference) {
  a.google-source-banner.is-in { animation: gsbBoing 0.7s var(--ease-smooth) both; }
  .is-in .google-source-banner-kicker { animation: gsbWiggle 0.8s ease-in-out 0.3s both; }
  .is-in .google-source-banner-badge { animation: gsbHop 0.6s ease-in-out 0.4s both; }
  .is-in .google-source-banner-star { animation: gsbStamp 0.6s var(--ease-spring) 0.7s both; }
  .is-in .google-source-banner-badge i { animation: gsbSpark 0.6s ease-out 1s both; }
  .is-in .google-source-banner-main > span { animation: gsbMarker 0.7s var(--ease-out-expo) 1.05s both; }
  .is-in .google-source-banner-shine::before { animation: gsbShine 1s ease-in-out 1.5s both; }
  .is-in .google-source-banner-cta svg { animation: gsbNudge 0.7s ease-in-out 2s both; }
}

@media (max-width: 600px) {
  a.google-source-banner {
    gap: 0.75rem;
    padding: 0.75rem 0.75rem 0.75rem 0.875rem;
  }
  .google-source-banner-badge { width: 40px; height: 40px; }
  a.google-source-banner img.google-source-banner-icon { width: 22px; height: 22px; }
  .google-source-banner-sub { font-size: 0.875rem; }
  .google-source-banner-main { font-size: 0.9375rem; }
  .google-source-banner-cta { width: 34px; height: 34px; }
}

.related-posts {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.related-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 1.25rem;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.related-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all 0.25s var(--ease-smooth);
}

@media (hover: hover) { .related-card:hover {
  background: var(--accent-subtle);
  border-color: rgba(139, 92, 246, 0.2);
} }

.related-card-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--white);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.related-card-date {
  font-size: 0.75rem;
  font-family: var(--font-mono);
  color: var(--white-dim);
  opacity: 0.5;
}

@media (max-width: 820px) {
  .related-grid {
    grid-template-columns: 1fr;
  }
}

.article-nav {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.article-nav-back {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--brand-dim);
  transition: all 0.2s var(--ease-smooth);
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
@media (hover: hover) { .article-nav-back:hover {
  color: var(--brand);
} }

.article-nav-links {
  display: flex;
  gap: 1rem;
}

.article-nav-link {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem 1.25rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all 0.25s var(--ease-smooth);
}
@media (hover: hover) { .article-nav-link:hover {
  background: var(--accent-subtle);
  border-color: rgba(139, 92, 246, 0.2);
} }

.article-nav-prev .article-nav-direction {
  justify-content: flex-start;
}
.article-nav-next .article-nav-direction {
  justify-content: flex-end;
}

.article-nav-direction {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--brand);
  opacity: 0.85;
  transition: all 0.2s var(--ease-smooth);
}
@media (hover: hover) { .article-nav-link:hover .article-nav-direction {
  opacity: 1;
  color: var(--brand);
} }

.article-nav-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--white);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.8;
}

.article-nav-prev:only-child {
  max-width: 50%;
}
.article-nav-next:only-child {
  max-width: 50%;
  margin-left: auto;
}

@media (max-width: 820px) {
  .news-article-page {
    padding-top: calc(var(--header-height) + 1rem);
    padding-bottom: 5.5rem;
  }
  .post-content {
    font-size: 1.125rem;
  }
  .article-nav-title {
    display: none;
  }
  .article-nav-links {
    gap: 0.75rem;
  }
  .article-nav-link {
    padding: 0.75rem 1rem;
  }
}

/* ── Comments delimiter ── */
.comments-delimiter {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.04);
  margin: 3rem 0;
  width: 100%;
}

/* ── Comments section ── */
.comments-section {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.comments-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-md);
  color: var(--white);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s var(--ease-smooth);
  font-family: inherit;
}
@media (hover: hover) { .comments-toggle:hover {
  background: var(--accent-subtle);
  border-color: rgba(139, 92, 246, 0.2);
} }
.comments-toggle-icon {
  flex-shrink: 0;
  display: inline-flex;
  color: var(--brand);
  opacity: 0.8;
}
.comments-toggle-label {
  flex: 1;
  text-align: left;
}
.comments-toggle-count {
  color: var(--white-dim);
  font-size: 0.8125rem;
  font-weight: 400;
}
.comments-toggle-arrow {
  flex-shrink: 0;
  color: var(--white-dim);
  transition: transform 0.3s var(--ease-smooth);
}
.comments-toggle[aria-expanded="true"] .comments-toggle-arrow {
  transform: rotate(180deg);
}

.comments-container {
  margin-top: 1.25rem;
}

.comments-list {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.comment-item {
  padding: 1rem 1.25rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-md);
}

.comment-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.comment-nickname {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--brand);
  font-family: var(--font-mono);
}

.comment-time {
  font-size: 0.75rem;
  color: var(--white-dim);
  opacity: 0.5;
  flex-shrink: 0;
}

.comment-body {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.8);
  word-wrap: break-word;
}

.comments-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--white-dim);
  font-size: 0.875rem;
  opacity: 0.6;
  margin-bottom: 2rem;
}

/* ── Comment form ── */
.comment-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.comment-form-field {
  display: flex;
  flex-direction: column;
}

.comment-input,
.comment-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-md);
  color: var(--white);
  font-family: inherit;
  font-size: 0.9375rem;
  line-height: 1.5;
  transition: border-color 0.2s var(--ease-smooth);
  outline: none;
  box-sizing: border-box;
}

.comment-input:focus,
.comment-textarea:focus {
  border-color: var(--brand);
  background: rgba(0, 212, 255, 0.04);
}

.comment-textarea {
  resize: vertical;
  min-height: 80px;
}

.comment-remember {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--white-dim);
  cursor: pointer;
  user-select: none;
}

.comment-remember input[type="checkbox"] {
  accent-color: var(--brand);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.comment-gdpr {
  font-size: 0.75rem;
  color: var(--white-dim);
  opacity: 0.55;
  line-height: 1.5;
  margin: 0;
}

.comment-form-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.comment-submit {
  min-width: 160px;
}

.comment-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.comment-feedback {
  font-size: 0.875rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  line-height: 1.5;
}

.comment-feedback:not([hidden]) {
  display: block;
}

.comment-feedback.comment-feedback-success {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.comment-feedback.comment-feedback-error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.comment-feedback.comment-feedback-warning {
  background: rgba(234, 179, 8, 0.1);
  border: 1px solid rgba(234, 179, 8, 0.2);
  color: #eab308;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

/* ── Comments animation ── */
@keyframes commentFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.comments-container-visible {
  animation: commentFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.comments-container-visible .comment-item {
  animation: commentFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
}

.comments-container-visible .comment-item:nth-child(1) { animation-delay: 0.02s; }
.comments-container-visible .comment-item:nth-child(2) { animation-delay: 0.05s; }
.comments-container-visible .comment-item:nth-child(3) { animation-delay: 0.08s; }
.comments-container-visible .comment-item:nth-child(4) { animation-delay: 0.11s; }
.comments-container-visible .comment-item:nth-child(5) { animation-delay: 0.14s; }
.comments-container-visible .comment-item:nth-child(6) { animation-delay: 0.17s; }
.comments-container-visible .comment-item:nth-child(7) { animation-delay: 0.20s; }
.comments-container-visible .comment-item:nth-child(8) { animation-delay: 0.23s; }
.comments-container-visible .comment-item:nth-child(9) { animation-delay: 0.26s; }
.comments-container-visible .comment-item:nth-child(n+10) { animation-delay: 0.28s; }

.comments-container-visible .comment-form {
  animation: commentFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

/* ── Sort bar ── */
.comments-sort-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  padding: 0.5rem 0;
}
.comments-sort-label {
  font-size: 0.8125rem;
  color: var(--white-dim);
  opacity: 0.6;
}
.comments-sort-btn {
  padding: 0.25rem 0.75rem;
  font-size: 0.8125rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-sm);
  color: var(--white-dim);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s var(--ease-smooth);
}
@media (hover: hover) { .comments-sort-btn:hover {
  border-color: rgba(139, 92, 246, 0.3);
  color: var(--white);
} }
.comments-sort-btn.active {
  background: rgba(139, 92, 246, 0.1);
  border-color: var(--brand);
  color: var(--brand);
}

/* ── Reply button ── */
.comment-reply-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.5rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-family: inherit;
  background: none;
  border: none;
  color: var(--white-dim);
  opacity: 0.65;
  cursor: pointer;
  transition: all 0.2s var(--ease-smooth);
}
@media (hover: hover) { .comment-reply-btn:hover {
  opacity: 1;
  color: var(--brand);
} }
.comment-reply-btn svg {
  flex-shrink: 0;
}

/* ── Reply form (inline, nested) ── */
.comment-reply-form {
  margin-top: 0.75rem;
  padding-left: 1rem;
  border-left: 2px solid rgba(139, 92, 246, 0.15);
}
.comment-reply-form .comment-form-field {
  margin-bottom: 0.5rem;
}
.comment-reply-form .reply-textarea {
  min-height: 60px;
}
.comment-reply-form .comment-form-actions {
  gap: 0.5rem;
}
.comment-reply-cancel {
  font-size: 0.8125rem;
  font-family: inherit;
  cursor: pointer;
  padding: 0.5rem 1rem;
  background: none;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  color: var(--white-dim);
  transition: all 0.2s var(--ease-smooth);
}
@media (hover: hover) { .comment-reply-cancel:hover {
  border-color: rgba(255,255,255,0.15);
  color: var(--white);
} }

/* ── Threaded replies ── */
.comment-replies {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0 0;
  border-left: 2px solid rgba(255,255,255,0.04);
  padding-left: 1rem;
}
.comment-replies .comment-item {
  margin-bottom: 0.75rem;
  background: rgba(255,255,255,0.015);
  border-color: rgba(255,255,255,0.04);
}
.comment-replies .comment-item:last-child {
  margin-bottom: 0;
}
.comment-depth-end {
  font-size: 0.75rem;
  color: var(--white-dim);
  opacity: 0.4;
  text-align: center;
  padding: 0.5rem 0;
  margin: 0;
}

/* ── Load more ── */
.comments-load-more {
  display: block;
  width: 100%;
  padding: 0.75rem;
  margin-bottom: 2rem;
  text-align: center;
  font-size: 0.875rem;
  font-family: inherit;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-md);
  color: var(--white-dim);
  cursor: pointer;
  transition: all 0.2s var(--ease-smooth);
}
@media (hover: hover) { .comments-load-more:hover {
  background: var(--accent-subtle);
  border-color: rgba(139, 92, 246, 0.2);
  color: var(--white);
} }
.comments-load-more[hidden] {
  display: none;
}

/* ── SICUREZZA: campo honeypot invisibile (antibot) ── */
.comment-hp {
  position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; width: 0;
}

/* ── Main form ── */
.comment-main {
  display: flex;
  flex-direction: column;
}

/* ── Box sintesi (fonti + contesto) e punti chiave ── */
.article-meta a.card-category { text-decoration: none; }
.article-keypoints {
  margin: 1rem 0 0;
  padding: 0 0 0 1.25rem;
  border-left: 3px solid var(--brand);
  list-style: none;
  color: var(--white-dim);
  font-size: 1.05rem;
  line-height: 1.55;
}
.article-keypoints li { position: relative; padding-left: 1rem; }
.article-keypoints li + li { margin-top: 0.35rem; }
.article-keypoints li::before {
  content: ''; position: absolute; left: 0; top: 0.65em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--brand);
}
.article-synthesis {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  color: var(--white-dim);
}
.article-synthesis summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem;
  cursor: pointer; list-style: none; padding: 0.25rem 0;
}
.article-synthesis summary::-webkit-details-marker { display: none; }
.article-synthesis summary svg { color: var(--brand); flex-shrink: 0; }
.article-synthesis summary a { color: var(--brand); text-decoration: none; }
@media (hover: hover) { .article-synthesis summary a:hover { text-decoration: underline; } }
.article-synthesis-toggle { color: var(--brand); white-space: nowrap; }
.article-synthesis-toggle::after { content: ' ▾'; display: inline-block; transition: transform 0.2s; }
.article-synthesis[open] .article-synthesis-toggle::after { transform: rotate(180deg); }
.article-timeline {
  list-style: none; margin: 0.5rem 0 0.25rem; padding: 0 0 0 1rem;
  border-left: 1px solid rgba(255,255,255,0.12);
}
.article-timeline li { position: relative; padding: 0.3rem 0 0.3rem 0.75rem; line-height: 1.45; }
.article-timeline li::before {
  content: ''; position: absolute; left: calc(-1rem - 4px); top: 0.75em;
  width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.3);
}
.article-timeline li.is-current::before { background: var(--brand); }
.article-timeline time { display: inline-block; min-width: 5.5rem; opacity: 0.75; }
.article-timeline a { color: var(--white); text-decoration: none; }
@media (hover: hover) { .article-timeline a:hover { color: var(--brand); } }
.article-timeline li.is-current span { color: var(--white); font-weight: 600; }

/* ── Argomenti dell'articolo (link alle pagine argomento) ── */
.article-topics {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.75rem;
  margin: 0.75rem 0 0; font-size: 0.875rem;
}
.article-topic { color: var(--brand); text-decoration: none; }
@media (hover: hover) { .article-topic:hover { text-decoration: underline; } }

/* Titoletti promossi da normalizeHeadingLevels(): semantica h2/h3, aspetto originale */
.post-content h2.as-h3 { font-size: 1.25rem; font-weight: 600; margin-top: 2rem; margin-bottom: 0.75rem; letter-spacing: normal; }
.post-content h3.as-h4 { font-size: 1.1rem; font-weight: 600; margin-top: 1.5rem; margin-bottom: 0.5rem; }
.ai-disclaimer-link { color: var(--brand); text-decoration: none; white-space: nowrap; }
@media (hover: hover) { .ai-disclaimer-link:hover { text-decoration: underline; } }

/* ── Modalità di lettura ── */
.read-modes {
  display: inline-flex; gap: 0.25rem; padding: 0.25rem; margin: 0.9rem 0 0;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-full);
}
.read-modes[hidden] { display: none; }
.read-mode {
  padding: 0.4rem 0.8rem; border: 0; border-radius: var(--radius-full); background: transparent;
  color: var(--white-dim); font: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}
@media (hover: hover) { .read-mode:hover { color: var(--white); } }
.read-mode[aria-checked="true"] { background: var(--gradient-brand); color: var(--black); }
.read-mode:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.news-article-page[data-read-mode="quick"] .post-content,
.news-article-page[data-read-mode="quick"] .article-cover,
.news-article-page[data-read-mode="quick"] .cover-credit,
.news-article-page[data-read-mode="quick"] .article-header .article-keypoints,
.news-article-page[data-read-mode="quick"] .article-header > .article-subtitle { display: none; }
.quick-view { margin: 1.5rem 0 1rem; padding: 1.25rem 1.4rem; border: 1px solid rgba(0,212,255,0.2); border-radius: var(--radius-lg); background: rgba(0,212,255,0.03); }
.quick-view[hidden] { display: none; }
.quick-view .article-keypoints { margin-top: 0; }
.quick-lead { margin-top: 1rem; color: var(--white-dim); line-height: 1.7; }
.quick-lead p { margin: 0; }
.quick-more { margin-top: 1rem; padding: 0; border: 0; background: none; color: var(--brand); font: inherit; font-weight: 600; cursor: pointer; }
@media (max-width: 480px) {
  .read-modes { display: flex; width: 100%; }
  .read-mode { flex: 1; padding: 0.45rem 0.4rem; font-size: 0.75rem; }
}
.article-day-link { color: inherit; text-decoration: none; }
@media (hover: hover) { .article-day-link:hover time { color: var(--brand); } }

/* ── Sviluppi successivi (seguiti della storia) ── */
.article-followups { display: flex; flex-direction: column; gap: 0.5rem; margin: 1.25rem 0 0; }
.article-followups a { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.75rem 1rem; border-radius: var(--radius-md); border: 1px solid rgba(255,201,64,0.35); background: rgba(255,201,64,0.06); text-decoration: none; }
.article-followups-kicker { font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: #ffc940; }
.article-followups-title { color: var(--white); font-weight: 600; line-height: 1.4; }
@media (hover: hover) { .article-followups a:hover .article-followups-title { color: var(--brand); } }

/* ── Divergenze tra fonti ── */
.article-synthesis-diverge { color: #ffc940; white-space: nowrap; }
.article-diverge-note { margin: 0.6rem 0 0.4rem; padding: 0.7rem 0.9rem; border-left: 3px solid #ffc940; background: rgba(255,201,64,0.06); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; line-height: 1.55; color: var(--white-dim); }
.article-diverge-note strong { color: var(--white); }

/* ── Glossario (definizione al passaggio/tocco, niente scroll aggiuntivo) ── */
abbr.gloss { position: relative; text-decoration: underline dotted rgba(0,212,255,0.7); text-underline-offset: 3px; cursor: help; }
abbr.gloss::after {
  content: attr(data-def);
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%) translateY(4px);
  width: max-content; max-width: min(280px, 80vw); padding: 0.55rem 0.75rem; border-radius: 10px;
  background: #151827; border: 1px solid rgba(0,212,255,0.35); color: var(--white);
  font-size: 0.8125rem; font-weight: 400; line-height: 1.45; text-align: left; white-space: normal;
  box-shadow: 0 12px 30px rgba(0,0,0,0.45); opacity: 0; pointer-events: none; z-index: 20;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
abbr.gloss:focus::after { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (hover: hover) { abbr.gloss:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); } }
abbr.gloss:focus { outline: none; background: rgba(0,212,255,0.1); border-radius: 3px; }

/* ── Barra di avanzamento lettura ── */
.read-progress { position: fixed; left: 0; right: 0; top: var(--header-height); height: 2px; z-index: 90; background: var(--gradient-brand); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; transition: top 0.4s var(--ease-out-expo); }
/* Header nascosto dallo scroll: la barra sale e resta ancorata al bordo alto */
body:has(.site-header.header-hidden) .read-progress { top: 0; }
@media (prefers-reduced-motion: reduce) { .read-progress { display: none; } }

/* Link alla galassia delle news (/galassia/#slug) */
.article-galaxy { margin: 0.9rem 0 0; font-size: 0.85rem; }
.article-galaxy a { color: var(--white-dim); text-decoration: none; border-bottom: 1px dashed rgba(255, 255, 255, 0.2); }
.article-galaxy a:focus-visible { color: var(--brand); border-bottom-color: var(--brand); }
@media (hover: hover) { .article-galaxy a:hover { color: var(--brand); border-bottom-color: var(--brand); } }
.article-galaxy span { color: var(--brand); }

/* Tracciabilità (2026-10-06): fonti per punto chiave, origine, documento originale */
.kp-src { display: inline-block; min-width: 1.15em; padding: 0 0.3em; margin-left: 0.15em; font-size: 0.7em; line-height: 1.5; text-align: center; vertical-align: super; border-radius: 0.6em; background: rgba(0,212,255,0.12); color: var(--brand); text-decoration: none; }
.kp-src:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.kp-src-num { display: inline-block; min-width: 1.15em; margin-right: 0.25em; font-size: 0.75em; text-align: center; border-radius: 0.6em; background: rgba(0,212,255,0.12); color: var(--brand); scroll-margin-top: 6rem; }
.kp-src-num:target { background: var(--brand); color: var(--black, #000); }
.article-synthesis-origin { white-space: nowrap; }
.article-synthesis-origin.is-independent { color: #3ddc97; }
.article-synthesis-origin.is-single { color: var(--white-dim); }
.article-origin-note,
.article-primary-source { margin: 0.6rem 0 0.4rem; line-height: 1.55; color: var(--white-dim); }
.article-origin-note strong,
.article-primary-source strong { color: var(--white); }