/* The law pages: /law, /law/{code}, /law/{code}/{article} (lib/site_law.php). */
.site .lx-points { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; gap: var(--s2); color: var(--ink-2); font-size: 15px; }
.lx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s5); }
.site .lx-card { display: block; color: inherit; text-decoration: none; }
.site .lx-card h2 { font-size: 22px; margin: 0 0 var(--s2); }
.site .lx-card p { color: var(--ink-2); margin: 0; }
.site .lx-meta { display: block; margin-top: var(--s3); color: var(--ink-3); font-size: 14px; }

.lx-head { padding-bottom: var(--s6); margin-bottom: var(--s6); }
.lx-head > * { max-width: 900px; }
.lx-head h1 { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.2; margin: var(--s2) 0 var(--s3); overflow-wrap: anywhere; }
.site .lx-ext { font-size: 14px; color: var(--accent); }

.site .lx-toc h2 { margin-bottom: var(--s4); }
/* The filter of the contents stays at the top of the screen while the list scrolls. */
.lx-filter { position: sticky; top: 68px; z-index: 5; margin: 0 calc(-1 * var(--s5)) var(--s4); padding: var(--s3) var(--s5); background: var(--surface); border-bottom: 1px solid var(--line); }
.lx-filter .lw-input { width: 100%; font-size: 17px; }
.site .lx-filter-status { margin-top: var(--s2); font-size: 13px; color: var(--ink-3); min-height: 1.4em; }
.lx-filter-status:empty { display: none; }
.lx-toc-list mark { background: var(--mark); color: inherit; border-radius: 2px; padding: 0 1px; }
.lx-toc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); font-size: 15px; color: var(--ink-2); }
.lx-node { margin-top: var(--s4); font-weight: 600; color: var(--ink); }
.lx-node-0 { font-size: 21px; font-weight: 300; letter-spacing: -.02em; }
.lx-node-1 { font-size: 17px; }
.lx-node-2, .lx-node-3 { font-size: 15px; }
.lx-art a { font-weight: 600; color: var(--accent); text-decoration: none; white-space: nowrap; }
/* The whole row opens the article: the link covers the row. Only «Стаття N»
   is underlined. */
.lx-art { position: relative; }
.lx-art a::after { content: ""; position: absolute; inset: -3px 0; }
.lx-art:hover a { text-decoration: underline; }
.lx-art-off, .lx-art-off a { color: var(--ink-3); font-weight: 400; }

.site .lx-text p { color: var(--ink); font-size: 16px; line-height: 1.65; margin: 0 0 var(--s3); }
.site .lx-text p.lx-note { color: var(--ink-3); font-size: 14px; font-style: italic; }
/* A citation of another article (site_law::refs()): a link that does not
   break the reading of the text. */
.site a.lx-ref { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.site a.lx-ref:hover { color: var(--accent); text-decoration-color: currentColor; }
.site .lx-source { margin-top: var(--s4); color: var(--ink-3); font-size: 13px; }
.site .lx-source a { color: var(--accent); }
.site .lx-caution { padding: var(--s3) var(--s4); border-left: 3px solid var(--warn); background: var(--warn-soft); font-size: 15px; color: var(--ink); }
/* On a code page the note stands between the head and the contents card. */
.site .lx-caution + .lx-toc { margin-top: var(--s4); }

.lx-pos-list { margin: var(--s4) 0 0; padding-left: var(--s5); display: grid; gap: var(--s4); }
.site .lx-pos-title { color: var(--ink); font-size: 15px; margin: 0 0 var(--s1); }
.site .lx-pos-meta { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); color: var(--ink-3); font-size: 13px; margin: 0; }
.lx-pos-meta a { color: var(--accent); }

.lx-date { display: grid; gap: var(--s3); }
.lx-ver-list { margin: var(--s4) 0 0; padding-left: 0; list-style: none; display: grid; gap: var(--s3); font-size: 14px; color: var(--ink-2); }
.lx-ver-list li { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); align-items: baseline; }
.lx-ver-list li[aria-current] .lx-ver-date { font-weight: 700; color: var(--ink); }
.lx-ver-date { font-weight: 600; }
.lx-ver-act, .lx-ver-first { display: block; width: 100%; color: var(--ink-3); font-size: 13px; }
/* The span of a version is the link to its text; the version on screen is not a link. */
.site a.lx-ver-date { color: var(--ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.site a.lx-ver-date:hover { color: var(--accent); text-decoration-color: currentColor; }

.lx-pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3); font-size: 15px; }
.lx-pager a { color: var(--accent); text-decoration: none; }
.lx-pager a:hover { text-decoration: underline; }

/* A calculator of the site that applies an article (site_law::TOOLS): a
   banner above the text, a tag in the contents, a list on /law. */
/* The calculator of the article: the first card of the sidebar. */
.site .lx-tool { display: flex; flex-direction: column; gap: var(--s1); padding: var(--s4) var(--s5); text-decoration: none; color: inherit; }
.site .lx-tool span { color: var(--ink-2); font-size: 14px; }
.site .lx-tool strong { color: var(--accent); font-weight: 600; }
.site .lx-tool:hover strong { text-decoration: underline; }
.site .lx-tool-tag { display: inline-block; margin-left: 6px; padding: 0 8px; border: 1px solid var(--accent); border-radius: 999px; font-size: 12px; line-height: 1.6; color: var(--accent); text-decoration: none; vertical-align: 1px; }
.site .lx-tool-tag:hover { background: var(--accent); color: var(--bg); }
/* A long register status wraps inside the card; a pill of one line ran past its edge. */
.site .lx-card-status { display: inline-block; max-width: 100%; margin-top: var(--s3); white-space: normal; line-height: 1.35; padding-block: 4px; border-radius: 10px; }
.site .lx-tools h2 { font-size: 28px; margin: 0 0 var(--s2); }
.lx-tools-list { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: var(--s3); }
.lx-tools-list li { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: var(--s1) var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line); font-size: 15px; }
.site .lx-tools-list a { color: var(--accent); text-decoration: none; }
.site .lx-tools-list a:hover { text-decoration: underline; }
.site .lx-tools-name { font-weight: 600; }
@media (max-width: 640px) { .lx-tools-list li { grid-template-columns: minmax(0, 1fr); } }