/* Styles for the "just gross" bathroom campaign flow
   (/doorstops/bathroom-gross).

   The old bathroom doorstop is a wall of guidance you scroll; this one is a
   checklist you work through, so the layout is built around a numbered step
   that opens, gets done, and collapses back to a line you can see the rest of
   the campaign past. Visual language matches the lunch flow deliberately -
   same measure, radii and accent - so the two rebuilt doorstops read as one
   product. */

:root {
  --bf-ink: #1d2b36;
  --bf-soft: #55636e;
  --bf-line: hsl(0, 0%, 89%);
  --bf-accent: hsl(196, 74%, 42%);
  --bf-accent-soft: hsl(196, 68%, 96%);
  --bf-done: hsl(150, 62%, 38%);
  --bf-radius: 14px;
  --bf-shadow: 0 6px 18px hsla(0, 0%, 0%, 0.08);
  --bf-shadow-lg: 0 14px 30px hsla(0, 0%, 0%, 0.14);
}

/* ------------------------------------------------------------- intro */

.bf-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 150px 20px 70px;
  background: none;
}

/* The gradient and the floating mess both belong to the page, not to the hero:
   they sit fixed behind everything so the emoji keep drifting past the step
   cards as you scroll, in the margins either side of the column. */
body {
  background: linear-gradient(170deg, #EAF7FD 0%, #F4F1FF 45%, #F2FBF7 100%) fixed;
  background-color: #F4F8FB;
}

.bf-scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.bf-wrap, .bf-hero, .header, .bf-toast { position: relative; z-index: 1; }
.header { z-index: 4; }

.bf-bub {
  position: absolute;
  font-size: 26px;
  opacity: 0.55;
  animation: bf-rise linear infinite;
  will-change: transform;
}

@keyframes bf-rise {
  from { transform: translateY(0) rotate(0deg); }
  to   { transform: translateY(-115vh) rotate(220deg); }
}

@media (prefers-reduced-motion: reduce) {
  .bf-bub { animation: none; }
}

.bf-hero-inner { position: relative; z-index: 1; max-width: 860px; }

.bf-title {
  font-family: 'League Spartan', 'Poppins', sans-serif;
  font-size: clamp(38px, 8vw, 74px);
  line-height: 1.02;
  font-weight: 800;
  color: var(--bf-ink);
  margin: 0 0 18px;
}

.bf-sub {
  font-size: clamp(14pt, 2.2vw, 17pt);
  line-height: 1.6;
  color: var(--bf-soft);
  margin: 0 auto 26px;
  max-width: 620px;
}

/* --------------------------------------------------------- structure */

.bf-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 20px 90px;
  /* the site header is fixed once you scroll, so an anchor jump here has to
     stop short of it rather than tucking step 1 underneath */
  scroll-margin-top: 90px;
}

.bf-progress {
  position: sticky;
  /* the site header turns fixed once you scroll (z-index 4, ~74px tall), so the
     progress bar parks underneath it rather than over the logo */
  top: 76px;
  z-index: 3;
  display: flex;
  gap: 6px;
  padding: 12px 0 14px;
}

.bf-resume {
  margin: 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--bf-accent-soft);
  border: 1px solid hsl(196, 40%, 82%);
  font-size: 11pt;
  color: var(--bf-soft);
}
.bf-linkbtn {
  display: inline;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: var(--bf-accent);
  text-decoration: underline;
  cursor: pointer;
}

.bf-pip {
  flex: 1;
  height: 6px;
  border-radius: 99px;
  background: var(--bf-line);
  transition: background-color 0.25s ease;
}
.bf-pip.is-open { background: var(--bf-accent); }
.bf-pip.is-done { background: var(--bf-done); }

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

.bf-step {
  border: 1px solid var(--bf-line);
  border-radius: var(--bf-radius);
  background: #fff;
  box-shadow: var(--bf-shadow);
  margin: 0 0 14px;
  overflow: hidden;
}
.bf-step.is-open { box-shadow: var(--bf-shadow-lg); border-color: hsl(196, 45%, 78%); }
.bf-step.is-done .bf-step-num { background: var(--bf-done); border-color: var(--bf-done); color: #fff; }

.bf-step-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.bf-step-head:hover { background: var(--bf-accent-soft); }
.bf-step-head:focus-visible { outline: 2px solid var(--bf-accent); outline-offset: -3px; }

.bf-step-num {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--bf-line);
  display: grid;
  place-items: center;
  font-family: 'League Spartan', 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 13pt;
  color: var(--bf-soft);
  background: #fff;
}

.bf-step-titles { flex: 1 1 auto; min-width: 0; }
.bf-step-title {
  font-family: 'League Spartan', 'Poppins', sans-serif;
  font-size: 15pt;
  font-weight: 700;
  color: var(--bf-ink);
  margin: 0;
  line-height: 1.25;
}
.bf-step-meta {
  margin: 3px 0 0;
  font-size: 11pt;
  color: var(--bf-soft);
  line-height: 1.45;
}

.bf-step-caret {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-right: 2.5px solid var(--bf-accent);
  border-bottom: 2.5px solid var(--bf-accent);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}
.bf-step.is-open .bf-step-caret { transform: rotate(-135deg); }

.bf-step-body { display: none; padding: 6px 20px 24px; }
.bf-step.is-open .bf-step-body { display: block; }
.bf-step-body > p { font-size: 13pt; line-height: 1.68; color: var(--bf-soft); margin: 0 0 16px; }
.bf-step-body > p:last-child { margin-bottom: 0; }
.bf-h3 {
  font-family: 'League Spartan', 'Poppins', sans-serif;
  font-size: 14pt;
  color: var(--bf-ink);
  margin: 24px 0 8px;
}

/* The shared reset in style.css sets `a, span, button { display: block }`, so
   anything meant to sit inside a sentence has to say so, and links inside prose
   have to be told apart from the pill buttons that are also anchors. */
.bf-step-body a:not(.bf-btn) { color: var(--bf-accent); text-decoration: underline; display: inline; }

/* `li { list-style: none }` in the shared reset, plus the element-qualified
   paragraph rule above, both outrank the utility classes - so the lists and
   the muted asides have to win specificity back. */
.bf-step-body ul { list-style: disc; padding-left: 22px; margin: 10px 0 14px; }
.bf-step-body li { list-style: disc; font-size: 12.5pt; line-height: 1.6; color: var(--bf-soft); margin-bottom: 7px; }
.bf-step-body > p.bf-muted { font-size: 11pt; color: var(--bf-soft); }

/* until the flow script is live, nothing here does anything when clicked */
body:not(.bf-ready) .bf-step-head,
body:not(.bf-ready) .bf-choice { cursor: default; }

.bf-locked { opacity: 0.55; }
.bf-locked .bf-step-head { cursor: default; }
.bf-locked .bf-step-head:hover { background: none; }

/* ----------------------------------------------------------- choices */

.bf-choices { display: grid; gap: 12px; margin: 4px 0 0; }
@media (min-width: 620px) {
  .bf-choices { grid-template-columns: 1fr 1fr; }
  .bf-choice--wide { grid-column: 1 / -1; }
}

/* the detour you get for "I'm not sure": go inspect, then come back and pick */
.bf-unsure {
  margin-top: 16px;
  padding: 16px 18px;
  border: 1px solid hsl(196, 40%, 80%);
  border-radius: var(--bf-radius);
  background: var(--bf-accent-soft);
}
.bf-unsure > p { font-size: 12.5pt; line-height: 1.65; color: var(--bf-soft); margin: 0 0 12px; }
.bf-unsure .bf-h3 { margin-top: 0; }
.bf-unsure a:not(.bf-btn) { color: var(--bf-accent); text-decoration: underline; display: inline; }

.bf-choice {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  padding: 16px 18px;
  border: 1.5px solid var(--bf-line);
  border-radius: var(--bf-radius);
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}
.bf-choice:hover { transform: translateY(-2px); box-shadow: var(--bf-shadow); border-color: hsl(196, 45%, 72%); }
.bf-choice:focus-visible { outline: 2px solid var(--bf-accent); outline-offset: 2px; }
.bf-choice.is-active { border-color: var(--bf-accent); background: var(--bf-accent-soft); }
.bf-choice-icon { font-size: 26px; line-height: 1; }
.bf-choice-title {
  font-family: 'League Spartan', 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 13.5pt;
  color: var(--bf-ink);
  margin: 0;
}
.bf-choice-meta { margin: 0; font-size: 11pt; line-height: 1.5; color: var(--bf-soft); }

/* ------------------------------------------------------ school search */

.bf-field { margin: 4px 0 12px; position: relative; }
.bf-label {
  display: block;
  font-family: 'League Spartan', 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 12pt;
  color: var(--bf-ink);
  margin-bottom: 6px;
}
.bf-input {
  width: 100%;
  padding: 13px 15px;
  font-size: 13pt;
  font-family: inherit;
  color: var(--bf-ink);
  border: 1.5px solid var(--bf-line);
  border-radius: 11px;
  background: #fff;
  box-sizing: border-box;
}
.bf-input:focus { outline: none; border-color: var(--bf-accent); box-shadow: 0 0 0 3px hsla(196, 74%, 42%, 0.16); }

.bf-results {
  border: 1px solid var(--bf-line);
  border-radius: 11px;
  margin-top: 6px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--bf-shadow);
}
.bf-results:empty { display: none; }
.bf-result {
  display: block;
  width: 100%;
  text-align: left;
  padding: 11px 15px;
  border: none;
  border-bottom: 1px solid var(--bf-line);
  background: none;
  cursor: pointer;
  font-family: inherit;
}
.bf-result:last-child { border-bottom: none; }
.bf-result:hover, .bf-result:focus-visible { background: var(--bf-accent-soft); outline: none; }
.bf-result-name { display: block; font-weight: 600; color: var(--bf-ink); }
.bf-result-where { display: block; font-size: 10.5pt; color: var(--bf-soft); }

.bf-muted { font-size: 10.5pt; color: var(--bf-soft); line-height: 1.6; }

/* --------------------------------------------------- lookup status */

.bf-spinner {
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 7px;
  vertical-align: -2px;
  border: 2px solid hsla(196, 74%, 42%, 0.25);
  border-top-color: var(--bf-accent);
  border-radius: 50%;
  animation: bf-spin 0.8s linear infinite;
}
@keyframes bf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bf-spinner { animation-duration: 3s; } }

/* -------------------------------------------------------- solutions */

.bf-solution {
  border-top: 1px solid var(--bf-line);
  margin: 0;
}
.bf-solution:last-of-type { border-bottom: 1px solid var(--bf-line); }

.bf-solution > summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 15px 10px 15px 30px;
  font-family: 'League Spartan', 'Poppins', sans-serif;
  font-size: 14pt;
  font-weight: 700;
  color: var(--bf-ink);
  line-height: 1.3;
}
.bf-solution > summary::-webkit-details-marker { display: none; }
.bf-solution > summary::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 24px;
  width: 8px;
  height: 8px;
  border-right: 2.5px solid var(--bf-accent);
  border-bottom: 2.5px solid var(--bf-accent);
  transform: translateY(-4px) rotate(45deg);
  transition: transform 0.18s ease;
}
.bf-solution[open] > summary::before { transform: translateY(-2px) rotate(-135deg); }
.bf-solution > summary:hover { color: var(--bf-accent); }
.bf-solution > summary:focus-visible { outline: 2px solid var(--bf-accent); outline-offset: -2px; }

.bf-solution-body { padding: 0 0 18px 30px; }
.bf-solution p { font-size: 12.5pt; line-height: 1.65; color: var(--bf-soft); margin: 0 0 10px; }
.bf-solution ul { margin: 0 0 10px; padding-left: 22px; list-style: disc; }
.bf-solution li { list-style: disc; font-size: 12.5pt; line-height: 1.6; color: var(--bf-soft); margin-bottom: 6px; }
.bf-solution a:not(.bf-btn) { display: inline; color: var(--bf-accent); text-decoration: underline; }
.bf-solution--trade > summary::before {
  border-right-color: #E0912F;
  border-bottom-color: #E0912F;
}
.bf-solution--trade > summary:hover { color: #B4690E; }

/* ------------------------------------------------- folded templates */

.bf-template {
  margin: 14px 0 4px;
  border: 1px solid var(--bf-line);
  border-radius: 11px;
  background: #f6f9fc;
  overflow: hidden;
}
.bf-template-label {
  margin: 0;
  padding: 13px 16px 0;
  font-family: 'League Spartan', 'Poppins', sans-serif;
  font-size: 12pt;
  font-weight: 600;
  color: var(--bf-ink);
}

.bf-mailbody {
  margin: 0;
  padding: 12px 16px 4px;
  border-top: 1px solid var(--bf-line);
  font-family: 'Poppins', sans-serif;
  font-size: 12pt;
  line-height: 1.6;
  color: var(--bf-ink);
  white-space: pre-wrap;
}
.bf-blank { background: #FFF3C4; padding: 0 3px; border-radius: 3px; display: inline; }

.bf-mailactions { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px; }
.bf-mailactions .bf-btn { color: #fff; text-decoration: none; }
.bf-mailactions .bf-btn--ghost { color: var(--bf-accent); }

/* --------------------------------------------------------- buttons */

.bf-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 20px;
  border: none;
  border-radius: 99px;
  background: var(--bf-accent);
  color: #fff;
  font-family: 'League Spartan', 'Poppins', sans-serif;
  font-size: 12.5pt;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.bf-btn:hover { filter: brightness(0.93); }
.bf-btn:focus-visible { outline: 2px solid var(--bf-ink); outline-offset: 2px; }
.bf-btn--ghost { background: #fff; color: var(--bf-accent); border: 1.5px solid var(--bf-accent); }
.bf-btn--done { background: var(--bf-done); }
.bf-btn[disabled] { opacity: 0.5; cursor: not-allowed; filter: none; }

.bf-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.bf-actions:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------- photos */

.bf-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin: 14px 0; }
.bf-photos:empty { display: none; }
.bf-photo { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--bf-line); aspect-ratio: 3 / 4; }
.bf-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bf-photo button {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: hsla(0, 0%, 0%, 0.62);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

/* ----------------------------------------------------- share section */

.bf-posterpick {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--bf-line);
}
.bf-posterpick > p { font-size: 12.5pt; line-height: 1.65; color: var(--bf-soft); margin: 0 0 4px; }
.bf-posterpick .bf-h3 { margin-top: 0; }
.bf-help { margin-top: 44px; }
.bf-help > p { font-size: 12.5pt; line-height: 1.65; color: var(--bf-soft); margin: 0 0 4px; }
.bf-help .bf-h3 { margin-top: 0; }

/* the help template sits inside a callout in step 6, where it needs a little
   air but not the callout's own inner padding repeated */
.bf-callout .bf-template { margin-bottom: 0; background: #fff; }

.bf-share-foot { font-size: 11pt; line-height: 1.65; color: var(--bf-soft); margin: 26px 0 0; }
.bf-share-foot a { display: inline; color: var(--bf-accent); text-decoration: underline; }

/* --------------------------------------------------------- posters */

.bf-posters { display: grid; gap: 12px; margin: 16px 0; }
@media (min-width: 640px) { .bf-posters { grid-template-columns: repeat(3, 1fr); } }
.bf-poster {
  padding: 0;
  border: 2px solid var(--bf-line);
  border-radius: 12px;
  overflow: hidden;
  background: none;
  cursor: pointer;
  line-height: 0;
}
.bf-poster svg { width: 100%; height: auto; display: block; }
.bf-poster.is-active { border-color: var(--bf-accent); box-shadow: var(--bf-shadow-lg); }
.bf-poster:focus-visible { outline: 2px solid var(--bf-accent); outline-offset: 2px; }

/* --------------------------------------------------------- callouts */

.bf-callout {
  border: 1px solid hsl(196, 40%, 80%);
  background: var(--bf-accent-soft);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 14px 0;
}
.bf-callout p { margin: 0 0 8px; font-size: 12.5pt; line-height: 1.6; color: var(--bf-ink); }
.bf-callout p:last-child { margin-bottom: 0; }
.bf-callout--warn { background: #FFF7E6; border-color: #F0C674; }

/* ------------------------------------------- inline evidence packet ---
   Used only when the pop-up window is blocked. On screen it reads as one more
   block in step 5; on paper it is the only thing on the page. */

.bf-packet-inline { margin: 14px 0; font-family: Georgia, serif; color: var(--bf-ink); }
.bf-packet-inline h1 { font-size: 22px; margin: 0 0 4px; }
.bf-packet-inline h2 { font-size: 15px; margin: 22px 0 6px; }
.bf-packet-inline .meta { color: var(--bf-soft); margin: 0 0 14px; }
.bf-packet-inline p { line-height: 1.6; }
.bf-packet-inline mark { background: #FFF3C4; }
.bf-packet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bf-packet-inline figure { margin: 0; break-inside: avoid; }
.bf-packet-inline img { width: 100%; border: 1px solid #ccc; display: block; }
.bf-packet-inline figcaption { font-size: 12px; color: var(--bf-soft); margin-top: 4px; }

@media print {
  body.bf-has-packet * { visibility: hidden; }
  body.bf-has-packet .bf-packet-inline,
  body.bf-has-packet .bf-packet-inline * { visibility: visible; }
  body.bf-has-packet .bf-packet-inline { position: absolute; left: 0; top: 0; width: 100%; }
  .bf-packet-noprint { display: none !important; }
}

.bf-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%) translateY(20px);
  background: var(--bf-ink);
  color: #fff;
  padding: 11px 20px;
  border-radius: 99px;
  font-size: 12pt;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 40;
}
.bf-toast.is-up { opacity: 1; transform: translateX(-50%) translateY(0); }