/*
  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(--blue);
    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: 28px 0 10px;
    color: var(--navy);
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.topic-list a,
.rule-related a {
    text-decoration: none;
    color: var(--ink);
}
.topic-list a:hover,
.rule-related a:hover {
    color: var(--blue);
}
.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;
    }
}

/*
 * Air between the Skatteverket note and the footer.
 *
 * `.note` ends with 22px of margin from bw.css, which is right between two
 * blocks on a page and cramped against the footer: the footer is a full-bleed
 * navy band, so the cream box appeared to be sitting ON it rather than above
 * it. The page's own bottom padding separates them, which leaves `.note`
 * alone — the manual and the landing page use that class too.
 */
main {
    padding-bottom: 56px;
}

@media (max-width: 620px) {
    main {
        padding-bottom: 36px;
    }
}