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

   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 the
   pieces that no other flow has, in the same ink outlines: the two-lane
   comparison that runs the whole argument, the course-name field, cost chips,
   and the working-backwards calendar. */

.cf .bf-title { max-width: 17ch; margin-left: auto; margin-right: auto; }

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

/* The site's style.css sets `span { display: block }` globally, so any span
   this flow uses mid-sentence has to say otherwise or it takes its own line. */
.cf .cf-inline, .cf #bf-course-echo { display: inline; }

/* Any class rule with a `display` beats the browser's own `[hidden]`, so an
   element hidden from script stays on screen. `.bf-actions` is flex, which is
   how the step 3 continue button showed up before its question was answered. */
.cf [hidden] { display: none !important; }

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

/* ---------------------------------------------------- the course field
   What the student actually wants, in their words. Every template on the
   page reads it, so it sits directly under the four choices rather than in
   a step of its own. */

.cf-course {
  margin-top: 18px; padding: 16px 18px;
  border: 3px solid #16130f; border-radius: 0;
  background: #FDF3D8;
}
.cf-course .bf-label { margin-bottom: 4px; }
.cf-course .bf-input { background: #fff; }
.cf-course-hint { font-size: 14.5px; color: var(--bf-soft); margin: 8px 0 0; }

/* ------------------------------------------------------- the two lanes
   The one idea on the page that changes what a student does: an AP costs a
   teacher section and a year of district process, and a dual enrollment
   course costs a textbook line and a phone call to a college. They look
   identical from outside the building, so the page compares them row by row
   before it shows a single email.

   Everything inside a step is drawn with rules, not boxes: the step is
   already the card, and a card inside a card inside a card made the
   hierarchy harder to read, not easier. A heavy ink rule opens a block, thin
   rules divide its rows. */

.cf-tablewrap { overflow-x: auto; margin: 6px 0 22px; }
.cf-table { border-collapse: collapse; width: 100%; min-width: 480px; }
.cf-table th, .cf-table td {
  text-align: left; padding: 11px 14px 11px 0; border-bottom: 1px solid var(--bf-line);
  vertical-align: top; font-size: 15px; line-height: 1.5; color: var(--bf-ink);
}
.cf-table thead th {
  font-size: 15px; font-weight: 700; color: #16130f;
  border-top: 3px solid #16130f; border-bottom: 2px solid #16130f;
}
.cf-table tbody th {
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--bf-soft); width: 118px; white-space: nowrap;
}
.cf-table tbody tr:last-child th, .cf-table tbody tr:last-child td { border-bottom: 2px solid #16130f; }
/* on a phone the three columns fit the step instead of scrolling sideways:
   the row labels wrap and every cell tightens up */
@media (max-width: 560px) {
  .cf-table { min-width: 0; table-layout: fixed; }
  .cf-table th, .cf-table td { padding: 9px 8px 9px 0; font-size: 13.5px; overflow-wrap: anywhere; }
  .cf-table thead th { font-size: 13.5px; }
  .cf-table thead th:first-child, .cf-table tbody th { width: 76px; }
  .cf-table tbody th { white-space: normal; font-size: 10.5px; letter-spacing: 0.04em; }
  .cf-table th:last-child, .cf-table td:last-child { padding-right: 0; }
}

/* one lane on its own, for the paths where there is nothing to compare */
.cf-solo { border-top: 3px solid #16130f; padding: 14px 0 0; margin: 6px 0 22px; }
.cf-solo h3 { font-size: 20px; font-weight: 700; color: var(--bf-ink); margin: 0 0 10px; }
.cf-solo-kicker {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: #148d75; margin-bottom: 6px;
}
.cf-solo dl { display: grid; grid-template-columns: auto 1fr; margin: 0; font-size: 15px; }
.cf-solo dt, .cf-solo dd { padding: 9px 0; border-top: 1px solid var(--bf-line); }
.cf-solo dt {
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--bf-soft); padding-right: 18px; padding-top: 12px;
}
.cf-solo dd { margin: 0; color: var(--bf-ink); line-height: 1.5; }
.cf-solo-verdict {
  margin-top: 0; padding-top: 12px; border-top: 2px solid #16130f;
  font-size: 15px; line-height: 1.6; color: var(--bf-ink);
}

/* --------------------------------------------------- the coming-soon card
   A full curriculum overhaul is a real campaign with a different survey and
   a year of committee work behind it, and shipping half of it would send
   students into a fight they can't win alone. Until it exists, the honest
   answer is a person. */

.cf-soon {
  border: 3px solid #16130f; background: #FDF3D8; box-shadow: 5px 5px 0 #16130f;
  border-radius: 0; padding: 18px 20px; margin: 4px 0 14px;
}
.cf-soon-tag {
  display: inline-block; font-size: 9pt; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: #FBF6EC; background: #16130f;
  padding: 4px 10px; border-radius: 0; margin-bottom: 10px;
}
.cf-soon h3 { font-size: 20px; font-weight: 700; color: var(--bf-ink); margin: 0 0 8px; }
.cf-soon p { font-size: 15px; line-height: 1.6; color: var(--bf-soft); margin: 0 0 10px; }
.cf-soon p:last-of-type { margin-bottom: 14px; }

/* ---------------------------------------------------------- cost chips */

.cf-chip {
  display: inline-block; font-size: 9pt; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 3px 9px; border: 2px solid #16130f; border-radius: 0; white-space: nowrap;
  margin-right: 6px;
}
.cf-chip--free { background: #3ECFB0; color: #16130f; }
.cf-chip--low { background: #E6ECFF; color: #16130f; }
.cf-chip--high { background: #FDE7E0; color: #16130f; }

/* -------------------------------------------------------- what it costs
   One row per line item: the thing and its price tag on the left, what it
   means on the right, so the eye can run down the tags alone. */

.cf-costs { margin: 14px 0 16px; padding: 0; list-style: none; border-top: 3px solid #16130f; border-bottom: 2px solid #16130f; }
.cf-optional-body .cf-costs { padding-left: 0; }
.cf-optional-body .cf-costs li {
  display: grid; grid-template-columns: 170px 1fr; gap: 18px; margin: 0;
  padding: 12px 0; border-bottom: 1px solid var(--bf-line);
  list-style: none; font-size: 15px; line-height: 1.55; color: var(--bf-ink);
}
.cf-optional-body .cf-costs li:last-child { border-bottom: none; }
.cf-costs .cf-costs-k { display: grid; justify-items: start; align-content: start; gap: 6px; font-weight: 700; color: #16130f; font-size: 15px; line-height: 1.3; }
.cf-costs .cf-chip { margin-right: 0; }
@media (max-width: 560px) {
  .cf-optional-body .cf-costs li { grid-template-columns: 1fr; gap: 6px; }
  .cf-costs .cf-costs-k { grid-auto-flow: column; align-items: center; gap: 10px; }
}

/* -------------------------------------------------- the school calendar
   Course approval and the course actually running are two different wins
   about six months apart, and the second one is the one students lose. The
   decisive row is marked so it survives skimming. */

.cf-cal { margin: 14px 0 6px; border-top: 3px solid #16130f; border-bottom: 2px solid #16130f; }
.cf-cal-row { display: grid; grid-template-columns: 130px 1fr; gap: 18px; border-bottom: 1px solid var(--bf-line); }
.cf-cal-row:last-child { border-bottom: none; }
.cf-cal-when { padding: 11px 0; color: var(--bf-soft); font-size: 14px; font-weight: 700; }
.cf-cal-what { padding: 11px 0; font-size: 15px; line-height: 1.5; color: var(--bf-ink); }
.cf-cal-row.is-crux { background: #E4F6E9; box-shadow: -10px 0 0 #E4F6E9, 10px 0 0 #E4F6E9; }
.cf-cal-row.is-crux .cf-cal-when { color: #16130f; }
@media (max-width: 560px) {
  .cf-cal-row { grid-template-columns: 1fr; gap: 0; }
  .cf-cal-when { padding-bottom: 0; }
  .cf-cal-what { padding-top: 2px; }
}

/* ------------------------------------------------------- research card
   What the school already offers. Today this is a checklist the student
   fills in by hand from the course catalog; the seam is here for the
   catalog lookup to render into. */

.cf-research { border-top: 3px solid #16130f; padding: 16px 0 0; margin: 24px 0 18px; }
.cf-research h3 { font-size: 20px; font-weight: 700; color: var(--bf-ink); margin: 0 0 8px; }
.cf-research p { font-size: 16px; line-height: 1.65; color: var(--bf-ink); margin: 0 0 10px; }
.cf-research p:last-child { margin-bottom: 0; }

/* What /api/course-catalog found: one ruled row per question, the answer
   set apart from the reading list that's left over. */
.cf-found { margin: 14px 0 6px; border-top: 2px solid #16130f; border-bottom: 2px solid #16130f; }
.cf-finding { display: grid; grid-template-columns: 170px 1fr; column-gap: 18px; padding: 12px 0; }
.cf-finding + .cf-finding { border-top: 1px solid var(--bf-line); }
.cf-finding > * { grid-column: 2; }
.cf-research .cf-finding > p { margin: 0 0 8px; font-size: 15px; }
.cf-research .cf-finding > p:last-child, .cf-finding > details:last-child { margin-bottom: 0; }
.cf-research .cf-finding > .cf-finding-k { grid-column: 1; grid-row: 1 / span 9; font-weight: 700; color: #16130f; }
.cf-research .cf-match { padding: 8px 12px; background: #FDF3D8; }
.cf-research .cf-match.is-yes { background: #E4F6E9; }
.cf-courselist > summary { cursor: pointer; font-size: 14.5px; font-weight: 600; color: var(--bf-accent); }
.cf-research .cf-courselist p { font-size: 14px; line-height: 1.6; margin: 8px 0 0; }
.cf-research .cf-found-next { margin: 16px 0 0; font-weight: 600; color: #16130f; }
@media (max-width: 560px) {
  .cf-finding { grid-template-columns: 1fr; }
  .cf-finding > *, .cf-research .cf-finding > .cf-finding-k { grid-column: 1; grid-row: auto; }
}

/* ------------------------------------------------------ optional folds */

/* a fold is a ruled row, like the solution list in step 6, and opens flush */
.cf-optional { margin: 0; border-top: 2px solid #16130f; background: none; }
.cf-optional:last-of-type { border-bottom: 2px solid #16130f; }
.cf-optional + .cf-optional { border-top-width: 1px; border-top-color: var(--bf-line); }
.cf-optional > summary {
  cursor: pointer; padding: 14px 0; font-size: 16px; font-weight: 600;
  color: var(--bf-ink); list-style: none;
}
.cf-optional > summary::-webkit-details-marker { display: none; }
.cf-optional > summary::before { content: "\25B8\00a0"; color: #16130f; }
.cf-optional[open] > summary::before { content: "\25BE\00a0"; }
.cf-optional > summary:hover { color: var(--bf-accent); }
.cf-optional-tag {
  display: inline-block; font-size: 9pt; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: #16130f; background: #E4F6E9;
  padding: 2px 8px; border: 2px solid #16130f; border-radius: 0; margin-right: 8px;
}
.cf-optional-body { padding: 0 0 18px; }
.cf-optional-body p, .cf-optional-body li {
  font-size: 15px; line-height: 1.6; color: var(--bf-ink);
}
.cf-optional-body ul { padding-left: 22px; margin: 6px 0 12px; }
.cf-optional-body li { list-style: disc; margin-bottom: 6px; }