/* Shared interaction polish for content pages. Progressive enhancement only:
   without JS (or with reduced motion) every element is simply visible. */

:root { interpolate-size: allow-keywords; }

/* Scroll reveal (class added by polish.js) */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.reveal.in { opacity: 1; transform: none; }

/* Animated stat bars (polish.js zeroes them, then restores on scroll into view) */
.bar i { transition: width .9s cubic-bezier(.25,.8,.3,1); }

/* Cards lift on hover */
.stat, .tool, .answer, .cta-band { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.stat:hover, .tool:hover { transform: translateY(-2px); border-color: rgba(245,179,1,.45); box-shadow: 0 6px 24px rgba(0,0,0,.35); }

/* Modernized tables: horizontal rules only, zebra, row hover, rounded frame */
.cmp-scroll { border: 1px solid var(--line); border-radius: 12px; }
.cmp-scroll table { min-width: 560px; }
.cmp-scroll th, .cmp-scroll td { border: 0; border-bottom: 1px solid var(--line); }
.cmp-scroll tr:last-child td { border-bottom: 0; }
.cmp-scroll tbody tr:nth-child(even) td, .cmp-scroll tr:nth-child(even) td { background: rgba(255,255,255,.015); }
.cmp-scroll tr:hover td { background: rgba(245,179,1,.05); }
.cmp-scroll tr.you:hover td, .cmp-scroll tr.you td { background: rgba(245,179,1,.06); }

/* Smooth expanding cards (tool entries and FAQs, built by polish.js) */
details.acc { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; margin: 0 0 14px; overflow: clip; transition: border-color .2s ease; }
details.acc:hover { border-color: rgba(245,179,1,.45); }
details.acc[open] { border-color: rgba(245,179,1,.35); }
details.acc summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 22px; }
details.acc summary::-webkit-details-marker { display: none; }
details.acc summary h3 { margin: 0; font-size: 18px; }
details.acc summary .chev { flex: 0 0 auto; width: 22px; height: 22px; color: var(--muted); transition: transform .3s ease, color .2s ease; }
details.acc[open] summary .chev { transform: rotate(90deg); color: var(--accent); }
details.acc .acc-body { padding: 0 22px; }
details.acc .acc-body > :last-child { margin-bottom: 18px; }
details.acc::details-content {
  block-size: 0; overflow-y: clip;
  transition: content-visibility .35s allow-discrete, block-size .35s ease;
}
details.acc[open]::details-content { block-size: auto; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .bar i, .stat, .tool, details.acc, details.acc summary .chev { transition: none; }
  details.acc::details-content { transition: none; }
}

/* Keyboard focus visibility */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
details.acc summary:focus-visible { outline-offset: -2px; }

/* Mobile navigation (polish.js builds it from the page's own tabs) */
.mnav-btn { display: none; background: none; border: 1px solid var(--line); border-radius: 8px; padding: 8px; cursor: pointer; color: var(--txt); align-items: center; }
.mnav-btn svg { display: block; }
.mnav-panel { display: none; }
@media (max-width: 720px) {
  .mnav-btn { display: flex; }
  .mnav-panel { position: absolute; top: 100%; left: 0; right: 0; background: rgba(11,14,20,.97); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); flex-direction: column; padding: 6px 24px 14px; }
  .mnav-open .mnav-panel { display: flex; }
  .mnav-panel a { padding: 13px 0; font-size: 16px; color: var(--txt); border-bottom: 1px solid var(--line); text-decoration: none; }
  .mnav-panel a:last-child { border-bottom: 0; }
  .mnav-panel a.on { color: var(--accent); }
}