/* ==========================================================================
   ShareFam — safety.css  (S08a: the report / hide / mute / block controls
   and the Safety centre page)

   DEV_GUIDE constraints this file is written against:
     #1  ZERO `px`. Every length here is `rem`, `%`, `ch`, `fr` or a keyword.
     #2  light AND dark. Every colour is a `--sf-*` custom property or a
         `color-mix()` over one, so the theme controller's `data-theme` swap
         reaches all of it without a second rule set to keep in step.
     #4  the modal's `max-height: 85vh; max-height: 85dvh` is inherited from
         `sharefam.css`'s `.sf-modal` and deliberately NOT re-declared here —
         a second copy is a second thing to keep in step.
     #5  mobile-first from 22.5rem. Every multi-column rule is inside a
         `min-width` query; the base layout is one column.
     #6  interactive targets are 2.75rem, minimum, on the CONTROL itself.
         A padded wrapper that is tall enough while the button inside it is
         not passes a ruler and fails a finger.
     #14 motion 150-300ms, and none at all under `prefers-reduced-motion`.
   ========================================================================== */

/* ---- the per-object affordance ----------------------------------------- */
.sf-safety-menu {
  position: relative;
  display: inline-block;
}

.sf-safety-trigger {
  min-height: 2.75rem;
  min-width: 2.75rem;
}

.sf-safety-list {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 30;
  min-width: 15rem;
  padding: 0.25rem;
  border-radius: 0.5rem;
  border: 0.0625rem solid var(--sf-border, #cbd5e1);
  background: var(--sf-surface, #ffffff);
  box-shadow: 0 0.5rem 1.5rem
              color-mix(in srgb, var(--sf-text, #0f172a) 18%, transparent);
}

.sf-safety-item {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--sf-text, #0f172a);
  font-size: 1rem;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
  transition: background-color 180ms ease;
}

.sf-safety-item:hover,
.sf-safety-item:focus-visible {
  background: color-mix(in srgb, var(--sf-accent, #2563eb) 10%, transparent);
}

.sf-safety-item:focus-visible,
.sf-safety-trigger:focus-visible,
.sf-safety-control:focus-visible,
.sf-safety-btn:focus-visible {
  outline: 0.1875rem solid var(--sf-focus, #2563eb);
  outline-offset: 0.125rem;
}

/* ---- the dialogs -------------------------------------------------------- */
.sf-safety-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sf-safety-label {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--sf-text, #0f172a);
}

.sf-safety-control {
  min-height: 2.75rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  border: 0.0625rem solid var(--sf-border, #cbd5e1);
  background: var(--sf-surface, #ffffff);
  color: var(--sf-text, #0f172a);
  font-size: 1rem;
  line-height: 1.5;
}

.sf-safety-note {
  min-height: 6rem;
  resize: vertical;
}

.sf-safety-intro,
.sf-safety-hint {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--sf-text-muted, #475569);
}

.sf-safety-status {
  min-height: 1.5rem;
  font-size: 0.9375rem;
  color: var(--sf-text, #0f172a);
}

/* The emergency disclaimer. Visually distinct because it is the one line on
   the dialog that is a LIMIT rather than an instruction — ShareFam is not an
   emergency service, and a person in a hurry must be able to see that without
   reading the paragraph above it. */
.sf-safety-disclaimer {
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  border-left: 0.25rem solid var(--sf-warning, #d97706);
  background: color-mix(in srgb, var(--sf-warning, #d97706) 8%, transparent);
  color: var(--sf-text, #0f172a);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.sf-safety-footer {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.sf-safety-btn {
  min-height: 2.75rem;
  min-width: 2.75rem;
}

/* ---- the Safety centre page --------------------------------------------- */
.sf-safety-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 48rem) {
  .sf-safety-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.sf-safety-card {
  padding: 1rem;
  border-radius: 0.75rem;
  border: 0.0625rem solid var(--sf-border, #cbd5e1);
  background: var(--sf-surface, #ffffff);
}

.sf-safety-list-rows {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.sf-safety-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--sf-text, #0f172a) 4%, transparent);
}

.sf-safety-row__main {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 12rem;
}

.sf-safety-row__meta {
  font-size: 0.875rem;
  color: var(--sf-text-muted, #475569);
}

.sf-safety-badge {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 999rem;
  font-size: 0.8125rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--sf-accent, #2563eb) 14%, transparent);
  color: var(--sf-text, #0f172a);
}

.sf-safety-badge--urgent {
  background: color-mix(in srgb, var(--sf-danger, #dc2626) 16%, transparent);
}

.sf-safety-empty {
  padding: 1rem 0;
  color: var(--sf-text-muted, #475569);
  font-size: 0.9375rem;
}

/* ---- motion (#14) ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sf-safety-item {
    transition: none;
  }
}