/* Deltas for the fights campaign flow (/doorstops/fights).

   The step system, cards, templates and posters come from bathroom-flow.css;
   this file re-tints them and adds what only this page has: the survey
   number inputs, the referent list and asks (the same shape as the
   competition flow's), the three D's, the summer jobs stat and the business
   tracker.

   Warm orange on slate. The schools in the Roots trial handed out orange
   wristbands for friendly acts, and nothing here should look like a fight
   poster. */

:root {
  --bf-accent: hsl(18, 78%, 46%);
  --bf-accent-soft: hsl(24, 90%, 96%);
  --ft-slate: #1D2B36;
}

body.ft {
  background: linear-gradient(170deg, #FFF3EA 0%, #F7F4EF 48%, #EEF3F6 100%) fixed;
  background-color: #F7F3EE;
}

/* the shared sheet hard-codes the blue in a few focus rings and borders */
.ft .bf-step.is-open { border-color: hsl(20, 50%, 82%); }
.ft .bf-input:focus { box-shadow: 0 0 0 3px hsla(18, 78%, 46%, 0.16); }
.ft .bf-choice:hover { border-color: hsl(20, 55%, 74%); }
.ft .bf-unsure, .ft .bf-callout, .ft .bf-resume { border-color: hsl(20, 40%, 84%); }
.ft .bf-spinner { border-color: hsla(18, 78%, 46%, 0.25); border-top-color: var(--bf-accent); }

.ft .bf-title { max-width: 14ch; margin-left: auto; margin-right: auto; }
.ft-hero-sub {
  max-width: 540px;
  margin: 0 auto 22px;
  font-size: 13.5pt;
  line-height: 1.55;
  color: var(--bf-soft);
  text-align: center;
}

#bf-school-status:empty { display: none; }
.ft a { display: inline; }
.ft .bf-step-body a:not(.bf-btn), .ft-why a, .ft .bf-help a:not(.bf-btn) {
  color: var(--bf-accent);
  text-decoration: underline;
}

.ft-checklist { list-style: disc; padding-left: 22px; margin: 6px 0 14px; }
.ft-checklist li { list-style: disc; font-size: 12.5pt; line-height: 1.6; color: var(--bf-soft); margin-bottom: 6px; }

/* ---------------------------------------------- what makes fights stop */

.ft-why {
  margin: 0 0 22px;
  padding: 20px 20px 14px;
  border-radius: var(--bf-radius);
  background: #fff;
  border: 1px solid var(--bf-line);
  box-shadow: var(--bf-shadow);
}
.ft-why p { font-size: 12.5pt; line-height: 1.6; color: var(--bf-soft); margin: 0 0 12px; }
.ft-levers {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.ft-levers li {
  list-style: none;
  padding: 12px;
  border-radius: 12px;
  background: var(--bf-accent-soft);
  font-size: 11.5pt;
  line-height: 1.45;
  color: var(--bf-soft);
}
.ft-levers ion-icon { display: block; font-size: 26px; margin-bottom: 6px; color: var(--bf-accent); }
.ft-levers strong { display: block; color: var(--bf-ink); margin-bottom: 2px; }
@media (max-width: 620px) { .ft-levers { grid-template-columns: 1fr; } }

/* a line at the top of a step saying how it fits the step-2 answer */
.ft .bf-step-body p.ft-note {
  padding: 10px 14px;
  border-left: 4px solid var(--bf-accent);
  border-radius: 8px;
  background: var(--bf-accent-soft);
  color: var(--bf-ink);
  font-size: 12pt;
}
.ft .bf-step-body p.ft-note[hidden] { display: none; }

.ft-find { margin: 8px 0 0; font-size: 11pt; color: var(--bf-soft); }

/* --------------------------------------------------------- the survey */

.ft-num-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; align-items: start; }
@media (max-width: 560px) { .ft-num-grid { grid-template-columns: 1fr; } }
.ft-num { display: grid; gap: 4px; }
.ft-num-label { font-size: 11pt; font-weight: 600; color: var(--bf-ink); line-height: 1.35; }
.ft-num-row { display: flex; align-items: center; gap: 6px; }
.ft-num-row .bf-input { margin: 0; max-width: 120px; }
.ft-num-suffix { font-weight: 700; color: var(--bf-soft); }
.ft-num-hint { font-size: 10pt; color: var(--bf-soft); line-height: 1.4; }

/* --------------------------------------------- the crowd simulation

   Drawn in the landing page's zine language (components/landing/themes/
   zine.js): cream paper, 3px ink rules, hard offset shadows, square corners,
   mint as the one bright note, peach halftone dots, Caveat for the notes. It
   runs the full width of the step card, bleeding past the body's 20px
   padding, so it reads as a band in the card instead of a box nested in it. */

.ft-sim {
  --z-ink: #16130f;
  --z-paper: #FBF6EC;
  --z-mint: #3ECFB0;
  --z-mint-text: #148d75;
  position: relative;
  margin: 20px -20px 24px;
  background: var(--z-paper);
  border-top: 3px solid var(--z-ink);
  border-bottom: 3px solid var(--z-ink);
  overflow: hidden;
  font-family: 'Poppins', sans-serif;
  color: var(--z-ink);
}
/* halftone in one corner, hatching in the other, like the landing hero */
.ft-sim::before, .ft-sim::after { content: ''; position: absolute; pointer-events: none; z-index: 0; }
.ft-sim::before {
  top: -12px; left: -12px; width: 180px; height: 130px;
  background-image: radial-gradient(#F0BFA6 3px, transparent 3.1px);
  background-size: 16px 16px;
}
.ft-sim::after {
  right: 0; top: 0; width: 170px; height: 110px;
  background-image: repeating-linear-gradient(-45deg, rgba(187,212,245,.9) 0 3px, transparent 3px 11px);
}
.ft-sim > * { position: relative; z-index: 1; }

.ft-sim-head { padding: 22px 24px 4px; }
.ft-sim-kicker {
  display: inline-block;
  padding: 3px 10px;
  background: var(--z-mint);
  border: 2px solid var(--z-ink);
  font-size: 10pt;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: rotate(-2deg);
}
.ft-sim-head h3 {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(20px, 3.4vw, 27px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 12px 0 8px;
  color: var(--z-ink);
}
.ft-sim-head p { margin: 0; font-size: 11.5pt; line-height: 1.6; color: #55504a; max-width: 620px; }

.ft-sim-stage { position: relative; height: 420px; }
@media (max-width: 560px) { .ft-sim-stage { height: 340px; } }
#ft-canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
#ft-canvas.is-dragging { cursor: grabbing; }

.ft-sim-readout {
  position: absolute;
  top: 14px;
  right: 18px;
  padding: 8px 14px 9px;
  background: #fff;
  border: 3px solid var(--z-ink);
  box-shadow: 5px 5px 0 var(--z-ink);
  text-align: right;
  pointer-events: none;
}
.ft-sim-num {
  display: block;
  font-size: 30pt;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.ft-sim-label { display: block; margin-top: 2px; font-size: 9.5pt; font-weight: 600; color: #55504a; }
.ft-sim-drag {
  position: absolute;
  left: 20px;
  bottom: 10px;
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 18px;
  color: #55504a;
  pointer-events: none;
}

.ft-sim-controls { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; padding: 6px 24px 8px; }
.ft-zbtn {
  padding: 11px 18px;
  border: 3px solid var(--z-ink);
  border-radius: 0;
  background: var(--z-paper);
  color: var(--z-ink);
  box-shadow: 4px 4px 0 var(--z-ink);
  font: 600 11.5pt 'Poppins', sans-serif;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease;
}
.ft-zbtn--mint { background: var(--z-mint); }
.ft-zbtn:hover:not(:disabled) { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--z-ink); }
.ft-zbtn:focus-visible { outline: 3px solid var(--z-mint-text); outline-offset: 3px; }
.ft-zbtn:disabled { opacity: .45; cursor: default; }
.ft-sim-reset {
  margin-left: auto;
  border: 0;
  background: none;
  font: 700 18px 'Caveat', cursive;
  color: var(--z-ink);
  text-decoration: underline;
  cursor: pointer;
}

.ft-sim-compare { display: grid; gap: 8px; padding: 8px 24px 4px; }
.ft-sim-compare[hidden] { display: none; }
.ft-sim-bar { display: grid; grid-template-columns: 10em 1fr 3em; gap: 10px; align-items: center; font-size: 10.5pt; font-weight: 600; }
.ft-sim-bar-track { height: 14px; border: 2px solid var(--z-ink); background: #fff; }
.ft-sim-bar-fill { display: block; height: 100%; width: 0; background: #F0BFA6; transition: width .6s ease; }
.ft-sim-bar.is-ref .ft-sim-bar-fill { background: var(--z-mint); }
.ft-sim-bar-num { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .ft-sim-bar { grid-template-columns: 7.5em 1fr 2.6em; font-size: 9.5pt; } }

.ft-sim-foot { margin: 0; padding: 8px 24px 18px; font-size: 10pt; line-height: 1.55; color: #55504a; }

/* ------------------------------------------------------ referents */

.ft-evidence {
  margin: 6px 0 18px;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--ft-slate);
  color: #E4EBF0;
}
.ft-kicker-sm {
  display: block;
  font-family: 'League Spartan', 'Poppins', sans-serif;
  font-size: 10.5pt;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #FFB38A;
  margin-bottom: 8px;
}
.ft-evidence .ft-facts li { background: hsla(0, 0%, 100%, 0.06); border-color: hsla(0, 0%, 100%, 0.12); color: #C9D5DD; }
.ft-evidence .ft-facts strong { color: #fff; }
.ft .bf-step-body .ft-def { margin: 0 0 12px; font-size: 13pt; line-height: 1.6; color: #E4EBF0; }
.ft-def strong { color: #fff; }
.ft .ft-evidence a { color: #FFB38A; }

.ft-facts { list-style: none; padding: 0 !important; margin: 4px 0 12px; display: grid; gap: 8px; }
.ft-facts li {
  list-style: none;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid var(--bf-line);
  border-left: 4px solid var(--bf-accent);
  border-radius: 10px;
  background: #fff;
  font-size: 12pt;
  line-height: 1.55;
  color: var(--bf-soft);
}
.ft-facts strong { color: var(--bf-ink); }
.ft-src { display: block; margin-top: 4px; font-size: 10.5pt; }

.ft-refs { display: grid; gap: 8px; margin: 4px 0 4px; }
.ft-ref { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: center; }
.ft-ref .bf-input { margin: 0; }
.ft-ref-x {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--bf-line);
  background: #fff;
  color: var(--bf-soft);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.ft-ref-x:hover { border-color: var(--bf-accent); color: var(--bf-accent); }
@media (max-width: 520px) {
  .ft-ref { grid-template-columns: 1fr auto; }
  .ft-ref .ft-ref-role { grid-column: 1 / -1; }
}

.ft-asks { display: grid; gap: 8px; margin: 4px 0 6px; }
@media (min-width: 640px) { .ft-asks { grid-template-columns: 1fr 1fr; } }
.ft-ask {
  text-align: left;
  padding: 12px 14px;
  border: 1.5px solid var(--bf-line);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  display: grid;
  gap: 4px;
}
.ft-ask:hover { border-color: hsl(20, 55%, 74%); }
.ft-ask.is-active { border-color: var(--bf-accent); background: var(--bf-accent-soft); }
.ft-ask:focus-visible { outline: 2px solid var(--bf-accent); outline-offset: 2px; }
.ft-ask strong { font-family: 'League Spartan', 'Poppins', sans-serif; font-size: 13pt; color: var(--bf-ink); }
.ft-ask span { font-size: 11pt; line-height: 1.5; color: var(--bf-soft); }

.ft-ds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 6px 0 16px; }
@media (max-width: 620px) { .ft-ds { grid-template-columns: 1fr; } }
.ft-d {
  display: grid;
  gap: 4px;
  padding: 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--bf-line);
  border-top: 5px solid var(--bf-accent);
}
.ft-d-icon { font-size: 26px; color: var(--bf-accent); line-height: 1; }
.ft-d strong { font-family: 'League Spartan', 'Poppins', sans-serif; font-size: 15pt; color: var(--bf-ink); }
.ft-d span:last-child { font-size: 11pt; line-height: 1.5; color: var(--bf-soft); }

.ft-script-for {
  font-family: 'League Spartan', 'Poppins', sans-serif;
  font-size: 12pt;
  font-weight: 700;
  color: var(--bf-ink);
  margin: 16px 0 6px;
}

.ft-optional {
  margin: 18px 0 8px;
  border: 1px dashed hsl(20, 45%, 76%);
  border-radius: 14px;
  background: #FFFCF9;
}
.ft-optional summary {
  cursor: pointer;
  padding: 14px 16px;
  font-weight: 700;
  color: var(--bf-ink);
  list-style: none;
}
.ft-optional summary::-webkit-details-marker { display: none; }
.ft-optional-tag {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 9px;
  border-radius: 99px;
  background: var(--bf-accent);
  color: #fff;
  font-size: 9.5pt;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  vertical-align: 1px;
}
.ft-optional-body { padding: 0 16px 14px; }
.ft-steps { list-style: decimal; padding-left: 22px !important; margin: 4px 0 14px; }
.ft-steps li { list-style: decimal; font-size: 12pt; line-height: 1.6; color: var(--bf-soft); margin-bottom: 8px; }
.ft-steps strong { color: var(--bf-ink); }

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

.ft-posters { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

/* -------------------------------------------------------- summer jobs */

.ft-stat {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
  margin: 6px 0 14px;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--ft-slate);
  color: #C9D5DD;
}
.ft-stat-num {
  font-family: 'League Spartan', 'Poppins', sans-serif;
  font-size: 44pt;
  font-weight: 800;
  line-height: 1;
  color: #FFB38A;
}
.ft-stat p { margin: 0; font-size: 12pt; line-height: 1.55; color: #C9D5DD; }
.ft .ft-stat a { color: #FFB38A; }
@media (max-width: 520px) { .ft-stat { grid-template-columns: 1fr; } }

.ft-part {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--bf-accent);
  color: #fff;
  font-size: 11pt;
  font-weight: 700;
  vertical-align: 1px;
}

.ft-orgs { list-style: none; padding: 0 !important; margin: 4px 0 14px; display: grid; gap: 8px; }
.ft-orgs li {
  list-style: none;
  padding: 10px 14px;
  border: 1px solid var(--bf-line);
  border-radius: 10px;
  background: #fff;
  font-size: 11.5pt;
  line-height: 1.5;
}

.ft-biz {
  margin: 16px 0 4px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--bf-accent-soft);
  border: 1px solid hsl(20, 50%, 88%);
}
.ft-biz .bf-h3 { margin-top: 0; }
.ft-biz-add { display: flex; gap: 8px; }
.ft-biz-add .bf-input { flex: 1; min-width: 0; margin: 0; }
.ft-biz-list { list-style: none; padding: 0 !important; margin: 10px 0 0; display: grid; gap: 6px; }
.ft-biz-row {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--bf-line);
  border-left: 4px solid var(--bf-line);
}
.ft-biz-row.is-yes { border-left-color: var(--bf-done); }
.ft-biz-row.is-no { border-left-color: hsl(0, 55%, 62%); }
.ft-biz-name { font-weight: 600; color: var(--bf-ink); font-size: 11.5pt; }
.ft-biz-btns { display: flex; gap: 4px; align-items: center; }
.ft-biz-btns button {
  padding: 4px 9px;
  border-radius: 99px;
  border: 1px solid var(--bf-line);
  background: #fff;
  font: inherit;
  font-size: 10pt;
  color: var(--bf-soft);
  cursor: pointer;
}
.ft-biz-btns button.is-active { background: var(--bf-accent); border-color: var(--bf-accent); color: #fff; }
.ft-biz-row.is-yes .ft-biz-btns button.is-active { background: var(--bf-done); border-color: var(--bf-done); }
.ft-biz-btns .ft-biz-x { border-radius: 50%; width: 26px; height: 26px; padding: 0; }
.ft-biz-read { margin: 10px 0 0; font-size: 11.5pt; font-weight: 600; color: var(--bf-ink); }

/* ------------------------------------------------ Doorstop Session ending */

.ft-session {
  margin: 4px 0 16px;
  padding: 22px 20px;
  border-radius: 16px;
  background: linear-gradient(150deg, var(--ft-slate) 0%, #3B2A22 100%);
  color: #E4EBF0;
}
.ft-session h3 {
  font-family: 'League Spartan', 'Poppins', sans-serif;
  font-size: 19pt;
  line-height: 1.2;
  color: #fff;
  margin: 0 0 10px;
}
.ft-session p { margin: 0 0 12px; font-size: 12.5pt; line-height: 1.6; color: #C9D5DD; }
.ft-session ul { list-style: disc; padding-left: 22px; margin: 0 0 16px; }
.ft-session li { list-style: disc; font-size: 12.5pt; line-height: 1.6; color: #C9D5DD; margin-bottom: 6px; }
.ft-session .bf-btn { background: #FFB38A; color: var(--ft-slate); }
.ft-session .bf-btn:hover { background: #fff; }

@media (max-width: 560px) {
  .ft-sim-readout { top: 10px; right: 12px; padding: 5px 10px 6px; box-shadow: 4px 4px 0 var(--z-ink); }
  .ft-sim-num { font-size: 20pt; }
  .ft-sim-label { font-size: 8.5pt; }
  .ft-sim-head { padding: 20px 20px 4px; }
  .ft-sim-controls, .ft-sim-compare, .ft-sim-foot { padding-left: 20px; padding-right: 20px; }
}