/* 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 license detail page, the faceted search and the composer.
 *
 * Loaded through the `head` block of those three templates only. It adds nothing
 * to site.css / components.css and overrides nothing in them: every selector below
 * is page-specific. Design tokens come from :root in site.css.
 */

/* ===================================================== license detail page */

.license-head h1 {
  margin-bottom: 8px;
}

.badge-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 4px;
  font-size: 16px;
}

.license-alternatives {
  color: var(--c-ink-soft);
  margin: 0 0 24px;
}

.ops {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border: 1px solid var(--c-rule-strong);
  background: var(--c-surface-alt);
  margin: 0 0 16px;
}

.ops__group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ops__label {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-slate-muted);
  font-size: 15px;
}

.uri-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 40px;
  font-size: 15px;
}

.uri-bar__label {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-slate-muted);
}

.uri {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--c-slate);
  background: var(--c-surface-alt);
  border: 1px solid var(--c-rule);
  padding: 3px 8px;
  word-break: break-all;
  max-width: 100%;
}

.license-section {
  margin: 0 0 40px;
}

.license-section h2 {
  border-bottom: 2px dotted var(--c-rule-strong);
  padding-bottom: 8px;
  margin-bottom: 18px;
}

.info-grid {
  display: grid;
  grid-template-columns: minmax(160px, 15rem) 1fr;
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--c-rule);
}

.info-grid dt {
  font-weight: 700;
  color: var(--c-slate);
  padding: 10px 14px 10px 0;
  border-bottom: 1px solid var(--c-rule);
}

.info-grid dd {
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--c-rule);
  min-width: 0;
  overflow-wrap: anywhere;
}

.info-grid dd svg {
  vertical-align: -2px;
  color: var(--c-slate-muted);
}

.rule-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rule {
  border: 1px solid var(--c-rule-strong);
  border-bottom: 0;
  background: var(--c-white);
  padding: 12px 16px;
}

.rule-list li:last-child {
  border-bottom: 1px solid var(--c-rule-strong);
}

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

.rule__label {
  font-weight: 700;
  color: var(--c-slate);
}

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

.rule__mark--permission {
  background: var(--c-green);
}

.rule__mark--prohibition {
  background: var(--c-red);
}

.rule__mark--duty {
  background: var(--c-slate-muted);
}

/* A statement no sentence of the licence makes: it comes from a default rule of the
   dependency graph, and it is drawn in outline so that it never passes for one the
   text states. */
.rule__mark--default {
  background: transparent;
  border: 2px dashed var(--c-slate-muted);
  color: var(--c-slate-muted);
}

.rule__origin {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 12px;
  color: var(--c-slate-muted);
  border: 1px solid var(--c-rule);
  border-radius: 3px;
  padding: 1px 6px;
}

.rule__reason {
  margin: 6px 0 0 32px;
  color: var(--c-ink-soft);
}

.rule__explanation {
  margin: 4px 0 0 32px;
  color: var(--c-ink-soft);
  font-size: 15px;
}

.rule__basis {
  margin: 4px 0 0 32px;
  color: var(--c-ink-soft);
  font-size: 15px;
}

.rule__basis-label {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 12px;
  color: var(--c-slate-muted);
  margin-right: 6px;
}

.rule__duties {
  margin: 12px 0 2px 32px;
  border-left: 3px solid var(--c-rule);
  padding-left: 14px;
}

.rule__duties-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-slate-muted);
  margin: 0 0 6px;
  font-size: 15px;
}

.rule__duties ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rule__duties li {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 4px 0;
}

.clause-text {
  white-space: pre-wrap;
  margin: 0;
  font-size: 17px;
}

.license-foot {
  font-size: 15px;
  margin: 40px 0 0;
}

/* ========================================== search + composer questionnaire */

.questionnaire {
  margin: 0 0 40px;
}

.questionnaire .collapsible {
  margin-bottom: 14px;
}

.questionnaire__hint {
  color: var(--c-slate-muted);
  font-size: 15px;
  margin: 0 0 16px;
}

.questionnaire__hint span {
  font-weight: 700;
  color: var(--c-slate);
}

.questionnaire__actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin: 24px 0 0;
}

.questionnaire__status {
  color: var(--c-slate-muted);
  font-size: 15px;
}

.checkbox-set,
.radio-set {
  border: 0;
  margin: 0 0 26px;
  padding: 0;
  min-width: 0;
}

.checkbox-set > legend,
.radio-set > legend {
  font-weight: 700;
  color: var(--c-slate);
  padding: 0;
  margin-bottom: 10px;
}

.checkbox-row,
.radio-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  /* `nowrap` plus a shrinkable label: a long option wraps inside its own label
     instead of pushing the whole label onto the next line. */
  flex-wrap: nowrap;
  padding: 4px 0;
}

.checkbox-row input,
.radio-row input {
  width: 20px;
  height: 20px;
  accent-color: var(--c-green);
  flex: 0 0 auto;
  margin: 3px 0 0;
}

.checkbox-row label,
.radio-row label {
  margin: 0;
  font-weight: 400;
  /* shrink, never grow: the "?" button stays right after the option text */
  flex: 0 1 auto;
  min-width: 0;
}

.checkbox-row .info,
.radio-row .info {
  flex: 0 0 auto;
  margin-top: 2px;
}

.checkbox-set .btn,
.radio-set .btn {
  margin-top: 10px;
}

.radio-children {
  margin: 4px 0 10px 28px;
  padding-left: 14px;
  border-left: 3px solid var(--c-rule);
}

.radio-children[hidden] {
  display: none;
}

.radio-children .field {
  margin-bottom: 12px;
}

.switch-note {
  margin: -6px 0 12px 0;
  color: var(--c-slate-muted);
  font-size: 15px;
  font-style: italic;
}

.switch-note--nested {
  margin-left: 40px;
}

.switch-note[data-excluded="true"] {
  color: var(--c-red-dark);
  font-style: normal;
  font-weight: 600;
}

.field--nested {
  margin-left: 40px;
}

.field--invalid input,
.field--invalid select,
.field--invalid textarea {
  border-color: var(--c-red);
}

.field .btn[data-clear-field] {
  margin-top: 8px;
}

.flash__list {
  margin: 6px 0 0;
  padding-left: 20px;
}

/* The questionnaire's switch rows sit closer together than the default.
   `padding-block` only -- the shorthand would cancel the 26px indent
   `.switch-row--nested` gives the nested sub-questions. */
.questionnaire .switch-row {
  padding-block: 5px;
}

/* ============================================================ search results */

.search-results {
  margin: 0 0 40px;
  scroll-margin-top: 24px;
}

.search-results__heading {
  border-bottom: 2px dotted var(--c-rule-strong);
  padding-bottom: 8px;
}

.license-card__conflicts {
  margin: 6px 0 0;
  color: var(--c-red-dark);
  font-size: 15px;
}

/* ================================================= composer resulting panel */

.resulting {
  margin: 36px 0 0;
}

.resulting h2 {
  border-bottom: 2px dotted var(--c-rule-strong);
  padding-bottom: 8px;
}

.resulting__panel {
  border: 1px solid var(--c-rule-strong);
  background: var(--c-surface-alt);
  padding: 18px 20px;
  margin: 0 0 20px;
}

.resulting__subhead {
  font-size: 20px;
  margin: 0 0 10px;
}

.resulting__panel > * + .resulting__subhead {
  margin-top: 22px;
}

.resulting__summary dl {
  display: grid;
  grid-template-columns: minmax(140px, 13rem) 1fr;
  margin: 0;
  border-top: 1px solid var(--c-rule);
}

.resulting__summary dt {
  font-weight: 700;
  color: var(--c-slate);
  padding: 8px 14px 8px 0;
  border-bottom: 1px solid var(--c-rule);
}

.resulting__summary dd {
  margin: 0;
  padding: 8px 0;
  border-bottom: 1px solid var(--c-rule);
  min-width: 0;
  overflow-wrap: anywhere;
}

.conflict-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

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

.conflict__kind {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 14px;
  color: var(--c-white);
  background: var(--c-red);
  padding: 1px 8px;
  flex: 0 0 auto;
}

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

.conflict-count {
  color: var(--c-red-dark);
  font-weight: 700;
  margin: 0 0 8px;
}

.conflict-ok {
  color: var(--c-green-active);
  font-weight: 700;
  margin: 0;
}

.g-recaptcha {
  margin: 0 0 18px;
}

/* ------------------------------------------------------------ breakpoints */

@media (max-width: 604px) {
  .info-grid,
  .resulting__summary dl {
    grid-template-columns: 1fr;
  }

  .info-grid dt,
  .resulting__summary dt {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .info-grid dd,
  .resulting__summary dd {
    padding-top: 2px;
  }

  .switch-note--nested,
  .field--nested {
    margin-left: 18px;
  }

  .rule__duties {
    margin-left: 10px;
  }
}

/* Below 604px the shared .switch-row wraps the label onto its own line, which makes the
   questionnaire two to three screens longer. Scoped to these pages only: keep the
   switch on its line and let the question wrap inside its own label instead. */
@media (max-width: 604px) {
  .questionnaire .switch-row {
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 10px;
  }

  .questionnaire .switch-row .switch3,
  .questionnaire .switch-row .switch2 {
    flex: 0 0 auto;
  }

  .questionnaire .switch-row .info {
    flex: 0 0 auto;
  }
}

@media (max-width: 450px) {
  .ops,
  .uri-bar {
    gap: 8px;
  }

  .ops .btn,
  .ops__group {
    width: 100%;
  }

  .ops__group .btn {
    flex: 1 1 auto;
  }
}

/* The composer's "provided under" picker renders its options as <button> so that
   choosing one fills the field instead of navigating; components.css styles the
   list for <a>. */
.autocomplete__option[type="button"] {
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

/* ============================================ the license page: port, review,
   and the License Annotator

   Three blocks the 2026 content review added to the license page: the banner that
   names the parent of a jurisdiction port, the box that says when the record was
   last checked against the license text, and the annotator, which hands out the
   machine-readable ways of saying "this work is under this license". */

.port-banner {
  margin: 8px 0 0;
  padding: 10px 14px;
  border-left: 4px solid var(--c-slate-muted);
  background: var(--c-surface-alt);
  font-size: 16px;
}

.port-banner .text-muted {
  display: block;
  font-size: 15px;
  margin-top: 4px;
}

.review-box {
  border: 1px solid var(--c-rule-strong);
  background: var(--c-surface-alt);
  padding: 18px 20px;
}

.review-box__summary {
  margin: 12px 0 18px;
}

.review-box__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 16px 0 0;
  font-size: 15px;
}

.finding-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.finding {
  border-bottom: 1px dotted var(--c-rule-strong);
  padding-bottom: 12px;
}

.finding:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.finding__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 4px;
  font-size: 15px;
}

.finding__rubric,
.finding__action {
  color: var(--c-slate-muted);
}

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

.annotator__form {
  display: grid;
  gap: 12px;
  max-width: 560px;
  margin: 0 0 24px;
}

.snippet {
  margin: 0 0 20px;
}

.snippet__head,
.snippet__sub {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 6px;
}

.snippet__label {
  font-weight: 700;
  color: var(--c-slate);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Code on Ledger Tint, as every other code block of the site: a dark panel was the
   one piece of "developer-tool darkness" DESIGN.md rejects. */
.snippet__body {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--size-label);
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre;
}

.annotator__badge {
  display: inline-block;
  vertical-align: middle;
}