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

   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 state
   flavor-law card, the detector fact sheet and price table, the "don't hand
   it down" message, the quit resources, the multi-pick track menu and the
   Doorstop Session ending.

   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. */

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

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

/* Any class rule with a `display` beats the browser's own `[hidden]`, so an
   element hidden from script stays on screen. Step 5 is a multi-pick:
   unpicked tracks (their steps, pips and notes) aren't on the page at all. */
.vf [hidden] { display: none !important; }

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

.vf .vf-h4 {
  font-family: var(--dl-font-display);
  font-size: 19px; font-weight: 700; line-height: 1.25;
  color: #16130f; margin: 26px 0 10px;
}

/* ------------------------------------------------------ state law card
   Rendered by the script once a school is picked. The verdict is a chip in
   the zine tint for how far the state has got, not a coloured box. */

.vf .vf-law { border-top: 3px solid #16130f; border-bottom: 2px solid #16130f; padding: 14px 0 12px; margin: 6px 0 20px; }
.vf .vf-law-kicker {
  display: inline-block;
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #16130f; background: #E4F6E9;
  padding: 3px 9px; border: 2px solid #16130f; border-radius: 0;
  margin: 0 0 10px;
}
.vf .vf-law--partial .vf-law-kicker { background: #FDF3D8; }
.vf .vf-law--none .vf-law-kicker { background: #FDE7E0; }
.vf .vf-law h3 {
  font-family: var(--dl-font-display);
  font-size: 20px; font-weight: 700; line-height: 1.25;
  color: #16130f; margin: 0 0 8px;
}
.vf .vf-law p { margin: 0 0 8px; font-size: 15px; line-height: 1.6; color: var(--bf-ink); }
.vf .vf-law p:last-child { margin-bottom: 0; }
.vf .vf-law a { display: inline; color: var(--bf-accent); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* ------------------------------------------------- facts inside a play
   One ruled row per fact; the warning row is the one highlighted. */

/* the step body indents every list for its bullets; these are rows, not bullets */
.vf .bf-step-body ul.vf-facts, .vf .bf-step-body ul.vf-resources,
.vf .bf-solution-body ul.vf-resources { padding-left: 0; }
.vf .vf-facts {
  list-style: none; padding: 0; margin: 4px 0 16px;
  border-top: 3px solid #16130f; border-bottom: 2px solid #16130f;
}
.vf .vf-facts li {
  list-style: none; margin: 0;
  padding: 12px 0; border-bottom: 1px solid var(--bf-line);
  font-size: 15px; line-height: 1.6; color: var(--bf-ink);
}
.vf .vf-facts li:last-child { border-bottom: none; }
.vf .vf-facts li.is-warn { background: #FDF3D8; box-shadow: -10px 0 0 #FDF3D8, 10px 0 0 #FDF3D8; }
.vf .vf-facts strong { color: #16130f; }
.vf .vf-facts a, .vf .vf-src a { display: inline; color: var(--bf-accent); text-decoration: underline; }
.vf .bf-step-body .vf-src { font-size: 13.5px; line-height: 1.5; color: var(--bf-soft); margin: 0 0 16px; }

/* the price table in the detector play: its first row is the header */
.vf .vf-table-wrap { overflow-x: auto; margin: 4px 0 10px; }
.vf .vf-table { width: 100%; border-collapse: collapse; }
.vf .vf-table th, .vf .vf-table td {
  text-align: left; padding: 11px 14px 11px 0;
  border-bottom: 1px solid var(--bf-line);
  font-size: 15px; line-height: 1.5; color: var(--bf-ink); vertical-align: top;
}
.vf .vf-table th {
  font-weight: 700; color: #16130f;
  border-top: 3px solid #16130f; border-bottom: 2px solid #16130f;
}
.vf .vf-table td:first-child { color: #16130f; font-weight: 600; white-space: nowrap; }
.vf .vf-table tr:last-child td { border-bottom: 2px solid #16130f; }

/* ------------------------------------------- the "don't hand it down" message
   The one sentence the whole step hangs on: a heavy rule, the line itself at
   heading size, and the reasoning under it. */

/* no closing rule: the plays under it open with their own */
.vf .vf-message { margin: 10px 0 8px; padding: 16px 0 18px; border-top: 3px solid #16130f; }
.vf .vf-message-kicker {
  display: block;
  font-size: 12px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: #148d75; margin: 0 0 8px;
}
.vf .vf-message blockquote {
  margin: 0 0 12px;
  font-family: var(--dl-font-display);
  font-size: 22px; font-weight: 700; line-height: 1.3;
  color: #16130f;
}
.vf .vf-message p { margin: 0 0 14px; font-size: 16px; line-height: 1.65; color: var(--bf-ink); }
.vf .vf-message a { display: inline; color: var(--bf-accent); text-decoration: underline; }

/* -------------------------------------------- quit resources, used twice */

.vf .vf-resources {
  list-style: none; padding: 0; margin: 4px 0 16px;
  border-top: 3px solid #16130f; border-bottom: 2px solid #16130f;
}
.vf .vf-resources li {
  list-style: none; margin: 0;
  padding: 12px 0; border-bottom: 1px solid var(--bf-line);
  font-size: 15px; line-height: 1.6; color: var(--bf-ink);
}
.vf .vf-resources li:last-child { border-bottom: none; }
/* last thing in a fold: the fold's own closing rule does the job */
.vf .bf-solution-body > .vf-resources:last-child { border-bottom: 0; margin-bottom: 0; }
.vf .vf-resources strong { color: #16130f; }
.vf .vf-resources a { display: inline; color: var(--bf-accent); text-decoration: underline; }
.vf .vf-resources .vf-code {
  display: inline-block;
  margin: 0 0 4px 8px;
  padding: 1px 8px;
  border: 2px solid #16130f; border-radius: 0;
  background: #E6ECFF; color: #16130f;
  font-size: 13px; font-weight: 700; line-height: 1.5;
  vertical-align: 1px;
}

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

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

/* marks the play the step-2 answer says to start with */
.vf .vf-start {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 8px;
  border: 2px solid #16130f; border-radius: 0;
  background: #3ECFB0; color: #16130f;
  font-family: var(--dl-font-body);
  font-size: 12px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  vertical-align: 2px;
}

/* ------------------------------------------------- the step-5 track menu
   A multi-pick, so each choice carries a square checkbox in its corner. */

.vf .vf-tracks .bf-choice { position: relative; }
.vf .vf-tracks .bf-choice::after {
  content: '';
  position: absolute;
  top: 16px;
  right: 16px;
  width: 22px;
  height: 22px;
  border-radius: 0;
  border: 3px solid #16130f;
  background: #fff;
}
.vf .vf-tracks .bf-choice[aria-pressed="true"]::after {
  background: #3ECFB0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10.5l3.5 3.5 7.5-8' fill='none' stroke='%2316130f' stroke-width='3' stroke-linecap='square'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.vf .vf-tracks .bf-choice-title { padding-right: 30px; }
#bf-pick-go:disabled { opacity: 0.45; cursor: not-allowed; }

/* one line at the top of a track saying how it fits the step-2 answer */
.vf .bf-step-body > p.vf-note {
  padding: 10px 14px;
  background: #E4F6E9;
  color: var(--bf-ink);
  font-size: 15px; line-height: 1.6;
}

/* under an email with no address: where to find it */
.vf .bf-template .vf-find { margin: 0; padding: 0 18px 16px; font-size: 14px; color: var(--bf-soft); }
.vf .vf-find a { display: inline; color: var(--bf-accent); text-decoration: underline; }

/* on a phone the three columns fit if the names may wrap and the padding shrinks */
@media (max-width: 520px) {
  .vf .vf-table th, .vf .vf-table td { padding: 9px 10px 9px 0; font-size: 14px; }
  .vf .vf-table td:first-child { white-space: normal; }
  .vf .vf-message blockquote, .vf .vf-session h3 { font-size: 20px; }
}