/* Cloze's practice panel: the problem, its gaps, its tests and the Check. One column, made for widths from about 320 to
   700 pixels, shown in the extension's side panel and on the website's problem page. Every rule is under .cz, so the
   page it sits in is not touched. The colour and type tokens are in shared/tokens.css, which both put in front. */

.cz button {
  font: inherit;
  cursor: pointer;
}

.cz button:focus-visible,
.cz a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.cz .sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.cz .switch {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--soft);
}

.cz .switch button {
  min-height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
}

.cz .switch button[aria-pressed="true"] {
  background: var(--card);
  box-shadow: 0 0 0 1px var(--rule);
  color: var(--fg);
  font-weight: 600;
}

.cz .outline {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--card);
  color: var(--fg);
  font-size: 13px;
  font-weight: 600;
}

.cz .outline:hover {
  background: var(--soft);
}

/* Practice: the task, the level, the code with its gaps, the tests. */
.cz .practice h1 {
  margin: 4px 0;
  font-size: 20px;
  line-height: 1.3;
}

.cz .meta {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 13px;
}

.cz .meta a {
  color: var(--accent);
}

.cz .task {
  margin: 0 0 16px;
}

.cz .levels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin: 0 0 16px;
  padding: 3px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--soft);
}

.cz .levels button {
  display: grid;
  min-height: 44px;
  padding: 6px 4px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
}

.cz .levels strong {
  font-size: 13px;
}

.cz .levels span {
  font-size: 12px;
}

.cz .levels button[aria-pressed="true"] {
  background: var(--card);
  box-shadow: 0 0 0 1px var(--rule);
  color: var(--fg);
}

.cz .code {
  margin: 0 0 20px;
  padding: 10px 0;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--soft);
  font: 13px / 1.6 var(--mono);
  overflow-wrap: anywhere;
}

/* A long line wraps under its own indentation, two characters further in. */
.cz .line {
  min-height: 1lh;
  padding: 0 12px 0 calc(12px + (var(--indent) + 2) * 1ch);
  text-indent: -2ch;
  white-space: pre-wrap;
}

.cz .gap {
  margin: 6px 12px 6px calc(12px + min(var(--indent) * 1ch, 30%));
  padding: 6px 8px 8px;
  border: 1px dashed var(--accent);
  border-radius: 8px;
  background: var(--card);
  font-family: var(--sans);
}

.cz .gap.is-shown {
  border-style: solid;
  border-color: var(--shown);
}

.cz .gap.is-error {
  border-style: solid;
  border-color: var(--fail);
}

.cz .gap-head {
  display: flex;
  align-items: center;
  gap: 2px;
  color: var(--muted);
  font-size: 12px;
}

.cz .gap-name {
  margin-right: auto;
  color: var(--fg);
  font-weight: 600;
}

.cz .gap-name span {
  color: var(--muted);
  font-weight: 400;
}

.cz .quiet {
  min-height: 28px;
  padding: 2px 8px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--accent);
  font-size: 12px;
}

.cz .quiet:hover {
  background: var(--soft);
}

.cz .gap-hint {
  margin: 4px 0;
  font-size: 13px;
}

.cz .gap-hint code {
  font-family: var(--mono);
}

.cz .gap-field {
  display: block;
  width: 100%;
  min-height: calc(var(--rows) * 1.6em + 14px);
  margin-top: 4px;
  padding: 6px 8px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--bg);
  color: var(--fg);
  font: 13px / 1.6 var(--mono);
  tab-size: 4;
  resize: vertical;
  field-sizing: content;
}

.cz .gap-field:focus {
  border-color: transparent;
  outline: 2px solid var(--accent);
  outline-offset: 0;
}

.cz .gap-error {
  margin: 6px 0 0;
  color: var(--fail);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.cz .gap-reference span {
  color: var(--muted);
  font-size: 12px;
}

.cz .gap-reference pre {
  margin: 2px 0 0;
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--soft);
  font: 13px / 1.6 var(--mono);
  white-space: pre-wrap;
}

.cz .tests h2 {
  margin: 0 0 6px;
  font-size: 13px;
}

.cz .tests ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cz .tests li {
  display: grid;
  grid-template-columns: 1.25em minmax(0, 1fr);
  gap: 4px;
  font-size: 13px;
}

.cz .mark {
  color: var(--muted);
}

.cz .is-pass .mark,
.cz .summary .is-pass {
  color: var(--pass);
}

.cz .is-fail .mark,
.cz .got {
  color: var(--fail);
}

.cz .call,
.cz .expect,
.cz .got {
  font-family: var(--mono);
  overflow-wrap: anywhere;
}

.cz .expect {
  color: var(--muted);
}

.cz .printed {
  margin: 4px 0 0;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--soft);
  font: 12px / 1.5 var(--mono);
  white-space: pre-wrap;
}

/* The foot stays in reach: what the last Check found, and Check. */
.cz .foot {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-top: 1px solid var(--rule);
  background: var(--bg);
}

.cz .summary {
  flex: 1;
  margin: 0;
  font-size: 13px;
}

.cz .primary {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-fg);
  font-weight: 600;
}

.cz .primary:disabled {
  opacity: 0.6;
  cursor: default;
}

.cz .primary kbd {
  font: 12px var(--sans);
  opacity: 0.85;
}

/* The panel's own box: tall enough to keep Check at the foot of the screen. */
.practice-host {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.cz .practice {
  flex: 1;
  padding: 16px 16px 24px;
}

.cz .practice .switch {
  margin: 0 0 16px;
}

/* A level that has been cleared carries a star. */
.cz .levels .star {
  color: var(--gold);
}