/* Deltas for the competitive-culture flow (/doorstops/competition).

   The step system, cards, templates and callouts come from bathroom-flow.css;
   this file re-tints them and adds the pieces this page has that the others
   don't: the 3D referent simulation, the editable referent list and asks, the
   open letter, the staffing readout, and the Doorstop Session ending.

   Plum. The other campaign flows are blues and teals; this one is about
   status, so it borrows the purple the original referents guide used for the
   word "social referents" and darkens it until it reads as ink rather than
   decoration. */

:root {
  --bf-accent: hsl(272, 44%, 36%);
  --bf-accent-soft: hsl(272, 48%, 96%);
  --cc-warm: hsl(22, 86%, 54%);
  --cc-warm-soft: hsl(24, 92%, 95%);
}

body.cc {
  background: linear-gradient(170deg, #F4F0FA 0%, #F7F5FB 48%, #F3F5FA 100%) fixed;
  background-color: #F5F2FA;
}

/* the shared sheet hard-codes the blue in a few focus rings and borders */
.cc .bf-step.is-open { border-color: hsl(272, 34%, 80%); }
.cc .bf-input:focus { box-shadow: 0 0 0 3px hsla(272, 44%, 36%, 0.16); }
.cc .bf-choice:hover { border-color: hsl(272, 34%, 74%); }
.cc .bf-unsure, .cc .bf-callout { border-color: hsl(272, 28%, 84%); }
.cc .bf-resume { border-color: hsl(272, 28%, 84%); }
.cc .bf-spinner { border-color: hsla(272, 44%, 36%, 0.25); border-top-color: var(--bf-accent); }

.cc .bf-title { max-width: 16ch; margin-left: auto; margin-right: auto; }
.cc-kicker {
  font-family: 'League Spartan', 'Poppins', sans-serif;
  font-size: 11pt;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bf-accent);
  margin: 0 0 10px;
}
.cc-hero-sub {
  max-width: 560px;
  margin: 0 auto 24px;
  font-size: 13.5pt;
  line-height: 1.55;
  color: var(--bf-soft);
  text-align: center;
}

#bf-school-status:empty { display: none; }

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

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

.cc-optional {
  margin-top: 22px;
  border: 1px dashed hsl(272, 24%, 78%);
  border-radius: 12px;
  background: #fff;
}
.cc-optional > summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  font-family: 'League Spartan', 'Poppins', sans-serif;
  font-size: 13.5pt;
  font-weight: 700;
  color: var(--bf-ink);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cc-optional > summary::-webkit-details-marker { display: none; }
.cc-optional > summary:hover { color: var(--bf-accent); }
.cc-optional-tag {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 99px;
  background: var(--bf-accent-soft);
  color: var(--bf-accent);
  font-size: 9.5pt;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.cc-optional-body { padding: 0 16px 16px; }
.cc-optional-body p { font-size: 12.5pt; line-height: 1.65; color: var(--bf-soft); margin: 0 0 10px; }
.cc-optional-body .bf-template { margin-bottom: 0; }

/* -------------------------------------------------------- the menu */

.cc .bf-step[hidden], .cc .bf-pip[hidden] { display: none; }
.cc-tracks .bf-choice { position: relative; }
.cc-tracks .bf-choice::after {
  content: '';
  position: absolute;
  top: 14px;
  right: 14px;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 2px solid var(--bf-line);
  background: #fff;
}
.cc-tracks .bf-choice[aria-pressed="true"]::after {
  border-color: var(--bf-accent);
  background: var(--bf-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.cc-tracks .bf-choice-title { padding-right: 28px; }
#bf-pick-go:disabled { opacity: 0.5; cursor: not-allowed; }

/* marks the tracks the step-2 answer says to start with */
.cc-start {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 99px;
  background: var(--bf-accent-soft);
  color: var(--bf-accent);
  font-size: 9.5pt;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  vertical-align: 2px;
}

/* one line at the top of a track saying how it fits the step-2 answer */
.cc .bf-step-body > p.cc-note {
  padding: 10px 14px;
  border-left: 4px solid var(--bf-accent);
  border-radius: 8px;
  background: var(--bf-accent-soft);
  color: var(--bf-ink);
  font-size: 12pt;
}
.cc .bf-step-body > p.cc-note[hidden] { display: none; }

/* ------------------------------------------------------ facts / cards */

.cc-kicker-sm {
  display: block;
  font-family: 'League Spartan', 'Poppins', sans-serif;
  font-size: 10.5pt;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bf-accent);
  margin: 0 0 8px;
}
.cc-evidence {
  margin: 18px 0;
  padding: 16px 18px 6px;
  border-radius: 12px;
  border: 1px solid hsl(272, 28%, 86%);
  background: hsl(272, 40%, 97.5%);
}
.cc-evidence .bf-muted { margin: 0 0 10px; }
/* on a phone the tinted wrapper is a third nested box around the cards, so
   it goes and the cards take its width */
@media (max-width: 640px) {
  .cc-evidence { padding: 0; border: 0; background: none; }
}
.cc .bf-step-body ul.cc-facts, .cc .bf-step-body ul.cc-kit { padding-left: 0; }
.cc-facts { list-style: none; padding: 0; margin: 4px 0 12px; display: grid; gap: 8px; }
.cc-facts li {
  list-style: none;
  margin: 0;
  padding: 11px 14px;
  border: 1px solid var(--bf-line);
  border-left: 4px solid var(--bf-accent);
  border-radius: 10px;
  background: #fff;
  font-size: 12pt;
  line-height: 1.55;
  color: var(--bf-soft);
}
.cc-facts--tight li { border-left-color: var(--cc-warm); }
.cc-facts strong { color: var(--bf-ink); }
.cc-facts a, .cc-src a { display: inline; color: var(--bf-accent); text-decoration: underline; }
.cc-src { display: block; margin-top: 4px; font-size: 10.5pt; color: var(--bf-soft); }

.cc-steps { list-style: decimal; padding-left: 22px; margin: 8px 0 14px; }
.cc-steps li { list-style: decimal; font-size: 12.5pt; line-height: 1.6; color: var(--bf-soft); margin-bottom: 8px; }
.cc-steps strong { color: var(--bf-ink); }

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

.cc-sim {
  margin: 18px 0 22px;
  border-radius: 16px;
  background: #17122A;
  color: #EDE7F8;
  overflow: hidden;
}
.cc-sim-head { padding: 20px 20px 6px; }
.cc-sim-kicker {
  display: block;
  font-family: 'League Spartan', 'Poppins', sans-serif;
  font-size: 10.5pt;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #C9A7FF;
  margin: 0 0 6px;
}
.cc-sim-head h3 {
  font-family: 'League Spartan', 'Poppins', sans-serif;
  font-size: 18pt;
  line-height: 1.2;
  color: #fff;
  margin: 0 0 8px;
}
.cc-sim-head p { margin: 0; font-size: 12pt; line-height: 1.6; color: #BDB2D6; }

.cc-sim-stage { position: relative; margin: 6px 0 0; }
#cc-canvas {
  display: block;
  width: 100%;
  height: 380px;
  cursor: grab;
  touch-action: pan-y;
}
#cc-canvas.is-dragging { cursor: grabbing; }
@media (max-width: 520px) { #cc-canvas { height: 320px; } }

.cc-sim-readout {
  position: absolute;
  left: 20px;
  bottom: 14px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  pointer-events: none;
}
.cc-sim-pct {
  font-family: 'League Spartan', 'Poppins', sans-serif;
  font-size: 30pt;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.cc-sim-label { font-size: 11pt; color: #BDB2D6; max-width: 16ch; line-height: 1.3; }

.cc-sim-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 10px 20px 6px;
}
.cc-sim-controls .bf-btn { background: #C9A7FF; color: #17122A; }
.cc-sim-controls .bf-btn:hover { background: #fff; filter: none; }
.cc-sim-controls .bf-btn--ghost { background: transparent; color: #EDE7F8; border-color: #6F5A9E; }
.cc-sim-controls .bf-btn--ghost:hover { background: hsla(0, 0%, 100%, 0.08); }
.cc-sim-controls .bf-btn[disabled] { opacity: 0.45; }
.cc-sim-reset { color: #BDB2D6; margin-left: auto; }

.cc-sim-compare { padding: 8px 20px 4px; display: grid; gap: 8px; }
.cc-sim-compare[hidden] { display: none; }
.cc-sim-bar { display: grid; grid-template-columns: 11em 1fr 3.5em; align-items: center; gap: 10px; font-size: 11pt; color: #BDB2D6; }
.cc-sim-bar-track { height: 10px; border-radius: 99px; background: hsla(0, 0%, 100%, 0.1); overflow: hidden; }
.cc-sim-bar-fill { display: block; height: 100%; width: 0; border-radius: 99px; background: #8E7BC0; transition: width 0.6s ease; }
.cc-sim-bar.is-ref .cc-sim-bar-fill { background: #C9A7FF; }
.cc-sim-bar-num { text-align: right; font-variant-numeric: tabular-nums; color: #fff; font-weight: 600; }
@media (max-width: 520px) { .cc-sim-bar { grid-template-columns: 7.5em 1fr 3.2em; font-size: 10pt; } }

.cc-sim-foot { margin: 0; padding: 8px 20px 18px; font-size: 10.5pt; line-height: 1.55; color: #8E82A8; }

/* --------------------------------------------- referents: the list */

.cc-refs { display: grid; gap: 8px; margin: 4px 0 4px; }
.cc-ref {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  align-items: center;
}
.cc-ref .bf-input { margin: 0; }
.cc-ref-x {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--bf-line);
  background: #fff;
  color: var(--bf-soft);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.cc-ref-x:hover { border-color: var(--bf-accent); color: var(--bf-accent); }
@media (max-width: 520px) {
  .cc-ref { grid-template-columns: 1fr auto; }
  .cc-ref .cc-ref-role { grid-column: 1 / -1; }
}

/* the ask */
.cc-asks { display: grid; gap: 8px; margin: 4px 0 6px; }
@media (min-width: 640px) { .cc-asks { grid-template-columns: 1fr 1fr; } }
.cc-ask {
  text-align: left;
  padding: 12px 14px;
  border: 1.5px solid var(--bf-line);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  display: grid;
  gap: 4px;
}
.cc-ask:hover { border-color: hsl(272, 34%, 74%); }
.cc-ask.is-active { border-color: var(--bf-accent); background: var(--bf-accent-soft); }
.cc-ask:focus-visible { outline: 2px solid var(--bf-accent); outline-offset: 2px; }
.cc-ask strong { font-family: 'League Spartan', 'Poppins', sans-serif; font-size: 13pt; color: var(--bf-ink); }
.cc-ask span { font-size: 11pt; line-height: 1.5; color: var(--bf-soft); }

/* one script per referent */
.cc-script-for {
  font-family: 'League Spartan', 'Poppins', sans-serif;
  font-size: 12pt;
  font-weight: 700;
  color: var(--bf-ink);
  margin: 16px 0 6px;
}
.cc-script-for:first-child { margin-top: 4px; }

/* ------------------------------------------------------ support kit */

.cc-kit { list-style: none; padding: 0; margin: 4px 0 12px; display: grid; gap: 10px; }
.cc-kit li {
  list-style: none;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--bf-line);
  border-radius: 11px;
  background: #fff;
  font-size: 12pt;
  line-height: 1.55;
  color: var(--bf-soft);
}
.cc-kit strong { color: var(--bf-ink); }
.cc-kit a { display: inline; color: var(--bf-accent); text-decoration: underline; }
.cc-who {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 99px;
  background: var(--bf-accent-soft);
  color: var(--bf-accent);
  font-size: 9.5pt;
  font-weight: 600;
  vertical-align: 1px;
}

/* ------------------------------------------------------- the letter */

.cc-letter {
  margin: 4px 0 18px;
  border-radius: 14px;
  border: 1px solid hsl(272, 28%, 84%);
  background: #fff;
  overflow: hidden;
}
.cc-letter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--bf-line);
  background: var(--bf-accent-soft);
}
.cc-letter-kicker {
  font-family: 'League Spartan', 'Poppins', sans-serif;
  font-size: 10.5pt;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bf-accent);
}
.cc-letter-body { padding: 20px 22px 8px; font-family: Georgia, 'Times New Roman', serif; }
.cc-letter-body p { margin: 0 0 14px; font-size: 13pt; line-height: 1.7; color: var(--bf-ink); }
.cc-letter-body ol { margin: 0 0 14px; padding-left: 26px; }
.cc-letter-body li { font-size: 13pt; line-height: 1.7; color: var(--bf-ink); margin-bottom: 6px; list-style: decimal; }
.cc-letter-body .bf-blank { font-family: inherit; }
.cc-letter-body .cc-letter-sig { font-style: italic; color: var(--bf-soft); }

/* ---------------------------------------------------- staff counts */

.cc-counts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin: 12px 0 6px;
}
.cc-counts .bf-field { margin: 0; }

.cc-ratios { margin: 14px 0 6px; }
.cc .bf-step-body .cc-ratios ul { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 8px; }
.cc-ratios li {
  list-style: none;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--bf-line);
  border-left-width: 4px;
  border-radius: 11px;
  background: #fff;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 14px;
  align-items: baseline;
}
.cc-ratios li.is-bad { border-left-color: hsl(4, 66%, 52%); }
.cc-ratios li.is-ok { border-left-color: hsl(152, 52%, 38%); }
.cc-ratio-role { font-family: 'League Spartan', 'Poppins', sans-serif; font-size: 12.5pt; font-weight: 700; color: var(--bf-ink); }
.cc-ratio-num {
  font-family: 'League Spartan', 'Poppins', sans-serif;
  font-size: 17pt;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: hsl(4, 66%, 46%);
  font-variant-numeric: tabular-nums;
}
.is-ok .cc-ratio-num { color: hsl(152, 52%, 32%); }
.cc-ratio-note { grid-column: 1 / -1; font-size: 11pt; line-height: 1.5; color: var(--bf-soft); }

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

.cc-session {
  margin: 4px 0 16px;
  padding: 22px 20px;
  border-radius: 16px;
  background: linear-gradient(150deg, #17122A 0%, #2E2352 100%);
  color: #EDE7F8;
}
.cc-session h3 {
  font-family: 'League Spartan', 'Poppins', sans-serif;
  font-size: 19pt;
  line-height: 1.2;
  color: #fff;
  margin: 0 0 10px;
}
.cc-session p { margin: 0 0 12px; font-size: 12.5pt; line-height: 1.6; color: #BDB2D6; }
.cc-session ul { list-style: disc; padding-left: 22px; margin: 0 0 16px; }
.cc-session li { list-style: disc; font-size: 12.5pt; line-height: 1.6; color: #BDB2D6; margin-bottom: 6px; }
.cc-session .bf-btn { background: #C9A7FF; color: #17122A; }
.cc-session .bf-btn:hover { background: #fff; }

/* under an email with no address: where to find it */
.cc-find { margin: 8px 0 0; font-size: 11pt; color: var(--bf-soft); }
.cc-find a { display: inline; color: var(--bf-accent); text-decoration: underline; }

.cc .bf-share-foot a { display: inline; }