/* SPDX-License-Identifier: AGPL-3.0-only
 * SPDX-FileCopyrightText: 2021-2026 DALICC - Verein zur Foerderung der Rechtssicherheit in der Datenbewirtschaftung (ZVR 1249185710)
 */
/* DALICC site: the tool pages.
 *
 * Loaded by /license-compatibility-checker, /license-comparator, /dependency-graph and
 * /github-license-compatibility-checker on top of site.css + components.css. It only adds
 * classes; it does not restyle any component of the foundation, with the two
 * documented exceptions at the end of this file.
 *
 * Every colour is a token from site.css. Sections:
 *   1. shared tool furniture      .tool-subhead .tool-actions .verdict .conflict-list
 *   2. the mixer                  .bundle .target-block .statement-list
 *   3. the comparator             .cmp .cmp-dialog .chip-list
 *   4. the dependency graph       .dg-*
 *   5. the GitHub checker         .ghc-*
 *   6. the error pages            .error-*
 *   7. print + narrow screens
 */

/* ================================================== 1. shared tool furniture */

.tool-subhead {
  font-size: 20px;
  margin: 26px 0 12px;
  color: var(--c-slate);
}

.tool-subhead:first-child {
  margin-top: 0;
}

.tool-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 20px 0 8px;
}

.tool-actions--spread {
  justify-content: space-between;
}

.tool-actions__form {
  margin: 0;
}

.tool-footnote {
  margin-top: 28px;
  font-size: 16px;
  color: var(--c-ink-soft);
}

.tool-footnote a {
  word-break: break-word;
}

.text-muted {
  color: var(--c-ink-soft);
}

/* A disabled-looking link: <a> cannot take the disabled attribute, and site.css
   already paints .btn[aria-disabled="true"]; this only adds the ghost variant's
   border colour and stops the click. */
.btn.btn--disabled {
  border-color: var(--c-pale-blue);
  pointer-events: none;
}

/* ----------------------------------------------------------- the verdict line */

.verdict {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 19px;
  margin: 0 0 16px;
}

.verdict__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: var(--radius);
  color: var(--c-white);
  font-size: 17px;
  line-height: 1;
}

.verdict--ok .verdict__mark {
  background: var(--c-green);
}

.verdict--bad .verdict__mark {
  background: var(--c-red);
}

/* The four answers of a compatibility check (mixer, target step, GitHub checker) in
   the tones of the flash messages, frame and wash alike, so "Cannot be combined" no
   longer looks like an all-clear: error for cannot, warning for restricted, ok for
   clear, info for a single licence. The text stays Ledger Ink (15:1 or more on every
   wash). */
.verdict--cannot,
.verdict--restricted,
.verdict--clear,
.verdict--single {
  padding: 12px 16px;
  border: 1px solid var(--color-border-strong);
  color: var(--color-text);
}

.verdict--cannot {
  border-color: var(--color-accent);
  background: var(--color-alert-surface);
}

.verdict--restricted {
  border-color: var(--color-warn);
  background: var(--color-warn-surface);
}

/* Ink on the amber mark: white on it would be 2.72:1, ink is 6.46:1. */
.verdict--restricted .verdict__mark {
  background: var(--color-warn);
  color: var(--color-text);
}

.verdict--clear {
  border-color: var(--color-action);
  background: var(--color-ok-surface);
}

.verdict--single {
  background: var(--color-band);
}

/* --------------------------------------------------------------- conflicts */

.conflict-list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  border: 1px solid var(--c-rule-strong);
}

.conflict {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  padding: 12px 16px;
  border-bottom: 1px solid var(--c-rule);
  font-size: 17px;
}

.conflict:last-child {
  border-bottom: 0;
}

.conflict:nth-child(even) {
  background: var(--c-surface-alt);
}

.conflict__kind {
  flex: 0 0 auto;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: var(--radius);
  background: var(--c-slate-muted);
  color: var(--c-white);
}

.conflict--derived .conflict__kind {
  background: var(--c-slate);
}

.conflict--asset .conflict__kind {
  background: var(--c-slate-mid);
}

.conflict__text {
  flex: 1 1 260px;
}

.statement-list {
  margin: 0 0 18px;
  padding-left: 1.3em;
}

.statement-list li {
  font-size: 17px;
}

/* ============================================================= 2. the mixer */

.bundle {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  border: 1px solid var(--c-rule-strong);
}

.bundle__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--c-rule);
}

.bundle__row:last-child {
  border-bottom: 0;
}

.bundle__details {
  flex: 1 1 260px;
}

.bundle__summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
}

.bundle__summary::-webkit-details-marker {
  display: none;
}

.bundle__sign {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border-radius: 50%;
  background: var(--c-slate);
}

.bundle__sign::before,
.bundle__sign::after {
  content: "";
  position: absolute;
  background: var(--c-white);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.bundle__sign::before {
  width: 10px;
  height: 2px;
}

.bundle__sign::after {
  width: 2px;
  height: 10px;
}

.bundle__details[open] > .bundle__summary .bundle__sign::after {
  display: none;
}

.bundle__title {
  font-weight: 600;
}

.bundle__id {
  font-size: 15px;
  color: var(--c-ink-soft);
  font-family: var(--font-mono);
}

.bundle__body {
  padding: 0 16px 16px 46px;
}

.bundle__links {
  margin: 8px 0 0;
  font-size: 16px;
}

.bundle__remove {
  flex: 0 0 auto;
  padding: 12px 16px;
  color: var(--c-red);
  font-size: 16px;
  white-space: nowrap;
}

.bundle__empty {
  padding: 14px 16px;
  border: 1px dashed var(--c-rule-strong);
  color: var(--c-ink-soft);
  margin: 0 0 16px;
}

.factlist {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 16px;
  margin: 0;
  font-size: 16px;
}

.factlist dt {
  font-weight: 600;
  color: var(--c-slate);
}

.factlist dd {
  margin: 0;
}

.target-block {
  margin-top: 22px;
  border-top: 2px dotted var(--c-rule-strong);
  padding-top: 18px;
}

.target-block__body[data-mixer-collapsed="true"] {
  display: none;
}

.field--inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.field--inline label {
  margin: 0;
  font-weight: 600;
}

.field--inline select {
  flex: 1 1 260px;
  max-width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--c-rule-strong);
  border-radius: var(--radius);
  background: var(--c-white);
  font-family: inherit;
  font-size: 17px;
  color: var(--c-ink);
}

.field--inline select:disabled {
  background: var(--c-surface-alt);
  color: var(--c-slate-muted);
}

/* ======================================================== 3. the comparator */

.chip-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  margin: 0;
  border: 1px solid var(--c-rule-strong);
  border-radius: var(--radius);
  background: var(--c-surface-alt);
  font-size: 15px;
}

.chip__name {
  padding: 5px 4px 5px 10px;
  color: var(--c-slate);
  font-family: var(--font-mono);
}

.chip__remove {
  padding: 5px 10px;
  color: var(--c-red);
  font-size: 18px;
  line-height: 1;
}

.cmp-scroll {
  border: 1px solid var(--c-rule-strong);
}

table.cmp {
  font-size: 16px;
  border-collapse: separate;
  border-spacing: 0;
  /* Contains the absolutely positioned .visually-hidden cell alternatives and the
     caption. Without a positioned ancestor they resolve against the viewport, are
     laid out at their static position inside the wide table, and push the whole
     document sideways instead of scrolling inside .table-scroll. */
  position: relative;
}

.cmp__cell,
.cmp__gutter {
  position: relative;
}

.cmp th,
.cmp td {
  border-bottom: 1px solid var(--c-rule);
  vertical-align: middle;
}

.cmp thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--c-slate);
  color: var(--c-white);
  font-size: 15px;
  letter-spacing: 0.02em;
  vertical-align: bottom;
}

.cmp thead th a {
  color: var(--c-white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cmp__gutter {
  width: 28px;
  min-width: 28px;
  padding: 6px 0 6px 6px;
  text-align: center;
}

.cmp__question {
  min-width: 230px;
  font-weight: 600;
  color: var(--c-ink);
  text-align: left;
}

/* site.css uppercases every `thead th` in the display face. License titles are
   long proper names ("Apache License, Version 2.0") and the original comparator
   set them in sentence case, so this one band opts out. */
.cmp thead th.cmp__licence {
  min-width: 150px;
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

.cmp tbody th.cmp__question,
.cmp td.cmp__gutter {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--c-white);
}

.cmp tbody th.cmp__question {
  left: 28px;
  box-shadow: 1px 0 0 var(--c-rule);
}

.cmp tbody tr:nth-child(even) th.cmp__question,
.cmp tbody tr:nth-child(even) td.cmp__gutter,
.cmp tbody tr:nth-child(even) td {
  background: var(--c-surface-alt);
}

.cmp__group th {
  background: var(--c-slate-muted);
  color: var(--c-white);
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: normal;
  letter-spacing: 0.04em;
  padding: 7px 14px;
  position: sticky;
  left: 0;
  z-index: 2;
}

.cmp__question--i1 {
  padding-left: 30px;
}

.cmp__connector {
  color: var(--c-slate-muted);
  margin-right: 4px;
  font-weight: normal;
}

.cmp__label {
  margin-right: 2px;
}

.cmp__cell {
  text-align: center;
  white-space: nowrap;
}

.cmp__cell--text {
  text-align: left;
  white-space: normal;
  font-weight: 600;
  color: var(--c-slate);
}

.cmp__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius);
  color: var(--c-white);
  font-size: 14px;
  line-height: 1;
}

.cmp__mark--yes {
  background: var(--c-green);
}

.cmp__mark--no {
  background: var(--c-red);
}

.cmp__mark--na {
  background: var(--c-pale-blue);
  color: var(--c-slate);
}

.cmp__bolt {
  color: var(--c-red);
  font-size: 15px;
}

.cmp-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  align-items: center;
  font-size: 15px;
  color: var(--c-ink-soft);
  margin: 0 0 22px;
}

.cmp-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* The "?" in the question column links to the glossary under the table rather
   than opening a tooltip: the table is inside an overflow container, which would
   clip a floating bubble. */
/* 24px, the smallest target WCAG 2.5.8 allows without spacing: at 17px the circles
   of neighbouring rows overlapped. */
.cmp__what {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--c-rule-strong);
  color: var(--c-slate-muted);
  font-size: var(--size-label-small);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

.cmp__what:hover,
.cmp__what:focus-visible {
  background: var(--c-slate);
  border-color: var(--c-slate);
  color: var(--c-white);
  text-decoration: none;
}

.cmp-glossary {
  display: grid;
  grid-template-columns: minmax(160px, max-content) 1fr;
  gap: 6px 22px;
  margin: 0 0 24px;
  font-size: 16px;
}

.cmp-glossary dt {
  font-weight: 600;
  color: var(--c-slate);
  scroll-margin-top: 90px;
}

.cmp-glossary dt:target {
  background: var(--c-peach);
}

.cmp-glossary dd {
  margin: 0;
  color: var(--c-ink-soft);
}

/* ---------------------------------------------------- the comparator dialog */

.cmp-dialog {
  width: min(1180px, 94vw);
  max-width: 94vw;
  max-height: 90vh;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--c-white);
  color: var(--c-ink);
  overflow: hidden;
}

.cmp-dialog::backdrop {
  background: var(--scrim-strong);
}

.cmp-dialog__bar {
  height: 18px;
  background: var(--c-red);
}

.cmp-dialog__body {
  padding: 22px 24px 4px;
  overflow: auto;
  max-height: calc(90vh - 110px);
}

.cmp-dialog__body .cmp-scroll {
  max-height: none;
}

.cmp-dialog__actions {
  padding: 14px 24px 20px;
  border-top: 1px solid var(--c-rule);
}

/* =================================================== 4. the dependency graph */

.dg-figure {
  margin: 0 0 30px;
}

.dg-canvas {
  border: 1px solid var(--c-rule-strong);
  background: var(--c-surface-alt);
  min-height: 320px;
  padding: 8px;
}

.dg-canvas svg {
  display: block;
  width: 100%;
  height: auto;
}

.dg-node {
  fill: var(--c-white);
  stroke: var(--c-slate);
  stroke-width: 1.5;
}

.dg-node-label {
  font-family: var(--font-body);
  font-size: 11px;
  fill: var(--c-slate);
}

.dg-legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 12px 0 0;
  padding: 0;
  font-size: 15px;
  font-family: var(--font-mono);
  color: var(--c-ink-soft);
}

.dg-legend li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
}

.dg-legend__swatch {
  display: inline-block;
  width: 16px;
  height: 4px;
  border-radius: 2px;
  background: var(--c-slate);
}

.dg-legend__swatch--includedin {
  background: var(--c-green);
}

.dg-legend__swatch--implies {
  background: var(--c-red);
}

.dg-legend__swatch--sameas {
  background: var(--c-slate);
}

.dg-legend__swatch--contradicts {
  background: var(--c-red-dark);
}

.dg-count {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--c-ink-soft);
  text-transform: none;
  letter-spacing: 0;
}

.dg-definition {
  max-width: 68ch;
  color: var(--c-ink-soft);
}

.dg-curie {
  display: block;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--c-ink-soft);
  font-weight: normal;
}

.dg-relation {
  white-space: nowrap;
  color: var(--c-ink-soft);
}

.cmp-note {
  max-width: 68ch;
  color: var(--c-ink-soft);
  font-size: 15px;
}

/* One side of the finding came from a default rule and not from a licence text. */
.conflict__origin {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 12px;
  color: var(--c-ink-soft);
  border: 1px dashed var(--c-rule);
  border-radius: 3px;
  padding: 1px 6px;
  white-space: nowrap;
}

/* The default rules: the second kind of statement a dependency graph carries. */
.dg-table--rules td {
  vertical-align: top;
}

.dg-basis {
  max-width: 48ch;
  color: var(--c-ink-soft);
  font-size: 15px;
}

.dg-rule-state {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 12px;
  border-radius: 3px;
  padding: 1px 6px;
  white-space: nowrap;
}

.dg-rule-state--adopted {
  background: var(--c-slate);
  color: var(--c-white);
}

.dg-rule-state--proposed {
  border: 1px dashed var(--c-slate-muted);
  color: var(--c-slate-muted);
}

/* The plain explanation under a rule, on the graph pages, in the comparator and beside a
   finding a rule supplied. */
.dg-rule-explanation td {
  padding-top: 0;
  color: var(--c-ink-soft);
  font-size: 15px;
  border-top: 0;
}

.conflict__explanation {
  flex: 1 1 100%;
  margin: 2px 0 0;
}

/* A jurisdiction graph: what it adds, then its axioms folded. */
.dg-derived-line {
  font-size: 16px;
}

.dg-axioms > summary {
  cursor: pointer;
  list-style-position: outside;
}

.dg-axioms > summary h2 {
  display: inline;
}

.dg-picker__group {
  margin: 16px 0 4px;
  font-size: 17px;
}

/* The graph comparator. */
.dg-compare-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin: 16px 0;
}

.dg-compare-form select {
  max-width: 100%;
}

.dg-compare-summary {
  font-family: var(--font-display);
  font-size: 18px;
}

.dg-change {
  margin: 16px 0;
}

.dg-change__head {
  margin: 0 0 4px;
}

.dg-editor__explanation textarea {
  width: 100%;
}

/* ==================================================== 5. the GitHub checker */

.ghc-table th[scope="row"] {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
}

/* ======================================================== 6. the error pages */

.error-links {
  list-style: none;
  padding: 0;
  margin: 0 0 1.4em;
}

.error-links li {
  padding: 8px 0;
  border-bottom: 1px dotted var(--c-rule-strong);
}

.error-status {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--c-ink-soft);
}

/* ================================================= 7. print + narrow screens */

@media (max-width: 768px) {
  .cmp__question {
    min-width: 170px;
  }

  .bundle__body {
    padding-left: 16px;
  }

  .cmp-dialog {
    width: 100vw;
    max-width: 100vw;
    max-height: 100vh;
    height: 100vh;
  }

  .cmp-dialog__body {
    max-height: calc(100vh - 110px);
  }
}

@media (max-width: 604px) {
  .verdict {
    font-size: 17px;
  }

  .cmp-glossary {
    grid-template-columns: 1fr;
  }

  .cmp-glossary dt {
    margin-top: 8px;
  }

  .factlist {
    grid-template-columns: 1fr;
  }

  .factlist dt {
    margin-top: 6px;
  }

  .tool-actions .btn {
    flex: 1 1 100%;
    text-align: center;
  }

  /* The sticky question column took about 45 percent of a phone, so one licence
     column showed at a time. It is held to 38vw here and long words break. */
  .cmp__question {
    min-width: 0;
    width: 38vw;
    max-width: 150px;
    hyphens: auto;
    overflow-wrap: break-word;
  }

  .cmp th,
  .cmp td {
    padding: 8px 10px;
  }

  .cmp thead th.cmp__licence {
    min-width: 108px;
    hyphens: auto;
  }
}

@media (max-width: 450px) {
  .cmp__question {
    font-size: 15px;
  }

  .cmp__licence {
    min-width: 108px;
    font-size: 13px;
  }

  .cmp th,
  .cmp td {
    padding: 8px 8px;
  }

  .bundle__remove {
    padding-top: 0;
  }
}

@media print {
  .cmp-scroll {
    overflow: visible;
    border: 0;
  }

  .cmp thead th,
  .cmp__group th {
    position: static;
    background: var(--c-white) !important;
    color: var(--c-ink) !important;
    border-bottom: 2px solid var(--c-ink);
  }

  .cmp tbody th.cmp__question,
  .cmp td.cmp__gutter {
    position: static;
  }

  .cmp__mark {
    background: none !important;
    color: var(--c-ink) !important;
    border: 1px solid var(--c-ink);
  }

  .cmp-dialog,
  .chip-list,
  .library-search,
  .tool-actions {
    display: none !important;
  }
}