/* PDA Compass · crisis.html (A08). Calm, big type, one-handed at 375px, minimal motion.
   Uses the shell tokens from css/site.css; page-only layout lives here. */

.cr-narrow { max-width: 760px; }
.cr-section h2 { font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem); margin: 0 0 var(--space-2); }
.cr-sub { color: var(--ink-muted); font-size: 1.08rem; margin: 0 0 var(--space-5); max-width: var(--measure); }

/* ---------- 1. danger check ---------- */
.cr-danger { padding: var(--space-6) 0 var(--space-6); background: var(--surface-2); border-bottom: 1px solid var(--line); }
.cr-h1 { font-size: clamp(1.9rem, 1.5rem + 2vw, 2.7rem); line-height: 1.15; margin: 0 0 var(--space-2); }
.cr-lede { font-size: 1.2rem; margin: 0 0 var(--space-4); max-width: 34ch; }

.cr-region, .cr-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0 0 var(--space-4); }
.cr-region[hidden], .cr-filter[hidden] { display: none; }
.cr-region__label, .cr-filter__label { font-weight: 700; width: 100%; }
.cr-region__opts, .cr-filter__opts { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cr-region__opts button, .cr-filter__opts button {
  min-height: 44px; min-width: 44px; padding: 0 var(--space-4);
  border-radius: 999px; border: 1.5px solid var(--line-strong, var(--line));
  background: var(--surface); color: var(--ink); font: inherit; font-size: 1rem; cursor: pointer;
}
.cr-region__opts button[aria-checked="true"], .cr-filter__opts button[aria-checked="true"] {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700;
}
.cr-region__opts button:focus-visible, .cr-filter__opts button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.cr-region__saved { width: 100%; }

.cr-em { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: var(--space-3); }
.cr-em li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: var(--space-4); box-shadow: var(--shadow-1); }
.cr-em li[hidden] { display: none; }
.cr-em__where { width: 100%; font-weight: 700; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .04em; font-size: .85rem; }
.cr-em__note { width: 100%; color: var(--ink-muted); }
.cr-call {
  display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 var(--space-5);
  border-radius: var(--radius-m); background: #b3261e; color: #fff; font-size: 1.6rem; font-weight: 800; /* fixed pair: 6.5:1 in light and dark */
  text-decoration: none; letter-spacing: .01em;
}
.cr-call:hover { filter: brightness(.95); }
.cr-call:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.cr-call--alt { background: var(--surface); color: var(--danger); border: 2px solid var(--danger); font-size: 1.25rem; min-height: 48px; }

.cr-urgent p { margin: 0 0 var(--space-3); font-size: 1.05rem; }
.cr-urgent p[hidden] { display: none; }
.cr-urgent a { font-weight: 700; display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 0 4px; margin: -8px 0; } /* 44px hit area inside the sentence */
.cr-jump { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-4) 0 var(--space-3); }
.cr-jump__btn { min-height: 48px; }
.cr-checked { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }

/* ---------- 2. steps ---------- */
.cr-steps { list-style: none; counter-reset: crstep; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.cr-step { counter-increment: crstep; position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-m); padding: var(--space-4) var(--space-4) var(--space-4) calc(var(--space-4) + 44px); }
.cr-step::before { content: counter(crstep); position: absolute; left: var(--space-4); top: var(--space-4);
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-deep, var(--accent)); font-weight: 800; }
.cr-step h3 { font-size: 1.2rem; margin: 0 0 var(--space-1); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.cr-step p { margin: 0; font-size: 1.08rem; }
.cr-why { margin-top: var(--space-4); }
@media (min-width: 900px) { .cr-steps { grid-template-columns: 1fr 1fr; } }

/* ---------- 3. shutdown / after / you ---------- */
.cr-cards { display: grid; gap: var(--space-4); }
.cr-card { padding: var(--space-5); }
.cr-card__h { font-size: 1.3rem !important; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.cr-list { margin: var(--space-2) 0 0; padding-left: 1.2em; display: grid; gap: var(--space-2); font-size: 1.05rem; }
.cr-card__link { margin: var(--space-3) 0 0; }
.cr-you__link { display: inline-flex; align-items: center; min-height: 48px; font-weight: 700; }

/* ---------- 4. helplines ---------- */
.cr-count { margin: 0 0 var(--space-3); }
.cr-hl { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.cr-hl__item { padding: var(--space-4); }
.cr-hl__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.cr-hl__name { font-size: 1.2rem; margin: 0; }
.cr-hl__what { margin: var(--space-2) 0; }
.cr-hl__hours { margin: 0 0 var(--space-2); font-weight: 600; }
.cr-hl__hours-label { color: var(--ink-muted); font-weight: 400; }
.cr-hl__email, .cr-hl__tags { margin: 0 0 var(--space-2); font-size: .95rem; overflow-wrap: anywhere; }
.cr-hl__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.cr-hl__actions .btn { min-height: 48px; }
.cr-hl__call { font-size: 1.1rem; font-weight: 800; }
@media (min-width: 900px) { .cr-hl { grid-template-columns: 1fr 1fr; } }

/* ---------- 5. calm card ---------- */
.cr-calm-intro { margin-bottom: var(--space-4); }
.cr-calm { background: var(--surface); border: 2px dashed var(--line-strong, var(--line)); border-radius: var(--radius-l); padding: var(--space-5); max-width: 520px; }
.cr-calm__title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; margin: 0 0 var(--space-2); }
.cr-calm__danger { font-size: 1.2rem; margin: 0 0 var(--space-3); }
.cr-calm__danger strong { color: var(--danger); }
.cr-calm__steps { margin: 0 0 var(--space-3); padding-left: 1.4em; display: grid; gap: 2px; font-size: 1.05rem; }
.cr-calm__you { font-style: italic; margin: 0 0 var(--space-3); }
.cr-calm__lines { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: 4px; font-size: .98rem; }
.cr-calm__foot { font-size: .8rem; color: var(--ink-muted); margin: 0; }

.cr-disclaimer { margin: var(--space-6) 0; }

/* No sideways scroll at 375px: let long words and numbers wrap. */
.cr-danger, .cr-section { overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) { .cr-call, .cr-region__opts button, .cr-filter__opts button { transition: none; } }

/* ---------- print: the calm card only, on one page ---------- */
@media print {
  body > *:not(main) { display: none !important; }
  main > *:not(#cr-calm) { display: none !important; }
  #cr-calm { padding: 0 !important; margin: 0 !important; background: #fff !important; }
  #cr-calm .cr-calm-intro { display: none !important; }
  #cr-calm .container { padding: 0 !important; max-width: none !important; }
  #cr-calm-card { max-width: none; border: 2px dashed #555; background: #fff !important; color: #000 !important; padding: 12mm; box-shadow: none; break-inside: avoid; }
  #cr-calm-card * { color: #000 !important; }
  .cr-calm__title { font-size: 22pt; }
  .cr-calm__danger { font-size: 18pt; }
  .cr-calm__steps { font-size: 14pt; gap: 3pt; }
  .cr-calm__lines, .cr-calm__you { font-size: 12pt; }
  .cr-calm__foot { font-size: 9pt; }
  @page { margin: 10mm; }
}