/* Programs: the home page section, its side tab, and the case study pages.
   Loaded after site.css. Uses the site's tokens only. */

/* Home page section chip and side tab */
#programs { --chip: #4f6e61; }
:root[data-theme="dark"] #programs { --chip: #9dbcab; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #programs { --chip: #9dbcab; } }
@media (min-width: 960px) {
  .tabs .tab-programs { --tab-bg: #5a786a; }
  :root[data-theme="light"] .tabs .tab-programs { --tab-bg: #507062; }
  :root[data-theme="dark"] .tabs .tab-programs { --tab-bg: #98b9a7; }
}
@media (min-width: 960px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tabs .tab-programs { --tab-bg: #98b9a7; }
}
#programs > h2 {
  justify-self: start;
  align-self: start;
  display: inline-block;
  padding: 0.4rem 0.6rem 0.36rem;
  border-radius: 4px;
  background: var(--chip);
  color: var(--paper);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  line-height: 1;
}
@media (min-width: 761px) { #programs > h2 { margin-top: 0.2rem; } }
:root[data-theme="dark"] #programs > h2 { color: #15191b; }
.show-markup #programs > h2 { background: var(--balloon); color: var(--redline); box-shadow: inset 0 0 0 1px var(--redline); }

/* Case page: the proprietary note under the title */
.case-note {
  margin: 1.1rem 0 0;
  padding: 0.7rem 0.9rem;
  border-left: 3px solid var(--green);
  background: color-mix(in srgb, var(--green) 7%, transparent);
  font: 400 0.92rem/1.5 var(--sans);
  color: var(--ink);
  max-width: 36rem;
}

/* Results: a row of figures */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1.5px solid var(--ink);
}
.stats li { padding: 0.9rem 1rem 1rem 0; border-bottom: 1px solid var(--rule); }
.stats b {
  display: block;
  font: 700 1.65rem/1.1 var(--sans);
  letter-spacing: -0.02em;
  color: var(--green);
}
.stats span { display: block; margin-top: 0.35rem; font: 400 0.88rem/1.4 var(--sans); color: var(--graphite); }

/* The sequence, drawn as a flow of stations */
.flow {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.6rem 1.3rem;
  margin: 0 0 0.25rem;
  padding: 0;
  list-style: none;
  counter-reset: station;
}
.flow li {
  position: relative;
  counter-increment: station;
  flex: 1 1 5.6rem;
  min-width: 5.6rem;
  padding: 0.6rem 0.75rem 0.65rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--sheet);
  font: 600 0.88rem/1.35 var(--sans);
  color: var(--ink);
}
.flow li::before {
  content: counter(station);
  display: block;
  margin-bottom: 0.25rem;
  font: 700 0.68rem/1 var(--sans);
  letter-spacing: 0.08em;
  color: var(--green);
}
.flow li small { display: block; margin-top: 0.2rem; font-weight: 400; font-size: 0.8rem; color: var(--graphite); }
.flow li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -1.1rem;
  width: 0.9rem;
  height: 0.9rem;
  margin-top: -0.45rem;
  background: var(--graphite);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6.5 18.5 12 13 17.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6.5 18.5 12 13 17.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.flow li.is-end { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.flow-cap { margin: 0.6rem 0 0; font: 400 0.85rem/1.4 var(--sans); color: var(--graphite); }
.flow-cap .fig-no { font-weight: 700; color: var(--ink); margin-right: 0.35rem; }
@media (max-width: 620px) {
  .flow { flex-direction: column; gap: 1.4rem; }
  .flow li { flex: none; }
  .flow li:not(:last-child)::after { top: auto; bottom: -1.2rem; right: auto; left: 1rem; margin-top: 0; transform: rotate(90deg); }
}

/* Controls table on case pages keeps the first column readable */
.case .ts td:first-child { width: 38%; }

/* Related links under a case */
.related { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.related li { padding: 0.75rem 0; border-bottom: 1px solid var(--rule); }
.related a { font-weight: 600; }
.related span { display: block; margin-top: 0.15rem; font-size: 0.9rem; color: var(--graphite); }

@media print {
  .flow li, .stats li { break-inside: avoid; }
}

/* Recommendations: home page section and quotes on program pages */
#recommendations { --chip: #446457; }
:root[data-theme="dark"] #recommendations { --chip: #a3c2b1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #recommendations { --chip: #a3c2b1; } }
@media (min-width: 960px) {
  .tabs .tab-recommendations { --tab-bg: #4a6a5c; }
  :root[data-theme="light"] .tabs .tab-recommendations { --tab-bg: #44645a; }
  :root[data-theme="dark"] .tabs .tab-recommendations { --tab-bg: #a3c2b1; }
}
@media (min-width: 960px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tabs .tab-recommendations { --tab-bg: #a3c2b1; }
}
#recommendations > h2 {
  justify-self: start; align-self: start; display: inline-block;
  padding: 0.4rem 0.6rem 0.36rem; border-radius: 4px;
  background: var(--chip); color: var(--paper);
  font-size: 0.68rem; letter-spacing: 0.05em; line-height: 1;
}
@media (min-width: 761px) { #recommendations > h2 { margin-top: 0.2rem; } }
:root[data-theme="dark"] #recommendations > h2 { color: #15191b; }
.show-markup #recommendations > h2 { background: var(--balloon); color: var(--redline); box-shadow: inset 0 0 0 1px var(--redline); }

.recs { margin: 0; padding: 0; list-style: none; border-top: 1.5px solid var(--ink); }
.recs > li { padding: 1.2rem 0 1.15rem; border-bottom: 1px solid var(--rule); }
.rec { margin: 0; }
.rec blockquote { margin: 0; padding: 0 0 0 1rem; border-left: 3px solid var(--green); }
.rec blockquote p { margin: 0; font-size: 1.08rem; line-height: 1.5; color: var(--ink); }
.rec figcaption { margin-top: 0.7rem; padding-left: 1rem; font: 400 0.88rem/1.45 var(--sans); color: var(--graphite); }
.rec figcaption b { display: block; font-weight: 700; color: var(--ink); }
.rec details { margin-top: 0.55rem; padding-left: 1rem; }
.rec summary { cursor: pointer; font: 600 0.85rem/1.4 var(--sans); color: var(--green); }
.rec summary:hover { text-decoration: underline; text-underline-offset: 0.18em; }
.rec details p { margin: 0.6rem 0 0; font-size: 0.95rem; line-height: 1.55; color: var(--ink); }
.recs-more { margin: 0.9rem 0 0; font: 400 0.9rem/1.4 var(--sans); color: var(--graphite); }
@media print { .recs > li { break-inside: avoid; } }