/* Wasa Bothal — Safety evidence visual language, 2026-09-16
   This layer communicates evidence state, not product certification. */

:root {
  --safety-official-bg:#eaf1f4;
  --safety-official-ink:#26576b;
  --safety-scope-bg:#eef2f3;
  --safety-scope-ink:#52636b;
  --safety-check-bg:#f5f1e9;
  --safety-check-ink:#725e3d;
  --safety-use-bg:#eef3f0;
  --safety-use-ink:#42675c;
  --safety-boundary-bg:#f4f4f3;
  --safety-boundary-ink:#666a6d;
}

/* Safety is a decision system, not a seal. */
nav.main a[data-nav-key="safety"]::before {
  content:"";
  width:7px;
  height:7px;
  margin-right:3px;
  border:1.5px solid #5f786f;
  border-radius:2px;
  background:transparent;
}

body[data-topic-group="safety"] .hero,
body.safety-pillar .hero {
  background:linear-gradient(180deg,#eef4f1 0%,#f4f6f5 100%);
}
body[data-topic-group="safety"] .page-context,
body.safety-pillar .kicker { color:#42675c; }

.safety-key {
  max-width:980px;
  margin:28px auto 4px;
  padding:0 24px;
}
.safety-key-inner {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  overflow:hidden;
  border:1px solid #dde3e1;
  border-radius:18px;
  background:#fff;
}
.safety-key-item {
  min-width:0;
  padding:16px 18px;
  border-right:1px solid #e6eae8;
}
.safety-key-item:last-child { border-right:0; }
.safety-key-item b {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:650;
  color:var(--ink);
}
.safety-key-item p {
  margin-top:5px;
  color:var(--muted);
  font-size:10.5px;
  line-height:1.5;
}
.signal-dot {
  width:8px;
  height:8px;
  flex:none;
  border-radius:2px;
  background:#8a969b;
}
.safety-key-item.official .signal-dot { background:#38758b; border-radius:50%; }
.safety-key-item.scope .signal-dot { background:#7c8d94; }
.safety-key-item.product .signal-dot { background:#9b8258; transform:rotate(45deg); }
.safety-key-item.use .signal-dot { background:#5e7e73; border-radius:50% 50% 50% 2px; }

.safety-signal {
  display:inline-flex;
  align-items:center;
  gap:7px;
  width:max-content;
  margin-bottom:10px;
  padding:5px 9px;
  border-radius:999px;
  font-size:9.5px;
  line-height:1;
  font-weight:750;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.safety-signal::before {
  content:"";
  width:6px;
  height:6px;
  flex:none;
  background:currentColor;
  opacity:.72;
}
.signal-official { background:var(--safety-official-bg); color:var(--safety-official-ink); }
.signal-official::before { border-radius:50%; }
.signal-scope { background:var(--safety-scope-bg); color:var(--safety-scope-ink); }
.signal-check { background:var(--safety-check-bg); color:var(--safety-check-ink); }
.signal-check::before { transform:rotate(45deg); }
.signal-use { background:var(--safety-use-bg); color:var(--safety-use-ink); }
.signal-use::before { border-radius:50% 50% 50% 1px; }
.signal-boundary { background:var(--safety-boundary-bg); color:var(--safety-boundary-ink); }
.signal-boundary::before { width:9px; height:1px; }

.safety-framework {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-top:26px;
}
.safety-framework .check {
  display:block;
  min-height:210px;
  padding:22px;
  border:1px solid #e0e5e3;
  border-radius:18px;
  background:#fff;
}
.safety-framework .check .num {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  margin-bottom:26px;
  border-radius:10px;
  background:#edf2f0;
  color:#42675c;
  font-size:12px;
  font-weight:750;
}
.safety-framework .check b { font-size:16px; }
.safety-framework .check span:not(.num) {
  display:block;
  margin-top:9px;
  color:var(--muted);
  font-size:12px;
  line-height:1.65;
}

/* Consistent safety pages: quiet assurance, no certification theatrics. */
body[data-topic-group="safety"] main .notice,
body.safety-pillar main .notice {
  border-color:#d8dfdc;
  background:#f6f8f7;
}
body[data-topic-group="safety"] main .check .num {
  background:#edf2f0;
  color:#42675c;
}
body[data-topic-group="safety"] .official-sources-panel,
body.safety-pillar .official-sources-panel { border-top:3px solid #7f9aa5; }

.safety-legend-note {
  margin:14px 0 0;
  color:#7a8380;
  font-size:10.5px;
  line-height:1.55;
}
.safety-legend-note strong { color:#59635f; }

.safety-mini-path {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:18px 0 0;
}
.safety-mini-path span {
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 10px;
  border:1px solid #dde3e1;
  border-radius:999px;
  background:#fff;
  color:#56625e;
  font-size:10.5px;
}
.safety-mini-path span::before {
  content:attr(data-step);
  display:grid;
  place-items:center;
  width:18px;
  height:18px;
  border-radius:6px;
  background:#edf2f0;
  color:#42675c;
  font-size:9px;
  font-weight:750;
}

.comparison-scroll-hint {
  display:none;
  margin-top:14px;
  color:#64716c;
  font-size:11px;
  line-height:1.5;
}
.comparison-scroll:focus-visible {
  outline:3px solid #7f9aa5;
  outline-offset:4px;
}

@media (max-width:780px) {
  .safety-key { margin-top:18px; padding-inline:20px; }
  .safety-key-inner { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .safety-key-item:nth-child(2) { border-right:0; }
  .safety-key-item:nth-child(-n+2) { border-bottom:1px solid #e6eae8; }
  .safety-framework { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:700px) {
  .comparison-scroll-hint { display:block; }
  .comparison-scroll { scroll-snap-type:x proximity; overscroll-behavior-x:contain; }
  .comparison-scroll th,
  .comparison-scroll td { min-width:150px; }
  .comparison-scroll th:first-child,
  .comparison-scroll td:first-child { min-width:98px; }
}
@media (max-width:520px) {
  .safety-key-inner,
  .safety-framework { grid-template-columns:1fr; }
  .safety-key-item { border-right:0; border-bottom:1px solid #e6eae8; }
  .safety-key-item:last-child { border-bottom:0; }
  .safety-framework .check { min-height:0; }
}

@media print {
  .safety-key-inner,
  .safety-framework .check { box-shadow:none; }
  .comparison-scroll-hint { display:none; }
}