/* The public /security page.
 *
 * Loads after trades-page.css and portfolio-page.css.
 *
 * Nothing on this page glows, pulses or wears a badge. A security page that
 * looks like a trust seal is asking to be believed rather than read, and the
 * whole argument here is that the claims are checkable. So the only visual
 * device is the one that carries meaning: an absence is marked with a struck
 * circle, and it says what it is in words beside it.
 */

/* ---- the four absences --------------------------------------------------- */

.sc-nevers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.sc-nevers li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 15px;
  border: .5px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  min-width: 0;
}

.sc-nevers li > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.sc-nevers b { font-size: 13.5px; font-weight: 620; }
.sc-nevers b + span { font-size: 11.5px; color: var(--text-muted); line-height: 1.5; }

/* The mark is a "no", so it is drawn as one rather than tinted as one. */
.sc-never-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--red);
  border: .5px solid color-mix(in srgb, var(--red) 40%, var(--border-strong));
  background: color-mix(in srgb, var(--red) 7%, transparent);
}

/* ---- yes / no list ------------------------------------------------------- */

.sc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sc-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* A tick and a cross, not two shades of the same thing — the state has to
   survive a reader who cannot separate the colours. */
.sc-list li::before {
  flex: none;
  width: 16px;
  font-weight: 700;
  text-align: center;
}

.sc-list li.sc-yes::before { content: '\2713'; color: var(--green); }
.sc-list li.sc-no::before { content: '\2715'; color: var(--red); }

/* ---- the limits ---------------------------------------------------------- */

/* Set apart from the reassurance above it: this is the section that makes the
   rest worth believing, so it does not read as a footnote. */
.sc-limits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 14px;
}

.sc-limits article {
  padding: 18px;
  border: .5px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  min-width: 0;
}

.sc-limits h3 {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 14.5px;
  font-weight: 640;
  line-height: 1.4;
}

.sc-limits h3 svg { flex: none; margin-top: 3px; color: var(--text-muted); }

.sc-limits p {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-secondary);
}

@media (min-width: 720px) {
  .sc-nevers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}