/* components.css — PlayJournal */
.card {
  background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: var(--radius);
  padding: 18px; box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.fact-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.fact-row .num { font-family: var(--font-heading); font-weight: 700; font-size: 22px; font-variant-numeric: tabular-nums; color: var(--accent); }

.accordion-item { border-bottom: 1px solid rgba(0,0,0,0.12); }
.accordion-item summary { cursor: pointer; padding: 14px 0; font-family: var(--font-heading); font-weight: 600; }
.accordion-item p { padding-bottom: 14px; }

.responsible-callout {
  background: #1A2E3A; color: var(--text-on-dark); border-radius: var(--radius);
  padding: 18px 20px; margin: 24px 0;
}
.responsible-callout a { color: var(--accent); }

.badge-18 {
  display: inline-block; background: var(--accent); color: #101214; font-weight: 700;
  font-size: 12px; padding: 2px 8px; border-radius: 999px; margin-left: 6px;
}

/* Interactive tool shared chrome — logic differs per site, styling shares tokens */
.tool-shell { background: #fff; border: 1px solid rgba(0,0,0,0.1); border-radius: var(--radius); padding: 20px; margin: 24px 0; }
.tool-summary { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; font-family: var(--font-heading); }
.tool-summary .item { background: var(--bg-light); border-radius: var(--radius); padding: 8px 14px; font-size: 14px; }
.js-only { }
.no-js .js-only { display: none; }
.state-warning { border: 2px solid var(--warn); background: rgba(180,83,31,0.08); border-radius: var(--radius); padding: 10px 14px; display: flex; gap: 8px; align-items: flex-start; }
.state-success { border: 2px solid var(--success); background: rgba(44,110,91,0.08); border-radius: var(--radius); padding: 10px 14px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Age gate */
.age-gate {
  position: fixed; inset: 0; background: rgba(10,12,14,0.82); z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: var(--gutter);
}
.age-gate-panel { background: #fff; color: var(--text-on-light); border-radius: var(--radius); padding: 28px; max-width: 420px; }
.age-gate-actions { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.age-gate-blocked { position: fixed; inset: 0; background: var(--bg-light); z-index: 199; display: flex; align-items: center; }
.age-gate-blocked .wrap { padding: 40px var(--gutter); }

/* Cookie banner */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
  background: var(--bg-dark); color: var(--text-on-dark); padding: 16px var(--gutter);
}
.cookie-banner-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.cookie-banner-inner p { margin: 0; color: var(--text-on-dark); }
.cookie-actions { display: flex; gap: 10px; }

table.compare th:first-child, table.compare td:first-child { font-family: var(--font-heading); font-weight: 600; }