/* Generated by scripts/docs_css.py from web/src/app.css. Do not edit:
   change app.css and run the script again. */

/* The app's values for the tokens these rules read. */
:root {
  --ink-2: #434b55;
  --bg: #ffffff;
  --bg-3: #eef0f3;
  --accent-2: #1c4887;
  --accent-bg: #e9f0fa;
  --pass: #23683a;
  --pass-bg: #e3f1e6;
  --fail: #a3342a;
  --fail-bg: #fbe6e3;
  --partial: #23683a;
  --untested: #59626d;
  --untested-bg: #eceff2;
  --none: #6b737d;
  --review: #8a5800;
  --review-bg: #fdf2d9;
}

/* Cites carry status. Shape = kind (rectangle requirement, pill verification
   or run); fill = status. Each status also has a non-colour cue: hatched =
   fail, half-filled = partial pass, flat tint = pass, grey = untested,
   dashed = no coverage. */
.cite {
  display: inline-block;
  flex-shrink: 0;
  font: 500 0.75rem/1.125rem ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  padding: 0 0.375rem;
  border: 1px solid transparent;
  border-radius: 4px;
  white-space: nowrap;
  color: #434b55;
  background: #eceff2;
  text-decoration: none;
}

.cite.verif {
  border-radius: 999px;
  padding: 0 0.5rem;
}

.cite.word {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.125rem;
}

.cite.st-fail {
  background: repeating-linear-gradient(135deg, #fbe6e3 0 4px, #f3cdc7 4px 6px);
  border-color: #d08077;
  color: #8f2a21;
}

.cite.st-partial {
  background: linear-gradient(90deg, #cfe7d5 50%, #fff 50%);
  border-color: #7fb38e;
  color: #1f5c33;
}

.cite.st-pass {
  background: #e3f1e6;
  border-color: #7fb38e;
  color: #1f5c33;
}

.cite.st-untested {
  background: #eceff2;
  border-color: transparent;
  color: #4d5560;
}

.cite.st-none {
  background: #fff;
  border: 1px dashed #959da7;
  color: #5d6570;
}

.cite.neutral {
  background: #fff;
  border-color: #d6dae0;
  color: #434b55;
}

/* Selected: the solid version of its own status. */
.cite.selected.st-fail {
  background: #a3342a;
  border-color: #a3342a;
  color: #fff;
}

.cite.selected.st-pass {
  background: #2f7a47;
  border-color: #2f7a47;
  color: #fff;
}

.cite.selected.st-partial {
  background: linear-gradient(90deg, #2f7a47 50%, #fff 50%);
  border-color: #2f7a47;
  box-shadow: inset 0 0 0 1px #2f7a47;
  color: #13300f;
  font-weight: 700;
  text-shadow: 0 0 2px #fff, 0 0 2px #fff;
}

.cite.selected.st-untested {
  background: #5d6570;
  border-color: #5d6570;
  color: #fff;
}

.cite.selected.st-none {
  border: 1px dashed #1b1f24;
  color: #1b1f24;
  font-weight: 700;
}

.cite.selected.neutral {
  background: #1b1f24;
  border-color: #1b1f24;
  color: #fff;
}

.cite.old {
  opacity: 0.5;
}

a.cite:hover {
  border-color: #1b1f24;
  text-decoration: none;
}

/* Needs review (#114): a notch in the top right corner, over the status
   fill, which it never changes. Paler when the flag comes only from below.
   On a selected (solid) cite a white edge keeps it visible. Requirement
   cites only; the tooltip and the filter chip say it in words. */
.cite.review,
.cite.review-below {
  position: relative;
}

.cite.review::after,
.cite.review-below::after,
.cite.selected.review::before,
.cite.selected.review-below::before {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  border-style: solid;
  border-width: 0 8px 8px 0;
  border-color: transparent #c98a12 transparent transparent;
  border-top-right-radius: 4px;
  pointer-events: none;
}

.cite.review-below::after {
  border-right-color: #e6c27a;
}

.cite.selected.review::before,
.cite.selected.review-below::before {
  border-width: 0 10px 10px 0;
  border-right-color: #fff;
}

/* The Needs review chip and tally: a word tag in the notch's colours. */
.cite.st-review {
  background: #fdf2d9;
  border-color: #d9a640;
  color: #7a4e00;
}

/* Quoted text belonging to a row: a mapping's note, a run's note. */
.note {
  margin: 0.35rem 0 0 0.1rem;
  padding-left: 0.65rem;
  border-left: 2px solid #d6dae0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: #434b55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.note-label {
  display: inline-block;
  margin-right: 0.45rem;
  color: #858d97;
  font-size: 0.6875rem;
  white-space: nowrap;
}

/* Written text (RichText.svelte). Inline code sits on a light ground. */
.rt-code {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875em;
  padding: 0 0.2em;
  border-radius: 3px;
  background: #eef0f3;
}

/* A cite in running text: the same shape and fill as any cite, quieter
   because it is part of a sentence. No border, except where the border is
   the cue (dashed No coverage, a list code's outline). */
.cite.inline {
  font-size: 0.9em;
  line-height: inherit;
  padding: 0 0.25em;
  border-color: transparent;
  vertical-align: baseline;
}

.cite.inline.st-none {
  border-color: #959da7;
}

.cite.inline.neutral {
  border-color: #e3e6ea;
}

a.cite.inline:hover {
  border-color: #1b1f24;
}

/* Status in words with a shape that does not need colour: a filled check
   for pass, a cross for fail, a half disc for partial pass, an empty ring
   for untested and a dashed ring for no coverage (Badge.svelte). */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.05rem 0.5rem 0.05rem 0.35rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.125rem;
  white-space: nowrap;
}

.badge.lg {
  padding: 0.2rem 0.7rem 0.2rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.badge.b-pass {
  background: var(--pass-bg);
  color: var(--pass);
}

.badge.b-partial {
  background: var(--pass-bg);
  color: var(--partial);
}

.badge.b-fail {
  background: var(--fail-bg);
  color: var(--fail);
}

.badge.b-untested {
  background: var(--untested-bg);
  color: var(--untested);
}

.badge.b-none {
  background: var(--bg);
  box-shadow: inset 0 0 0 1px #c4cad1;
  color: var(--none);
}

.badge.b-review {
  background: var(--review-bg);
  color: var(--review);
}

.badge.b-live {
  background: var(--accent-bg);
  color: var(--accent-2);
}

.badge.b-neutral {
  background: var(--bg-3);
  color: var(--ink-2);
}

.badge.old {
  opacity: 0.55;
}

/* A status's fill with no id in it: the key beside a count in a legend,
   drawn as the tree draws that status (st-pass, st-fail and so on). */
.cite.swatch {
  box-sizing: border-box;
  width: 1.1rem;
  height: 0.75rem;
  padding: 0;
  border-radius: 3px;
}