/* Scorecard (/scorecard/). Questions on the white answer sheet; the result turns the sheet
   pink (scorecard.js adds .sheet--pink), because a scored evaluation is the evaluator's record. */

/* the answer sheet follows the title closely; the pink result gets a full sheet margin */
.sc-top {
  padding-bottom: var(--s7);
}
.sc-sheet:not(.sheet--pink) {
  padding-top: 0;
}
#scorecard {
  scroll-margin-top: var(--s4);
}

/* ---------- One question ---------- */
.sc-paper {
  display: grid;
  gap: var(--s7) var(--gap);
  align-items: start;
}
.sc-paper > * {
  min-width: 0;
}
@media (min-width: 1024px) {
  .sc-paper {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .sc-q {
    grid-column: 1 / span 8;
  }
  .sc-record {
    grid-column: 9 / span 4;
  }
}
.sc-count {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px var(--s4);
  padding-top: 8px;
  border-top: 2px solid var(--ink);
  font-size: var(--t-cap);
  font-weight: 600;
  font-stretch: 88%;
}
.sc-qline {
  display: grid;
  grid-template-columns: 2.1ch minmax(0, 1fr);
  gap: var(--s4);
  align-items: start;
  margin-top: var(--s5);
}
.sc-num {
  font-size: var(--t-h2);
  font-weight: 800;
  font-stretch: 62%;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.sc-q h2 {
  max-width: 28ch;
}
.sc-q h2:focus {
  outline: none;
}
.sc-choices {
  max-width: 46rem;
  margin-top: var(--s6);
}
/* an answer already given on this question: its box keeps its cross */
.sc-choices .choice[aria-pressed="true"] {
  --x: 100%;
}
.sc-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s5);
  max-width: 46rem;
  margin-top: var(--s5);
}
.sc-foot p {
  flex: 1 1 18rem;
}
@media (hover: none) {
  .sc-keys {
    display: none;
  }
}

/* ---------- The answer sheet beside it ---------- */
.sc-record .form-head .name {
  font-size: 1.25rem;
}
.sc-record .form-head .small {
  color: var(--ink-soft);
}
.sc-entries {
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--s4);
  margin-top: 2px;
}
.sc-entry {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.sc-qn {
  font-size: var(--t-cap);
  font-weight: 600;
  font-stretch: 88%;
}
.sc-slot {
  display: inline-block;
  min-width: 1.5em;
  min-height: 1.45em;
  border-bottom: 1.5px solid var(--ink);
  text-align: center;
}
.sc-slot--now .sc-qn {
  font-weight: 800;
}
.sc-slot--now .sc-slot {
  border-bottom-width: 4px;
}

.sc-noscript {
  max-width: 48rem;
}

/* ---------- The result, on pink ---------- */
.sc-result h2:focus {
  outline: none;
}
.sc-main {
  display: grid;
  gap: var(--s7);
}
.sc-reading {
  font-size: var(--ty-read);
  line-height: 1.1;
}
.sc-head-row .cell {
  display: flex;
  flex-direction: column;
}
.sc-head-row .cell > .typed {
  margin-top: auto;
}

/* scores by dimension */
.sc-dims thead th:nth-child(2) {
  width: 7rem;
}
.sc-dims thead th:nth-child(3) {
  width: 32%;
}
.sc-dims thead th:nth-child(4) {
  width: 8rem;
}
.sc-dims tbody th {
  font-size: var(--t-body);
  font-stretch: 88%;
}
.sc-bar-cell {
  vertical-align: middle;
}
/* a 1-to-4 scale: three intervals, ruled at 2 and 3 */
.sc-bar {
  position: relative;
  display: block;
  height: 16px;
  border: 1.5px solid var(--ink);
  background:
    linear-gradient(var(--ink), var(--ink)) calc(100% / 3) 0 / 1px 100% no-repeat,
    linear-gradient(var(--ink), var(--ink)) calc(200% / 3) 0 / 1px 100% no-repeat;
}
.sc-bar b {
  display: block;
  height: 100%;
  background: var(--fill);
}

/* drills to run first: rows of the scenario index; the reason stays visible on phones */
.sc-recs caption {
  padding-bottom: var(--s4);
}
.sc-recs thead th:nth-child(2) {
  width: auto;
}
.sc-recs thead th:nth-child(3) {
  width: 8.5rem;
}
.sc-why {
  font-size: var(--t-cap);
  font-weight: 600;
  font-stretch: 88%;
}
.sc-recs thead th:nth-child(6) {
  width: 11rem;
}
@media (min-width: 861px) {
  .sc-why {
    display: none;
  }
}
@media (max-width: 600px) {
  .sc-recs td:nth-child(6) {
    display: block;
  }
}

.sc-share {
  display: grid;
  gap: var(--s3);
}
.sc-share .cap {
  margin: 0;
}
.sc-share-acts .act {
  font-size: var(--t-small);
  min-height: 44px;
}
.sc-copied:empty {
  display: none;
}
.sc-copied {
  overflow-wrap: anywhere;
}

/* phones: the bar repeats the score, so the table drops to three columns */
@media (max-width: 620px) {
  .sc-dims thead th:nth-child(3),
  .sc-dims td:nth-child(3) {
    display: none;
  }
  .sc-dims thead th:nth-child(2) {
    width: 4.6rem;
  }
  .sc-scale {
    display: none;
  }
  .sc-dims thead th:nth-child(4) {
    width: 6.6rem;
  }
  .sc-dims th,
  .sc-dims td {
    padding-inline: 8px;
  }
  .sc-dims tbody th {
    font-size: var(--t-small);
  }
  .sc-dims td.score {
    font-size: 1.375rem;
  }
}
@media (max-width: 520px) {
  .sc-qline {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s2);
  }
  .sc-num {
    display: none;
  }
}