/* The law reader inside the CRM record shell.

   lawz's workstation (the chart of publications, the contents column, a law set as a
   document, the change view, the side-by-side comparison) rebuilt on the shell's tokens
   (--att-*, --ent-*), so it follows the CRM themes instead of carrying its own. Classes are
   prefixed lw- so nothing here collides with the CRM's or Bootstrap's names. */

:root {
    --lw-add: #15803d;
    --lw-add-bg: rgba(21, 128, 61, .10);
    --lw-del: #b91c1c;
    --lw-del-bg: rgba(185, 28, 28, .09);
    --lw-warn: #b45309;
    --lw-focus: color-mix(in srgb, var(--ent-law) 12%, transparent);
    --lw-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
    --lw-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
}
[data-theme="carbon"] {
    --lw-add: #4ade80;
    --lw-add-bg: rgba(74, 222, 128, .12);
    --lw-del: #f87171;
    --lw-del-bg: rgba(248, 113, 113, .12);
    --lw-warn: #fbbf24;
}

.lw-muted { color: var(--att-muted, var(--text-muted)); }
.lw-p { color: var(--lw-add); }
.lw-m { color: var(--lw-del); }
.lw-label { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--att-muted); }
.lw-inline-form { display: inline-flex; margin: 0; }

/* ---------------------------------------------------------------- the Tekst pane fills the shell
   The reader scrolls inside itself (text beside its contents). Uporedi does not: it is one long
   page that the record's pane scrolls, with its navigation and the two version headers pinned
   on top, so the wheel moves it from anywhere and not only over the two columns. */
.att-pane.active[data-pane="tekst"] { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.att-pane.active[data-pane="uporedi"] { display: block; }

.lw-text, .lw-cmp { background: var(--att-surface); border: 1px solid var(--att-border); border-radius: 12px; }
.lw-text { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
/* clip, not hidden: hidden would make the box its own scroller and the pinned bars stop pinning */
.lw-cmp { overflow: clip; }

/* ---------------------------------------------------------------- publication flow */
.lw-chart { flex: none; border-bottom: 1px solid var(--att-border); background: var(--att-surface-2); }
.lw-chart-head { display: flex; align-items: center; gap: 8px; padding: 10px 16px 8px; flex-wrap: wrap; }
.lw-legend { margin-left: auto; display: flex; gap: 14px; font-size: 11px; color: var(--att-muted); flex-wrap: wrap; }
.lw-legend em { font-style: normal; display: inline-flex; align-items: center; gap: 5px; }
.lw-legend i { width: 9px; height: 9px; border-radius: 2px; display: block; }
.lw-legend .k-enact { background: var(--att-muted); }
.lw-legend .k-amend { background: var(--ent-gazette); }
.lw-legend .k-repeal { background: var(--lw-del); }
.lw-legend .k-add { background: var(--lw-add); }
.lw-legend .k-same { background: var(--att-border); }

.lw-flow { overflow-x: auto; overflow-y: hidden; padding: 2px 16px 12px; scrollbar-width: thin; }
.lw-track { display: flex; align-items: stretch; width: max-content; }
.lw-node {
    position: relative; flex: none; width: 168px; padding: 8px 11px 9px;
    border: 1px solid var(--att-border); border-radius: 9px; background: var(--att-surface);
    display: grid; gap: 2px; align-content: start; color: var(--att-text); text-decoration: none;
    transition: border-color .12s, box-shadow .12s;
}
.lw-node + .lw-node { margin-left: 28px; }
.lw-node + .lw-node::before { content: ""; position: absolute; left: -29px; top: 50%; width: 28px; height: 1px; background: var(--att-border); }
.lw-node::after { content: ""; position: absolute; left: -4px; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--att-muted); transform: translateY(-50%); }
.lw-node b { font: 600 12px/1.3 var(--lw-mono); }
.lw-node em { font-style: normal; font-size: 11px; color: var(--att-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lw-node .d { font: 500 11px/1.3 var(--lw-mono); color: var(--att-muted); }
.lw-node .d .p { color: var(--lw-add); }
.lw-node .d .m { color: var(--lw-del); }
.lw-node:hover { border-color: color-mix(in srgb, var(--ent-law) 50%, var(--att-border)); color: var(--att-text); text-decoration: none; }
.lw-node.fav { box-shadow: inset 0 -2px 0 var(--ent-workspace); }
.lw-node.on { background: var(--ent-law); border-color: var(--ent-law); }
.lw-node.on b, .lw-node.on em, .lw-node.on .d, .lw-node.on .d .p, .lw-node.on .d .m { color: #fff; }
.lw-node.on::after { background: #fff; }
.lw-chart.shut .lw-flow, .lw-chart.shut .lw-stage, .lw-chart.shut .lw-chart-tools { display: none; }
/* Every publication is one neutral colour; only the one being read is drawn in the accent. */
.lw-chart { --g-idle: #94a3b8; --g-on: var(--ent-law); --g-on-text: #fff; }
[data-theme="carbon"] .lw-chart { --g-idle: #475569; }
.lw-legend .k-on { background: var(--g-on); }
.lw-chart-tools { display: inline-flex; align-items: center; gap: 8px; }
.lw-graph-only { display: inline-flex; gap: 2px; }
.lw-chart[data-mode="kartice"] .lw-graph-only { display: none; }
.lw-tool {
    display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0;
    border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--att-muted); font-size: 16px; cursor: pointer;
}
.lw-tool:hover { color: var(--ent-law); background: color-mix(in srgb, var(--ent-law) 9%, transparent); border-color: color-mix(in srgb, var(--ent-law) 25%, transparent); }
.lw-chart-mode button { height: 28px; }
.lw-chart[data-mode="graf"] .lw-flow { display: none; }
.lw-chart[data-mode="kartice"] .lw-stage { display: none; }

/* ---- the graph (laws/graph.js): a camera over the chain of publications ---- */
.lw-stage {
    position: relative; height: 128px; margin: 0 16px 12px; overflow: hidden; touch-action: none; cursor: grab;
    border: 1px solid var(--att-border); border-radius: 10px;
    background:
        radial-gradient(circle, color-mix(in srgb, var(--att-muted) 22%, transparent) 1px, transparent 1.2px) 0 0 / 16px 16px,
        var(--att-surface);
}
.lw-stage:focus-visible { outline: 2px solid var(--ent-law); outline-offset: 2px; }
.lw-stage.dragging { cursor: grabbing; }
.lw-graph { display: block; width: 100%; height: 100%; user-select: none; }
.lw-g-edge { fill: none; stroke: color-mix(in srgb, var(--att-muted) 70%, transparent); stroke-width: 1.4; }
.lw-g-joint { fill: var(--att-surface); stroke: color-mix(in srgb, var(--att-muted) 80%, transparent); stroke-width: 1.2; }
.lw-g-node { cursor: pointer; outline: none; text-decoration: none !important; }
.lw-g-box { fill: var(--g-idle); transition: fill .15s, filter .15s; }
.lw-g-node:hover .lw-g-box { filter: brightness(1.12) saturate(1.1); }
.lw-g-node.on .lw-g-box { fill: var(--g-on); }
.lw-g-node.on text { fill: var(--g-on-text); }
.lw-g-node.on .lw-g-glyph { fill: var(--g-on-text); }
.lw-g-node.cursor:not(.on) .lw-g-box, .lw-g-node:focus-visible .lw-g-box { stroke: var(--att-text); stroke-width: 1.5; }
.lw-g-halo { fill: none; stroke: var(--g-on); stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.lw-g-node.on .lw-g-halo { opacity: 1; animation: lwHalo 1.8s ease-out infinite; }
@keyframes lwHalo { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.12); opacity: 0; } }
.lw-g-node text { fill: #fff; pointer-events: none; text-decoration: none; font-family: inherit; }
.lw-g-cit { font-size: 12.5px; font-weight: 700; letter-spacing: .01em; }
.lw-g-day { font-size: 10.5px; font-weight: 500; opacity: .88; }
.lw-g-tally { font-size: 11px; font-weight: 700; text-anchor: end; font-variant-numeric: tabular-nums; }
.lw-g-glyph { fill: rgba(255, 255, 255, .92); }
.lw-g-star { font-size: 12px; text-anchor: end; display: none; }
.lw-g-node.fav .lw-g-star { display: block; fill: #fbbf24; }
.lw-g-node.fav .lw-g-box { stroke: #fbbf24; stroke-width: 1.6; }
.lw-g-node, .lw-g-edge, .lw-g-joint { opacity: 0; animation: lwNodeIn .5s ease-out forwards; animation-delay: calc(min(var(--i), 12) * 45ms); }
.lw-g-edge, .lw-g-joint { animation-name: lwEdgeIn; }
@keyframes lwNodeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes lwEdgeIn { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .lw-g-node, .lw-g-edge, .lw-g-joint { animation: none; opacity: 1; }
    .lw-g-node.on .lw-g-halo { animation: none; }
}
.lw-chart.shut .lw-fold i { transform: rotate(-90deg); }

.lw-fold {
    display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
    border: 0; border-radius: 6px; background: transparent; color: var(--att-muted); cursor: pointer; font-size: 17px;
}
.lw-fold:hover { color: var(--att-text); background: var(--att-surface-2); }

/* ---------------------------------------------------------------- contents + text */
.lw-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 264px minmax(0, 1fr); }
.lw-outline { min-height: 0; display: flex; flex-direction: column; border-right: 1px solid var(--att-border); background: var(--att-surface); }
.lw-ohead { padding: 10px 12px 10px; display: grid; gap: 8px; border-bottom: 1px solid var(--att-border-2, var(--att-border)); }
.lw-ohead-row { display: flex; align-items: center; gap: 4px; }
.lw-osearch input, .lw-osearch input:focus { width: 100%; }
.lw-olist { flex: 1; overflow: auto; min-height: 0; padding: 4px 0 12px; }
.lw-oi { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 8px; padding: 4px 12px; font-size: 12.5px; color: var(--att-text-2); text-decoration: none; }
.lw-oi:hover { background: var(--att-surface-2); color: var(--att-text); text-decoration: none; }
.lw-oi b { font: 500 11.5px/1.5 var(--lw-mono); white-space: nowrap; }
.lw-oi span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lw-oi.chg b::after { content: "•"; margin-left: 4px; color: var(--lw-warn); }
.lw-oi.on { background: var(--lw-focus); color: var(--att-text); box-shadow: inset 2px 0 0 var(--ent-law); }
.lw-oi.on b { color: var(--ent-law); }
.lw-oempty { padding: 18px 12px; font-size: 12.5px; color: var(--att-muted); }
.lw-orail { display: none; }
.lw-body.oshut { grid-template-columns: 34px minmax(0, 1fr); }
.lw-body.oshut .lw-ohead { padding: 8px 0; justify-items: center; }
.lw-body.oshut .lw-ohead .lw-label, .lw-body.oshut .lw-osearch, .lw-body.oshut .lw-olist { display: none; }
.lw-body.oshut .lw-fold i { transform: rotate(180deg); }
.lw-body.oshut .lw-orail {
    display: flex; flex: 1; align-items: flex-start; justify-content: center; padding: 12px 0; border: 0; background: transparent;
    font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--att-muted); cursor: pointer;
}
.lw-body.oshut .lw-orail span { writing-mode: vertical-rl; }
.lw-body.oshut .lw-orail:hover { color: var(--att-text); background: var(--att-surface-2); }

.lw-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.lw-panes { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.lw-panes > * { flex: none; }
.lw-panes > .lw-reader { flex: 1 1 auto; min-height: 0; overflow: auto; }

.lw-band { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 9px 18px; font-size: 13px; line-height: 1.5; border-bottom: 1px solid var(--att-border); }
.lw-band i { font-size: 17px; margin-top: 1px; }
.lw-band a { font-weight: 600; white-space: nowrap; }
.lw-band.past { background: color-mix(in srgb, var(--lw-warn) 10%, transparent); color: var(--att-text); }
.lw-band.past i { color: var(--lw-warn); }
.lw-band.gone { background: var(--lw-del-bg); }
.lw-band.gone i { color: var(--lw-del); }

.lw-tools { display: flex; align-items: center; gap: 10px; padding: 8px 18px; border-bottom: 1px solid var(--att-border); flex-wrap: wrap; }
.lw-tools .att-action { height: 28px; }
.lw-tools-right { margin-left: auto; display: flex; gap: 14px; align-items: center; color: var(--att-muted); font-size: 12px; flex-wrap: wrap; }
.lw-now { color: var(--lw-add); font-weight: 600; }
.lw-art-list { color: var(--att-text-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.lw-tally { font: 600 12px/1 var(--lw-mono); }
.lw-tally .p { color: var(--lw-add); }
.lw-tally .m { color: var(--lw-del); }

/* the CRM's segmented look: one bordered group, the chosen reading filled */
.lw-seg { display: inline-flex; border: 1px solid var(--att-border); border-radius: 8px; overflow: hidden; background: var(--att-surface); }
.lw-seg button { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px; border: 0; background: transparent; color: var(--att-text-2); font-size: 12px; font-weight: 600; cursor: pointer; }
.lw-seg button + button { border-left: 1px solid var(--att-border); }
.lw-seg button i { font-size: 15px; }
.lw-seg button:hover { color: var(--att-text); }
.lw-seg button[aria-selected="true"] { background: color-mix(in srgb, var(--ent-law) 12%, transparent); color: var(--ent-law); }

.lw-hunks { display: inline-flex; align-items: center; gap: 4px; }
.lw-hunks .hunk-pos { font: 500 12px/1 var(--lw-mono); color: var(--att-text-2); min-width: 4.5em; text-align: center; }
.lw-hunks button { width: 26px; height: 26px; border: 1px solid var(--att-border); border-radius: 7px; background: var(--att-surface); color: var(--att-text-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; }
.lw-hunks button:hover { color: var(--ent-law); border-color: var(--ent-law); }
.lw-hunks button:disabled { opacity: .35; cursor: default; }

.lw-notice { max-width: 100ch; margin: 16px auto 0; padding: 8px 12px; border-left: 3px solid var(--lw-warn); background: var(--att-surface-2); font-size: 12.5px; color: var(--att-text-2); }

/* ---------------------------------------------------------------- the law as a document
   A measure a person can read across, the headings the gazette centres centred, numbered
   paragraphs hanging on their numbers so the structure shows down the left edge. */
.lw-doc { max-width: 96ch; margin-inline: auto; padding: 30px 36px 90px; font: 400 15px/1.72 var(--lw-serif); color: var(--att-text); }
.lw-doc p { margin: 0 0 11px; text-align: justify; hyphens: auto; overflow-wrap: break-word; }
.lw-doc .t-title { text-align: center; font-weight: 600; font-size: 17px; line-height: 1.42; letter-spacing: .03em; margin: 4px 0 2px; }
.lw-doc .t-title + :not(.t-title) { margin-top: 30px; }
.lw-doc .t-chapter { text-align: center; font: 700 11.5px/1.55 var(--bs-body-font-family, system-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--att-text-2); margin: 34px 0 4px; }
.lw-doc .t-chapter + .t-chapter { margin-top: 0; }
.lw-doc .t-article { text-align: center; font-weight: 600; font-size: 14px; line-height: 1.45; color: var(--att-text); margin: 26px 0 0; scroll-margin-top: 14px; }
.lw-doc .t-heading { text-align: center; color: var(--att-text-2); font-style: italic; margin: 1px 0 0; }
.lw-doc .t-article + *, .lw-doc .t-heading + * { margin-top: 11px; }
.lw-doc .t-para { padding-left: 2.2em; text-indent: -2.2em; }
.lw-doc .t-point { padding-left: 3.6em; text-indent: -1.4em; }
.lw-doc.diff .added, .lw-doc.diff .removed { position: relative; border-radius: 2px; }
.lw-doc.diff .added { background: var(--lw-add-bg); box-shadow: 0 0 0 5px var(--lw-add-bg); }
.lw-doc.diff .removed { background: var(--lw-del-bg); box-shadow: 0 0 0 5px var(--lw-del-bg); color: color-mix(in srgb, var(--lw-del) 45%, var(--att-text)); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--lw-del) 45%, transparent); }
.lw-doc.diff .added::before, .lw-doc.diff .removed::before { content: ""; position: absolute; left: -19px; top: -3px; bottom: -3px; width: 3px; border-radius: 2px; }
.lw-doc.diff .added::before { background: var(--lw-add); }
.lw-doc.diff .removed::before { background: var(--lw-del); }
.lw-doc .focus { background: var(--lw-focus); box-shadow: 0 0 0 5px var(--lw-focus); border-radius: 2px; }
.lw-doc.diff .focus::before { background: var(--ent-law); }
.lw-doc .empty { text-align: center; color: var(--att-muted); font-family: inherit; }
.lw-doc-card { padding: 0; }
.lw-doc-card .lw-doc { padding-top: 24px; padding-bottom: 40px; }

/* ---------------------------------------------------------------- related lists in a record */
.lw-rel-note { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--att-muted); }
.lw-col-seq { width: 44px; color: var(--att-muted); }
.lw-col-num { text-align: right; white-space: nowrap; }
.lw-col-act { width: 52px; text-align: right; }
.lw-col-act2 { width: 1%; white-space: nowrap; text-align: right; }
.lw-changes { font-size: 12.5px; color: var(--att-text-2); max-width: 520px; }
.lw-vrow.is-current td { background: color-mix(in srgb, var(--ent-law) 7%, transparent); }
.lw-vrow.is-current td:first-child { box-shadow: inset 3px 0 0 var(--ent-law); }
.lw-star.in, .lw-star.in:hover { color: #d97706; }
tr[data-href] { cursor: pointer; }
.att-pane .lv-embed { background: var(--att-surface); border: 1px solid var(--att-border); border-radius: 12px; overflow: hidden; }
/* A related list reaches the bottom of the tab, however few rows it has. */
.att-pane.active:has(> .lv-embed) { display: flex; flex-direction: column; min-height: 100%; }
.att-pane > .lv-embed { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.att-pane > .lv-embed > .lv-table-wrap { flex: 1 1 auto; }

/* ---------------------------------------------------------------- comparison */
.lw-src { flex: none; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--att-border); }
.lw-src-ic { width: 30px; height: 38px; border: 1px solid var(--att-border); border-radius: 4px; background: var(--att-surface-2); display: grid; place-items: center; font: 700 9px/1 var(--lw-mono); color: var(--lw-del); }
.lw-src-id b { display: block; font-size: 12.5px; }
.lw-src-id span { font: 400 11.5px/1.4 var(--lw-mono); color: var(--att-muted); }
.lw-src-quote { font-size: 12.5px; line-height: 1.5; color: var(--att-text-2); border-left: 1px solid var(--att-border); padding-left: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lw-src-quote b { color: var(--att-text); }
.lw-picker { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) 220px minmax(0, 1fr); align-items: center; border-bottom: 1px solid var(--att-border); background: var(--att-surface-2); margin: 0; }
.lw-pk { display: flex; align-items: center; gap: 10px; padding: 8px 16px; min-width: 0; margin: 0; }
.lw-pk.b { justify-content: flex-end; }
.lw-pk select { height: 32px; border: 1px solid var(--att-border); border-radius: 8px; padding: 0 10px; background: var(--att-surface); color: var(--att-text); font: 500 12.5px/1 var(--lw-mono); max-width: 100%; }
.lw-ribbon { text-align: center; padding: 7px 0; border-inline: 1px solid var(--att-border); }
.lw-ribbon b { display: block; font: 700 15px/1.2 var(--lw-mono); }
.lw-ribbon span { font-size: 11.5px; color: var(--att-muted); }
/* .att-panes has 18px of padding; -18px pins the bar to its very top edge. */
.lw-cfoot {
    display: flex; align-items: center; gap: 16px; padding: 8px 16px; border-bottom: 1px solid var(--att-border); flex-wrap: wrap;
    position: sticky; top: -18px; z-index: 3; background: var(--att-surface);
}
.lw-cnav { display: flex; align-items: center; gap: 8px; }
.lw-cnav .att-action { height: 28px; }
.lw-keys { font: 500 11px/1 var(--lw-mono); }
.lw-cfoot .lw-legend { margin-left: auto; }
.lw-cpanes { display: grid; grid-template-columns: 1fr 1fr; }
.lw-cpane { min-width: 0; padding-bottom: 24px; }
.lw-cpane + .lw-cpane { border-left: 1px solid var(--att-border); }
.lw-vh {
    display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--att-border);
    position: sticky; top: calc(var(--cfoot-h, 43px) - 18px); background: var(--att-surface); z-index: 2;
}
.lw-vh b { font: 700 12.5px/1 var(--lw-mono); }
.lw-vh span { font-size: 11.5px; color: var(--att-muted); }
.lw-vh .lv-company-status-badge { margin-left: auto; }
.lw-art { padding: 0 16px; scroll-margin-top: 48px; }
.lw-art h2 { margin: 14px 0 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--att-muted); }
.lw-art p { margin: 0 0 7px; padding: 4px 9px; border-radius: 5px; font: 400 13.5px/1.65 var(--lw-serif); white-space: pre-wrap; overflow-wrap: break-word; }
.lw-art.changed .p-left, .lw-art.removed .p-left { background: var(--lw-del-bg); box-shadow: inset 3px 0 0 var(--lw-del); }
.lw-art.changed .p-right, .lw-art.added .p-right { background: var(--lw-add-bg); box-shadow: inset 3px 0 0 var(--lw-add); }
.lw-art .gone { background: var(--att-surface-2); color: var(--att-muted); font-style: italic; font-size: 12.5px; }
.lw-art.focus h2 { color: var(--ent-law); }

/* ---------------------------------------------------------------- the issue as a newspaper
   laws/panels/gazette_text.html: a sheet of paper in the middle of the pane, the masthead,
   then every printed page with its running head and two justified columns. The paper keeps
   its own warm tones in both themes; in the dark one it is a dark sheet with light ink. */
.lw-news-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 0 2px 12px; font-size: 12.5px; }
.lw-news-actions { margin-left: auto; display: inline-flex; gap: 8px; }
.lw-news { padding: 8px 0 40px; }
.lw-pdf { height: calc(100vh - 230px); min-height: 480px; border: 1px solid var(--att-border); border-radius: 8px; overflow: hidden; background: var(--att-surface-2); }
.lw-pdf iframe { display: block; width: 100%; height: 100%; border: 0; }
.lw-paper {
    --paper: #fbf9f3; --ink: #1d1b18; --ink-2: #5b564e; --rule: #2a2723; --hair: #ddd6c8; --mark: #fff1b8;
    max-width: 1060px; margin: 0 auto; padding: 36px 56px 44px;
    background: var(--paper); color: var(--ink); font-family: var(--lw-serif);
    border: 1px solid var(--hair); border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 22px 48px -26px rgba(0, 0, 0, .35);
}
[data-theme="carbon"] .lw-paper { --paper: #1e1d1b; --ink: #ebe6db; --ink-2: #a9a296; --rule: #d6cfc1; --hair: #3b3833; --mark: #4a3f12; }

.lw-mast { text-align: center; margin-bottom: 10px; }
.lw-mast-top {
    display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--rule);
    font: 600 10.5px/1 'IBM Plex Sans', system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2);
}
.lw-mast-name { margin: 18px 0 0; font: 600 54px/1 var(--lw-serif); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.lw-mast-sub { margin: 6px 0 14px; font: 600 15px/1 var(--lw-serif); letter-spacing: .42em; text-transform: uppercase; color: var(--ink); }
.lw-mast-line {
    display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 3px double var(--rule); border-bottom: 1px solid var(--rule);
    font: italic 400 13px/1.3 var(--lw-serif); color: var(--ink-2);
}

.lw-page { padding-top: 18px; }
.lw-page + .lw-page { margin-top: 26px; border-top: 1px dashed var(--hair); padding-top: 22px; }
.lw-runhead {
    display: flex; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding-bottom: 6px; border-bottom: 1px solid var(--rule);
    font: 600 10.5px/1 'IBM Plex Sans', system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2);
}
.lw-cols {
    columns: 2; column-gap: 34px; column-rule: 1px solid var(--hair);
    font-size: 14.5px; line-height: 1.58; text-align: justify; hyphens: auto; -webkit-hyphens: auto;
    font-variant-numeric: oldstyle-nums;
}
.lw-cols > * { margin: 0; color: var(--ink); }
.lw-n-p { margin-bottom: .4em; text-indent: 1.3em; }
.lw-n-item { margin-bottom: .3em; padding-left: 2.3em; text-indent: -2.3em; }
.lw-n-item .mk { display: inline-block; min-width: 2.3em; text-indent: 0; font-variant-numeric: lining-nums; }
.lw-n-issuer {
    margin-top: 20px; padding-top: 12px; border-top: 2px solid var(--rule); break-after: avoid;
    font: 600 12.5px/1.35 var(--lw-serif); letter-spacing: .08em; text-align: center; text-transform: uppercase;
}
.lw-cols > .lw-n-issuer:first-child { margin-top: 0; }
.lw-n-record { display: flex; align-items: center; gap: 12px; margin: 10px 0 10px; break-after: avoid; font: 600 17px/1 var(--lw-serif); font-variant-numeric: lining-nums; }
.lw-n-record::before, .lw-n-record::after { content: ""; flex: 1; height: 1px; background: var(--hair); }
.lw-n-record.hit { background: var(--mark); border-radius: 4px; padding: 6px 8px; scroll-margin-top: 90px; }
.lw-n-act { margin: 12px 0 4px; break-after: avoid; font: 600 19px/1.2 var(--lw-serif); letter-spacing: .38em; text-align: center; }
.lw-n-title { margin: 0 0 14px; break-after: avoid; font: 600 13.5px/1.4 var(--lw-serif); letter-spacing: .03em; text-align: center; }
.lw-n-head { margin: 14px 0 8px; break-after: avoid; font: 600 12.5px/1.4 var(--lw-serif); letter-spacing: .05em; text-align: center; }
.lw-n-art { margin: 12px 0 1px; break-after: avoid; font: 600 14.5px/1.35 var(--lw-serif); text-align: center; }
.lw-n-sub { margin-bottom: 6px; break-after: avoid; font-style: italic; text-align: center; }
.lw-n-sign {
    display: flex; justify-content: space-between; gap: 14px; margin: 14px 0 6px; break-inside: avoid;
    font-size: 12px; line-height: 1.45; text-align: left;
}
.lw-n-sign span { display: block; }
.lw-n-sign .l { color: var(--ink-2); }
.lw-n-sign .r { text-align: center; font-style: italic; align-self: flex-end; }
.lw-n-toc { display: grid; grid-template-columns: 2.4em minmax(0, 1fr) auto; gap: 8px; margin-bottom: .35em; font-size: 13px; line-height: 1.4; text-align: left; }
.lw-n-toc .pg { font-variant-numeric: lining-nums; color: var(--ink-2); }
.lw-imprint {
    margin-top: 26px; padding-top: 10px; border-top: 3px double var(--rule);
    font: 400 11px/1.6 'IBM Plex Sans', system-ui, sans-serif; color: var(--ink-2); text-align: center;
}
.lw-imprint span { display: block; }
@media (max-width: 900px) {
    .lw-paper { padding: 22px 18px 28px; }
    .lw-cols { columns: 1; }
    .lw-mast-name { font-size: 32px; }
    .lw-mast-sub { letter-spacing: .25em; font-size: 12px; }
    .lw-mast-top, .lw-runhead { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------- workspace menu (+ on a law) */
.lw-wsmenu {
    position: absolute; z-index: 1500; min-width: 240px; max-width: 330px; padding: 0 0 4px;
    background: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 10px;
    box-shadow: 0 12px 32px color-mix(in srgb, var(--text-primary) 14%, transparent);
}
.lw-wsmenu:focus { outline: none; }
.lw-wsmenu-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 8px 8px 14px; border-bottom: 1px solid var(--border-color); }
.lw-wsmenu-head b { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.lw-wsmenu-close { width: 26px; height: 26px; border: 0; border-radius: 6px; background: transparent; color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 17px; }
.lw-wsmenu-close:hover { color: var(--danger-color); background: var(--bg-secondary); }
.lw-wsmenu-empty { margin: 0; padding: 12px 14px; font-size: 12.5px; color: var(--text-muted); font-style: italic; }
.lw-wsmenu-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 8px 14px; border: 0; background: transparent; font-size: 13px; color: var(--text-primary); cursor: pointer; }
.lw-wsmenu-item:hover { background: var(--bg-secondary); }
.lw-wsmenu-item i { font-size: 16px; color: var(--text-muted); }
.lw-wsmenu-item.on i { color: var(--ent-workspace); }
.lw-wsmenu-item .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lw-wsmenu-item em { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); opacity: 0; }
.lw-wsmenu-item:hover em, .lw-wsmenu-item:focus-visible em { opacity: 1; }
.lw-wsmenu-item.on:hover em { color: var(--danger-color); }
.lw-wsmenu-link { display: flex; align-items: center; gap: 6px; padding: 9px 14px 6px; margin-top: 4px; border-top: 1px solid var(--border-color); font-size: 12.5px; font-weight: 600; color: var(--ent-workspace); text-decoration: none; }

/* ---------------------------------------------------------------- the law picker (Ctrl+K, + Dodaj zakon) */
.lw-pkfind { padding: 10px 14px; border-bottom: 1px solid var(--att-border); }
.lw-pkfind .lv-search-box input, .lw-pkfind .lv-search-box input:focus { width: 100%; height: 34px; font-size: 13.5px; }
.lw-pkrows { padding: 0 !important; }
.lw-pkrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; width: 100%; text-align: left; padding: 8px 16px; border: 0; border-bottom: 1px solid var(--att-border-2, var(--att-border)); background: transparent; color: var(--att-text); cursor: pointer; }
.lw-pkrow:hover, .lw-pkrow.at { background: var(--att-surface-2); }
.lw-pkrow.at { box-shadow: inset 3px 0 0 var(--ent-law); }
.lw-pkrow .nm { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lw-pkrow .mt { grid-column: 1; display: flex; align-items: center; gap: 8px; font: 400 11.5px/1.3 var(--lw-mono); color: var(--att-muted); }
.lw-pkrow .mt i { font-style: normal; color: var(--lw-del); }
.lw-pkrow .act { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-style: normal; font-size: 12px; font-weight: 600; color: var(--att-muted); white-space: nowrap; }
.lw-pkrow.in .nm, .lw-pkrow.in .act { color: var(--ent-workspace); }
.lw-pkmsg { padding: 28px 14px; text-align: center; font-size: 13px; color: var(--att-muted); }

/* ---------------------------------------------------------------- login and plain pages */
.lw-login { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.lw-login-card { width: min(380px, 100%); padding: 26px 26px 22px; box-shadow: 0 24px 64px -24px rgba(0, 0, 0, .35); }
.lw-login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.lw-login-brand .brand-logo { width: 44px; height: 44px; border-radius: 0; }
.lw-login-brand b { display: block; font-size: 17px; color: var(--att-text); }
.lw-login-brand span { font-size: 12.5px; color: var(--att-muted); }
.lw-login-err { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; padding: 8px 10px; border-radius: 8px; background: var(--lw-del-bg); color: var(--lw-del); font-size: 13px; }
.lw-login-go { width: 100%; justify-content: center; height: 38px; margin-top: 4px; --rec-color: var(--ent-law); }
.lw-page-card { max-width: 560px; margin: 40px auto; padding: 0 16px; }
.lw-actions-row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.lw-actions-row form { margin: 0; }

/* ---------------------------------------------------------------- narrow */
@media (max-width: 1100px) {
    .lw-body, .lw-body.oshut { grid-template-columns: minmax(0, 1fr); }
    .lw-outline { display: none; }
}
@media (max-width: 760px) {
    .lw-doc { padding: 20px 18px 60px; font-size: 14.5px; }
    .lw-cpanes { grid-template-columns: 1fr; }
    .lw-cpane + .lw-cpane { border-left: 0; border-top: 1px solid var(--att-border); }
    .lw-picker { grid-template-columns: 1fr; }
    .lw-ribbon { border-inline: 0; border-block: 1px solid var(--att-border); }
    .lw-src { grid-template-columns: auto minmax(0, 1fr); }
    .lw-src-quote { display: none; }
    .lw-tools-right { margin-left: 0; }
}