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

   The step system, cards, templates and posters come from bathroom-flow.css,
   repainted for the zine by components/flow/flow-css.js; this file adds what
   only this page has, in the same ink outlines: the intro band, the survey
   number inputs, the crowd simulation, the referent list and asks, the three
   D's, the summer jobs stat and the business tracker.

   Everything inside a step is drawn with rules, not boxes: the step is
   already the card. A heavy ink rule opens a block, thin rules divide its
   rows, a 2px rule closes it. */

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

/* it only speaks up when the directory fails, so it takes no room otherwise */
#bf-school-status:empty { display: none; }
.ft a { display: inline; }

/* Any class rule with a `display` beats the browser's own `[hidden]`, so an
   element hidden from script would stay on screen. */
.ft [hidden] { display: none !important; }

/* folds open flush with the text above them, not indented under the caret */
.ft .bf-solution-body { padding-left: 0; }

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

/* ---------------------------------------------- what makes fights stop
   Above the steps, so it can be a box of its own; its three levers are
   columns divided by rules rather than cards inside it. */

.ft .ft-why {
  margin: 0 0 30px;
  padding: 22px 24px 20px;
  border: 3px solid #16130f;
  border-radius: 0;
  background: #fff;
  box-shadow: 6px 6px 0 #16130f;
}
.ft .ft-why .bf-h3 { margin: 0 0 6px; }
.ft .ft-why p { font-size: 16px; line-height: 1.6; color: var(--bf-ink); margin: 0 0 16px; }
.ft .ft-levers {
  list-style: none;
  padding: 14px 0 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 2px solid #16130f;
}
.ft .ft-levers li {
  list-style: none;
  padding: 0 18px;
  border-left: 1px solid var(--bf-line);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--bf-soft);
}
.ft .ft-levers li:first-child { padding-left: 0; border-left: 0; }
.ft .ft-levers li:last-child { padding-right: 0; }
.ft .ft-levers ion-icon { display: block; font-size: 26px; margin-bottom: 8px; color: #148d75; }
.ft .ft-levers strong { display: block; font-family: var(--dl-font-display); font-size: 16px; color: #16130f; margin-bottom: 4px; }
@media (max-width: 620px) {
  .ft .ft-why { padding: 18px 18px 14px; box-shadow: 4px 4px 0 #16130f; }
  .ft .ft-levers { grid-template-columns: 1fr; padding-top: 0; }
  .ft .ft-levers li, .ft .ft-levers li:first-child { padding: 14px 0; border-left: 0; border-top: 1px solid var(--bf-line); }
  .ft .ft-levers li:first-child { border-top: 0; }
  .ft .ft-levers li:last-child { padding-bottom: 4px; }
}

/* 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: 0;
  border-radius: 0;
  background: #E4F6E9;
  color: var(--bf-ink);
  font-size: 15.5px;
  line-height: 1.6;
}

.ft .ft-find { margin: 8px 0 0; font-size: 14px; color: var(--bf-soft); }
/* the hint under a template's buttons sits inside the template box */
.ft .bf-template > .ft-find { margin: -4px 0 0; padding: 0 18px 16px; }

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

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

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

   Drawn in the landing page's zine language: cream paper, 3px ink rules,
   a hard-shadowed readout, 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 side padding, so it reads as a band in the card instead of
   a box nested in it. */

.ft .ft-sim {
  --z-ink: #16130f;
  --z-paper: #FBF6EC;
  --z-mint: #3ECFB0;
  --z-mint-text: #148d75;
  position: relative;
  margin: 22px -24px 26px;
  background: var(--z-paper);
  border-top: 3px solid var(--z-ink);
  border-bottom: 3px solid var(--z-ink);
  overflow: hidden;
  color: var(--z-ink);
  padding-bottom: 16px;
}
/* halftone in one corner, hatching in the other, like the landing hero */
.ft .ft-sim::before, .ft .ft-sim::after { content: ''; position: absolute; pointer-events: none; z-index: 0; }
.ft .ft-sim::before {
  /* kept small and faint: the heading sits on top of it with no paper behind */
  top: -12px; left: -12px; width: 96px; height: 60px; opacity: .55;
  background-image: radial-gradient(#F0BFA6 3px, transparent 3.1px);
  background-size: 16px 16px;
}
.ft .ft-sim::after {
  right: 0; top: 0; width: 110px; height: 70px; opacity: .6;
  background-image: repeating-linear-gradient(-45deg, rgba(187,212,245,.9) 0 3px, transparent 3px 11px);
}
.ft .ft-sim > * { position: relative; z-index: 1; }

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

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

.ft .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 .ft-sim-num {
  display: block;
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.ft .ft-sim-label { display: block; margin-top: 2px; font-size: 13px; font-weight: 600; color: #55504a; }
.ft .ft-sim-drag {
  display: block;
  position: absolute;
  left: 20px;
  bottom: 10px;
  font-family: var(--dl-caveat), cursive;
  font-weight: 700;
  font-size: 18px;
  color: #55504a;
  pointer-events: none;
}

.ft .ft-sim-controls { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; padding: 6px 24px 8px; }
.ft .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 15px var(--dl-font-display);
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease;
}
.ft .ft-zbtn--mint { background: var(--z-mint); }
.ft .ft-zbtn:hover:not(:disabled) { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--z-ink); }
.ft .ft-zbtn:focus-visible { outline: 3px solid var(--z-mint-text); outline-offset: 3px; }
.ft .ft-zbtn:disabled { opacity: .45; cursor: default; }
.ft .ft-sim-reset {
  margin-left: auto;
  border: 0;
  background: none;
  font: 700 18px var(--dl-caveat), cursive;
  color: var(--z-ink);
  text-decoration: underline;
  cursor: pointer;
}

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


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

/* the definition: a heavy rule, a kicker, then the facts as ruled rows */
.ft .ft-evidence { margin: 8px 0 22px; padding: 14px 0 0; border-top: 3px solid #16130f; }
.ft .ft-kicker-sm {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #148d75;
  margin-bottom: 6px;
}
.ft .bf-step-body .ft-def { margin: 0 0 12px; font-size: 17px; line-height: 1.6; color: var(--bf-ink); }
.ft .ft-def strong { color: #16130f; }

.ft .ft-facts {
  list-style: none;
  padding: 0 !important;
  margin: 6px 0 16px;
  border-top: 3px solid #16130f;
  border-bottom: 2px solid #16130f;
}
.ft .ft-evidence .ft-facts { margin-bottom: 0; border-top: 1px solid var(--bf-line); }
.ft .ft-facts li, .ft .bf-solution .ft-facts li {
  list-style: none;
  margin: 0;
  padding: 12px 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--bf-ink);
}
.ft .ft-facts li + li { border-top: 1px solid var(--bf-line); }
.ft .ft-facts strong { color: #16130f; }
.ft .ft-src { display: block; margin-top: 4px; font-size: 13.5px; }

.ft .ft-refs { display: grid; gap: 10px; margin: 6px 0 4px; }
.ft .ft-ref { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: center; }
.ft .ft-ref .bf-input { margin: 0; }
.ft .ft-ref-x {
  width: 36px;
  height: 36px;
  border-radius: 0;
  border: 2px solid #16130f;
  background: #fff;
  color: #16130f;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.ft .ft-ref-x:hover { background: #FDE7E0; }
.ft .ft-ref-x:focus-visible { outline: 3px solid #3ECFB0; outline-offset: 2px; }
@media (max-width: 520px) {
  .ft .ft-ref { grid-template-columns: 1fr auto; }
  .ft .ft-ref .ft-ref-role { grid-column: 1 / -1; grid-row: 2; }
  .ft .ft-ref .ft-ref-x { grid-column: 2; grid-row: 1; }
}

/* the four asks: selectable cards, the same controls as the step-2 choices */
.ft .ft-asks { display: grid; gap: 16px; margin: 8px 0 26px; }
@media (min-width: 640px) { .ft .ft-asks { grid-template-columns: 1fr 1fr; } }
.ft .ft-ask {
  text-align: left;
  padding: 16px 16px 14px;
  border: 3px solid #16130f;
  border-radius: 0;
  background: #fff;
  box-shadow: 4px 4px 0 #16130f;
  cursor: pointer;
  font-family: inherit;
  color: #16130f;
  display: grid;
  align-content: start;
  gap: 6px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.ft .ft-ask:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #16130f; }
.ft .ft-ask.is-active { background: #E4F6E9; box-shadow: 2px 2px 0 #16130f; transform: translate(2px, 2px); }
.ft .ft-ask:focus-visible { outline: 3px solid #3ECFB0; outline-offset: 3px; }
.ft .ft-ask strong { font-family: var(--dl-font-display); font-size: 17px; line-height: 1.3; color: #16130f; }
.ft .ft-ask span { display: block; font-size: 14.5px; line-height: 1.5; color: var(--bf-soft); }

/* the three D's: three ruled columns, not three cards */
.ft .ft-ds {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 8px 0 18px;
  border-top: 3px solid #16130f;
  border-bottom: 2px solid #16130f;
}
.ft .ft-d {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 14px 18px 16px;
  border-left: 1px solid var(--bf-line);
}
.ft .ft-d:first-child { padding-left: 0; border-left: 0; }
.ft .ft-d:last-child { padding-right: 0; }
.ft .ft-d-icon { display: block; font-size: 26px; color: #148d75; line-height: 1; margin-bottom: 4px; }
.ft .ft-d strong { font-family: var(--dl-font-display); font-size: 19px; color: #16130f; }
.ft .ft-d span:last-child { display: block; font-size: 14.5px; line-height: 1.5; color: var(--bf-soft); }
@media (max-width: 620px) {
  .ft .ft-ds { grid-template-columns: 1fr; }
  .ft .ft-d, .ft .ft-d:first-child, .ft .ft-d:last-child { padding: 12px 0 14px; border-left: 0; }
  .ft .ft-d + .ft-d { border-top: 1px solid var(--bf-line); }
}

.ft .ft-script-for {
  font-family: var(--dl-font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--bf-ink);
  margin: 22px 0 6px;
}

/* a fold is a ruled row, like the solution lists, and opens flush */
.ft .ft-optional { margin: 22px 0 8px; border-top: 2px solid #16130f; border-bottom: 2px solid #16130f; background: none; }
.ft .ft-optional > summary {
  cursor: pointer;
  padding: 14px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--bf-ink);
  list-style: none;
}
.ft .ft-optional > summary::-webkit-details-marker { display: none; }
.ft .ft-optional > summary::before { content: "\25B8\00a0"; color: #16130f; }
.ft .ft-optional[open] > summary::before { content: "\25BE\00a0"; }
.ft .ft-optional > summary:hover { color: var(--bf-accent); }
.ft .ft-optional-tag {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 8px;
  border: 2px solid #16130f;
  border-radius: 0;
  background: #E4F6E9;
  color: #16130f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  vertical-align: 1px;
}
.ft .ft-optional-body { padding: 0 0 18px; }
.ft .ft-steps { list-style: decimal; padding-left: 22px !important; margin: 4px 0 14px; }
.ft .ft-steps li, .ft .bf-solution .ft-steps li { list-style: decimal; font-size: 15.5px; line-height: 1.6; color: var(--bf-ink); margin-bottom: 8px; }
.ft .ft-steps strong { color: #16130f; }

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

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

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

/* the stat that carries the step: one ruled row, the number in display type */
.ft .ft-stat {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: center;
  margin: 8px 0 16px;
  padding: 16px 0;
  border-top: 3px solid #16130f;
  border-bottom: 2px solid #16130f;
}
.ft .ft-stat-num {
  display: block;
  font-family: var(--dl-font-display);
  font-size: 60px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #148d75;
}
.ft .bf-step-body .ft-stat p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--bf-ink); }
@media (max-width: 520px) { .ft .ft-stat { grid-template-columns: 1fr; gap: 10px; } .ft .ft-stat-num { font-size: 48px; } }

.ft .ft-part {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-right: 8px;
  border: 2px solid #16130f;
  border-radius: 0;
  background: #E4F6E9;
  color: #16130f;
  font-size: 14px;
  font-weight: 700;
  vertical-align: 1px;
}

.ft .ft-orgs {
  list-style: none;
  padding: 0 !important;
  margin: 6px 0 16px;
  border-top: 2px solid #16130f;
  border-bottom: 2px solid #16130f;
}
.ft .ft-orgs li, .ft .bf-solution .ft-orgs li {
  list-style: none;
  margin: 0;
  padding: 10px 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--bf-ink);
}
.ft .ft-orgs li + li { border-top: 1px solid var(--bf-line); }

/* the business tracker: a ruled block; a row that said yes or no gets a
   flat tint, nothing more */
.ft .ft-biz { margin: 22px 0 4px; padding: 14px 0 0; border-top: 3px solid #16130f; }
.ft .ft-biz .bf-h3 { margin-top: 0; }
.ft .ft-biz-add { display: flex; gap: 10px; align-items: stretch; }
.ft .ft-biz-add .bf-input { flex: 1; min-width: 0; margin: 0; }
.ft .ft-biz-list { list-style: none; padding: 0 !important; margin: 14px 0 0; }
.ft .ft-biz-list:not(:empty) { border-top: 2px solid #16130f; border-bottom: 2px solid #16130f; }
.ft .ft-biz-row, .ft .bf-solution .ft-biz-row {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  padding: 9px 0;
}
.ft .ft-biz-row + .ft-biz-row { border-top: 1px solid var(--bf-line); }
.ft .ft-biz-row.is-yes { background: #E4F6E9; box-shadow: -10px 0 0 #E4F6E9, 10px 0 0 #E4F6E9; }
.ft .ft-biz-row.is-no { background: #FDE7E0; box-shadow: -10px 0 0 #FDE7E0, 10px 0 0 #FDE7E0; }
.ft .ft-biz-name { display: block; font-weight: 600; color: var(--bf-ink); font-size: 15px; }
.ft .ft-biz-btns { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ft .ft-biz-btns button {
  padding: 4px 9px;
  border-radius: 0;
  border: 2px solid #16130f;
  background: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #16130f;
  cursor: pointer;
}
.ft .ft-biz-btns button:hover { background: #FDF3D8; }
.ft .ft-biz-btns button.is-active { background: #16130f; border-color: #16130f; color: #FBF6EC; }
.ft .ft-biz-btns .ft-biz-x { width: 28px; height: 28px; padding: 0; font-size: 16px; line-height: 1; }
.ft .ft-biz-read { margin: 12px 0 0; font-size: 15px; font-weight: 600; color: var(--bf-ink); }

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

.ft .ft-session { margin: 4px 0 18px; padding: 16px 0 22px; border-top: 3px solid #16130f; border-bottom: 2px solid #16130f; }
.ft .ft-session h3 {
  font-family: var(--dl-font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: #16130f;
  margin: 0 0 10px;
}
.ft .ft-session p { margin: 0 0 12px; font-size: 16px; line-height: 1.6; color: var(--bf-ink); }
.ft .ft-session ul { list-style: disc; padding-left: 22px; margin: 0 0 16px; }
.ft .ft-session li { list-style: disc; font-size: 16px; line-height: 1.6; color: var(--bf-ink); margin-bottom: 6px; }

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