/* When childproofing isn't enough (/resources/safety-elopement), in the same reading room as the
   other guides (guide.css + guide-reader.js). The first screen is the part that can't wait: the
   missing-child notice and the "Do these first" stepping stones. Everything else reads one chapter
   at a time. Page pieces:
   - the four layers are paper sheets that stack up: layer 1 has one sheet behind it, layer 4 has four;
   - the room chooser is a row of paper tags hanging from a string;
   - each room is a card with small stamps (Risk / Add layers / Do not rely on / Fire check);
   - the equipment menu is a drawer of index cards, filtered by the tags above it;
   - the caregiver handoff is a lined sheet on a clipboard; the walkthrough sits in a cork-and-wood frame.
   No drawn pictures, only paper, pins, tape and string. Motion respects prefers-reduced-motion. */

.p-safety { --cork: #ecd9ae; --wood-a: #c99a45; --wood-b: #9d7128; }

/* ---------- If your child is missing now: a dusk notice with a brick band ---------- */
.p-safety .safety-emergency {
  position: relative; overflow: hidden;
  margin: 8px 0 34px; padding: 30px clamp(20px, 3.4vw, 34px) 26px 40px;
  border-radius: 22px;
  background:
    radial-gradient(1.5px 1.5px at 72% 18%, rgba(255, 255, 255, .7), transparent),
    radial-gradient(1.5px 1.5px at 88% 64%, rgba(255, 255, 255, .5), transparent),
    radial-gradient(2px 2px at 60% 82%, rgba(255, 255, 255, .45), transparent),
    radial-gradient(520px 260px at 100% 0%, rgba(247, 206, 120, .16), transparent 70%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  box-shadow: var(--shadow-lift);
}
.p-safety .safety-emergency::before { /* the brick band down the left edge: this one is urgent */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 12px;
  background: repeating-linear-gradient(180deg, var(--brick) 0 18px, #c26a42 18px 36px);
}
.p-safety .safety-emergency h2 {
  margin: 0 0 10px; font: 400 clamp(29px, 3vw, 36px)/1.05 var(--f-hand); color: #f6dc9a; letter-spacing: 0;
}
.p-safety .safety-emergency blockquote { margin: 0; padding: 0; border: 0; background: none; font-size: 17px; line-height: 1.65; }
.p-safety .safety-emergency blockquote p { color: #efe9da; }
.p-safety .safety-emergency blockquote strong { color: #fff; }
.p-safety .safety-emergency .btn-row { margin-top: 18px; gap: 12px; }
.p-safety .safety-emergency .btn:first-child {
  background: var(--brick); border-color: var(--brick); color: #fff; font-size: 18px; min-height: 52px; padding-inline: 26px;
  box-shadow: 0 4px 0 #7e3b1f;
}
.p-safety .safety-emergency .btn:first-child:hover { background: #b85f37; }
.p-safety .safety-emergency .btn.btn--outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); }
.p-safety .safety-emergency .btn.btn--outline:hover { background: rgba(255, 255, 255, .1); }
.p-safety .safety-emergency a[href^="tel:"]::before { background: #fff; }

/* ---------- Do these first: a pinned card holding the stepping stones ---------- */
.p-safety .sg-first {
  position: relative; margin: 0 0 34px; padding: 34px clamp(18px, 3vw, 32px) 26px;
  border-radius: 6px; background: linear-gradient(180deg, #fff9e8, #fdf1d3);
  box-shadow: 0 1px 1px rgba(60, 40, 10, .06), 0 22px 32px -22px rgba(60, 40, 10, .55);
}
.p-safety .sg-first::before {
  content: ""; position: absolute; top: -11px; left: 50%; width: 24px; height: 24px; margin-left: -12px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 12%, var(--brick) 32% 100%); box-shadow: 0 5px 6px -2px rgba(0, 0, 0, .35);
}
.p-safety .sg-first > h2 { margin: 0 0 8px; font: 400 clamp(30px, 3vw, 36px)/1.05 var(--f-hand); color: var(--gold-dark); letter-spacing: 0; scroll-margin-top: calc(var(--osv-header-h) + 24px); }
.p-safety .sg-first > p { font-size: 17px; }
.p-safety .sg-first ol.steps > li { background: #fffefb; }
.p-safety .sg-first ol.steps > li > strong:first-child { display: block; margin-bottom: 4px; font: 600 18.5px/1.3 var(--f-display); color: var(--navy); }
.p-safety .sg-first ol.steps > li { font-size: 16.5px; line-height: 1.62; }
.p-safety .sg-first > blockquote {
  margin: 14px 0 0; padding: 10px 0 0; border: 0; border-top: 2px dashed #e2cf9d; background: none;
  font: 400 clamp(22px, 2.2vw, 25px)/1.25 var(--f-hand); color: var(--brick-ink); text-align: center;
}
.p-safety .sg-first > blockquote p { margin: 0; }

/* ---------- The four layers: sheets that stack up ---------- */
.p-safety .sg-layers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 26px; margin: 12px 8px 26px 0; padding: 4px 16px 16px 0; }
.p-safety .sg-layers > .content-card {
  --c: var(--gold); --sheet: #fbf4e2;
  position: relative; margin: 0; padding: 22px 20px 18px; border: 0; border-radius: 6px; background: #fff;
  border-top: 7px solid var(--c);
  font-size: 16.5px; line-height: 1.62;
}
.p-safety .sg-layers > .content-card:nth-child(1) { box-shadow: 6px 6px 0 -1px var(--sheet), 6px 6px 0 0 #e8dcbd, var(--shadow); }
.p-safety .sg-layers > .content-card:nth-child(2) { --c: var(--blue); box-shadow: 6px 6px 0 -1px var(--sheet), 6px 6px 0 0 #e8dcbd, 12px 12px 0 -1px var(--sheet), 12px 12px 0 0 #e8dcbd, var(--shadow); }
.p-safety .sg-layers > .content-card:nth-child(3) { --c: var(--sage); box-shadow: 6px 6px 0 -1px var(--sheet), 6px 6px 0 0 #e8dcbd, 12px 12px 0 -1px var(--sheet), 12px 12px 0 0 #e8dcbd, 18px 18px 0 -1px var(--sheet), 18px 18px 0 0 #e8dcbd, var(--shadow); }
.p-safety .sg-layers > .content-card:nth-child(4) { --c: var(--brick); box-shadow: 6px 6px 0 -1px var(--sheet), 6px 6px 0 0 #e8dcbd, 12px 12px 0 -1px var(--sheet), 12px 12px 0 0 #e8dcbd, 18px 18px 0 -1px var(--sheet), 18px 18px 0 0 #e8dcbd, 24px 24px 0 -1px var(--sheet), 24px 24px 0 0 #e8dcbd, var(--shadow); }
.p-safety .sg-layers > .content-card h3 { margin: 0 0 8px; padding: 0; font: 400 26px/1.1 var(--f-hand); color: var(--navy); letter-spacing: 0; }
.p-safety .sg-layers > .content-card h3::after { display: none; }
.p-safety .sg-layers > .content-card p { margin: 0; color: var(--text); }

/* ---------- Build the plan: the questions sit on a notepad (guide.css .checklist) ---------- */
.p-safety .sg-questions > li > strong:first-child { display: block; font: 600 17px/1.35 var(--f-display); color: var(--navy); }

/* ---------- Choose a room or risk: paper tags on a string ---------- */
.p-safety .safety-selectors { margin: 4px 0 26px; }
.p-safety .safety-selectors .btn-row,
.p-safety .safety-equipment-filters .btn-row {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 26px 12px;
  padding: 18px 4px 6px;
  background: repeating-linear-gradient(180deg, rgba(122, 91, 19, .5) 0 2px, transparent 2px 78px);
}
.p-safety .safety-selectors .btn,
.p-safety .safety-equipment-filters .btn {
  --tilt: -2deg;
  position: relative; min-height: 50px; margin: 0; padding: 10px 18px 10px 30px;
  border: 0; border-radius: 6px 14px 14px 6px; background: var(--paper);
  box-shadow: 0 12px 16px -12px rgba(60, 40, 10, .7), inset 0 0 0 1px rgba(122, 91, 19, .14);
  font: 600 16px/1.2 var(--f-display); color: var(--navy); text-decoration: none;
  rotate: var(--tilt); transform-origin: 50% -16px;
  transition: rotate .4s var(--spring), background-color .2s var(--ease), color .2s var(--ease);
}
.p-safety .safety-selectors .btn:nth-child(2n), .p-safety .safety-equipment-filters .btn:nth-child(2n) { --tilt: 2deg; }
.p-safety .safety-selectors .btn:nth-child(3n), .p-safety .safety-equipment-filters .btn:nth-child(3n) { --tilt: -1deg; }
.p-safety .safety-selectors .btn::before,
.p-safety .safety-equipment-filters .btn::before { /* the thread up to the string */
  content: ""; position: absolute; left: 50%; bottom: 100%; width: 2px; height: 16px; background: rgba(122, 91, 19, .5);
}
.p-safety .safety-selectors .btn::after,
.p-safety .safety-equipment-filters .btn::after { /* the tag's punched hole */
  content: ""; position: absolute; left: 12px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%;
  background: var(--cream); box-shadow: inset 0 1px 2px rgba(60, 40, 10, .35);
}
.p-safety .safety-selectors .btn:hover,
.p-safety .safety-equipment-filters .btn:hover { background: var(--gold-soft); color: var(--navy); rotate: 0deg; }
.p-safety .safety-selectors .btn[aria-pressed="true"],
.p-safety .safety-equipment-filters .btn[aria-pressed="true"] { background: var(--navy); color: #fff; text-decoration: none; rotate: 0deg; }
.p-safety .safety-selectors .btn[aria-pressed="true"]::after,
.p-safety .safety-equipment-filters .btn[aria-pressed="true"]::after { background: var(--gold); box-shadow: none; }
.p-safety .safety-selectors .btn[aria-pressed="true"]::before,
.p-safety .safety-equipment-filters .btn[aria-pressed="true"]::before { background: var(--gold-dark); }
/* the chosen tag is also straightened and underlined with a gold bar, so the choice isn't shown by colour alone */
.p-safety :is(.safety-selectors, .safety-equipment-filters) .btn[aria-pressed="true"] { box-shadow: 0 12px 16px -12px rgba(20, 32, 58, .8), inset 0 -4px 0 var(--gold); }

/* ---------- the rooms: a card each, with stamps ---------- */
.p-safety .sg-room {
  position: relative; margin: 0 0 26px; padding: 26px clamp(18px, 3vw, 28px) 20px;
  border-radius: 6px 6px 18px 6px; background: #fff; border: 1px solid #ecdfc2;
  box-shadow: 0 1px 0 #efe4cb, 0 16px 26px -20px rgba(60, 40, 10, .55);
  scroll-margin-top: calc(var(--osv-header-h) + 90px);
}
.p-safety .sg-room::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 7px; border-radius: 6px 6px 0 0; background: var(--c, var(--gold)); }
.p-safety .sg-room--medicines { --c: var(--brick); }
.p-safety .sg-room--water { --c: var(--blue); }
.p-safety .sg-room--climbing { --c: var(--sage); }
.p-safety .sg-room--kitchen { --c: var(--brick); }
.p-safety .sg-room--nighttime { --c: var(--navy); }
.p-safety .sg-room > h2 { margin: 0 0 12px; font-size: clamp(22px, 2.3vw, 26px); color: var(--navy); scroll-margin-top: calc(var(--osv-header-h) + 90px); }
.p-safety .sg-room > p, .p-safety .sg-room li { font-size: 16.5px; line-height: 1.65; }
.p-safety .sg-tag > strong:first-child {
  display: inline-block; margin-right: 6px; padding: 3px 10px 2px; border-radius: 4px;
  font: 800 12.5px/1.4 var(--f-body); letter-spacing: .07em; text-transform: uppercase; vertical-align: .1em;
  rotate: -1.5deg; border: 2px solid currentColor;
}
.p-safety .sg-tag--risk > strong:first-child { color: var(--brick-ink); background: var(--brick-soft); }
.p-safety .sg-tag--add > strong:first-child { color: var(--sage-ink); background: var(--sage-soft); }
.p-safety .sg-tag--no > strong:first-child { color: var(--navy); background: #eef1f6; }
.p-safety .sg-tag--fire > strong:first-child { color: var(--gold-dark); background: var(--gold-soft); }
.p-safety .sg-tag--no, .p-safety .sg-tag--fire { padding: 12px 14px; border-radius: 10px; background: #faf6ec; }
.p-safety .sg-tag--add { margin-bottom: 4px; }
.p-safety .guide-sections .sg-room blockquote.sg-urgent { background: var(--brick-soft); border-left-color: var(--brick); color: var(--brick-ink); }
.p-safety .sg-room .sg-urgent strong { color: var(--brick-ink); }
.p-safety .sg-room .sg-urgent + .btn { margin-top: -4px; background: var(--brick); border-color: var(--brick); color: #fff; }
.p-safety .sg-room .sg-urgent + .btn a[href^="tel:"]::before, .p-safety .sg-room .sg-urgent + .btn::before { background: #fff; }
.p-safety .sg-room .sg-urgent + .btn span { margin-left: .35em; font-weight: 800; }

/* ---------- the caregiver handoff: a lined sheet on a clipboard ---------- */
.p-safety .guide-sections blockquote.sg-clipboard {
  position: relative; margin: 36px 0 20px; padding: 40px 22px 18px 26px;
  border: 0; border-radius: 8px; color: var(--navy);
  background: #fffefb repeating-linear-gradient(180deg, transparent 0 calc(2.1em - 1px), #dbe3ee calc(2.1em - 1px) 2.1em);
  background-position: 0 40px; background-origin: border-box;
  box-shadow: 0 0 0 12px #b98d4a, 0 0 0 13px #9d7128, 0 24px 34px -18px rgba(60, 40, 10, .6);
  font-size: 16.5px;
}
.p-safety .sg-clipboard::before { /* the clip */
  content: ""; position: absolute; top: -22px; left: 50%; width: 120px; height: 34px; margin-left: -60px; border-radius: 8px 8px 14px 14px;
  background: linear-gradient(180deg, #d9dde3, #a9b0ba); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15), 0 4px 6px rgba(0, 0, 0, .25);
}
.p-safety .sg-clipboard::after {
  content: ""; position: absolute; top: -14px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%;
  background: #fffefb; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .3);
}
.p-safety .sg-clipboard p { margin: 0; line-height: 2.1em; font-size: 16.5px; overflow-wrap: anywhere; }
.p-safety .sg-clipboard p > strong:first-child { font: 400 26px/2.1em var(--f-hand); color: var(--gold-dark); }
.p-safety [data-safety-copy], .p-safety [data-safety-print] { margin-top: 6px; }
.p-safety #safety-tool-status:empty { display: none; }

/* ---------- Equipment: the filter tags and a drawer of index cards ---------- */
.p-safety .safety-equipment-filters .btn { min-height: 44px; font-size: 15px; padding: 8px 14px 8px 28px; }
.p-safety .safety-equipment-filters .btn-row { gap: 22px 10px; background: repeating-linear-gradient(180deg, rgba(122, 91, 19, .45) 0 2px, transparent 2px 66px); }
.p-safety #equipment-count { margin: 10px 0 0; text-align: center; font: 400 21px/1.2 var(--f-hand); color: var(--gold-dark); }
.p-safety #equipment-count:empty { display: none; }
.p-safety .safety-equipment-grid { gap: 22px; }
.p-safety .safety-equipment-card {
  --c: var(--gold);
  position: relative; margin: 0; padding: 22px 20px 0; border: 1px solid #ecdfc2; border-radius: 4px 4px 16px 4px; background: #fff;
  box-shadow: 0 1px 0 #efe4cb, 0 16px 26px -20px rgba(60, 40, 10, .55);
  display: flex; flex-direction: column;
}
.p-safety .safety-equipment-card::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 7px; border-radius: 4px 4px 0 0; background: var(--c); }
.p-safety .safety-equipment-card:nth-child(4n+2) { --c: var(--blue); }
.p-safety .safety-equipment-card:nth-child(4n+3) { --c: var(--sage); }
.p-safety .safety-equipment-card:nth-child(4n+4) { --c: var(--brick); }
.p-safety .safety-equipment-card h3 { margin: 0 0 6px; padding: 0 0 10px; font-size: 18.5px; line-height: 1.3; color: var(--navy); border-bottom: 2px solid rgba(169, 84, 47, .38); }
.p-safety .safety-equipment-card h3::after { display: none; }
.p-safety .safety-equipment-card p { margin: 10px 0 0; font-size: 15.5px; line-height: 1.6; }
.p-safety .safety-equipment-card p > strong:first-child { display: block; font: 800 12px/1.4 var(--f-body); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.p-safety .safety-equipment-card p:last-child { /* "Layer—not replacement" sits on the tear-off stub */
  margin: auto -20px 0; padding: 12px 20px 16px; border-top: 2px dashed #e2d3ae; border-radius: 0 0 16px 4px; background: #fbf3de; color: var(--navy);
}
.p-safety .safety-equipment-card p:nth-last-child(2) { margin-bottom: 16px; }
.p-safety .safety-equipment-card p:last-child > strong:first-child { color: var(--gold-dark); }
.p-safety .safety-equipment-card[hidden] { display: none; }

/* low-cost ideas: a sticky note */
.p-safety .sg-lowcost {
  position: relative; margin: 34px 0 10px; padding: 32px clamp(18px, 3vw, 30px) 22px; border: 0; border-radius: 4px;
  background: linear-gradient(180deg, #fff6c9, #fbeeb0); rotate: -.4deg;
  box-shadow: 0 1px 1px rgba(60, 40, 10, .06), 0 22px 30px -22px rgba(60, 40, 10, .6);
}
.p-safety .sg-lowcost::before {
  content: ""; position: absolute; top: -10px; left: 50%; width: 110px; height: 24px; margin-left: -55px; rotate: -2deg;
  background: linear-gradient(180deg, rgba(240, 226, 184, .92), rgba(228, 210, 160, .88)); box-shadow: 0 1px 2px rgba(60, 40, 10, .12);
}
.p-safety .sg-lowcost h3 { margin: 0 0 10px; padding: 0; font: 400 clamp(25px, 2.6vw, 29px)/1.1 var(--f-hand); color: var(--gold-dark); letter-spacing: 0; }
.p-safety .sg-lowcost h3::after { display: none; }
.p-safety .sg-lowcost li { font-size: 16.5px; }
.p-safety .sg-lowcost blockquote { background: rgba(255, 255, 255, .6); }

/* ---------- the walkthrough: a worksheet in a cork-and-wood frame ---------- */
.p-safety .guide-sections .safety-worksheet {
  margin: 26px 17px 30px; width: calc(100% - 34px); background: #fffefb; border-collapse: collapse; font-size: 13.5px;
  box-shadow: 0 0 0 12px var(--cork), 0 0 0 15px var(--wood-a), 0 0 0 17px var(--wood-b), 0 26px 30px -14px rgba(60, 40, 10, .55);
}
.p-safety .safety-worksheet th, .p-safety .safety-worksheet td { border-color: #d9ccaa; }
.p-safety .safety-worksheet thead th { background: var(--gold-soft); color: var(--navy); font: 600 13px/1.3 var(--f-display); vertical-align: bottom; }
.p-safety .safety-worksheet tbody th { font: 600 14px/1.3 var(--f-display); color: var(--navy); background: #fbf6e8; }
.p-safety .safety-worksheet td { height: 3.2rem; }

/* ---------- Who can help: index cards ---------- */
.p-safety .sg-helpers { list-style: none; margin: 10px 0 20px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.p-safety .sg-helpers > li {
  position: relative; margin: 0; padding: 20px 18px 16px; border: 1px solid #ecdfc2; border-radius: 4px 4px 16px 4px; background: #fff;
  box-shadow: 0 1px 0 #efe4cb, 0 16px 26px -20px rgba(60, 40, 10, .55); font-size: 15.5px; line-height: 1.6;
}
.p-safety .sg-helpers > li::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 7px; border-radius: 4px 4px 0 0; background: var(--c, var(--gold)); }
.p-safety .sg-helpers > li:nth-child(4n+2) { --c: var(--blue); }
.p-safety .sg-helpers > li:nth-child(4n+3) { --c: var(--sage); }
.p-safety .sg-helpers > li:nth-child(4n+4) { --c: var(--brick); }
.p-safety .sg-helpers > li > strong:first-child { display: block; margin-bottom: 6px; padding-bottom: 8px; border-bottom: 2px solid rgba(169, 84, 47, .38); font: 600 17px/1.3 var(--f-display); color: var(--navy); }

/* ---------- closing note (always showing, after the chapters) ---------- */
.p-safety .sg-closing { margin-top: 34px; }
.p-safety .sg-closing > h2 { margin: 0 0 10px; padding: 0; font: 400 clamp(27px, 2.8vw, 32px)/1.1 var(--f-hand); color: var(--blue-ink); letter-spacing: 0; }
.p-safety .sg-closing > h2::before { display: none; }
.p-safety .guide-sections .sg-closing blockquote { margin: 0; padding: 0; border: 0; background: none; color: var(--text); }
.p-safety .sg-closing blockquote p { font-size: 17.5px; }
.p-safety .guide-sections > .sg-closing { rotate: .3deg; }

/* ---------- phones ---------- */
@media (max-width: 700px) {
  .p-safety .sg-layers { grid-template-columns: 1fr; gap: 26px; }
  .p-safety .sg-helpers { grid-template-columns: 1fr; }
  .p-safety .safety-emergency { padding: 26px 18px 22px 30px; }
  .p-safety .guide-sections .safety-worksheet { margin: 18px 9px 24px; width: calc(100% - 18px); box-shadow: 0 0 0 7px var(--cork), 0 0 0 9px var(--wood-b); }
  .p-safety .safety-worksheet tr { background: #fffefb; }
  .p-safety .guide-sections blockquote.sg-clipboard { padding: 40px 14px 14px 16px; box-shadow: 0 0 0 8px #b98d4a, 0 0 0 9px #9d7128, 0 24px 34px -18px rgba(60, 40, 10, .6); margin-inline: 9px; }
  .p-safety .safety-selectors .btn, .p-safety .safety-equipment-filters .btn { font-size: 15px; }
}

/* ---------- meaningful motion: the layers stack up as you arrive ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .p-safety .sg-layers > .content-card { animation: sg-stack linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    @keyframes sg-stack { from { box-shadow: var(--shadow); translate: 0 18px; opacity: .4; } }
  }
}
@media print {
  .p-safety .sg-layers > .content-card, .p-safety .sg-helpers > li, .p-safety .safety-equipment-card { box-shadow: none; border: 1px solid #ccc; }
  .p-safety .guide-sections .safety-worksheet { box-shadow: none; margin: 0; width: 100%; }
  .p-safety .sg-clipboard::before, .p-safety .sg-clipboard::after { display: none; }
  .p-safety .guide-sections blockquote.sg-clipboard { box-shadow: none; border: 1px solid #ccc; }
}
/* phones: the tags sit close together as a small bundle instead of one per string */
@media (max-width: 560px) {
  .p-safety .safety-selectors .btn-row, .p-safety .safety-equipment-filters .btn-row { background: none; gap: 10px 8px; padding-top: 4px; }
  .p-safety .safety-selectors .btn, .p-safety .safety-equipment-filters .btn { min-height: 44px; padding: 8px 12px 8px 26px; font-size: 14.5px; rotate: 0deg; }
  .p-safety .safety-selectors .btn::before, .p-safety .safety-equipment-filters .btn::before { display: none; }
  .p-safety .safety-selectors .btn::after, .p-safety .safety-equipment-filters .btn::after { left: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .p-safety :is(.safety-selectors, .safety-equipment-filters) .btn { transition: none; }
}