/* =========================================================
   /developers/standards/library/ — the V2X standards catalogue
   Ships only on the routes that carry a catalogue block. Uses
   the site's existing tokens and adds no font and no image.

   Two things this file is deliberately careful about, because
   the catalogue is a reference document people read on a phone
   at a desk and with a screen reader:

     * status is never carried by colour alone — every chip
       carries its own words, and the colour is decoration;
     * the record field list is a <dl> that reflows to one
       column on a narrow screen rather than a table that
       scrolls sideways.
   ========================================================= */

.sl-stamp {
  font-size: 13px;
  color: var(--brand-grey);
  margin: 0 0 22px;
}
.sl-note {
  font-size: 14.5px;
  color: var(--brand-grey);
  max-width: 880px;
  margin: 0 0 22px;
  line-height: 1.65;
}

/* --- facets ---------------------------------------------- */
.sl-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(208px, 1fr));
  gap: 14px 18px;
  align-items: end;
  padding: 20px;
  background: var(--brand-soft);
  border-radius: 3px;
  margin-bottom: 18px;
}
.sl-facet { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sl-facet label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brand-grey);
}
.sl-facet select,
.sl-facet input[type="search"] {
  font: inherit;
  font-size: 14px;
  line-height: 1.3;
  color: var(--brand-dark);
  background: #fff;
  border: 1px solid #dfe2e4;
  border-radius: 2px;
  padding: 9px 10px;
  width: 100%;
  min-width: 0;
}
.sl-facet-search { grid-column: 1 / -1; }
.sl-reset {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-dark);
  background: #fff;
  border: 1px solid #dfe2e4;
  border-radius: 2px;
  padding: 9px 14px;
  cursor: pointer;
  align-self: end;
  justify-self: start;
}
.sl-reset:hover { border-color: var(--brand-red); color: var(--brand-red); }

.sl-status {
  font-size: 13px;
  color: var(--brand-grey);
  margin: 0 0 18px;
  min-height: 1.2em;
}
.sl-empty {
  font-size: 15px;
  color: var(--brand-dark);
  margin: 24px 0 0;
}

/* --- records --------------------------------------------- */
.sl-records {
  display: grid;
  gap: 18px;
}
.sl-record {
  border: 1px solid var(--brand-soft);
  border-left: 3px solid var(--brand-red);
  border-radius: 3px;
  padding: 22px 24px;
  background: #fff;
  /* The anchor is the citable address of the record, so a jump from a country
     page must not land it under the sticky header. */
  scroll-margin-top: 96px;
}
.sl-record[hidden] { display: none; }

.sl-heading {
  font-size: 17px;
  line-height: 1.35;
  margin: 0 0 6px;
}
.sl-docid {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  color: var(--brand-red);
  display: block;
  margin-bottom: 3px;
}
.sl-name { font-weight: 700; color: var(--brand-dark); }
.sl-original {
  font-size: 14px;
  color: var(--brand-grey);
  margin: 0 0 10px;
}

.sl-chips { margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.sl-chip {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 2px;
  background: var(--brand-soft);
  color: var(--brand-dark);
}
/* Decoration only. Each chip already says what it is in words. */
.sl-chip-status-published-final { background: var(--secure-green-soft); color: #1F6437; }
.sl-chip-status-draft-consultation { background: var(--secure-amber-soft); color: #8A5600; }
.sl-chip-status-superseded,
.sl-chip-status-historical { background: var(--brand-soft); color: var(--brand-grey); }
.sl-chip-status-unverified { background: #FDECEC; color: var(--brand-red-dark); }
.sl-chip-binding { background: var(--secure-cyan-soft); color: var(--secure-cyan-dark); }

.sl-summary {
  margin: 0 0 12px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--brand-dark);
}
.sl-pc5 {
  margin: 0 0 14px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--brand-dark);
  background: var(--brand-soft);
  border-radius: 2px;
  padding: 12px 14px;
}
.sl-pc5 span {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--brand-grey);
  margin-bottom: 4px;
}

.sl-fields {
  margin: 0 0 14px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px 22px;
  font-size: 14px;
}
.sl-fields dt {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--brand-grey);
}
.sl-fields dd {
  margin: 2px 0 0;
  color: var(--brand-dark);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.sl-unknown {
  color: var(--brand-grey);
  font-style: italic;
}

.sl-verify { margin: 0 0 12px; }
.sl-verify summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-grey);
}
.sl-verify summary:hover { color: var(--brand-red); }
.sl-verify p {
  margin: 10px 0 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--brand-grey);
  border-left: 2px solid var(--brand-soft);
  padding-left: 14px;
}

.sl-source { margin: 0; font-size: 14px; }
.sl-source a { font-weight: 600; }

/* --- jurisdiction index ---------------------------------- */
.sl-jurisdictions {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px 20px;
}
.sl-jurisdictions li {
  font-size: 15px;
  padding: 10px 0;
  border-bottom: 1px solid var(--brand-soft);
}
.sl-count {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  color: var(--brand-grey);
  float: right;
}

/* --- focus ------------------------------------------------ */
.sl-facet select:focus-visible,
.sl-facet input:focus-visible,
.sl-reset:focus-visible,
.sl-verify summary:focus-visible {
  outline: 2px solid var(--brand-red);
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .sl-controls { padding: 16px; gap: 12px; }
  .sl-record { padding: 18px 16px; }
  .sl-heading { font-size: 16px; }
  .sl-fields { grid-template-columns: 1fr; }
  .sl-jurisdictions { grid-template-columns: 1fr; }
}