/* Social Verdict: mode picker and safety block. Everything else comes from /_shared/base.css. */
.modes { list-style: none; margin: 8px 0 0; padding: 0; border-top: 2px solid var(--line); }
.modes a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 16px;
  padding: 20px 0;
  border-bottom: 2px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}
.modes strong { font: 400 clamp(1.9rem, 8vw, 3rem)/0.95 var(--display); text-transform: uppercase; }
.modes span { grid-column: 1; color: var(--muted); }
.modes a::after { content: '→'; grid-column: 2; grid-row: 1 / 3; align-self: center; font: 400 2rem/1 var(--display); }
.modes a:hover strong, .modes a:focus-visible strong { color: var(--bad); }
.modes a:focus-visible { outline: 3px solid var(--bad); outline-offset: 4px; }
.note { margin: -16px 0 24px; color: var(--muted); font-size: 0.9375rem; font-style: italic; }
.safety { margin: 20px 8px 0 0; padding: 16px 18px; border: 2px solid var(--line); background: var(--field); }
.safety p { margin: 0 0 8px; }
.safety p:last-child { margin: 0; }
.safety a { color: var(--ink); font-weight: 700; text-underline-offset: 3px; }