/* Deltas for the club funding flow (/doorstops/club-funding).

   The step system, cards and templates come from bathroom-flow.css,
   repainted for the zine by components/flow/flow-css.js, and the people
   list is the shared people finder (people-finder.css, whose chips and
   stats the funder sheet borrows). This file adds what only this page has:
   the club tags, the budget lines, the research list, the funder sheet and
   the senator card.

   Everything inside a step is drawn with rules, not boxes: the step is
   already the card. */

.cf .bf-title { max-width: 15ch; margin-left: auto; margin-right: auto; }
.cf .cf-hero-sub { margin: -6px auto 26px; font-size: 20px; line-height: 1.5; color: var(--dl-muted); text-align: center; }

#bf-school-status:empty { display: none; }
.cf a { display: inline; }
.cf [hidden] { display: none !important; }
.cf .bf-solution-body { padding-left: 0; }

.cf .cf-hint { margin: 8px 0 14px; font-size: 14px; line-height: 1.55; color: var(--bf-soft); }
.cf .cf-find { margin: -4px 0 0; padding: 0 18px 14px; font-size: 13.5px; color: var(--bf-soft); }

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

/* ------------------------------------------------------ step 1 */

.cf .cf-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -4px 0 14px; }
.cf .cf-tags-label { display: inline; margin-right: 4px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bf-soft); }
.bf-page.cf button.cf-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border: 2px solid #16130f; border-radius: 999px; background: #fff;
  font: inherit; font-size: 14px; font-weight: 600; color: #16130f; cursor: pointer;
}
.bf-page.cf button.cf-tag:hover { background: #FDF3D8; }
.bf-page.cf button.cf-tag.is-active { background: #16130f; color: #FBF6EC; }
.cf .bf-step-body p.cf-small, .cf p.cf-small { margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: var(--bf-soft); }
.cf .cf-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 620px) { .cf .cf-fields { grid-template-columns: 1fr; } }
.cf .cf-goals { width: 100%; resize: vertical; font: inherit; }

/* ------------------------------------------------------ step 2: budget */

.cf .cf-lines { list-style: none; padding: 0 !important; margin: 0 0 8px; border-top: 2px solid #16130f; }
.cf .cf-line, .cf .bf-step-body .cf-line {
  list-style: none; display: grid; grid-template-columns: 1fr 140px 32px; gap: 10px; align-items: center;
  margin: 0; padding: 8px 0; border-bottom: 1px solid var(--bf-line);
}
.bf-page.cf .cf-line .bf-input { margin: 0; padding: 9px 11px; font-size: 16px; }
.cf .cf-dollar { display: flex; align-items: center; gap: 4px; font-weight: 700; }
.cf .cf-dollar .bf-input { width: 100%; }
.bf-page.cf button.cf-x {
  width: 30px; height: 30px; padding: 0; border: 2px solid #16130f; background: #fff;
  font-size: 18px; line-height: 1; color: #16130f; cursor: pointer;
}
.bf-page.cf button.cf-x:hover { background: #FDF3D8; }
.cf .cf-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0; }
.cf .cf-suggest > span { display: inline; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bf-soft); }
.cf .cf-total { margin: 8px 0 22px; font-size: 15.5px; line-height: 1.55; color: var(--bf-ink); }
.cf .cf-total strong { font-family: var(--dl-font-display); font-size: 24px; color: #16130f; }
.cf .cf-total span { display: inline; color: var(--bf-soft); }

.cf .cf-evidence { list-style: none; padding: 0 !important; margin: 6px 0 4px; }
.cf .cf-evidence li, .cf .bf-step-body .cf-evidence li {
  list-style: none; margin: 0; padding: 10px 0 10px 16px; border-left: 4px solid #3ECFB0;
  font-size: 15.5px; line-height: 1.6; color: var(--bf-ink);
}
.cf .cf-evidence li + li { margin-top: 8px; }
.cf .cf-src { display: inline; font-size: 13.5px; color: var(--bf-soft); }

/* ------------------------------------------------------ step 3: funders */

.cf .cf-finder { margin: 26px 0 22px; padding-top: 16px; border-top: 3px solid #16130f; }
.cf .cf-finder-title { display: flex; align-items: center; font-family: var(--dl-font-display); font-size: 22px; font-weight: 700; color: #16130f; margin: 0 0 6px; }
.cf .cf-finder > p { margin: 0 0 6px; max-width: 680px; font-size: 15.5px; line-height: 1.6; color: var(--bf-ink); }
.cf .cf-stats { justify-content: flex-end; margin: 10px 0 0; }
@media (max-width: 760px) { .cf .cf-stats { justify-content: space-between; } }
.cf .cf-chips { margin: 0 0 10px; }

.cf .cf-sheet { list-style: none; padding: 0 !important; margin: 0; border-top: 2px solid #16130f; border-bottom: 2px solid #16130f; max-height: 760px; overflow-y: auto; }
.cf .cf-row, .cf .bf-step-body .cf-row {
  list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) 210px 170px; gap: 16px; align-items: start;
  margin: 0; padding: 14px 0; border-bottom: 1px solid var(--bf-line); font-size: 14.5px; line-height: 1.5; color: var(--bf-ink);
}
.cf .cf-row:last-child { border-bottom: 0; }
.cf .cf-row.is-yes { background: #E4F6E9; }
.cf .cf-row.is-no .cf-row-main { opacity: .55; }
.cf .cf-row-main, .cf .cf-row-links, .cf .cf-row-actions { display: grid; gap: 4px; min-width: 0; }
.cf .cf-row-main span, .cf .cf-row-links > *, .cf .cf-row-actions > * { display: block; }
.cf .cf-kind {
  justify-self: start; padding: 1px 7px; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; background: #16130f; color: #FBF6EC;
}
.cf .cf-row-name { font-family: var(--dl-font-display); font-size: 17px; font-weight: 700; color: #16130f; }
.cf .cf-row-facts { font-size: 13.5px; color: var(--bf-soft); }
.cf .cf-row-how { font-size: 13.5px; }
.cf .cf-row-links a { overflow-wrap: anywhere; }
.cf .cf-row-noemail { font-size: 13px; color: var(--bf-soft); }
.bf-page.cf .cf-status { margin: 0; padding: 7px 9px; font-size: 15px; }
.bf-page.cf a.cf-write { padding: 8px 12px; font-size: 14.5px; text-align: center; }
.bf-page.cf .cf-row-actions .cf-x { position: absolute; right: 0; top: 14px; width: 26px; height: 26px; font-size: 16px; }
.cf .cf-row { position: relative; }
.cf .cf-row-actions { padding-right: 34px; }
.cf .cf-copy-note { justify-self: start; font-size: 13.5px; }
.cf .cf-empty, .cf .bf-step-body .cf-empty { list-style: none; margin: 0; padding: 18px 0; color: var(--bf-soft); font-size: 15px; }
@media (max-width: 760px) {
  .cf .cf-row, .cf .bf-step-body .cf-row { grid-template-columns: 1fr; gap: 8px; }
  .cf .cf-row-main { padding-right: 34px; }
  .cf .cf-row-actions { padding-right: 0; grid-template-columns: 1fr 1fr; align-items: center; }
}
.cf .cf-add { display: grid; grid-template-columns: 1fr 210px auto; gap: 8px; margin-top: 12px; }
.bf-page.cf .cf-add .bf-input { margin: 0; }
@media (max-width: 620px) { .cf .cf-add { grid-template-columns: 1fr; } }

.cf .cf-grantlist { list-style: none; padding: 0 !important; margin: 6px 0 4px; border-top: 2px solid #16130f; }
.cf .cf-grantlist li, .cf .bf-step-body .cf-grantlist li {
  list-style: none; margin: 0; padding: 10px 0; border-bottom: 1px solid var(--bf-line); font-size: 15px; line-height: 1.55;
}
.cf .cf-grantlist .cf-row-facts, .cf .cf-grant-note { display: block; }
.cf .cf-grant-note { font-size: 14px; color: var(--bf-ink); }

/* the funder and people sheets need room: on a wide screen these two steps
   grow past the 800px column, and everything inside uses the full width */
@media (min-width: 1000px) {
  .cf #step-money.is-open, .cf #step-people.is-open {
    --cf-wide: min(1240px, calc(100vw - 64px));
    width: var(--cf-wide);
    margin-left: calc((100% - var(--cf-wide)) / 2);
  }
  .cf #step-money .cf-finder > p { max-width: none; }
}

/* the principal and PTA emails sit side by side when there's room */
.cf .cf-pair { display: grid; gap: 16px; }
.cf .cf-pair > .bf-template { margin: 0; }
@media (min-width: 1000px) { .cf #step-money .cf-pair { grid-template-columns: 1fr 1fr; align-items: start; } }

/* ------------------------------------------------------ step 5: senator */

.cf .cf-earmark-steps { list-style: none; padding: 0 !important; margin: 8px 0 16px; counter-reset: ear; }
.cf .cf-earmark-steps li, .cf .bf-step-body .cf-earmark-steps li {
  list-style: none; counter-increment: ear; position: relative; margin: 0; padding: 8px 0 8px 38px;
  font-size: 15.5px; line-height: 1.6; color: var(--bf-ink);
}
.cf .cf-earmark-steps li::before {
  content: counter(ear); position: absolute; left: 0; top: 9px; width: 26px; height: 26px;
  display: grid; place-items: center; border: 2px solid #16130f; background: #FDF3D8; font-weight: 700; font-size: 14px;
}
.cf .cf-senator-card { display: grid; gap: 4px; margin: 14px 0 6px; padding: 14px 0; border-top: 3px solid #16130f; border-bottom: 2px solid #16130f; }
.cf .cf-senator-card > span { display: block; }
.cf .cf-senator-name { font-family: var(--dl-font-display); font-size: 24px; font-weight: 700; color: #16130f; }
.cf .cf-senator-name span { display: inline; font-size: 16px; color: var(--bf-soft); font-weight: 500; }

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

.cf .cf-session { margin: 4px 0 18px; padding: 16px 0 22px; border-top: 3px solid #16130f; border-bottom: 2px solid #16130f; }
.cf .cf-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;
}
.cf .cf-session p { margin: 0 0 12px; font-size: 16px; line-height: 1.6; color: var(--bf-ink); }
.cf .cf-session ul { list-style: disc; padding-left: 22px; margin: 0 0 16px; }
.cf .cf-session li { list-style: disc; font-size: 16px; line-height: 1.6; color: var(--bf-ink); margin-bottom: 6px; }

.bf-page .bf-guess { background: #E6ECFF; box-shadow: 0 0 0 2px #E6ECFF; border-bottom: 2px dotted #16130f; }
.bf-page .bf-template > .bf-guess-note { margin: -4px 0 0; padding: 0 18px 14px; font-size: 13.5px; color: var(--bf-soft); }

/* ------------------------------------------------------ proposal extras */

.cf .cf-pdf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 6px 0 16px; }
.cf .cf-pdf-actions .cf-hint { margin: 0; }
.bf-page.cf label.cf-photo-btn { cursor: pointer; }
.cf .cf-photo-thumb { display: inline-flex; align-items: center; gap: 8px; }
.cf .cf-photo-thumb img { width: 64px; height: 44px; object-fit: cover; border: 2px solid #16130f; }
.cf .cf-research { margin: 18px 0 6px; }

/* ------------------------------------------------------ help box */

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

/* -------------------------------------------- the 1 -> 2 encouragement */

.cf-cheer {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  background: rgba(251, 246, 236, .72); cursor: pointer; animation: cf-fade .25s ease both;
}
.cf-cheer.is-leaving { animation: cf-fade .3s ease reverse both; }
.cf-cheer-card {
  position: relative; max-width: min(520px, calc(100vw - 32px)); padding: 30px 34px 26px; text-align: center;
  background: #fff; border: 3px solid #16130f; box-shadow: 8px 8px 0 #3ECFB0;
  animation: cf-pop .55s cubic-bezier(.2, 1.4, .4, 1) both;
}
.cf-cheer-big { margin: 0 0 6px; font-family: var(--dl-font-display, inherit); font-size: 30px; font-weight: 700; line-height: 1.15; color: #16130f; }
.cf-cheer-small { margin: 0; font-family: var(--dl-font-body, inherit); font-size: 18px; color: #55504a; }
.cf-cheer-bit {
  position: absolute; left: 50%; top: 50%; font-size: 30px; pointer-events: none;
  animation: cf-burst 1.4s cubic-bezier(.15, .8, .3, 1) both;
}
@keyframes cf-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cf-pop { from { opacity: 0; transform: scale(.6) rotate(-3deg); } to { opacity: 1; transform: none; } }
@keyframes cf-burst {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.15) rotate(20deg); }
}
@media (prefers-reduced-motion: reduce) {
  .cf-cheer, .cf-cheer-card { animation: none; }
  .cf-cheer-bit { display: none; }
}
.cf-cheer.is-leaving { pointer-events: none; }