/*
  Topic pages only. bw.css owns the frame; this owns a quoted passage.
  Its one rule holds here too: no hue — black, white, and the two greys.
*/

/* A passage and its citation. The citation sits ABOVE the text rather than
   under it: on a page reproducing a public authority, knowing which document
   and page you are reading is what makes the words worth anything, and a
   reader who scrolls past the source has already read unattributed text. */
.rule {
    border-top: 1px solid var(--hair);
    padding: 22px 0;
}
.rule:last-of-type {
    border-bottom: 1px solid var(--hair);
}
.rule-src {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--faint);
    margin-bottom: 8px;
}
.rule-text {
    max-width: 68ch;
    white-space: pre-wrap;
    color: var(--muted);
    margin: 0;
}

.rule-search {
    font-size: 0.85rem;
    margin-top: 4px;
}

/* Siblings from the same publication. Internal links are how 141 pages get
   crawled at all — a sitemap tells a robot the URLs exist, links tell it they
   are worth reaching, and a reader who wanted one section usually wants its
   neighbours. */
.rule-related {
    margin-top: 34px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}
.rule-related h2 {
    font-size: 0.95rem;
    margin-bottom: 10px;
}
.rule-related ul {
    list-style: none;
    margin: 0 0 12px;
    max-width: none;
    columns: 2;
    column-gap: 34px;
}
.rule-related li {
    margin-bottom: 4px;
    break-inside: avoid;
    font-size: 0.9rem;
}

/* The index on /regler/ itself. */
.topic-index {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}
.topic-index h3 {
    margin: 22px 0 8px;
    color: var(--faint);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.topic-list {
    list-style: none;
    margin: 0;
    max-width: none;
    columns: 2;
    column-gap: 34px;
}
.topic-list li {
    margin-bottom: 4px;
    break-inside: avoid;
    font-size: 0.9rem;
}

@media (max-width: 620px) {
    .rule-related ul,
    .topic-list {
        columns: 1;
    }
}