/* The report is typed. No font file is shipped: a system typewriter stack, no request. */
:root {
  --cd-mono: "Courier Prime", "Courier New", Courier, ui-monospace, Menlo, monospace;
}
#game {
  max-width: 640px;
  margin: 0 auto;
  padding: 20px 16px 40px;
}

/* Start and end */
.cd-start h1,
.cd-end h1 {
  font-size: 34px;
  line-height: 1.1;
  margin: 8px 0 12px;
}
.cd-start p,
.cd-end p {
  font-size: 17px;
  margin: 0 0 12px;
}
.cd-start .cd-sub {
  color: var(--color-content-secondary);
  font-size: 15px;
}
.cd-review {
  margin: 18px 0 0;
  display: grid;
  gap: 10px;
}
.cd-review-item {
  border: 1px solid var(--color-border-default);
  border-radius: 14px;
  background: var(--color-surface-panel);
  padding: 12px 16px;
  font-size: 15px;
}
.cd-review-item .cd-review-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-weight: 600;
  margin: 0 0 4px;
}
.cd-review-item p {
  margin: 0;
  font-size: 15px;
}
.cd-review-item .cd-review-note {
  color: var(--color-content-secondary);
  margin: 0 0 4px;
}

/* Play */
.cd-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 4px 0 14px;
  color: var(--color-content-muted);
  font-size: 14px;
}
.cd-kicker {
  margin: 0 0 4px;
  font-size: 14px;
  color: var(--color-content-muted);
}
.cd-title {
  margin: 0 0 14px;
  font-size: 28px;
  line-height: 1.15;
}
.cd-facts {
  font-size: 17px;
  line-height: 1.55;
  margin: 0;
}
.cd-sheet {
  background: var(--color-surface-base);
  border: 1px solid var(--color-border-default);
  box-shadow: 0 2px 8px rgba(60, 50, 30, 0.1);
  padding: 12px 16px 14px 22px;
  position: relative;
  font-family: var(--cd-mono);
  font-size: 17px;
  line-height: 1.5;
  font-weight: 700;
}
.cd-sheet::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: repeating-linear-gradient(var(--color-border-default) 0 6px, transparent 6px 12px);
}
/* The label on the right stays on one line; the file line wraps when the two do not fit,
   so a long title never pushes the label off the sheet. */
.cd-sheet-head > span {
  white-space: nowrap;
}
.cd-sheet-head > span:first-child {
  white-space: normal;
  min-width: 0;
}
.cd-sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--color-content-secondary);
  margin: 0 0 6px;
}
.cd-facts p {
  margin: 0;
}
/* The amended text is a typed manila slip, the folder's paper, taped over the old words:
   a piece of frosted tape at each end. Neither piece can be left behind by a line break.
   The first is placed against the start of the slip's first line, outside the text. The
   second stays in the text after the last word but takes up no width, so it always fits
   on that word's line. (Placed the first way, it lands in the wrong spot when the last
   line ends left of where the first began.) */
.cd-facts mark {
  position: relative;
  background: #f2e7cc;
  color: inherit;
  padding: 2px 6px;
  border-radius: 1px;
  box-shadow:
    0 0 0 1px #d6c69f,
    0 2px 5px rgba(60, 50, 30, 0.3);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.cd-facts mark::before,
.cd-facts mark::after {
  content: "";
  width: 26px;
  height: 13px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(150, 140, 110, 0.45);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
  transform: rotate(var(--cd-tape-r));
}
.cd-facts mark::before {
  --cd-tape-r: -9deg;
  position: absolute;
  left: -13px;
  top: -4px;
}
.cd-facts mark::after {
  --cd-tape-r: 7deg;
  display: inline-block;
  vertical-align: -4px;
  margin: 0 -20px 0 -6px;
}
/* A fresh twist: the slip drops onto the sheet and settles, then the two pieces of tape
   press it down, the first on the paper tick the twist sound plays at 0.88s. The slip
   moves by position: transforms do nothing on inline text, which is why the old drop
   never showed. */
.cd-facts.is-new mark {
  animation: cd-slip 520ms cubic-bezier(0.2, 0.7, 0.2, 1) 350ms both;
}
.cd-facts.is-new mark::before {
  animation: cd-tape 240ms cubic-bezier(0.2, 0.7, 0.2, 1) 880ms both;
}
.cd-facts.is-new mark::after {
  animation: cd-tape 240ms cubic-bezier(0.2, 0.7, 0.2, 1) 1000ms both;
}
@keyframes cd-slip {
  0% {
    top: -24px;
    opacity: 0;
    box-shadow:
      0 0 0 1px #d6c69f,
      0 14px 18px rgba(60, 50, 30, 0.3);
  }
  65% {
    top: 2px;
    opacity: 1;
  }
  85% {
    top: -1px;
  }
  100% {
    top: 0;
    box-shadow:
      0 0 0 1px #d6c69f,
      0 2px 5px rgba(60, 50, 30, 0.3);
  }
}
@keyframes cd-tape {
  from {
    opacity: 0;
    transform: rotate(var(--cd-tape-r)) scale(1.7);
  }
  to {
    opacity: 1;
    transform: rotate(var(--cd-tape-r)) scale(1);
  }
}
.cd-kicker-twist.is-new {
  display: inline-block;
  animation: cd-nudge 500ms cubic-bezier(0.2, 0.7, 0.2, 1) 200ms both;
}
@keyframes cd-nudge {
  from {
    opacity: 0;
    transform: translateX(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.cd-rule {
  border: 1px solid var(--color-border-default);
  border-radius: 14px;
  background: var(--color-surface-panel);
  padding: 12px 16px;
  margin: 0;
}
.cd-rule h2 {
  font-size: 17px;
  margin: 0 0 6px;
}
.cd-rule ol {
  margin: 0;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.5;
}
.cd-rule li.is-key {
  font-weight: 600;
  color: var(--color-action-warning-dark);
}
.cd-rule .cd-note {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--color-content-secondary);
}

.cd-prompt {
  font-size: 15px;
  color: var(--color-content-secondary);
  margin: 0 0 10px;
}

.cd-calls {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 0;
}
.cd-call {
  padding: 14px 10px;
  border-radius: 10px;
  border: 1px solid var(--color-border-default);
  background: var(--color-surface-base);
  box-shadow: 0 2px 8px rgba(60, 50, 30, 0.08);
  font: 600 16px var(--font-sans);
  color: var(--color-content-base);
  cursor: pointer;
  transition:
    background 150ms,
    transform 150ms;
}
.cd-call:hover:not(:disabled) {
  background: var(--color-surface-panel);
  transform: translateY(-1px);
}
.cd-call:disabled {
  cursor: default;
  box-shadow: none;
}
.cd-call.is-picked {
  border-color: var(--color-border-primary);
  background: var(--color-surface-primary-light);
  /* That surface stays light in the dark theme, so the text colour is fixed too. */
  color: var(--color-content-base-fixed);
}
/* The stamp face keeps one red in both themes: the error tokens flip to a pale tint in
   the dark theme, so these come from the kit's primitives, which do not. */
.cd-call[data-call="charge"] {
  background: rgb(var(--primitives-red-700));
  color: var(--color-content-invert-fixed);
  border: 3px double rgba(255, 255, 255, 0.75);
  box-shadow:
    0 0 0 1px rgb(var(--primitives-red-700)),
    0 3px 8px rgba(60, 50, 30, 0.25);
  text-transform: uppercase;
}
.cd-call[data-call="charge"]:hover:not(:disabled) {
  background: rgb(var(--primitives-red-600));
  transform: none;
}
.cd-call[data-call="charge"]:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 0 0 1px rgb(var(--primitives-red-700));
}
.cd-call[data-call="charge"]:disabled {
  opacity: 0.5;
}
.cd-call[data-call="charge"].is-picked {
  opacity: 1;
  background: rgb(var(--primitives-red-700));
}
/* Once the call is made, the buttons step back behind the verdict. */
.cd-calls.is-done .cd-call {
  opacity: 0.55;
  box-shadow: none;
  transform: none;
}
.cd-calls.is-done .cd-call.is-picked {
  opacity: 0.75;
}
.cd-call.is-miss {
  text-decoration: line-through;
  opacity: 0.7;
}
.cd-call.is-quiet {
  opacity: 0.5;
}

/* The rule, as a sentence. Phrases become buttons in the hole step. */
.cd-code-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--color-content-secondary);
  margin: 0 0 8px;
}
.cd-rule-kicker {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--color-content-secondary);
}
.cd-rule-kicker:empty {
  display: none;
}
.cd-rule-text,
.cd-req {
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
}
.cd-part {
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
button.cd-part.is-live {
  padding: 1px 4px;
}
/* The pen mark: a red underline drawn under every line the phrase wraps to, over a
   faint wash that ties the lines together. One mark, however many lines. */
.cd-part.is-hole {
  padding: 1px 2px 3px;
  border-radius: 2px;
  background-color: var(--color-surface-negative);
  background-image: linear-gradient(var(--color-action-error-base), var(--color-action-error-base));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  animation: cd-underline 320ms cubic-bezier(0.2, 0.7, 0.2, 1) 120ms both;
}
@keyframes cd-underline {
  from {
    background-size: 0 2px;
  }
  to {
    background-size: 100% 2px;
  }
}
/* A wrong tap: a pencil wave, grey and thin, so pen and pencil read apart. */
.cd-part.is-miss {
  padding: 1px 2px 3px;
  border-radius: 2px;
  background-color: rgba(90, 86, 78, 0.12);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--color-content-muted);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
button.cd-part.is-live {
  font: inherit;
  color: inherit;
  background: var(--color-surface-base);
  border: 1px solid var(--color-border-default);
  box-shadow: 0 1px 4px rgba(60, 50, 30, 0.08);
  cursor: pointer;
  text-align: left;
  transition: background 150ms;
}
button.cd-part.is-live:hover {
  background: var(--color-surface-primary-light);
  border-color: var(--color-border-primary);
}
.cd-part sup {
  font-size: 11px;
  color: var(--color-content-muted);
  margin-right: 3px;
  line-height: 0;
}

/* Defined terms */
.cd-rule-hint {
  font-weight: 400;
  color: var(--color-content-muted);
}
.cd-glue {
  white-space: nowrap;
}
.cd-term {
  display: inline;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-decoration: underline dotted var(--color-content-muted);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  border-radius: 3px;
}
.cd-term:hover {
  text-decoration-color: var(--color-content-focus);
  color: var(--color-content-focus);
}
.cd-book-page {
  background: var(--color-surface-base);
  border: 1px solid var(--color-border-default);
  border-top: 0;
  padding: 10px 14px 10px;
  font-size: 15px;
}
.cd-book-term {
  display: block;
  width: 100%;
  text-align: left;
  font: 400 14px/1.3 var(--font-sans);
  color: var(--color-content-base);
  background: none;
  border: 0;
  border-radius: 6px;
  padding: 7px 8px;
  min-height: 32px;
  cursor: pointer;
}
.cd-book-term:hover {
  background: var(--color-surface-panel);
}
.cd-book-term.is-here {
  background: var(--color-action-warning-light);
  font-weight: 600;
}
.cd-book-entry p {
  margin: 0 0 4px;
}
.cd-book-entry {
  padding: 4px 8px 6px;
}
.cd-book-note {
  font-size: 14px;
  color: var(--color-content-secondary);
}

@keyframes cd-type {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Stamp, case closed */
.cd-facts {
  position: relative;
}
.cd-mark {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  margin: -2px 0 0;
}
.cd-stamp {
  font-family: var(--font-sans);
  display: inline-block;
  margin: 2px 6px 0 0;
  transform: rotate(-6deg);
  transform-origin: right center;
  padding: 2px 10px;
  border: 2.5px solid var(--color-action-error-base);
  color: var(--color-action-error-base);
  border-radius: 6px;
  font: 700 15px var(--font-sans);
  text-transform: uppercase;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.92;
}
.cd-stamp.is-new {
  animation: cd-stamp 220ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
html[data-theme="dark"] .cd-stamp {
  mix-blend-mode: normal;
  opacity: 1;
}
@keyframes cd-stamp {
  from {
    opacity: 0;
    transform: rotate(-14deg) scale(1.3);
  }
  to {
    opacity: 0.92;
    transform: rotate(-6deg) scale(1);
  }
}
.cd-verdict {
  font-family: var(--font-sans);
  display: inline-block;
  margin: 0;
  padding: 3px 10px;
  border-radius: 999px;
  font: 600 13px var(--font-sans);
}
.cd-verdict.is-right {
  background: var(--color-surface-positive);
  color: var(--color-action-success-dark);
  border: 1px solid var(--color-border-positive);
}
.cd-verdict.is-wrong {
  background: var(--color-surface-negative);
  color: var(--color-negative-dark);
  border: 1px solid var(--color-border-negative);
}

/* The desk: one ordered stack on a phone, two columns from 700px. */
.cd-desk {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cd-file-col,
.cd-law-col {
  display: contents;
}
.cd-desk .cd-sheet {
  order: 1;
}
.cd-desk .cd-codebook {
  order: 2;
}
.cd-desk .cd-calls {
  order: 3;
  margin-top: 4px;
}
.cd-desk .cd-second {
  order: 4;
}
.cd-desk .cd-feedback {
  order: 5;
  margin: 0;
}
.cd-desk .cd-after {
  order: 6;
}
.cd-after .cd-actions {
  margin: 0;
}
/* Next reads as the panel's footer: the width of the column, a bigger face. */
.cd-btn-next {
  width: 100%;
  font-size: 18px;
  padding: 16px 22px;
  border-radius: 12px;
}
@media (max-width: 699px) {
  .cd-sheet {
    padding-left: 16px;
  }
  .cd-sheet::before {
    left: 6px;
    width: 1px;
  }
}
@media (max-width: 419px) {
  .cd-call[data-call="charge"],
  .cd-call[data-call="charge"]:hover:not(:disabled),
  .cd-call[data-call="charge"]:active:not(:disabled) {
    transform: none;
  }
}
@media (min-width: 700px) {
  #game {
    max-width: 1040px;
  }
  .cd-desk {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
  }
  .cd-file-col,
  .cd-law-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
  }
  .cd-desk .cd-sheet,
  .cd-desk .cd-codebook,
  .cd-desk .cd-calls,
  .cd-desk .cd-after,
  .cd-desk .cd-feedback {
    order: 0;
  }
  .cd-desk .cd-calls {
    margin-top: 4px;
  }
  .cd-rule-text,
  .cd-req {
    font-size: 17px;
    line-height: 1.6;
  }
  .cd-sheet {
    font-size: 17px;
  }
}
@media (min-width: 900px) {
  .cd-desk {
    grid-template-columns: 55fr 45fr;
    gap: 32px;
  }
  .cd-rule-text,
  .cd-req {
    font-size: 18px;
  }
  .cd-sheet {
    font-size: 18px;
  }
  .cd-title {
    font-size: 32px;
  }
}

.cd-rule.is-live {
  border-color: var(--color-border-primary);
  box-shadow: 0 0 0 3px var(--color-surface-primary-light);
}
.cd-rule.is-live .cd-rule-kicker {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-content-base);
}
button.cd-part.is-live {
  animation: cd-nudge-part 520ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(120ms + var(--i, 0) * 70ms);
}
@keyframes cd-nudge-part {
  0% {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(60, 50, 30, 0.08);
  }
  45% {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(60, 50, 30, 0.18);
    border-color: var(--color-border-primary);
  }
  100% {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(60, 50, 30, 0.08);
  }
}

/* Feedback */
.cd-actions {
  margin: 14px 0 0;
  display: flex;
  gap: 12px;
  align-items: center;
}
.cd-btn {
  font: 600 16px var(--font-sans);
  padding: 12px 22px;
  border-radius: 10px;
  border: 0;
  background: var(--color-button-primary-default);
  color: var(--color-content-invert);
  cursor: pointer;
}
.cd-btn:hover {
  background: var(--color-button-primary-hover);
}
.cd-feedback {
  margin: 16px 0 0;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--color-border-default);
  background: var(--color-surface-panel);
  font-size: 16px;
}
.cd-feedback.is-right {
  background: var(--color-surface-positive);
  border-color: var(--color-border-positive);
}
.cd-feedback.is-wrong {
  background: var(--color-surface-negative);
  border-color: var(--color-border-negative);
}
.cd-feedback p {
  margin: 0 0 6px;
}
.cd-feedback p:last-child {
  margin: 0;
}

@media (max-width: 420px) {
  .cd-calls {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cd-call,
  button.cd-part.is-live,
  .cd-term,
  .cd-book-term,
  .cd-stamp,
  .cd-part.is-hole {
    transition: none;
    animation: none;
  }
  .cd-facts.is-new mark,
  .cd-facts.is-new mark::before,
  .cd-facts.is-new mark::after,
  .cd-kicker-twist.is-new {
    animation: none;
  }
}

/* ===================== Night shift =====================
   The desk is the game's own lighting. Paper objects are pinned to the kit's primitives
   so they stay paper in either host theme; the desk, blotter and lamp are art. */
:root {
  --paper: rgb(var(--primitives-base-white));
  --paper-2: rgb(var(--primitives-linen-100));
  --paper-line: rgb(var(--primitives-linen-300));
  --ink: rgb(var(--primitives-gray-700));
  --ink-2: rgb(var(--primitives-gray-500));
  --cream: rgb(var(--primitives-linen-100));
  --cream-2: rgb(var(--primitives-linen-300));
  --red: rgb(var(--primitives-red-700));
  --red-soft: rgb(var(--primitives-red-50));
  --red-line: rgb(var(--primitives-red-200));
  --green: rgb(var(--primitives-green-700));
  --green-soft: rgb(var(--primitives-green-50));
  --green-line: rgb(var(--primitives-green-200));
  --amber: rgb(var(--primitives-amber-500));
  --amber-ink: rgb(var(--primitives-amber-800));
  --amber-soft: rgb(var(--primitives-amber-100));
  --amber-line: rgb(var(--primitives-amber-200));
  --blue: rgb(var(--primitives-blue-500));
  --blue-ink: rgb(var(--primitives-blue-700));
  --blue-soft: rgb(var(--primitives-blue-50));
  --blue-line: rgb(var(--primitives-blue-200));
  --blotter: #2d4036;
  --blotter-edge: #2f2217;
  /* The kit's menu buttons sit on the dark desk. */
  --gk-menu-ink: rgb(var(--primitives-linen-100));
  --gk-menu-line: rgba(255, 255, 255, 0.18);
}
html {
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.08) 0 2px, transparent 2px 9px), #2a1d14;
}
body {
  background: radial-gradient(
      760px 420px at 76% 0,
      rgba(255, 214, 140, 0.5),
      rgba(255, 214, 140, 0.1) 40%,
      transparent 100%
    )
    no-repeat;
  min-height: 100%;
}
#game {
  max-width: none;
  padding: 0 12px 28px;
}
.cd-scene-top {
  position: relative;
  height: 54px;
  max-width: 1040px;
  margin: 0 auto;
}
.cd-nameplate {
  position: absolute;
  left: 12px;
  top: 14px;
  background: #1f1a14;
  color: rgb(var(--primitives-amber-200));
  font: 600 11px var(--font-sans);
  text-transform: uppercase;
  padding: 5px 12px;
  border: 2px solid rgb(var(--primitives-amber-700));
  border-radius: 3px;
}
.cd-lamp {
  position: absolute;
  right: 24px;
  top: -12px;
  width: 130px;
  height: 50px;
  background: linear-gradient(#2c2c2c, #111);
  border-radius: 0 0 65px 65px / 0 0 34px 34px;
  box-shadow: 0 26px 50px rgba(255, 220, 150, 0.22);
}
.cd-lamp::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 96px;
  height: 10px;
  margin-left: -48px;
  background: #ffe9b0;
  border-radius: 50%;
  filter: blur(4px);
}
.cd-blotter {
  max-width: 640px;
  margin: 0 auto;
  background: var(--blotter);
  border: 5px solid var(--blotter-edge);
  border-radius: 4px;
  box-shadow:
    inset 0 0 40px rgba(0, 0, 0, 0.28),
    0 12px 30px rgba(0, 0, 0, 0.4);
  padding: 18px 14px 30px;
  color: var(--cream);
}
@media (min-width: 700px) {
  #game {
    max-width: none;
    padding: 0 24px 36px;
  }
  .cd-blotter {
    max-width: 1040px;
    padding: 24px 32px 36px;
  }
  .cd-nameplate {
    left: 24px;
  }
  .cd-lamp {
    right: 56px;
    width: 150px;
    height: 56px;
  }
}

/* Words on the blotter are cream. */
.cd-top,
.cd-kicker,
.cd-start .cd-sub,
.cd-end p {
  color: var(--cream-2);
}
.cd-title,
.cd-start h1,
.cd-start p,
.cd-end h1,
.cd-closed-line,
.cd-kicker-twist {
  color: var(--cream);
}
.cd-btn {
  color: rgb(var(--primitives-base-white));
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.35);
}

/* Paper objects stay paper. */
.cd-sheet {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper-line);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}
.cd-sheet::before {
  background: repeating-linear-gradient(var(--paper-line) 0 6px, transparent 6px 12px);
}
.cd-sheet-head,
.cd-code-head,
.cd-rule-kicker,
.cd-book-note,
.cd-review-note {
  color: var(--ink-2);
}
.cd-rule.is-live .cd-rule-kicker {
  color: var(--ink);
}
.cd-rule {
  background: var(--paper-2);
  color: var(--ink);
  border-color: var(--paper-line);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}
.cd-rule.is-live {
  border-color: var(--blue);
  box-shadow:
    0 0 0 3px var(--blue-line),
    0 10px 20px rgba(0, 0, 0, 0.4);
}
.cd-term {
  color: inherit;
  text-decoration-color: var(--ink-2);
}
.cd-term:hover {
  color: var(--blue-ink);
  text-decoration-color: var(--blue-ink);
}
button.cd-part.is-live {
  background: var(--blue-soft);
  color: var(--ink);
  border: 1.5px solid var(--blue);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
}
button.cd-part.is-live:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: rgb(var(--primitives-base-white));
}
button.cd-part.is-live:hover sup {
  color: rgba(255, 255, 255, 0.8);
}
@keyframes cd-nudge-part {
  0% {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(60, 50, 30, 0.08);
  }
  45% {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(60, 50, 30, 0.18);
    border-color: var(--blue);
  }
  100% {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(60, 50, 30, 0.08);
  }
}
.cd-part.is-hole {
  background-color: var(--red-soft);
  background-image: linear-gradient(var(--red), var(--red));
}
.cd-part.is-miss {
  text-decoration-color: rgb(var(--primitives-gray-500));
}
.cd-stamp,
html[data-theme="dark"] .cd-stamp {
  color: var(--red);
  border-color: var(--red);
  mix-blend-mode: multiply;
  opacity: 0.92;
}
.cd-book-page {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper-line);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}
.cd-book-term {
  color: var(--ink);
}
.cd-book-term:hover {
  background: var(--paper-2);
}
.cd-book-term.is-here {
  background: var(--amber-soft);
  color: var(--ink);
}
/* The second call is a cream face beside the red one: the nameplate's cream, ink
   lettering, a darker cream rule. Two stamp faces of equal weight, one inked, one not. */
.cd-call[data-call="cant"] {
  background: var(--cream);
  color: var(--ink);
  border: 1px solid rgb(var(--primitives-linen-400));
  box-shadow:
    inset 0 -2px 0 var(--cream-2),
    0 0 0 1px rgb(var(--primitives-linen-400)),
    0 6px 12px rgba(0, 0, 0, 0.4);
}
/* Hover brightens and nothing moves: a face that shifts under the cursor flickers at its
   edge. The press is the only movement. */
.cd-call[data-call="cant"]:hover:not(:disabled) {
  background: var(--paper);
  transform: none;
}
.cd-call[data-call="cant"]:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow:
    inset 0 -1px 0 var(--cream-2),
    0 0 0 1px rgb(var(--primitives-linen-400));
}
.cd-call.is-picked,
.cd-call[data-call="cant"].is-picked {
  background: var(--cream);
  color: var(--ink);
  border-color: rgb(var(--primitives-linen-400));
  box-shadow:
    0 0 0 3px var(--blue-line),
    0 6px 12px rgba(0, 0, 0, 0.4);
}
.cd-call[data-call="charge"] {
  box-shadow:
    0 0 0 1px rgb(var(--primitives-red-700)),
    0 6px 12px rgba(0, 0, 0, 0.4);
}
.cd-feedback {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper-line);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}
.cd-feedback.is-right {
  background: var(--green-soft);
  border-color: var(--green-line);
}
.cd-feedback.is-wrong {
  background: var(--red-soft);
  border-color: var(--red-line);
}
.cd-verdict.is-right {
  background: rgb(var(--primitives-green-100));
  color: var(--green);
  border-color: rgb(var(--primitives-green-300));
}
.cd-verdict.is-wrong {
  background: rgb(var(--primitives-red-100));
  color: var(--red);
  border-color: rgb(var(--primitives-red-300));
}
.cd-review-item {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper-line);
}

/* The intro: the docket and the tools on the blotter. */
.cd-start {
  position: relative;
}
.cd-start h1 {
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
}
.cd-docket {
  position: relative;
  height: 266px;
  margin: 22px 0 0;
}
.cd-folder {
  position: absolute;
  left: 50%;
  margin-left: -125px;
  width: 250px;
  height: 170px;
  background: #e8d6a8;
  border-radius: 4px;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.4);
}
.cd-folder:nth-child(1) {
  top: 30px;
  transform: rotate(3deg);
}
.cd-folder:nth-child(2) {
  top: 18px;
  transform: rotate(-2deg);
}
.cd-folder:nth-child(3) {
  top: 6px;
  transform: rotate(0.5deg);
}
.cd-tab {
  position: absolute;
  top: -18px;
  left: 20px;
  background: #e8d6a8;
  padding: 3px 12px;
  font: 600 11px var(--font-sans);
  text-transform: uppercase;
  border-radius: 5px 5px 0 0;
  color: #5a4a22;
}
.cd-folder-paper {
  position: absolute;
  inset: 14px 14px 10px;
  overflow: hidden;
  background: var(--paper);
  padding: 10px 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.cd-folder-paper span {
  display: block;
  font: 700 10px var(--cd-mono);
  color: var(--ink);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.cd-folder-paper i {
  display: block;
  height: 6px;
  margin: 0 0 7px;
  border-radius: 3px;
  background: rgb(var(--primitives-gray-300));
}
/* Typed lines fill the page; a ragged right edge, like paragraphs. */
.cd-folder-paper i:nth-child(3),
.cd-folder-paper i:nth-child(9) {
  width: 85%;
}
.cd-folder-paper i:nth-child(5),
.cd-folder-paper i:nth-child(12) {
  width: 60%;
}
.cd-folder-paper i:nth-child(7) {
  width: 92%;
}
.cd-folder-paper i:nth-child(10) {
  width: 72%;
}
.cd-tools {
  position: relative;
  height: 124px;
  margin: 26px 0 0;
}
.cd-tool-book {
  position: absolute;
  left: 0;
  bottom: 8px;
  width: 160px;
  height: 104px;
  background: linear-gradient(90deg, #202c3a 0 14px, #283747 14px);
  border-radius: 4px 8px 8px 4px;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.4);
  color: rgba(233, 226, 210, 0.6);
  font: 600 12px var(--font-sans);
  text-transform: uppercase;
  padding: 14px 8px 0 26px;
  box-sizing: border-box;
  line-height: 1.3;
}
.cd-tool-book small {
  display: block;
  font-weight: 400;
  opacity: 0.8;
  text-transform: none;
}
.cd-tool-stamp {
  position: absolute;
  left: calc(50% - 113px);
  bottom: 4px;
  width: 62px;
  height: 46px;
  background: linear-gradient(#7a2a1f, #5a1d15);
  border-radius: 8px 8px 4px 4px;
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.4);
}
.cd-tool-stamp::before {
  content: "";
  position: absolute;
  left: 20px;
  top: -22px;
  width: 22px;
  height: 26px;
  background: #2b1c14;
  border-radius: 10px 10px 2px 2px;
}
.cd-tool-pad {
  position: absolute;
  left: calc(50% - 37px);
  bottom: 8px;
  width: 74px;
  height: 30px;
  background: #1e1e1e;
  border-radius: 4px;
  box-shadow:
    inset 0 0 0 4px #333,
    0 6px 10px rgba(0, 0, 0, 0.35);
}
.cd-tool-pad::after {
  content: "";
  position: absolute;
  inset: 6px;
  background: #9b2a1e;
  border-radius: 2px;
}
.cd-tool-mug {
  position: absolute;
  left: 196px;
  bottom: 22px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #3a2412 0 40%, #e9e2d2 41% 100%);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.35);
}
.cd-tool-mug::after {
  content: "";
  position: absolute;
  right: -15px;
  top: 14px;
  width: 16px;
  height: 24px;
  border: 5px solid #e9e2d2;
  border-left: 0;
  border-radius: 0 9px 9px 0;
}
/* Centre stage: the title and the line of copy centred at the top, the folder centred
   beneath them with the stamp and pad at its right hand. */
@media (min-width: 700px) {
  .cd-start {
    display: block;
  }
  .cd-start h1 {
    text-align: center;
  }
  .cd-start h1 {
    font-size: 56px;
    margin: 14px 0 10px;
  }
  .cd-start p {
    max-width: 560px;
    margin: 0 auto;
    font-size: 19px;
    color: var(--cream-2);
  }
  .cd-start .cd-docket {
    position: relative;
    width: 340px;
    height: 290px;
    margin: 30px auto 0;
  }
  .cd-start .cd-folder {
    width: 340px;
    margin-left: -170px;
    height: 232px;
  }
  .cd-start .cd-tool-stamp {
    left: auto;
    right: -96px;
    bottom: 72px;
  }
  .cd-start .cd-tool-pad {
    left: auto;
    right: -102px;
    bottom: 24px;
  }
  .cd-start .cd-tools {
    margin-top: 0;
  }
}

/* ===================== One book =====================
   The rule page and the definitions share one paper surface with a binding at the
   left and a bookmark tab at the right. */
.cd-codebook {
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--paper-line);
  border-radius: 4px 12px 12px 4px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
  padding-left: 16px;
}
.cd-codebook.is-live {
  border-color: var(--blue);
  box-shadow:
    0 0 0 3px var(--blue-line),
    0 10px 20px rgba(0, 0, 0, 0.4);
}
.cd-binding {
  position: absolute;
  left: 0;
  top: -1px;
  bottom: -1px;
  width: 16px;
  background: linear-gradient(90deg, #243447, #2e4258);
  border-radius: 4px 0 0 4px;
}
.cd-binding::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 14px;
  bottom: 14px;
  border-left: 2px dashed rgba(255, 255, 255, 0.35);
}
.cd-book-tab {
  position: absolute;
  right: 0;
  top: 12px;
  background: var(--amber);
  color: rgb(var(--primitives-base-white));
  font: 600 12px var(--font-sans);
  padding: 5px 12px 5px 12px;
  border: 0;
  border-radius: 4px 0 0 4px;
  cursor: pointer;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}
@media (min-width: 700px) {
  .cd-book-tab {
    right: -7px;
  }
}
.cd-book-tab::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -6px;
  border: 3px solid transparent;
  border-top-color: rgb(var(--primitives-amber-800));
  border-right-color: rgb(var(--primitives-amber-800));
  border-right-width: 4px;
  border-top-width: 3px;
  width: 0;
  height: 0;
}
.cd-codebook.is-open .cd-book-tab {
  background: rgb(var(--primitives-amber-700));
}
.cd-codebook .cd-rule,
.cd-codebook.is-live .cd-rule {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 12px 16px 12px 14px;
}
.cd-codebook .cd-code-head {
  padding-right: 96px;
}
/* The section number never breaks from its sign, however long the statute's name. */
.cd-code-head span:last-child {
  white-space: nowrap;
}
.cd-codebook .cd-rule-kicker {
  margin: 8px 0 0;
}
.cd-codebook.is-live .cd-rule-kicker {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--paper-line);
  font: 600 15px/1.5 var(--font-sans);
  color: var(--blue-ink);
}
.cd-codebook .cd-book-page {
  background: transparent;
  border: 0;
  box-shadow: none;
  margin: 0;
  padding: 12px 16px 12px 14px;
}
.cd-codebook .cd-book-term:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* The report carries its own heading: the charge, who it is against, the file number. */
.cd-charge {
  margin: 2px 0 8px;
  font: 600 22px/1.2 var(--font-serif);
  color: var(--ink);
}
.cd-who {
  font-weight: 400;
  color: var(--ink);
}
/* Scale: the blotter sits close to the player; the wood is one tone, lit by the lamp. */
@media (min-width: 700px) {
  body {
    background-image: radial-gradient(
      1100px 560px at 80% 0,
      rgba(255, 214, 140, 0.5),
      rgba(255, 214, 140, 0.1) 40%,
      transparent 100%
    );
  }
}
#game {
  padding-bottom: 20px;
}
@media (min-width: 700px) {
  #game {
    padding-bottom: 24px;
  }
}
/* On a laptop the blotter stops short of the edges so the desk shows around it. */
@media (min-width: 1024px) {
  .cd-blotter,
  .cd-scene-top {
    max-width: min(1240px, max(78vw, 940px));
  }
}

/* ===================== The folder opens the game =====================
   The top folder of the docket is the start control. */
.cd-folder-top {
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}
.cd-folder-top:hover {
  transform: rotate(0.5deg) translateY(-4px);
  box-shadow: 0 18px 26px rgba(0, 0, 0, 0.45);
}
.cd-folder-top:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}
.cd-folder-top {
  box-shadow:
    0 0 0 1px rgba(255, 233, 176, 0.35),
    0 14px 24px rgba(0, 0, 0, 0.45);
}
.cd-folder-top .cd-folder-paper {
  bottom: 68px;
}
.cd-folder-open {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  display: block;
  text-align: center;
  font: 700 17px var(--font-sans);
  padding: 13px 12px;
  border-radius: 12px;
  background: var(--color-button-primary-default);
  color: rgb(var(--primitives-base-white));
  box-shadow:
    0 0 0 3px rgba(255, 233, 176, 0.45),
    0 8px 16px rgba(0, 0, 0, 0.4);
}
.cd-folder-top:hover .cd-folder-open {
  background: var(--color-button-primary-hover);
}
@media (prefers-reduced-motion: reduce) {
  .cd-folder-top {
    transition: none;
  }
}

/* ===================== The open book =====================
   Term rows; the open term's definition sits under it. */

/* ===================== A steady footprint =====================
   From 700px the book fills its column and reserves room for its definitions, so
   opening them does not move the desk. */

/* The one-line header on a phone: the progress does not wrap; the strikes label sits
   under its dots. */

/* ===================== A steady desk =====================
   The book's two pages share one grid cell, so turning to the definitions never
   changes the book's height. From 700px the blotter has a fixed floor, so the desk is
   the same size on the intro, during play and between cases; short screens sit
   centred on it. */
.cd-leaves {
  display: grid;
}
.cd-leaves > * {
  grid-area: 1 / 1;
  min-width: 0;
}
.cd-codebook:not(.is-open) .cd-page-defs,
.cd-codebook.is-open .cd-page-rule {
  visibility: hidden;
}
.cd-blotter {
  display: flex;
  flex-direction: column;
}
.cd-blotter > .cd-start,
.cd-blotter > .cd-closed {
  margin-top: auto;
  margin-bottom: auto;
}
/* On web the desk keeps one height that fits a laptop window with the lamp row: the intro,
   the screen between statutes, the results and nearly every call (measured 2026-10-21:
   calls reach 693px at 1334 wide and 770px at 1100). A verdict with a long explanation
   grows it downward, and the next file brings it back. */
@media (min-width: 700px) {
  .cd-blotter {
    min-height: 720px;
  }
}
/* When the game is the whole window (opened directly, or the mobile app), the desk fills
   the window's height below the menu bar and the lamp, so the page never runs past 100%.
   It keeps that one size from screen to screen unless a screen's content needs more.
   Embedded in the games page the iframe grows to fit the game, so there the fixed
   heights above apply and nothing is sized by the viewport (the rulebook's rule). */
.gk-window body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.gk-window #game {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
}
/* In a flex column, auto side margins stop an item stretching, so the lamp row and the
   desk take their full width back explicitly (their max-widths still apply). */
.gk-window .cd-scene-top {
  width: 100%;
}
.gk-window .cd-blotter {
  flex: 1 0 auto;
  width: 100%;
  box-sizing: border-box;
}
@media (min-width: 700px) {
  .gk-window .cd-blotter {
    min-height: 560px;
  }
}
/* A short window leaves a short desk, and the intro's props would sit on the folder:
   below 880px of window height the pad, pencil, mug and book step off the desk. */
@media (max-height: 879px) {
  .gk-window .cd-props,
  .gk-window .cd-tools {
    display: none;
  }
}

/* ===================== The wide desk =====================
   From 700px the intro fills the blotter from the top and the foot of the desk carries
   props: a legal pad, a pencil, the mug and the code book. From 1024px the desk takes
   composition B below. Phones show none. */
.cd-props,
.cd-prop-clip {
  display: none;
}
@media (min-width: 700px) {
  .cd-blotter > .cd-start {
    margin: 0;
    flex: 1;
    align-content: start;
  }
  .cd-start .cd-tools {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 260px;
    height: 124px;
    margin: 0;
  }
  .cd-start .cd-tool-book {
    left: auto;
    right: 0;
  }
  .cd-start .cd-tool-mug {
    left: 20px;
    bottom: 30px;
  }
  .cd-props {
    display: block;
  }
  .cd-props > span {
    position: absolute;
  }
  .cd-prop-pad {
    left: 10px;
    bottom: 0;
    width: 160px;
    height: 170px;
    background:
      repeating-linear-gradient(transparent 0 23px, rgba(70, 100, 170, 0.32) 23px 24px) 0 26px /
        100% 100% no-repeat,
      #e6d78b;
    border-radius: 3px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
    transform: rotate(-3deg);
    overflow: hidden;
  }
  .cd-prop-pad::before {
    content: "";
    position: absolute;
    left: 24px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(170, 60, 50, 0.55);
  }
  .cd-prop-pad::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 16px;
    background: #c6b268;
  }
  .cd-prop-pencil {
    left: 118px;
    bottom: 50px;
    width: 196px;
    height: 10px;
    border-radius: 5px;
    background: linear-gradient(90deg, #e8a9a0 0 16px, #cfcfcf 16px 22px, #dfae38 22px);
    transform: rotate(-24deg);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
  }
  .cd-prop-pencil::before,
  .cd-prop-pencil::after {
    content: "";
    position: absolute;
    top: 0;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
  }
  .cd-prop-pencil::before {
    right: -22px;
    border-left: 22px solid #e9d2a0;
  }
  .cd-prop-pencil::after {
    right: -22px;
    border-top-width: 1.5px;
    border-bottom-width: 1.5px;
    top: 3.5px;
    border-left: 8px solid #2b2b2b;
  }
  .cd-prop-note {
    display: none;
    width: 84px;
    height: 84px;
    background:
      repeating-linear-gradient(transparent 0 11px, rgba(60, 50, 30, 0.22) 11px 13px) 10px 30px /
        60px 40px no-repeat,
      #f2e27a;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.35);
  }
  .cd-prop-note.is-yellow {
    right: 262px;
    bottom: 26px;
    transform: rotate(5deg);
  }
  .cd-prop-note.is-pink {
    right: 330px;
    bottom: 74px;
    background-color: #efb8c4;
    transform: rotate(-7deg);
  }
}
/* From 1200px the type grows and the folder reaches 440px; the legal pad and pencil keep
   the lower left, the mug and the code book the lower right. Narrower laptops keep the
   tablet sizes, which fit. */
@media (min-width: 1200px) {
  .cd-start h1 {
    font-size: 72px;
    margin: 10px 0 12px;
  }
  .cd-start p {
    max-width: 640px;
    font-size: 20px;
  }
  .cd-start .cd-docket {
    width: 440px;
    height: 330px;
    margin-top: 28px;
  }
  .cd-start .cd-folder {
    width: 440px;
    margin-left: -220px;
    height: 300px;
  }
  .cd-start .cd-folder-top .cd-folder-paper {
    bottom: 78px;
  }
  .cd-start .cd-folder-open {
    font-size: 19px;
    padding: 15px 12px;
    left: 18px;
    right: 18px;
    bottom: 18px;
  }
  .cd-start .cd-tool-stamp {
    right: -114px;
    bottom: 52px;
  }
  .cd-start .cd-tool-pad {
    right: -214px;
    bottom: 56px;
  }
  .cd-start .cd-tools {
    position: static;
    width: auto;
    height: 0;
  }
  .cd-start .cd-tool-book {
    right: 40px;
    bottom: 12px;
    width: 190px;
    height: 124px;
    font-size: 13px;
    padding: 16px 10px 0 30px;
    background: linear-gradient(90deg, #202c3a 0 16px, #283747 16px);
    transform: rotate(-4deg);
  }
  .cd-start .cd-tool-mug {
    left: auto;
    right: 262px;
    bottom: 22px;
    width: 64px;
    height: 64px;
  }
  .cd-start .cd-tool-mug::after {
    right: -17px;
    top: 16px;
    width: 18px;
    height: 28px;
  }
  .cd-prop-pad {
    left: 44px;
    bottom: 14px;
    width: 184px;
    height: 214px;
    transform: rotate(-4deg);
  }
  .cd-prop-pencil {
    left: 160px;
    bottom: 34px;
    transform: rotate(-24deg);
  }
}

/* ===================== The results sheet =====================
   The run's result is a typed sheet on the docket with the score alone. */
.cd-cover {
  position: relative;
  font-size: 15px;
  padding: 14px 22px 16px 30px;
}
/* Scoped to the end screen so its general paragraph size does not shrink it. */
.cd-end .cd-score {
  margin: 6px 0 2px;
  font: 600 56px/1 var(--font-serif);
  color: var(--ink);
  /* Even digit widths, so the number does not jitter as it counts up. */
  font-variant-numeric: tabular-nums;
  transform-origin: left center;
}
/* Paper on the end screen keeps ink, whatever the blotter's text colour is. */
.cd-end .cd-cover p,
.cd-end .cd-review-item p {
  color: var(--ink);
}
.cd-end .cd-review-item .cd-review-note {
  color: var(--ink-2);
}
.cd-judge {
  position: absolute;
  right: 20px;
  top: 40px;
  transform: rotate(-8deg);
  padding: 5px 12px;
  border: 3px solid var(--red);
  color: var(--red);
  border-radius: 6px;
  font: 800 18px var(--font-sans);
  text-transform: uppercase;
  mix-blend-mode: multiply;
  opacity: 0.9;
  white-space: nowrap;
}
.cd-judge.is-good {
  border-color: var(--green);
  color: var(--green);
}
html[data-theme="dark"] .cd-judge {
  mix-blend-mode: normal;
}
.cd-review-title {
  margin: 0 0 2px;
  font: 600 13px var(--font-sans);
  color: var(--cream-2);
  text-transform: uppercase;
}
.cd-review-points {
  font: 700 12px var(--cd-mono);
  color: var(--red);
  white-space: nowrap;
}
@media (max-width: 480px) {
  .cd-judge {
    top: auto;
    bottom: 14px;
    right: 14px;
    font-size: 15px;
  }
  .cd-end .cd-score {
    font-size: 44px;
  }
}

/* ===================== After the call =====================
   The sheet carries the stamp and one typed word; the slip keeps its paper and tape
   and loses its shadow; the verdict and the reason live in the panel, with Next beneath them. */
.cd-facts.is-answered mark {
  box-shadow: 0 0 0 1px #d6c69f;
}

/* ===================== A struck stamp =====================
   When the call was wrong the stamp is crossed out in ink. */
.cd-stamp {
  position: relative;
}
.cd-stamp.is-wrong::before,
.cd-stamp.is-wrong::after {
  content: "";
  position: absolute;
  left: 18%;
  width: 64%;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  background: var(--ink);
  opacity: 0.85;
  border-radius: 2px;
  /* Two short strokes, steep enough to read as an X over the word. The stamp sits at
     -6deg, so the angles are offset to keep the X upright on the page. */
  transform: rotate(-29deg);
}
.cd-stamp.is-wrong::after {
  transform: rotate(41deg);
}

/* ===================== Case closed =====================
   The run's cases in a row: the closed ones stamped, the next one holding the button, the
   rest waiting. One line above says where the run stands. */
.cd-closed {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}
.cd-closed-line {
  margin: 0;
  font: 600 18px/1.4 var(--font-sans);
}
.cd-closed-row {
  display: grid;
  grid-template-columns: repeat(var(--cd-cases, 3), minmax(0, 230px));
  gap: 30px;
  justify-content: center;
  align-items: end;
  width: 100%;
  margin-top: 38px;
}
.cd-closed-row .cd-folder {
  position: relative;
  left: auto;
  top: auto;
  margin: 0;
  width: auto;
  height: 170px;
  transform: none;
  text-align: left;
}
.cd-closed-row .cd-folder-top .cd-folder-paper {
  bottom: 64px;
}
.cd-closed-row .cd-folder-open {
  left: 12px;
  right: 12px;
  bottom: 10px;
  font-size: 15px;
  padding: 11px 8px;
}
.cd-closed-row .cd-folder-top:hover {
  transform: translateY(-4px);
}
.cd-closed-row .is-waiting {
  opacity: 0.5;
  filter: saturate(0.7);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}
.cd-closed-stamp {
  position: absolute;
  right: 18px;
  bottom: 22px;
  transform: rotate(-10deg);
  padding: 2px 10px;
  border: 3px solid var(--red);
  color: var(--red);
  border-radius: 6px;
  font: 800 16px var(--font-sans);
  text-transform: uppercase;
  opacity: 0.9;
}
/* The stamp on the case just closed lands as the screen opens. */
.cd-closed-row .is-now .cd-closed-stamp {
  animation: cd-closed-stamp 240ms cubic-bezier(0.2, 0.7, 0.2, 1) 120ms both;
}
@keyframes cd-closed-stamp {
  from {
    opacity: 0;
    transform: rotate(-18deg) scale(1.4);
  }
  to {
    opacity: 0.9;
    transform: rotate(-10deg) scale(1);
  }
}
.cd-closed-actions {
  width: 100%;
  max-width: 420px;
  margin-top: 30px;
}
@media (prefers-reduced-motion: reduce) {
  .cd-closed-row .is-now .cd-closed-stamp {
    animation: none;
  }
}
@media (max-width: 699px) {
  .cd-closed-row {
    grid-template-columns: minmax(0, 300px);
    gap: 26px;
    margin-top: 26px;
  }
  .cd-closed-row .cd-folder {
    height: 120px;
  }
  .cd-closed-row .cd-folder-paper {
    inset: 12px 12px 8px;
  }
  .cd-closed-row .cd-folder-top .cd-folder-paper {
    bottom: 62px;
  }
  .cd-closed-stamp {
    bottom: 16px;
  }
}

/* The term the verdict names flashes amber once. */
.cd-term.is-cited {
  animation: cd-cite 1.4s ease-out 700ms both;
}
@keyframes cd-cite {
  0% {
    background: transparent;
  }
  25% {
    background: var(--amber);
    color: rgb(var(--primitives-base-white));
  }
  100% {
    background: transparent;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cd-term.is-cited {
    animation: none;
  }
}

/* ===================== Files and statutes =====================
   The header reads "File 2 of 3 · Twist"; the review groups its items under the statute. */
.cd-track {
  display: inline-flex;
  gap: 12px;
  align-items: flex-end;
}
.cd-track-group {
  display: inline-flex;
  gap: 3px;
  align-items: flex-end;
}
.cd-track-mark {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 2px;
  border: 1.5px solid var(--cream-2);
  opacity: 0.6;
}
.cd-track-mark.is-now {
  background: var(--cream);
  border-color: var(--cream);
  opacity: 1;
}
.cd-track-mark.is-right {
  background: rgb(var(--primitives-green-500));
  border-color: rgb(var(--primitives-green-500));
  opacity: 1;
}
.cd-track-mark.is-wrong {
  background: rgb(var(--primitives-red-500));
  border-color: rgb(var(--primitives-red-500));
  opacity: 1;
}
@media (max-width: 479px) {
  .cd-track {
    gap: 8px;
  }
  .cd-track-group {
    gap: 2px;
  }
  .cd-track-mark {
    width: 9px;
    height: 9px;
  }
}
.cd-review-group {
  display: grid;
  gap: 10px;
}
.cd-review-statute {
  margin: 6px 0 0;
  font: 600 15px var(--font-serif);
  color: var(--cream);
}

/* ===================== The end screen and its review =====================
   The cover sheet and stacks sit in one short column. The review is its own view: every
   call of the run, one column per statute, each a compact row that opens on a tap. */
.cd-end {
  width: 100%;
}
.cd-blotter > .cd-end:not(.cd-end-review) {
  margin-top: auto;
  margin-bottom: auto;
}
.cd-end-summary {
  max-width: 620px;
  margin: 0 auto;
}
.cd-end-summary .cd-actions {
  flex-wrap: wrap;
  justify-content: center;
}
.cd-btn-quiet {
  background: rgba(0, 0, 0, 0.18);
  color: var(--cream);
  border: 2px solid var(--cream-2);
  box-shadow: none;
}
.cd-btn-quiet:hover {
  background: rgba(0, 0, 0, 0.3);
  border-color: var(--cream);
}
.cd-review-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 16px;
}
.cd-review-top .cd-actions {
  margin: 0;
  flex-wrap: wrap;
}
.cd-end-review .cd-review {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  align-items: start;
  margin: 0;
}
.cd-review-group {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.cd-review-statute {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 2px;
  font: 600 16px var(--font-serif);
  color: var(--cream);
}
.cd-review-statute small {
  font: 500 13px var(--font-sans);
  color: var(--cream-2);
}
.cd-end details.cd-review-item {
  padding: 0;
  border-radius: 8px;
}
.cd-review-row {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 10px;
  align-items: center;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--ink);
}
.cd-review-row::-webkit-details-marker {
  display: none;
}
.cd-review-row::after {
  content: "";
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--ink-2);
  border-bottom: 2px solid var(--ink-2);
  transform: rotate(45deg);
  margin: -4px 2px 0 0;
}
details[open] > .cd-review-row::after {
  transform: rotate(-135deg);
  margin-top: 4px;
}
.cd-review-row:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 8px;
}
.cd-review-file {
  grid-column: 1;
  font-weight: 600;
}
.cd-review-outcome {
  grid-column: 1;
  font: 600 11px var(--font-sans);
  text-transform: uppercase;
}
.is-right .cd-review-outcome {
  color: var(--green);
}
.is-wrong .cd-review-outcome {
  color: var(--red);
}
.cd-review-body {
  margin: 0 12px;
  padding: 8px 0 10px;
  border-top: 1px dashed var(--paper-line);
  font-size: 14px;
  line-height: 1.5;
}
.cd-review-body p {
  margin: 0 0 4px;
}
.cd-review,
.cd-end-summary {
  min-width: 0;
}

/* ===================== The definitions section =====================
   Lettered paragraphs; the lit one is the term in question. */
.cd-book-def {
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  border-radius: 4px;
}
.cd-book-def b {
  font-family: var(--font-serif);
  font-size: 17px;
}
.cd-book-num {
  color: var(--ink-2);
  margin-right: 6px;
}
.cd-book-def.is-here {
  background: var(--amber-soft);
  padding: 2px 6px;
  margin-left: -6px;
  margin-right: -6px;
}
.cd-book-def:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

/* ===================== The beat =====================
   On the first render of a verdict the stamp lands alone. Four tenths of a second later
   the strokes cross a wrong stamp, then the panel and Next rise in. Later renders of the
   same step (a lookup, the book) show everything at once. */
/* Each stroke is drawn end to end by a clip, so it keeps its centre on the stamp. */
.cd-stamp.is-wrong.is-new::before,
.cd-stamp.is-wrong.is-new::after {
  animation: cd-stroke 140ms ease-out 400ms both;
}
.cd-stamp.is-wrong.is-new::after {
  animation-delay: 520ms;
}
@keyframes cd-stroke {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
.cd-feedback.is-fresh {
  animation: cd-rise 300ms ease-out 460ms both;
}
.cd-after.is-fresh {
  animation: cd-rise 300ms ease-out 560ms both;
}
@keyframes cd-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cd-stamp.is-wrong.is-new::before,
  .cd-stamp.is-wrong.is-new::after,
  .cd-feedback.is-fresh,
  .cd-after.is-fresh {
    animation: none;
  }
}

/* ===================== Requirement (b) =====================
   A second rule under the first: something a charge needs. It can block a charge and
   never start one. */
.cd-sub {
  color: var(--ink-2);
  margin-right: 6px;
}
/* Same size, line height and weight as (a): its size comes from the .cd-rule-text rules. */
.cd-codebook .cd-req {
  display: flex;
  /* Top, not baseline: a wrapped button's baseline is its last line. */
  align-items: flex-start;
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--paper-line);
  color: var(--ink);
}
/* The text sits beside its letter and wraps under itself, a hanging indent. */
.cd-req-body {
  flex: 1;
  min-width: 0;
}
/* (a) and (b) set the same way: the letter in its own column, the text wrapping under
   itself. */
.cd-rule-text.has-sub {
  display: flex;
  align-items: flex-start;
}
.cd-rule-body {
  flex: 1;
  min-width: 0;
}
.cd-rule-text.has-sub .cd-sub,
.cd-req .cd-sub {
  flex: none;
  width: 1.6em;
  margin-right: 6px;
}
/* In the part-tap step (b) is a button with a border; drop its letter to the button's
   first line. */
.cd-codebook.is-live .cd-req .cd-sub {
  padding-top: 2px;
}
.cd-req .kw {
  font-weight: inherit;
}

/* ===================== The sufficient-fact step =====================
   Larceny and burglary: after "Can't charge", which added fact would let you charge. The
   facts are cream cards like the second call; None is the outlined face. */
/* Tight enough that the step fits the desk's fixed height. */
.cd-second {
  margin: 8px 0 0;
}
.cd-second-q {
  margin: 0 0 6px;
  font: 600 15px var(--font-sans);
  color: var(--cream);
}
.cd-picks {
  display: grid;
  gap: 6px;
}
.cd-pick {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgb(var(--primitives-linen-400));
  background: var(--cream);
  color: var(--ink);
  font: 500 14px/1.35 var(--font-sans);
  cursor: pointer;
  box-shadow:
    inset 0 -2px 0 var(--cream-2),
    0 4px 10px rgba(0, 0, 0, 0.3);
  transition: background 150ms;
  /* A short slide in, movement only: the cards are never hidden while it runs. */
  animation: cd-pick-in 260ms ease-out both;
  animation-delay: calc(40ms + var(--i, 0) * 50ms);
}
@keyframes cd-pick-in {
  from {
    transform: translateY(6px);
  }
  to {
    transform: none;
  }
}
.cd-pick:hover {
  background: var(--paper);
}
.cd-pick:active {
  transform: translateY(2px);
}
.cd-pick:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}
.cd-pick-num {
  flex: none;
  font: 600 12px/1.6 var(--font-sans);
  color: var(--ink-2);
}
.cd-pick.is-none {
  background: rgba(0, 0, 0, 0.18);
  color: var(--cream);
  border: 2px solid var(--cream-2);
  box-shadow: none;
  font-weight: 600;
}
.cd-pick.is-none .cd-pick-num {
  color: var(--cream-2);
}
.cd-pick.is-none:hover {
  background: rgba(0, 0, 0, 0.3);
  border-color: var(--cream);
}
@media (prefers-reduced-motion: reduce) {
  .cd-pick {
    animation: none;
  }
}
/* ===================== Scoring =====================
   Header A (lives, streak, score) and the points that float up into the score. */
/* The header: the run on the left ("Case 2 of 3" over the track), and on the right a
   scoreboard of three cells that never move or disappear, each a small label over its
   value: Lives, Streak, Score. */
.cd-top {
  align-items: flex-end;
}
.cd-hlabel {
  display: block;
  font: 600 10.5px var(--font-sans);
  text-transform: uppercase;
  color: var(--cream-2);
  opacity: 0.85;
  margin: 0 0 5px;
  white-space: nowrap;
}
.cd-hlabel.is-warn {
  color: rgb(var(--primitives-red-400, 248 113 113));
  opacity: 1;
}
/* Every cell is as tall as the tallest: its label sits on one line across the top, its value
   on one line along the bottom. */
.cd-board {
  display: flex;
  align-items: stretch;
}
.cd-cell {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0 16px;
  border-left: 1px solid rgba(239, 230, 210, 0.2);
  min-width: 74px;
}
.cd-cell:first-child {
  border-left: 0;
  padding-left: 0;
}
.cd-cell:last-child {
  padding-right: 0;
  min-width: 96px;
  align-items: flex-end;
  text-align: right;
}
/* The streak's number and its +100 share one baseline. */
.cd-hvalue {
  display: inline-flex;
  align-items: baseline;
}
/* The streak and the score are set the same size. */
.cd-hnum {
  font: 700 26px/1 var(--cd-mono);
  color: var(--cream);
  font-variant-numeric: tabular-nums;
}
.cd-hnum.is-quiet {
  color: var(--cream-2);
  opacity: 0.7;
}
.cd-hnum.is-hot {
  color: #f6d27a;
}
.cd-hbonus {
  font: 600 11px var(--font-sans);
  color: #f6d27a;
  margin-left: 6px;
}
.cd-scoreline b {
  display: inline-block;
  font-size: 26px;
}
.cd-scoreline.is-bump b {
  animation: cd-bump 260ms ease-out;
}
@keyframes cd-bump {
  40% {
    transform: scale(1.18);
    color: #f6d27a;
  }
}
/* Lives: three gavels; a lost one is an outline. On the last life the one left is red. */
.cd-lives {
  display: inline-flex;
  gap: 4px;
  line-height: 0;
}
.cd-gavel {
  display: inline-block;
  width: 20px;
  height: 20px;
  color: var(--cream);
  background-color: currentColor;
  -webkit-mask: url("icons/gavel.svg") center / contain no-repeat;
  mask: url("icons/gavel.svg") center / contain no-repeat;
}
.cd-gavel.is-lost {
  color: var(--cream-2);
  opacity: 0.45;
  -webkit-mask-image: url("icons/gavel-lost.svg");
  mask-image: url("icons/gavel-lost.svg");
}
.cd-lives.is-last .cd-gavel:not(.is-lost) {
  color: rgb(var(--primitives-red-400, 248 113 113));
}
.cd-gavel.is-fresh {
  animation: cd-life-lost 600ms ease-out;
}
@keyframes cd-life-lost {
  0% {
    color: rgb(var(--primitives-red-400, 248 113 113));
    opacity: 1;
    transform: rotate(0);
  }
  30% {
    transform: rotate(-18deg) translateY(-3px);
  }
  100% {
    opacity: 0.45;
    transform: rotate(0);
  }
}

/* The points a call earns: the total and its breakdown rise off the stamp, then the total
   flies to the score. */
.cd-float {
  position: absolute;
  z-index: 50;
  pointer-events: none;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font: 700 28px/1 var(--cd-mono);
  color: #f6d27a;
  text-shadow:
    0 1px 0 #6b4f12,
    0 3px 10px rgba(0, 0, 0, 0.55);
  white-space: nowrap;
}
/* Under the total, where it came from: "300 call · 100 streak · 67 time". */
.cd-float-parts {
  font: 600 13px/1 var(--font-sans);
  color: #fff4d6;
  background: rgba(20, 16, 10, 0.72);
  padding: 4px 9px;
  border-radius: 999px;
  text-shadow: none;
  white-space: nowrap;
}

/* On a phone the header is one row: the track shows only the current case's six files,
   the cells shrink, and the +100 drops while the streak stays gold. */
@media (max-width: 600px) {
  .cd-top {
    flex-wrap: nowrap;
    gap: 0;
  }
  .cd-run {
    padding-right: 7px;
  }
  .cd-track-group:not(.is-current) {
    display: none;
  }
  .cd-board {
    flex: 1;
    justify-content: space-between;
  }
  .cd-cell {
    padding: 0 7px;
    min-width: 0;
  }
  .cd-cell:first-child {
    border-left: 1px solid rgba(239, 230, 210, 0.2);
    padding-left: 7px;
  }
  .cd-cell:last-child {
    min-width: 0;
  }
  .cd-hlabel {
    font-size: 9.5px;
    margin-bottom: 4px;
  }
  .cd-gavel {
    width: 16px;
    height: 16px;
  }
  .cd-lives {
    gap: 2px;
  }
  .cd-hnum,
  .cd-scoreline b {
    font-size: 19px;
  }
  .cd-hbonus {
    display: none;
  }
}
/* The narrowest phones: a little less room between cells, smaller gavels and score. */
@media (max-width: 359px) {
  .cd-run {
    padding-right: 5px;
  }
  .cd-cell,
  .cd-cell:first-child {
    padding: 0 5px;
  }
  .cd-cell:last-child {
    padding-right: 0;
  }
  .cd-hlabel {
    font-size: 9px;
  }
  .cd-gavel {
    width: 14px;
    height: 14px;
  }
  .cd-hnum,
  .cd-scoreline b {
    font-size: 17px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cd-scoreline.is-bump b,
  .cd-gavel.is-fresh {
    animation: none;
  }
}
/* The run's ledger on the results sheet. */
.cd-ledger {
  margin: 16px 0 0;
  border-top: 1px solid var(--paper-line);
}
.cd-ledger-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 9px 0;
  border: 0;
  border-bottom: 1px dashed var(--paper-line);
  background: none;
  font: inherit;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.cd-ledger-row:hover:not(:disabled) .cd-ledger-name {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cd-ledger-row:disabled {
  cursor: default;
}
.cd-ledger-row:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}
.cd-ledger-name {
  font: 600 17px var(--font-serif);
}
.cd-ledger-name small {
  display: block;
  font: 700 11px var(--cd-mono);
  text-transform: uppercase;
  color: var(--ink-2);
}
.cd-ledger-marks {
  display: inline-flex;
  gap: 3px;
  line-height: 0;
}
.cd-ledger-mark {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  border: 1.5px solid var(--paper-line);
}
.cd-ledger-mark.is-right {
  background: rgb(var(--primitives-green-500, 34 197 94));
  border-color: rgb(var(--primitives-green-500, 34 197 94));
}
.cd-ledger-mark.is-wrong {
  background: rgb(var(--primitives-red-500, 239 68 68));
  border-color: rgb(var(--primitives-red-500, 239 68 68));
}
.cd-ledger-of {
  font: 700 14px var(--cd-mono);
  white-space: nowrap;
}
.cd-end .cd-ledger-foot {
  margin: 10px 0 0;
  display: flex;
  justify-content: space-between;
  font: 700 13px var(--cd-mono);
  text-transform: uppercase;
  color: var(--ink-2);
}
.cd-ledger-foot b {
  color: var(--ink);
}
/* On a phone each case's squares sit under its name. */
@media (max-width: 480px) {
  .cd-ledger-row {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 6px;
  }
  .cd-ledger-marks {
    grid-column: 1;
  }
  .cd-ledger-of {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

/* The review's list: each call is a row that opens its file. */
.cd-end .cd-review-open {
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.cd-review-open::after {
  transform: rotate(-45deg);
  margin: 0 4px 0 0;
}
.cd-review-open:hover {
  background: var(--paper-2, #f6efe0);
}

/* One file in the review: the header with Back and the count, the file read-only. */
.cd-file-top {
  align-items: center;
}
.cd-file-count {
  font: 600 13px var(--font-sans);
  text-transform: uppercase;
  color: var(--cream-2);
}
.cd-calls.is-shown .cd-call {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: default;
  pointer-events: none;
}
.cd-pick.is-shown {
  cursor: default;
  animation: none;
}
.cd-pick.is-shown:hover {
  background: var(--cream);
}
.cd-pick.is-shown.is-none:hover {
  background: rgba(0, 0, 0, 0.18);
  border-color: var(--cream-2);
}
.cd-pick.is-answer {
  box-shadow:
    0 0 0 3px rgb(var(--primitives-green-500, 34 197 94)),
    0 4px 10px rgba(0, 0, 0, 0.3);
}
.cd-pick.is-yours {
  box-shadow:
    0 0 0 3px var(--blue-line, #7aa7c7),
    0 4px 10px rgba(0, 0, 0, 0.3);
}
.cd-pick.is-yours.is-off {
  box-shadow:
    0 0 0 3px rgb(var(--primitives-red-500, 239 68 68)),
    0 4px 10px rgba(0, 0, 0, 0.3);
}
.cd-pick.is-yours.is-answer {
  box-shadow:
    0 0 0 3px rgb(var(--primitives-green-500, 34 197 94)),
    0 4px 10px rgba(0, 0, 0, 0.3);
}
.cd-pick-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 5px;
}
.cd-pick-tags b {
  font: 700 11px var(--font-sans);
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  color: rgb(var(--primitives-base-white, 255 255 255));
}
.cd-pick-tags .is-tag-yours {
  background: rgb(var(--primitives-gray-700, 55 65 81));
}
.cd-pick.is-off .cd-pick-tags .is-tag-yours {
  background: rgb(var(--primitives-red-600, 220 38 38));
}
.cd-pick-tags .is-tag-answer {
  background: rgb(var(--primitives-green-600, 22 163 74));
}
/* On the wide desk the added facts sit under the calls, before the verdict. */
@media (min-width: 700px) {
  .cd-desk-review .cd-second {
    order: 0;
  }
}

/* The line above Next when the third incorrect charge ends the run. */
.cd-dismiss-note {
  margin: 0 0 10px;
  font: 600 15px/1.4 var(--font-sans);
  color: var(--cream);
}

/* ===================== Phone layout =====================
   Below 1024px the book is as tall as the page showing, and a tapped word shows its one
   definition. Below 700px also: the desk runs edge to edge, the calls and Next are pinned
   to the foot of the screen, the page jumps to the added facts and the verdict, the top is
   trimmed, the rule card is slim, and the type is smaller. From 1024px the desk keeps the
   steady book: it holds the taller of its two pages, so turning to the definitions never
   changes its height. */
/* "All definitions" exists only for the one-definition view; at 1024px and wider every
   definition is already showing. */
.cd-all-defs {
  display: none;
}
@media (max-width: 1023px) {
  /* The book is as tall as the page showing (on a phone, a foldable or a tablet): the
     hidden page collapses instead of holding the definitions' height under the rule.
     Opening the definitions grows it. */
  .cd-codebook:not(.is-open) .cd-page-defs,
  .cd-codebook.is-open .cd-page-rule {
    display: none;
  }
  /* One definition at a time: a tapped word shows only its own definition, and a link
     under it opens the rest. */
  .cd-page-defs.has-one .cd-book-def:not(.is-here) {
    display: none;
  }
  .cd-page-defs.has-one .cd-all-defs {
    display: inline-block;
    margin: 2px 0 0;
    padding: 4px 0;
    background: none;
    border: 0;
    font: 600 14px var(--font-sans);
    color: var(--blue, #1f6f9f);
    text-decoration: underline;
    cursor: pointer;
  }
}
@media (max-width: 699px) {
  /* Full bleed: the desk runs to both edges of the screen, with no side margin and no
     wooden edge at the left and right; the felt keeps 12px of padding. */
  #game {
    padding-left: 0;
    padding-right: 0;
  }
  .cd-blotter {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    padding-left: 12px;
    padding-right: 12px;
  }
  /* The trimmed top: no nameplate and lamp row during play, a shorter gap to the header. */
  .cd-scene-top.is-play {
    display: none;
  }
  .cd-blotter.is-play {
    padding-top: 12px;
  }
  .cd-top {
    margin: 0 0 10px;
  }
  .cd-desk {
    gap: 12px;
  }
  .cd-head-base,
  .cd-head-extra {
    display: none;
  }
  /* Smaller type. */
  .cd-sheet {
    font-size: 15px;
    line-height: 1.45;
    padding: 10px 12px 12px 16px;
  }
  .cd-charge {
    font-size: 20px;
    margin-bottom: 6px;
  }
  .cd-rule-text,
  .cd-req {
    font-size: 16px;
    line-height: 1.5;
  }
  /* The slim rule card: no "Penal code" row, and the Definitions tab stands up from the
     card's top edge like a bookmark, so the rule has the full width from its first line. */
  .cd-page-rule .cd-code-head {
    display: none;
  }
  .cd-codebook .cd-rule {
    padding-top: 10px;
  }
  .cd-desk .cd-codebook {
    margin-top: 10px;
  }
  .cd-book-tab {
    top: -20px;
    padding: 4px 12px 5px;
    border-radius: 6px 6px 0 0;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
  }
  .cd-book-tab::after {
    display: none;
  }
  .cd-codebook .cd-code-head {
    padding-right: 0;
  }
  /* Pinned calls: one bar at the foot of the screen, the two calls side by side. */
  .cd-desk .cd-calls,
  .cd-desk .cd-after {
    position: sticky;
    bottom: 0;
    z-index: 6;
    margin: 0 -12px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: var(--blotter);
    box-shadow: 0 -10px 16px rgba(0, 0, 0, 0.3);
  }
  .cd-desk .cd-calls {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .cd-desk .cd-call {
    min-height: 54px;
    padding: 8px 8px;
    font-size: 15px;
    line-height: 1.2;
  }
  /* While the added facts are open the bar lets go and scrolls with the page. */
  .cd-desk .cd-calls.is-settled {
    position: static;
    margin: 0;
    padding: 0;
    box-shadow: none;
    background: none;
  }
  .cd-desk .cd-call.is-quiet,
  .cd-desk .cd-call.is-picked {
    min-height: 44px;
  }
  .cd-btn-next {
    padding: 13px 22px;
  }
  .cd-second {
    scroll-margin-bottom: 12px;
  }
}
/* ===================== Paperwork =====================
   The incident report is a police form; the rule is a page of a statute book. */
/* The incident report as a police form. */
.cd-form {
  padding-top: 14px;
}
/* A gem clip over the top edge, in the margin: one wire in two nested loops. */
.cd-clip {
  position: absolute;
  left: 7px;
  top: -15px;
  width: 15px;
  height: 45px;
  background: url("icons/paperclip.svg") center / contain no-repeat;
  filter: drop-shadow(1px 2px 1.5px rgba(0, 0, 0, 0.35));
  transform: rotate(-3deg);
  z-index: 2;
}
.cd-form-band {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 0 0 5px;
  border-bottom: 2px solid var(--ink);
  font: 700 11px var(--cd-mono);
  text-transform: uppercase;
  color: var(--ink);
}
.cd-form-band span:last-child {
  font-size: 12px;
}
.cd-form-fields {
  display: grid;
  grid-template-columns: auto 1.4fr 1fr;
  border-bottom: 1px solid var(--paper-line);
  margin: 0 0 8px;
}
.cd-form-fields > div {
  padding: 5px 10px 6px 0;
  min-width: 0;
}
.cd-form-fields > div + div {
  padding-left: 10px;
  border-left: 1px solid var(--paper-line);
}
.cd-form-fields small {
  display: block;
  font: 600 9.5px var(--font-sans);
  text-transform: uppercase;
  color: var(--ink-2);
}
.cd-form-fields b {
  display: block;
  font: 600 17px/1.2 var(--font-serif);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cd-form-fields > div:nth-child(2) b {
  white-space: normal;
}
.cd-form-label {
  margin: 0 0 4px !important;
  font: 600 9.5px var(--font-sans);
  text-transform: uppercase;
  color: var(--ink-2);
}
/* The stamp lands on the band, over the report's label, as it replaces that label in the
   game; it never covers a field. */
.cd-form .cd-form-mark {
  position: absolute;
  right: 10px;
  top: 2px;
  z-index: 3;
}
.cd-form.is-answered .cd-form-band span:last-child {
  visibility: hidden;
}
/* The rule as a page of a statute book. */
.cd-codebook .cd-code-head {
  font: 600 10.5px var(--font-sans);
  text-transform: uppercase;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--paper-line);
}
.cd-section-title {
  margin: 10px 0 4px;
  font: 700 17px var(--font-serif);
  color: var(--ink);
}
.cd-page-rule .cd-rule-text,
.cd-page-rule .cd-req {
  font-family: Georgia, "Times New Roman", var(--font-serif), serif;
}
@media (max-width: 699px) {
  .cd-form-fields b {
    font-size: 15px;
  }
  .cd-section-title {
    margin-top: 0;
    font-size: 16px;
  }
  .cd-form .cd-form-mark {
    top: 0;
    right: 6px;
  }
}
/* ===================== Motion =====================
   A new file slides in, the stamp lands with ink, a finished file slides off the desk. */
/* A file in motion may pass the screen's edge for a moment; the page never scrolls
   sideways for it. The form clips its own ink. */
html,
body {
  overflow-x: clip;
}
.cd-form {
  overflow-x: clip;
}
/* A new file slides in from the in-tray at the top right and settles. */
.cd-sheet.is-arriving {
  animation: cd-arrive 460ms cubic-bezier(0.2, 0.8, 0.25, 1) both;
}
@keyframes cd-arrive {
  0% {
    opacity: 0;
    transform: translate(28px, -80px) rotate(4deg);
    box-shadow: 0 30px 40px rgba(0, 0, 0, 0.35);
  }
  70% {
    opacity: 1;
    transform: translate(-3px, 2px) rotate(-0.6deg);
  }
  100% {
    transform: none;
  }
}
/* The stamp lands: the sheet gives a little under it, and ink spreads behind it. */
.cd-sheet.is-stamped {
  animation: cd-thump 240ms ease-out 60ms both;
}
@keyframes cd-thump {
  35% {
    transform: translateY(3px) scale(0.994);
  }
  100% {
    transform: none;
  }
}
.cd-mark {
  position: relative;
}
.cd-ink {
  position: absolute;
  right: 0;
  top: -10px;
  width: 130px;
  height: 50px;
  opacity: 0;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(185, 28, 28, 0.5),
    rgba(185, 28, 28, 0.2) 55%,
    transparent
  );
  pointer-events: none;
  animation: cd-ink 760ms ease-out 40ms backwards;
}
@keyframes cd-ink {
  0% {
    opacity: 0.9;
    transform: scale(0.35);
  }
  100% {
    opacity: 0;
    transform: scale(1.3);
  }
}
/* A finished file slides off the desk; the verdict and buttons fade as it goes. */
.cd-sheet.is-leaving-left,
.cd-sheet.is-leaving-right {
  z-index: 30;
}
.cd-sheet.is-leaving-left {
  animation: cd-leave-left 420ms cubic-bezier(0.5, 0, 0.75, 0.2) both;
}
.cd-sheet.is-leaving-right {
  animation: cd-leave-right 420ms cubic-bezier(0.5, 0, 0.75, 0.2) both;
}
@keyframes cd-leave-left {
  to {
    opacity: 0;
    transform: translate(-115%, 60px) rotate(-9deg);
  }
}
@keyframes cd-leave-right {
  to {
    opacity: 0;
    transform: translate(115%, 60px) rotate(9deg);
  }
}
.cd-desk.is-leaving .cd-feedback,
.cd-desk.is-leaving .cd-after,
.cd-desk.is-leaving .cd-second {
  opacity: 0;
  transition: opacity 200ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .cd-sheet.is-arriving,
  .cd-sheet.is-stamped,
  .cd-ink {
    animation: none;
  }
}
/* ===================== Final fixes ===================== */
/* The review's picked Charge keeps white lettering on its red face. */
.cd-calls.is-shown .cd-call[data-call="charge"].is-picked {
  color: rgb(var(--primitives-base-white, 255 255 255));
}
@media (prefers-reduced-motion: reduce) {
  .cd-stamp.is-new {
    animation: none;
  }
}
/* Keyboard focus: a cream ring on the green desk, the blue ring on paper. The file itself
   takes focus for screen readers and shows no ring. */
.cd-blotter :focus-visible {
  outline: 3px solid var(--cream);
  outline-offset: 3px;
}
.cd-blotter .cd-sheet :focus-visible,
.cd-blotter .cd-codebook :focus-visible,
.cd-blotter .cd-feedback :focus-visible,
.cd-blotter .cd-cover :focus-visible {
  outline-color: var(--blue);
  outline-offset: 2px;
}
.cd-blotter .cd-sheet:focus-visible {
  outline: none;
}
/* Read by screen readers, not shown. */
.cd-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ===================== The kit's menu =====================
   How to play and settings sit at the right end of the lamp row on every screen. On a
   phone during a run that row is gone, and they sit at the right end of the run's header. */
.cd-menu {
  position: absolute;
  right: 4px;
  top: 10px;
  z-index: 3;
}
.cd-top .cd-menu {
  position: static;
  display: flex;
  align-items: center;
  flex: none;
  margin-left: 2px;
}
.cd-top .cd-menu:empty {
  display: none;
}
@media (max-width: 699px) {
  /* The lamp gives the buttons the right end of its row. */
  .cd-lamp {
    right: 92px;
  }
}
/* On a narrow phone the nameplate and the buttons fill the row, and the lamp goes. */
@media (max-width: 480px) {
  .cd-lamp {
    display: none;
  }
}
@media (min-width: 700px) {
  .cd-menu {
    right: 16px;
  }
  .cd-lamp {
    right: 120px;
  }
}
/* On the narrowest phones the header's cells sit closer and the score sets a size
   smaller, so a five-digit score still fits beside the buttons. */
@media (max-width: 360px) {
  .cd-top .cd-menu {
    margin: 0;
  }
  .cd-top .cd-cell {
    padding-left: 3px;
    padding-right: 3px;
  }
  .cd-top .cd-hnum,
  .cd-top .cd-scoreline b {
    font-size: 15px;
  }
}

/* ===================== The fact map =====================
   In the verdict: one row per part of the rule with the report's words, stacked and joined
   by "and", a bracket on their right, and an arrow to "Charge". A requirement in (b)
   follows as its own list, with locks instead of checks. */
.cd-map {
  display: grid;
  gap: 10px;
  margin: 10px 0 12px;
}
.cd-map-a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 8px;
}
.cd-map-stack {
  display: grid;
  gap: 3px;
}
.cd-map-a > .cd-map-stack {
  padding-right: 10px;
  border-right: 2px solid var(--ink-2);
  border-radius: 0 14px 14px 0;
}
.cd-map-join {
  margin-left: 18px;
  font: 600 11.5px var(--font-sans);
  color: var(--ink-2);
}
/* A row: its mark, the part's name, the quoted words under it, and a find icon. A row is a
   control: it lifts on hover, and pointing at it lights its words and its part. */
.cd-map-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 18px;
  column-gap: 10px;
  row-gap: 3px;
  align-items: start;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--paper-line);
  background: rgba(255, 255, 255, 0.75);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.35;
  cursor: pointer;
  transition:
    transform 140ms ease-out,
    box-shadow 140ms ease-out,
    border-color 140ms ease-out;
}
.cd-map-row:hover {
  transform: translateY(-1px);
  border-color: rgb(var(--primitives-gray-300));
  box-shadow: 0 3px 8px rgba(40, 30, 10, 0.14);
}
.cd-map-row.is-lit {
  box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.8);
}
.cd-map-row:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 1px;
}
.cd-map-row.is-open,
.cd-map-row.is-fails {
  background: var(--red-soft);
  border-color: var(--red-line);
}
.cd-map-mark {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  font: 700 11px/1 var(--font-sans);
  color: #fff;
}
.cd-map-row.is-met .cd-map-mark {
  background: var(--green);
}
.cd-map-row.is-met .cd-map-mark::after {
  content: "✓";
}
.cd-map-row.is-fails .cd-map-mark {
  background: var(--red);
}
.cd-map-row.is-fails .cd-map-mark::after {
  content: "✕";
}
.cd-map-row.is-open .cd-map-mark {
  border: 2px dashed var(--red);
}
/* A part that cannot be judged once another fails: grey, a dash, no check. */
.cd-map-row.is-na {
  background: rgba(255, 255, 255, 0.45);
  color: var(--ink-2);
}
.cd-map-row.is-na .cd-map-mark {
  background: rgb(var(--primitives-gray-300));
}
.cd-map-row.is-na .cd-map-mark::after {
  content: "–";
}
.cd-map-na {
  font-style: italic;
  color: var(--ink-2);
}
.cd-map-part {
  font-weight: 600;
}
.cd-map-facts {
  grid-column: 2;
  grid-row: 2;
  line-height: 1.5;
}
.cd-map-find {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  width: 16px;
  height: 16px;
  background-color: var(--ink-2);
  -webkit-mask: url("icons/find.svg") center / contain no-repeat;
  mask: url("icons/find.svg") center / contain no-repeat;
  opacity: 0.55;
  transition: opacity 140ms ease-out;
}
.cd-map-row:hover .cd-map-find,
.cd-map-row.is-lit .cd-map-find,
.cd-map-row:focus-visible .cd-map-find {
  opacity: 1;
  background-color: var(--ink);
}
/* Each quote sits on a highlighter stroke, as if marked up on the report: green when it
   meets the part, red when it rules the part out. The stroke wraps with the words. */
.cd-map-quote {
  font: 600 13px/1.35 var(--cd-mono);
  color: var(--ink);
  margin-right: 8px;
  padding: 0 4px 1px;
  border-radius: 0.7em 0.25em 0.8em 0.35em / 0.45em 0.8em 0.4em 0.7em;
  background: linear-gradient(
    100deg,
    rgba(74, 222, 128, 0) 0%,
    rgba(74, 222, 128, 0.42) 3%,
    rgba(74, 222, 128, 0.3) 70%,
    rgba(74, 222, 128, 0.4) 97%,
    rgba(74, 222, 128, 0) 100%
  );
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.cd-map-quote::before {
  content: "“";
}
.cd-map-quote::after {
  content: "”";
}
.cd-map-row.is-fails .cd-map-quote {
  background: linear-gradient(
    100deg,
    rgba(248, 113, 113, 0) 0%,
    rgba(248, 113, 113, 0.4) 3%,
    rgba(248, 113, 113, 0.28) 70%,
    rgba(248, 113, 113, 0.38) 97%,
    rgba(248, 113, 113, 0) 100%
  );
}
.cd-map-empty {
  border: 1.5px dashed var(--red);
  border-radius: 3px;
  padding: 2px 10px;
  color: var(--red);
  font-style: italic;
}
.cd-map-tag {
  display: inline-block;
  font: 700 11px var(--font-sans);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--red);
}
.cd-map-tag.is-aim {
  color: var(--ink-2);
}
/* Words that leave a part unmet without ruling it out: a grey stroke and a grey tag. */
.cd-map-row.is-open .cd-map-quote {
  background: linear-gradient(
    100deg,
    rgba(160, 150, 130, 0) 0%,
    rgba(160, 150, 130, 0.35) 3%,
    rgba(160, 150, 130, 0.25) 70%,
    rgba(160, 150, 130, 0.33) 97%,
    rgba(160, 150, 130, 0) 100%
  );
}
.cd-map-tag.is-unmet {
  color: var(--ink-2);
}
/* The arrow: solid green when (a) reaches "Charge", a faint dashed line when it does not. */
.cd-map-out {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-items: start;
  gap: 4px 6px;
}
.cd-arrow {
  position: relative;
  display: inline-block;
  width: 26px;
  height: 12px;
  color: var(--green);
}
.cd-arrow::before {
  content: "";
  position: absolute;
  left: 0;
  right: 7px;
  top: 5px;
  border-top: 2px solid currentColor;
}
.cd-arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 1px;
  border-left: 8px solid currentColor;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.cd-arrow.is-off {
  color: rgb(var(--primitives-gray-300));
}
.cd-arrow.is-off::before {
  border-top-style: dashed;
}
/* "Charge": filled green when the rule reaches it and nothing blocks it; otherwise an empty
   grey outline, never crossed out, since the facts settle nothing either way. */
.cd-result {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 4px;
  font: 700 12.5px var(--font-sans);
  text-transform: uppercase;
}
.cd-result.is-yes {
  padding-left: 5px;
  background: var(--green);
  color: #fff;
}
.cd-result-mark {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--green);
  font: 700 9px/1 var(--font-sans);
}
.cd-result-mark::after {
  content: "✓";
}
.cd-result.is-off,
.cd-result.is-blocked {
  border: 1.5px solid rgb(var(--primitives-gray-300));
  color: var(--ink-2);
}
.cd-result-note {
  grid-column: 2;
  max-width: 130px;
  margin: 0 !important;
  font: 500 11.5px/1.35 var(--font-sans);
  color: var(--ink-2);
}
/* (b)'s requirements: a box of plain lines with a lock instead of cards with a check, under
   a note that says what they do. An open lock (green) is a requirement the facts meet; a
   shut lock is one they do not (red) or do not settle (grey). */
.cd-map-gate {
  padding: 8px 10px 10px;
  border: 1.5px dashed var(--ink-2);
  border-radius: 10px;
}
.cd-map-gate-head {
  margin: 0 0 6px !important;
  font: 600 13px var(--font-sans);
  color: var(--ink);
}
.cd-map-gate-note {
  margin: -2px 0 8px !important;
  font: 500 12px/1.4 var(--font-sans);
  color: var(--ink-2);
}
.cd-map-row.is-req,
.cd-map-row.is-req.is-open,
.cd-map-row.is-req.is-fails {
  background: transparent;
  border-color: transparent;
  padding: 4px;
}
.cd-map-row.is-req:hover {
  transform: none;
  box-shadow: none;
  background: rgba(60, 50, 30, 0.05);
}
.cd-map-row.is-req .cd-map-mark {
  border: 0;
  border-radius: 0;
  background-color: var(--green);
  -webkit-mask: url("icons/lock-open.svg") center / contain no-repeat;
  mask: url("icons/lock-open.svg") center / contain no-repeat;
}
.cd-map-row.is-req .cd-map-mark::after {
  content: none;
}
.cd-map-row.is-req.is-fails .cd-map-mark {
  background-color: var(--red);
  -webkit-mask-image: url("icons/lock.svg");
  mask-image: url("icons/lock.svg");
}
.cd-map-row.is-req.is-open .cd-map-mark {
  background-color: var(--ink-2);
  -webkit-mask-image: url("icons/lock.svg");
  mask-image: url("icons/lock.svg");
}
/* The report's words and the rule's parts carry no mark: they light up only while the
   player points at or taps their row. */
.cd-ev,
.cd-part.is-mapped {
  border-radius: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition:
    background-color 160ms ease-out,
    box-shadow 160ms ease-out;
}
.cd-ev.is-pointed,
.cd-part.is-pointed {
  background-color: rgba(250, 204, 21, 0.45);
  box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.45);
}
/* The first verdict lands the rows one at a time, each "and" with the row after it, the
   (b) box with its first row, and the arrow and "Charge" last. */
.cd-desk.is-mapping .cd-map-row,
.cd-desk.is-mapping .cd-map-join,
.cd-desk.is-mapping .cd-map-gate {
  animation: cd-map-in 340ms cubic-bezier(0.2, 0.7, 0.2, 1) var(--d) both;
}
.cd-desk.is-mapping .cd-map-out {
  animation: cd-map-result 420ms cubic-bezier(0.2, 0.7, 0.2, 1) var(--d) both;
}
@keyframes cd-map-in {
  from {
    opacity: 0;
    transform: translateX(-16px);
  }
}
@keyframes cd-map-result {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
}
/* Where the verdict column is narrow (a phone, or the two columns below 900px) there is no
   room beside the rows: the bracket closes under them and the arrow points down to
   "Charge". */
@media (max-width: 899px) {
  .cd-map-a {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 6px;
  }
  .cd-map-a > .cd-map-stack {
    padding: 0 0 10px;
    border-right: 0;
    border-bottom: 2px solid var(--ink-2);
    border-radius: 0 0 14px 14px;
  }
  .cd-map-out {
    justify-self: center;
    grid-template-columns: auto;
    justify-items: center;
  }
  .cd-map-out .cd-arrow {
    transform: rotate(90deg);
  }
  .cd-result-note {
    grid-column: 1;
    max-width: none;
    text-align: center;
  }
}
@media (max-width: 699px) {
  /* A met part is one line: its check and its name. Tapping it opens its words and lights
     them in the report. The part that decides the file stays open. */
  .cd-map-row.is-met:not(.is-lit) .cd-map-facts {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cd-map-row,
  .cd-map-row:hover {
    transform: none;
  }
  .cd-desk.is-mapping .cd-map-row,
  .cd-desk.is-mapping .cd-map-join,
  .cd-desk.is-mapping .cd-map-gate,
  .cd-desk.is-mapping .cd-map-out {
    animation: none;
  }
}

/* ===================== Scene sketch =====================
   A photo set into the narrative, top right, the typed text wrapping around it. A tap
   enlarges it in place to the width of the report, with the scene line under it. */
.cd-photo {
  float: right;
  position: relative;
  width: 106px;
  margin: 2px 0 6px 12px;
  padding: 4px 4px 10px;
  border: 0;
  border-radius: 1px;
  background: #fffdf6;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
  transform: rotate(2deg);
  cursor: zoom-in;
}
.cd-photo img {
  display: block;
  width: 100%;
  height: auto;
}
.cd-photo.is-big {
  float: none;
  display: block;
  width: min(100%, 380px);
  margin: 6px auto 14px;
  padding: 8px 8px 12px;
  transform: rotate(-0.6deg);
  cursor: zoom-out;
}
.cd-photo-caption {
  display: block;
  margin-top: 8px;
  color: var(--ink);
  font: 500 13px/1.4 var(--font-sans);
  text-align: left;
}
@media (min-width: 700px) {
  .cd-photo {
    width: 124px;
    margin-left: 16px;
  }
}
@media (min-width: 900px) {
  .cd-photo {
    width: 172px;
    margin-left: 18px;
    padding: 5px 5px 12px;
  }
}
/* ===================== The result as two cards =====================
   The verdict and its map, then the explanation, side by side in a track that scrolls
   sideways and snaps to a card. A sliver of the explanation card shows at the edge. */
.cd-carousel {
  padding: 12px 0 10px;
}
.cd-cards {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 14px;
  padding: 0 14px;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.cd-cards::-webkit-scrollbar {
  display: none;
}
.cd-card {
  flex: 0 0 calc(100% - 12px);
  min-width: 0;
  scroll-snap-align: start;
}
.cd-card:last-child {
  margin-right: 14px;
}
.cd-card-why {
  padding: 12px 14px 12px 20px;
  border: 1px solid var(--paper-line);
  border-radius: 10px;
  background: #fffdf8;
  box-shadow: 0 1px 3px rgba(60, 50, 30, 0.18);
  font-size: 15px;
  line-height: 1.5;
}
.cd-card-kicker {
  font: 700 12px var(--cd-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.cd-cards-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  margin: 10px 14px 0;
}
.cd-go {
  justify-self: start;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--paper-line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font: 700 14px var(--font-sans);
  cursor: pointer;
}
.cd-go-next {
  justify-self: end;
}
/* Only the way you can go shows. */
.cd-carousel.is-at-0 .cd-go-prev,
.cd-carousel.is-at-1 .cd-go-next {
  visibility: hidden;
}
.cd-dots {
  display: flex;
  gap: 6px;
}
.cd-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(40, 36, 30, 0.22);
}
.cd-carousel.is-at-0 .cd-dots i:first-child,
.cd-carousel.is-at-1 .cd-dots i:last-child {
  background: var(--ink);
}

/* ===================== Right so far =====================
   A right "Can't charge" is confirmed before the added-fact question. */
.cd-sofar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--color-border-positive);
  border-radius: 10px;
  background: var(--color-surface-positive);
  color: var(--ink);
  font: 500 15px/1.35 var(--font-sans);
  animation: cd-sofar 360ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.cd-sofar-mark {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-positive-base, #2f8f5b);
  position: relative;
}
.cd-sofar-mark::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 4px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
@keyframes cd-sofar {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cd-sofar {
    animation: none;
  }
}
/* A part filled by the right added fact: a plus mark and the fact on a dashed chip tagged
   Added, plainly not quoted from the report. */
.cd-map-row.is-added {
  border-color: var(--blue);
}
.cd-map-row.is-added .cd-map-mark {
  background: var(--blue);
}
.cd-map-row.is-added .cd-map-mark::after {
  content: "+";
  color: #fff;
  font-weight: 800;
}
.cd-map-added {
  display: inline-block;
  padding: 3px 8px 4px;
  border: 1.5px dashed var(--blue);
  border-radius: 6px;
  background: rgba(59, 130, 246, 0.07);
  color: var(--ink);
  font: 500 13px/1.4 var(--font-sans);
}
.cd-map-added-tag {
  margin-right: 6px;
  font: 700 10.5px var(--font-sans);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--blue);
}
/* The added facts on the Why card: a check or a cross, the fact, and one line on why. */
.cd-why-head {
  margin: 10px 0 4px;
  font: 700 13px var(--font-sans);
  color: var(--ink);
}
.cd-card-kicker + .cd-why-head {
  margin-top: 2px;
}
.cd-why-facts {
  display: grid;
  gap: 8px;
  margin: 0 0 4px;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.45;
}
.cd-why-fact {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 8px;
  align-items: start;
}
.cd-why-mark {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 800 11px/1 var(--font-sans);
  color: #fff;
}
.cd-why-fact.is-right .cd-why-mark {
  background: var(--green);
}
.cd-why-fact.is-right .cd-why-mark::after {
  content: "✓";
}
.cd-why-fact.is-wrong .cd-why-mark {
  background: rgba(40, 36, 30, 0.35);
}
.cd-why-fact.is-wrong .cd-why-mark::after {
  content: "✕";
}
.cd-why-yours {
  display: inline-block;
  margin: 0 2px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font: 700 10.5px/1.6 var(--font-sans);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  vertical-align: 1px;
}