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

   The step system, cards, templates and posters all come from
   bathroom-flow.css; this file re-tints them and adds the pieces that no
   other flow has: the two-lane comparison that runs the whole argument, the
   course-name field, cost chips, and the working-backwards calendar.

   Amber, because the other three flows have taken blue (bathroom), indigo
   (period) and teal (mental health), and because this is the one campaign
   whose subject is paper - catalogs, course proposals, a highlighter through
   a list of classes you can't take. */

:root {
  --bf-accent: hsl(22, 68%, 44%);
  --bf-accent-soft: hsl(22, 72%, 96%);
}

body.cf {
  background: linear-gradient(170deg, #FBF4EE 0%, #FAF6F1 46%, #F5F4F0 100%) fixed;
  background-color: #FAF5F0;
}

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

.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; }

.cf-checklist { list-style: disc; padding-left: 22px; margin: 6px 0 14px; }
.cf-checklist li {
  list-style: disc; font-size: 12.5pt; line-height: 1.6;
  color: var(--bf-soft); 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: 1px solid hsl(22, 40%, 86%); border-radius: var(--bf-radius);
  background: var(--bf-accent-soft);
}
.cf-course .bf-label { margin-bottom: 4px; }
.cf-course .bf-input { background: #fff; }
.cf-course-hint { font-size: 11.5pt; 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 shows them side by side
   before it shows a single email. */

.cf-lanes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 16px; margin: 4px 0 18px;
}
.cf-lane {
  border: 1px solid var(--bf-line); border-top: 4px solid var(--bf-soft);
  border-radius: var(--bf-radius); background: #fff; padding: 16px 18px 18px;
}
.cf-lane--ap { border-top-color: hsl(213, 52%, 44%); }
.cf-lane--de { border-top-color: hsl(154, 52%, 34%); }
.cf-lane h4 {
  font-family: var(--ff-league-spartan, inherit);
  font-size: 15pt; font-weight: 700; color: var(--bf-ink); margin: 0;
}
.cf-lane-kicker {
  display: block; font-size: 9.5pt; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; margin-top: 5px;
}
.cf-lane--ap .cf-lane-kicker { color: hsl(213, 52%, 44%); }
.cf-lane--de .cf-lane-kicker { color: hsl(154, 52%, 30%); }
.cf-lane dl {
  display: grid; grid-template-columns: auto 1fr; gap: 7px 14px;
  margin: 14px 0 0; font-size: 11.5pt;
}
.cf-lane dt {
  font-size: 9.5pt; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--bf-soft); padding-top: 3px;
}
.cf-lane dd { margin: 0; color: var(--bf-ink); line-height: 1.5; }
.cf-lane-verdict {
  margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--bf-line);
  font-size: 11.5pt; line-height: 1.5; color: var(--bf-ink);
}

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

.cf-chip {
  display: inline-block; font-size: 9pt; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  margin-right: 6px;
}
.cf-chip--free { background: hsl(154, 52%, 94%); color: hsl(154, 52%, 27%); }
.cf-chip--low { background: hsl(213, 56%, 95%); color: hsl(213, 52%, 40%); }
.cf-chip--high { background: hsl(22, 72%, 94%); color: hsl(22, 68%, 38%); }

/* -------------------------------------------------------- what it costs */

.cf-costs { margin: 10px 0 4px; padding: 0; list-style: none; }
.cf-costs li {
  display: grid; grid-template-columns: 112px 1fr; gap: 14px;
  padding: 9px 0; border-bottom: 1px solid var(--bf-line);
  font-size: 11.5pt; line-height: 1.5; color: var(--bf-ink);
}
.cf-costs li:last-child { border-bottom: none; }
.cf-costs .cf-costs-k { font-weight: 700; color: var(--bf-soft); font-size: 10.5pt; padding-top: 2px; }
@media (max-width: 560px) {
  .cf-costs li { grid-template-columns: 1fr; gap: 3px; }
}

/* -------------------------------------------------- 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: 12px 0 4px; border: 1px solid var(--bf-line); border-radius: var(--bf-radius); overflow: hidden; background: #fff; }
.cf-cal-row { display: grid; grid-template-columns: 148px 1fr; border-bottom: 1px solid var(--bf-line); }
.cf-cal-row:last-child { border-bottom: none; }
.cf-cal-when {
  padding: 12px 16px; background: hsl(30, 22%, 97%); color: var(--bf-soft);
  font-size: 10.5pt; font-weight: 700; border-right: 1px solid var(--bf-line);
}
.cf-cal-what { padding: 12px 16px; font-size: 11.5pt; line-height: 1.5; color: var(--bf-ink); }
.cf-cal-row.is-crux .cf-cal-when { background: var(--bf-accent-soft); color: var(--bf-accent); }
.cf-cal-row.is-crux .cf-cal-what { background: hsl(22, 72%, 98.5%); }
@media (max-width: 560px) {
  .cf-cal-row { grid-template-columns: 1fr; }
  .cf-cal-when { border-right: none; border-bottom: 1px solid var(--bf-line); }
}

/* ------------------------------------------------------- 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: 1px solid hsl(22, 40%, 86%); border-left: 4px solid var(--bf-accent);
  border-radius: 0 var(--bf-radius) var(--bf-radius) 0;
  background: #fff; padding: 16px 18px; margin: 4px 0 16px;
}
.cf-research h3 { font-size: 14pt; font-weight: 700; color: var(--bf-ink); margin: 0 0 8px; }
.cf-research p { font-size: 11.5pt; line-height: 1.6; color: var(--bf-soft); margin: 0 0 10px; }
.cf-research p:last-child { margin-bottom: 0; }

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

.cf-optional {
  margin-top: 18px; border: 1px solid var(--bf-line); border-radius: var(--bf-radius);
  background: #fff; padding: 0;
}
.cf-optional > summary {
  cursor: pointer; padding: 14px 18px; font-size: 12pt; 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: var(--bf-accent); }
.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: var(--bf-accent); background: var(--bf-accent-soft);
  padding: 2px 8px; border-radius: 999px; margin-right: 8px;
}
.cf-optional-body { padding: 0 18px 18px; }
.cf-optional-body p, .cf-optional-body li {
  font-size: 11.5pt; line-height: 1.6; color: var(--bf-soft);
}
.cf-optional-body ul { padding-left: 22px; margin: 6px 0 12px; }
.cf-optional-body li { list-style: disc; margin-bottom: 6px; }