/* Case-study pages: the evidence-trace panels, proof-obligation reveals and
   small interactive tools used by the series of worked investigations
   (see "Thinking in Public" and the case studies that follow its method).
   Loaded only on pages whose body uses a .cs-* class (see head_extras in
   build.py). Colours are neutral tints over the page background so the
   panels follow the light, dark and contrast themes without extra rules. */

.cs-trace {
  border: 1px solid rgba(128, 128, 128, .45);
  border-radius: 6px;
  padding: .6em 1em;
  margin: 1.2em 0;
  background: rgba(128, 128, 128, .07);
}
.cs-trace h4 { margin: 0 0 .4em 0; font-size: 1rem; }
.cs-trace dl {
  margin: 0;
  display: grid;
  grid-template-columns: 11em 1fr;
  gap: .25em 1em;
}
.cs-trace dt { font-weight: 600; }
.cs-trace dd { margin: 0; }
@media (max-width: 40em) {
  .cs-trace dl { grid-template-columns: 1fr; }
  .cs-trace dt { margin-top: .5em; }
}

.cs-po {
  border: 1px solid rgba(128, 128, 128, .45);
  border-radius: 6px;
  margin: .5em 0;
  padding: .3em .8em;
}
.cs-po summary { cursor: pointer; font-weight: 600; }
.cs-status { font-weight: 600; }

.cs-tool {
  border: 1px solid rgba(128, 128, 128, .45);
  border-radius: 6px;
  padding: .8em 1em;
  margin: 1.2em 0;
  background: rgba(128, 128, 128, .07);
}
.cs-tool label { display: block; margin: .6em 0 .1em 0; }
.cs-tool input[type=range] { width: 100%; max-width: 28em; }
.cs-tool table { border-collapse: collapse; margin-top: .8em; }
.cs-tool th, .cs-tool td {
  border: 1px solid rgba(128, 128, 128, .45);
  padding: .2em .7em;
  text-align: right;
}
.cs-tool th:first-child, .cs-tool td:first-child { text-align: left; }

.cs-steps { list-style: none; padding-left: 0; }
.cs-steps li { margin: .5em 0; }
.cs-steps textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 2.6em;
  margin-top: .2em;
  font: inherit;
}

/* A page that has been revised after a case study tested its claims:
   a note at the top, and a small tag on each revised passage. */
.cs-revision-note {
  border-left: 4px solid rgba(128, 128, 128, .6);
  padding: .4em 1em;
  margin: 1.2em 0;
  background: rgba(128, 128, 128, .07);
}
.cs-revision-note p { margin: .3em 0; }
.cs-revised {
  display: inline-block;
  font-size: .72em;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 0 .5em;
  margin-right: .3em;
  border: 1px solid rgba(128, 128, 128, .6);
  border-radius: 3px;
  vertical-align: .1em;
}

/* Earlier wording of a revised passage, kept collapsed beside it with the
   reason for the change. The current wording stays the clear reading. */
.cs-history {
  margin: .2em 0 1.1em 0;
  font-size: .9em;
  border: 1px dashed rgba(128, 128, 128, .55);
  border-radius: 4px;
  padding: .15em .7em;
}
.cs-history summary { cursor: pointer; opacity: .8; }
.cs-history-body { margin-top: .4em; }
.cs-history-body p { margin: .3em 0; }
.cs-history-label {
  font-weight: 600;
  font-size: .85em;
  text-transform: uppercase;
  letter-spacing: .03em;
  opacity: .75;
}
.cs-history blockquote {
  margin: .3em 0 .6em 0;
  padding-left: .8em;
  border-left: 3px solid rgba(128, 128, 128, .5);
  opacity: .9;
}