/* ==========================================================================
   Safety Center
   Page-scoped styles. Every selector is namespaced under .safety-center-page
   or a .safety-center-* class, so nothing here can reach the rest of the site.

   The page loads css/legal.css first and shares its hero, tokens, icons and
   card surfaces, so Safety Center sits in the same design system as the other
   policy pages. What stays here is the layout this page alone needs: the
   three-stage spine with its screenshots, the section bands, and the resource
   lists.

   Palette note: no new colours. Everything below resolves to a token already
   declared in css/styles.css, or to one of the shared tints in css/legal.css.
   ========================================================================== */

.safety-center-page {
  --sc-rule: var(--color-border);
  --sc-measure: 62ch;
  --sc-wash: var(--lg-wash);
  --sc-edge: var(--lg-edge);

  background-color: var(--color-white);
}

/* One content measure for the whole page, so the spine, the hairline lists and
   the hero all share a left and right edge. Scoped to <main> so the shared
   header and footer keep the site-wide container width. */
.safety-center-page main .container {
  max-width: 1120px;
}

/* --- Shared type roles ---------------------------------------------------
   Inter carries the personality through scale and tracking, not a new face.
   Only the weights the site already loads (400 / 500 / 700) are used.        */

.safety-center-eyebrow {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-lg);
}

.safety-center-heading {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-text);
  max-width: 18ch;
}

.safety-center-standfirst {
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--color-text-light);
  max-width: var(--sc-measure);
}

.safety-center-prose p {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--color-text-light);
  max-width: var(--sc-measure);
  margin-bottom: var(--space-lg);
}

.safety-center-prose p:last-child {
  margin-bottom: 0;
}

.safety-center-link {
  color: var(--color-primary);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.safety-center-link:hover {
  color: var(--color-primary-dark);
}

/* --- Hero ----------------------------------------------------------------
   Left-aligned and set on ink. The display line wraps to three short lines
   on purpose; the measure is what gives it presence, not a gradient.        */

/* The hero is .legal-masthead from css/legal.css - wash, blob, label pill,
   meta chips and the Tokify call-window illustration, identical to every other
   policy page. Only the bottom rule is dropped, because the section nav
   immediately below already draws one. */

.safety-center-hero {
  border-bottom: 0;
}

/* --- In-page section nav -------------------------------------------------
   Plain anchors. reset.css already sets scroll-behavior: smooth on <html>, so
   this needs no JavaScript. */

.safety-center-nav {
  background-color: var(--color-white);
  border-bottom: 1px solid var(--sc-rule);
}

.safety-center-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding: var(--space-lg) 0;
}

.safety-center-nav a {
  display: inline-block;
  padding: 0.4375rem 0.875rem;
  border: 1px solid var(--sc-rule);
  border-radius: 999px;
  background-color: var(--color-white);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-light);
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.safety-center-nav a:hover,
.safety-center-nav a:focus-visible {
  color: var(--color-primary);
  border-color: var(--sc-edge);
  background-color: var(--sc-wash);
}

/* --- Sections ------------------------------------------------------------ */

.safety-center-section {
  padding: calc(var(--space-3xl) + var(--space-md)) 0;
  background-color: var(--color-white);
  scroll-margin-top: 88px;
}

.safety-center-section--haze {
  background:
    radial-gradient(90% 120% at 85% 0%, var(--sc-wash) 0%, rgba(77, 66, 254, 0) 60%),
    var(--color-light-bg);
  border-top: 1px solid var(--sc-rule);
  border-bottom: 1px solid var(--sc-rule);
}

/* Two-column section head: label and heading left, prose right. */
.safety-center-columns {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-3xl);
  align-items: start;
}

.safety-center-section-head {
  margin-bottom: var(--space-2xl);
}

.safety-center-section-head .safety-center-standfirst,
.safety-center-heading + .safety-center-standfirst {
  margin-top: var(--space-md);
}

/* --- The spine -----------------------------------------------------------
   The four tools are an actual sequence in time - verification happens before
   a call, detection during it, review after a flag, and reporting whenever the
   person decides. The numbering and the rule encode that order; they are not
   decoration.                                                               */

.safety-center-spine {
  counter-reset: sc-stage;
  margin-top: var(--space-2xl);
}

.safety-center-stage {
  counter-increment: sc-stage;
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: var(--space-2xl);
}

.safety-center-stage-when {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  padding-top: 2px;
}

.safety-center-stage-when::before {
  content: counter(sc-stage, decimal-leading-zero);
  display: block;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}

.safety-center-stage-body {
  position: relative;
  border-left: 1px solid var(--sc-rule);
  padding-left: var(--space-2xl);
  padding-bottom: var(--space-3xl);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: var(--space-2xl);
  align-items: start;
}

.safety-center-stage:last-child .safety-center-stage-body {
  padding-bottom: 0;
  border-left-color: transparent;
}

/* The dot that sits on the rule, marking each stage. */
.safety-center-stage-body::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--color-primary);
}

.safety-center-stage:last-child .safety-center-stage-body::before {
  box-shadow: 0 0 0 1px var(--sc-rule);
}

/* Portrait phone captures. The column is fixed and the height comes from the
   file's own ratio, so nothing is stretched or cropped. */
.safety-center-shot {
  margin: 0;
}


.safety-center-shot img {
  width: 100%;
  height: auto;
  border-radius: calc(var(--border-radius-lg) - 4px);
  display: block;
}

/* A padded card behind the capture, matching the contents card on the other
   policy pages. The image itself is unchanged - same file, same aspect. */
.safety-center-shot picture,
.safety-center-shot img {
  position: relative;
}

.safety-center-shot {
  padding: var(--space-sm);
  border: 1px solid var(--sc-rule);
  border-radius: var(--border-radius-lg);
  background-color: var(--color-white);
  box-shadow: 0 1px 2px rgba(42, 42, 42, 0.04), 0 12px 28px -18px rgba(42, 42, 42, 0.35);
}

.safety-center-shot figcaption {
  margin: var(--space-sm) var(--space-xs) var(--space-xs);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-text-light);
}

.safety-center-stage-body h3 {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--color-text);
  margin-bottom: var(--space-md);
}

.safety-center-stage-body p {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-text-light);
  max-width: 58ch;
}

/* Stages can run to more than one paragraph now that they carry a screenshot. */
.safety-center-stage-text p + p {
  margin-top: var(--space-md);
}

.safety-center-stage-list {
  margin-top: var(--space-lg);
  max-width: 58ch;
}

.safety-center-stage-list li {
  position: relative;
  padding-left: var(--space-lg);
  margin-bottom: var(--space-sm);
  color: var(--color-text-light);
  line-height: 1.65;
}

.safety-center-stage-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.625rem;
  height: 0.625rem;
  background-color: var(--color-primary);
  -webkit-mask: var(--lg-icon-wave) center / contain no-repeat;
  mask: var(--lg-icon-wave) center / contain no-repeat;
}

/* --- Hairline point list -------------------------------------------------
   Used for Privacy and for the Community Guidelines summary. A term and its
   explanation, ruled off - the way a specification is set, rather than five
   repeats of the same tick icon.                                            */

.safety-center-points {
  display: grid;
  gap: var(--space-sm);
}

.safety-center-point {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: var(--space-xl);
  padding: var(--space-lg);
  border: 1px solid var(--sc-rule);
  border-radius: var(--border-radius-md);
  background-color: var(--color-white);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.safety-center-point:hover {
  border-color: var(--sc-edge);
  background-color: var(--sc-wash);
}

.safety-center-point dt {
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.5;
}

.safety-center-point dd {
  color: var(--color-text-light);
  line-height: 1.7;
}

.safety-center-cta {
  margin-top: var(--space-2xl);
}

/* --- Safety Resources ---------------------------------------------------- */

.safety-center-subsection + .safety-center-subsection {
  margin-top: var(--space-3xl);
  padding-top: var(--space-2xl);
  border-top: 1px solid var(--sc-rule);
}

.safety-center-subhead {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}

.safety-center-subsection .safety-center-standfirst {
  margin-bottom: var(--space-xl);
}

.safety-center-contacts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
}

.safety-center-contact {
  background-color: var(--color-white);
  border: 1px solid var(--sc-rule);
  border-radius: var(--border-radius-md);
  padding: var(--space-lg);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.safety-center-contact:hover {
  border-color: var(--sc-edge);
  background-color: var(--sc-wash);
}

.safety-center-contact h4 {
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--space-xs);
}

.safety-center-contact h4 span {
  display: block;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--color-text-light);
  margin-top: 2px;
}

.safety-center-contact p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text-light);
  margin-bottom: var(--space-md);
}

.safety-center-contact a {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-primary);
  word-break: break-word;
}

.safety-center-contact a:hover {
  text-decoration: underline;
}

/* --- Reporting steps ----------------------------------------------------- */

.safety-center-steps {
  counter-reset: sc-step;
  margin-top: var(--space-xl);
  max-width: var(--sc-measure);
  padding-left: 0.8125rem;
  border-left: 1px dashed var(--sc-edge);
}

.safety-center-steps li {
  counter-increment: sc-step;
  position: relative;
  padding: 0 0 var(--space-lg) 2.25rem;
  color: var(--color-text-light);
  line-height: 1.7;
}

.safety-center-steps li:last-child {
  padding-bottom: 0;
}

.safety-center-steps li::before {
  content: counter(sc-step);
  position: absolute;
  left: -0.8125rem;
  top: 0;
  width: 1.625rem;
  height: 1.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-white);
  font-size: 0.8125rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--color-white);
}

.safety-center-steps strong {
  color: var(--color-text);
  font-weight: 500;
}

/* --- External resources -------------------------------------------------- */

.safety-center-resources {
  display: grid;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

.safety-center-resource {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-md) var(--space-lg);
  align-items: baseline;
  padding: var(--space-lg);
  border: 1px solid var(--sc-rule);
  border-radius: var(--border-radius-md);
  background-color: var(--color-white);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.safety-center-resource:hover {
  border-color: var(--sc-edge);
  background-color: var(--sc-wash);
}

.safety-center-resource h4 {
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--space-xs);
}

.safety-center-resource p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text-light);
}

.safety-center-resource a {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-primary);
  white-space: nowrap;
}

.safety-center-resource a:hover {
  text-decoration: underline;
}

.safety-center-disclaimer {
  margin-top: 0;
  padding: var(--space-lg);
  border: 1px solid var(--sc-rule);
  border-radius: var(--border-radius-md);
  background-color: var(--color-light-bg);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text-light);
  max-width: var(--sc-measure);
}

.safety-center-disclaimer p {
  margin: 0;
}

.safety-center-disclaimer p + p {
  margin-top: var(--space-sm);
}

/* --- Closing help band --------------------------------------------------- */

.safety-center-help {
  background:
    radial-gradient(80% 130% at 88% 0%, var(--sc-wash) 0%, rgba(77, 66, 254, 0) 62%),
    var(--color-light-bg);
  border-top: 1px solid var(--color-border);
  padding: calc(var(--space-3xl) + var(--space-md)) 0;
}

.safety-center-help .safety-center-heading {
  max-width: 20ch;
}

.safety-center-help-intro {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--color-text-light);
  max-width: 52ch;
  margin: 0 0 var(--space-xl);
}

.safety-center-help-meta {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--color-text-light);
  max-width: 62ch;
}

.safety-center-help-meta a {
  color: var(--color-primary);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 992px) {
  .safety-center-columns {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
  }

  .safety-center-heading {
    max-width: 24ch;
  }

  .safety-center-stage {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
  }

  .safety-center-stage-when {
    display: flex;
    align-items: baseline;
    gap: var(--space-md);
    padding-top: 0;
  }

  .safety-center-stage-when::before {
    font-size: 1.25rem;
    margin-bottom: 0;
  }

  .safety-center-stage-body {
    border-left: 0;
    padding-left: 0;
    padding-bottom: var(--space-2xl);
  }

  .safety-center-stage-body {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
  }

  .safety-center-shot {
    max-width: 240px;
  }

  .safety-center-stage-body::before {
    display: none;
  }

  .safety-center-point {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xs);
  }
}

@media (max-width: 768px) {
  .safety-center-hero {
    padding: var(--space-2xl) 0;
  }

  .safety-center-title {
    font-size: 2.125rem;
    letter-spacing: -0.03em;
    max-width: 18ch;
  }

  .safety-center-hero-intro,
  .safety-center-standfirst,
  .safety-center-help-intro {
    font-size: 1rem;
  }

  .safety-center-section,
  .safety-center-help {
    padding: var(--space-2xl) 0;
  }

  .safety-center-heading {
    font-size: 1.625rem;
  }

  .safety-center-stage-body h3 {
    font-size: 1.1875rem;
  }

  .safety-center-stage-body p,
  .safety-center-prose p {
    font-size: 1rem;
  }

  .safety-center-resource {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-sm);
  }

  .safety-center-contacts {
    grid-template-columns: minmax(0, 1fr);
  }

  .safety-center-subhead {
    font-size: 1.1875rem;
  }
}

/* --- Accessibility --------------------------------------------------------
   Mirrors css/legal.css so focus and motion behave identically page to page. */

.safety-center-page a:focus-visible,
.safety-center-page button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .safety-center-page *,
  .safety-center-page *::before,
  .safety-center-page *::after {
    transition-duration: 0.01ms !important;
    animation: none !important;
  }
}