/* Design tokens: colours, spacing, type. Light/dark follow the system. */
:root {
  --bg: #f6f7f9; --surface: #ffffff; --text: #1b1f24; --muted: #5b6573;
  --accent: #1f5fbf; --accent-text: #ffffff; --positive: #1e7a4c; --positive-text: #ffffff; --wish: #b02a6b; --danger: #b3261e; --border: #d8dde3; --focus: #ff9f1a;
  --space-1: .125rem; --space-2: .25rem; --space-3: .5rem; --space-4: .75rem; --space-5: 1.25rem;
  --radius: .5rem; --tap: 36px; --sidebar: 15rem;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #12151a; --surface: #1b2027; --text: #e8ebef; --muted: #9aa5b3; --accent: #6ea8ff; --accent-text: #0b1220; --positive: #4cc38a; --positive-text: #07140e; --wish: #f08ab8; --danger: #ff8a80; --border: #2b323c; }
}
* { box-sizing: border-box; }
html { overflow-x: clip; }
body { margin: 0; overflow-x: clip; font: 1rem/1.4 var(--font); background: var(--bg); color: var(--text); }
a { color: var(--accent); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--surface); padding: var(--space-2) var(--space-3); z-index: 10; }
.skip:focus { left: var(--space-2); top: var(--space-2); }

/* Mobile first: top bar, content, fixed bottom bar */
.shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; padding-bottom: calc(var(--tap) + var(--space-3)); }
.topbar { display: flex; justify-content: space-between; align-items: center; padding: 0 var(--space-3); min-height: 2.25rem; background: var(--surface); border-bottom: 1px solid var(--border); }
.brand { font-weight: 700; text-decoration: none; color: var(--text); font-size: 1.05rem; }
.langs { display: flex; gap: var(--space-1); }
.langs a { min-width: 28px; min-height: 28px; font-size: .9rem; display: inline-grid; place-items: center; border-radius: var(--radius); text-decoration: none; font-weight: 600; }
.langs a[aria-current="true"] { background: var(--accent); color: var(--accent-text); }
main { padding: var(--space-3); max-width: 70rem; width: 100%; margin: 0 auto; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); }
.card h1 { margin-top: 0; }
.muted { color: var(--muted); }

.primary { position: fixed; bottom: 0; left: 0; right: 0; background: var(--surface); border-top: 1px solid var(--border); z-index: 5; }
.primary ul { display: flex; list-style: none; margin: 0; padding: 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.primary ul::-webkit-scrollbar { display: none; }
.primary li { flex: 1 0 auto; scroll-snap-align: center; }
@media (max-width: 899.98px) { .primary a { padding-inline: var(--space-2); min-width: 0; } .primary .label { font-size: .7rem; } }
.primary .label { white-space: nowrap; }
.primary a { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: var(--tap); min-height: var(--tap); padding: var(--space-1) var(--space-2); text-decoration: none; color: var(--text); font-size: .75rem; }
.primary a[aria-current="page"] { color: var(--accent); font-weight: 700; }
@media (max-width: 899.98px) {
  .primary.scrolls { position: fixed; }
  .primary.scrolls.more-right::after { content: "›"; position: absolute; right: 0; top: 0; bottom: 0; width: 1.6rem; display: flex; align-items: center; justify-content: flex-end; padding-right: .25rem; pointer-events: none; font-size: 1.4rem; color: var(--muted); background: linear-gradient(to right, transparent, var(--surface) 70%); }
  .primary.scrolls.more-left::before { content: "‹"; position: absolute; left: 0; top: 0; bottom: 0; width: 1.6rem; display: flex; align-items: center; padding-left: .25rem; pointer-events: none; font-size: 1.4rem; color: var(--muted); background: linear-gradient(to left, transparent, var(--surface) 70%); z-index: 1; }
}
.primary a[aria-disabled="true"] { color: var(--muted); cursor: not-allowed; }
.primary .icon { font-size: 1.25rem; line-height: 1; }

/* Desktop: the navigation is a bar under the header, not a sidebar */
@media (min-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; padding-bottom: 0; }
  .primary { position: static; border-top: 0; border-bottom: 1px solid var(--border); }
  .primary ul { flex-direction: row; flex-wrap: wrap; overflow: visible; padding: 0 var(--space-3); }
  .primary li { flex: 0 0 auto; }
  .primary a { flex-direction: row; justify-content: flex-start; gap: var(--space-2); font-size: .95rem; min-height: 2.5rem; padding: var(--space-1) var(--space-3); border-bottom: 3px solid transparent; }
  .primary a[aria-current="page"] { border-bottom-color: var(--accent); }
}
@media print { .primary, .langs, .skip { display: none; } body { background: #fff; color: #000; } }

/* Forms and account */
.narrow { max-width: 32rem; margin-inline: auto; }
.field { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-3); }
.field.check { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: var(--space-1) var(--space-2); }
.field.check input { width: 1.4rem; height: 1.4rem; margin-top: .15rem; }
.field.check .error { grid-column: 2; }
label { font-weight: 600; }
.field.check label { font-weight: 400; }
input:not([type=checkbox]), select { font: inherit; padding: .3rem .5rem; min-height: var(--tap); border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); width: 100%; }
.hint { color: var(--muted); font-size: .875rem; }
.error { color: #b3261e; font-size: .9rem; }
@media (prefers-color-scheme: dark) { .error { color: #ff8a80; } }
.error:empty { display: none; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); padding: .25rem .8rem; border: 0; border-radius: var(--radius); background: var(--accent); color: var(--accent-text); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.btn.small { min-height: 30px; padding: .15rem .6rem; }
.btn.danger { background: var(--danger); color: #fff; }
.danger { color: #b3261e; }
.linkbtn { background: none; border: 0; padding: 0 var(--space-2); min-height: 28px; font-size: .9rem; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline; }
.inline { display: inline; margin: 0; }
.topbar { gap: var(--space-2); flex-wrap: wrap; }
.topright { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; justify-content: flex-end; }
.account { display: flex; align-items: center; gap: var(--space-3); }
.account a:not(.btn) { display: inline-flex; align-items: center; min-height: 28px; font-size: .9rem; }
.flash, .notice { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border: 1px solid var(--accent); border-radius: var(--radius); padding: var(--space-2) var(--space-3); }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-3); margin: 0 0 var(--space-4); }
.facts dt { font-weight: 600; } .facts dd { margin: 0; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.mail pre { white-space: pre-wrap; word-break: break-word; background: var(--bg); padding: var(--space-3); border-radius: var(--radius); }

/* Catalogue */
.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-2) var(--space-3); align-items: end; margin-bottom: var(--space-3); }
.filters .wide { grid-column: 1 / -1; }
.filters .actions { margin-bottom: var(--space-3); }
.tablewrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; }
table.data th, table.data td { text-align: left; padding: var(--space-2); border-bottom: 1px solid var(--border); vertical-align: top; }
table.data .num { text-align: right; white-space: nowrap; }
.small { font-size: .85rem; }
.pager { display: flex; gap: var(--space-3); align-items: center; justify-content: center; margin-top: var(--space-3); }
.lead { font-size: 1.15rem; margin-top: 0; }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-4); }
dl.facts dt { color: var(--muted); }
dl.facts dd { margin: 0; }
ul.plain { list-style: none; padding: 0; }
ul.plain li { padding: var(--space-1) 0; }
@media (max-width: 600px) { dl.facts { grid-template-columns: 1fr; } dl.facts dd { margin-bottom: var(--space-2); } }

.flag { color: #b45309; font-weight: 600; }
@media (prefers-color-scheme: dark) { .flag { color: #fbbf24; } }
.pre { white-space: pre-wrap; }

.chart { margin: var(--space-3) 0; max-width: 640px; }
.chart svg { width: 100%; height: auto; display: block; }
.chart .axis { stroke: var(--muted, #888); stroke-width: 1; }
.chart .tick { fill: var(--muted, #666); font-size: 11px; }
.chart .line { stroke: var(--accent, #1f5fbf); stroke-width: 2; }
.chart .dot { fill: var(--accent, #1f5fbf); cursor: pointer; outline: none; }
.chart .dot:hover, .chart .dot:focus { stroke: var(--accent, #1f5fbf); stroke-opacity: .3; stroke-width: 6; }
.chart .hit { fill: transparent; cursor: pointer; }
.pricechart { position: relative; }
.charttip { position: absolute; transform: translate(-50%, calc(-100% - 10px)); padding: 3px 8px; border-radius: var(--radius); background: var(--text, #222); color: var(--surface, #fff); font-size: .85rem; white-space: nowrap; pointer-events: none; z-index: 5; }
.charttip[hidden] { display: none; }

/* Tables that turn into cards on a phone: each cell shows its column name (data-label). */
@media (max-width: 40rem) {
  table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack tr { border-bottom: 1px solid var(--border); padding: var(--space-2) 0; }
  table.stack td { border: 0; padding: .15rem 0; display: grid; grid-template-columns: 8rem 1fr; gap: var(--space-2); text-align: left; }
  table.stack td::before { content: attr(data-label); font-weight: 600; color: var(--muted); }
  table.stack td.num { text-align: left; white-space: normal; }
}

/* Dialogs (native <dialog>, filled by htmx). The same page also works as a normal full page without script. */
dialog { overflow-y: auto; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text);
  width: min(40rem, calc(100vw - 1rem)); max-height: calc(100dvh - 1rem); }
dialog::backdrop { background: rgb(0 0 0 / .5); }
.dialog-body { padding: var(--space-3) var(--space-4); }
.dlg h1 { margin-top: 0; font-size: 1.4rem; }
fieldset { border: 1px solid var(--border); border-radius: var(--radius); margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3); }
legend { font-weight: 600; padding: 0 var(--space-1); }
.field .with-add { display: flex; gap: var(--space-2); align-items: center; }
.field .with-add select { flex: 1; min-width: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.print-only { display: none; }
@media print {
  .print-only { display: block; }
  .no-print, .topbar, .primary, .skip, dialog, .flash, .pager { display: none !important; }
  body { background: #fff; color: #000; }
  .shell { display: block; padding: 0; }
  main { max-width: none; padding: 0; }
  .card { border: 0; padding: 0; }
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: revert; }
  table.stack thead { position: static; width: auto; height: auto; clip-path: none; overflow: visible; }
  table.stack td::before { content: none; }
  table.stack td { display: table-cell; }
  a { color: inherit; text-decoration: none; }
}

/* Combinations */
.warn { color: #8a4b00; font-weight: 600; }
.ok { color: #1b6b34; font-weight: 600; }
.badge { color: var(--muted); font-size: .875rem; }
@media (prefers-color-scheme: dark) { .warn { color: #ffb74d; } .ok { color: #7bd88f; } }
ol.comblist { list-style: none; padding: 0; margin: 0 0 var(--space-4); display: grid; gap: var(--space-3); }
ol.comblist > li { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-2) var(--space-3); }
ol.comblist h2 { margin: 0 0 var(--space-1); font-size: 1.15rem; }
@media print { ol.comblist > li { break-inside: avoid; } }

ul.entries { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
ul.entries > li { border-bottom: 1px solid var(--border); padding-bottom: var(--space-2); }

ul.photos { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: var(--space-2); }
ul.photos img { display: block; width: 100%; height: auto; border-radius: 4px; background: var(--border); }
@media print { ul.photos { grid-template-columns: repeat(3, 1fr); } ul.photos li { break-inside: avoid; } }

figure.chart { margin: var(--space-3) 0; display: grid; gap: var(--space-3); grid-template-columns: minmax(10rem, 16rem) 1fr; align-items: center; }
figure.chart svg.pie { width: 100%; height: auto; }
figure.chart path.slice { stroke: var(--surface, #fff); stroke-width: 1; stroke-linejoin: round; }
ul.legend { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-1); }
.bars { grid-column: 1 / -1; display: grid; gap: var(--space-1); }
.barrow { display: grid; grid-template-columns: minmax(6rem, 14rem) 1fr minmax(5rem, auto); gap: var(--space-2); align-items: center; }
.barlabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barvalue { text-align: right; font-variant-numeric: tabular-nums; }
tr.part td { color: var(--muted, #666); font-size: .9em; }
address.insurer { font-style: normal; margin-bottom: var(--space-3); }
@media (max-width: 40rem) { figure.chart { grid-template-columns: 1fr; } .barrow { grid-template-columns: 1fr; } .barvalue { text-align: left; } }
@media print { figure.chart { break-inside: avoid; } }

/* wiki editing / moderation */

table.changes td.old { color: var(--muted); }
table.changes tr.conflict td, table.changes tr.conflict th { background: color-mix(in srgb, var(--warn, #b45309) 12%, transparent); }
.badge.warn { color: var(--warn, #b45309); font-weight: 600; }
fieldset { border: 1px solid var(--border, #ccc); border-radius: .5rem; margin: 0 0 1rem; padding: .5rem 1rem 1rem; }
.revision { border-top: 1px solid var(--border, #ccc); padding-top: .5rem; margin-top: 1rem; }

.sitefooter { margin-top: var(--space-5, 2rem); padding-top: var(--space-3); border-top: 1px solid var(--border, currentColor); font-size: .9rem; }
.legal h2 { margin-top: var(--space-4, 1.5rem); font-size: 1.1rem; }
@media print { .sitefooter { display: none; } }

/* article page */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(max-content, 1fr); gap: var(--space-1); overflow-x: auto; margin: var(--space-3) 0 0; padding: 0; border-bottom: 2px solid var(--accent); scrollbar-width: thin; }
.tab { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 38px; padding: 0 var(--space-4); text-decoration: none; color: var(--muted); background: var(--bg); border: 1px solid var(--border); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; white-space: nowrap; font-weight: 500; cursor: pointer; }
.tab:hover { color: var(--text); background: var(--surface); }
.tab[aria-selected=true] { color: var(--accent-text); background: var(--accent); border-color: var(--accent); font-weight: 700; }
.tabpanel { padding-top: var(--space-3); }
.tabpanel[hidden] { display: none; }
.article:not(.js-tabs) .tabpanel { margin-bottom: var(--space-4); }
.topblock { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.topblock .photo { order: -1; }
.topblock .photo img { max-width: 100%; height: auto; border-radius: var(--radius); }
.nophoto { display: grid; place-items: center; min-height: 4rem; border: 1px dashed var(--border); border-radius: var(--radius); margin: 0; }
@media (min-width: 52rem) { .topblock { grid-template-columns: minmax(0, 1fr) minmax(12rem, 22rem); } .topblock .photo { order: 0; } }
dl.facts.cols { grid-template-columns: max-content minmax(0, 1fr); }
@media (min-width: 70rem) { dl.facts.cols { grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr); } dl.facts.cols dd.wide { grid-column: 2 / -1; } }
.descr { font-size: 1.1rem; margin: var(--space-3) 0; }
.logo { height: 1.6rem; width: auto; vertical-align: middle; margin-right: var(--space-2); }
.pict { height: 1.5rem; width: auto; vertical-align: middle; margin-right: var(--space-2); }
.pdfview { width: 100%; height: 70vh; border: 1px solid var(--border); border-radius: var(--radius); }
.artbar { position: fixed; left: 0; right: 0; bottom: calc(var(--tap) + var(--space-2)); z-index: 5; padding: 0 var(--space-3); pointer-events: none; }
.artbar-inner { pointer-events: auto; max-width: calc(70rem - 2 * var(--space-3)); margin: 0 auto; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); justify-content: space-between; align-items: center; padding: var(--space-2) var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 -2px 8px rgb(0 0 0 / .08); }
html { scrollbar-gutter: stable; }
body:has(.artbar) main { padding-bottom: 7rem; }
.box { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-3); margin: var(--space-3) 0; background: var(--surface); }
.box > .boxtitle { margin: 0 0 var(--space-2); padding-bottom: var(--space-1); border-bottom: 1px solid var(--border); font-size: 1.05rem; }
.artbar .pager { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
@media (min-width: 52rem) { .artbar { bottom: var(--space-2); } }
@media print { .artbar, .tabs { display: none; } .tabpanel[hidden] { display: block; } }

@media (max-width: 51.99rem) {
  .artbar { padding: 0 var(--space-1); }
  .artbar-inner { padding: var(--space-1) var(--space-2); gap: var(--space-1) var(--space-3); }
  .artbar .btn { padding: .25rem .75rem; font-size: .9rem; }
  .artbar .pager { gap: var(--space-1); }
}
.pricechart svg { width: 100%; max-width: 42rem; height: auto; }
@media (max-width: 51.99rem) {
  .artbar-inner .pager:last-child { flex: 1 1 100%; flex-wrap: nowrap; }
  .artbar .pager:last-child .btn { flex: 1 1 0; padding-inline: .4rem; font-size: .85rem; text-align: center; }
}
figure.chart.pricechart { display: block; }

/* compact vertical rhythm */
h1 { font-size: 1.6rem; margin: .2em 0 .3em; line-height: 1.2; }
h2 { font-size: 1.25rem; margin: .6em 0 .3em; line-height: 1.25; }
h3 { font-size: 1.05rem; margin: .6em 0 .25em; line-height: 1.3; }
p { margin: .4em 0; }
ul, ol, dl { margin-block: .4em; }
.card > p:first-child { margin-top: 0; }

.biglogo { height: 3.5rem; width: auto; max-width: 12rem; object-fit: contain; }
.companyrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin: var(--space-2) 0; }
.gen > p { grid-column: 1 / -1; }
.companyrow .names { flex: 1 1 14rem; }
.companyrow .names p { margin: .1em 0; }
.countryflag { height: 2.75rem; width: auto; border: 1px solid var(--border); }

/* technique tab: label + picture with a small caption below; icons without text */
dl.tech { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-3) var(--space-4); margin: 0 0 var(--space-3); align-items: start; }
dl.tech dt { color: var(--muted); padding-top: var(--space-1); min-width: 7.5rem; }
dl.tech dd { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (min-width: 52rem) { dl.tech { grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr); } }
.techcell { display: inline-flex; flex-direction: column; gap: var(--space-1); max-width: 14rem; }
.techpict { width: auto; height: 5.5rem; max-width: 100%; object-fit: contain; object-position: left; border-radius: .25rem; }
.techcap { font-size: .8rem; line-height: 1.25; color: var(--text); }
.techicons { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-2) 0; }
.techicon { height: 3rem; width: auto; cursor: help; border-radius: .25rem; }
.techtext { font-size: .85rem; }

/* label / value: labels small, bold and muted; values larger and in the text colour */
dl.facts dt { color: var(--muted); font-size: .85rem; font-weight: 600; padding-top: .1rem; }
dl.facts dd { color: var(--text); font-weight: 500; }
/* general data: every row shares the same five columns so values line up under each other */
.gen { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2) 0; }
.gen .mlogo { justify-self: start; align-self: start; }
@media (min-width: 52rem) {
  .gen { grid-template-columns: 8.5rem minmax(0, 1.4fr) 6.5rem minmax(0, 1fr) 8rem; column-gap: var(--space-3); }
  .gen > dl.facts { grid-column: 1 / 5; display: grid; grid-template-columns: subgrid; column-gap: var(--space-3); margin: 0; }
  .gen > .mlogo { grid-column: 5; grid-row: 1; justify-self: end; }
  .gen > .companyrow { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; column-gap: var(--space-3); align-items: center; }
  .gen > .companyrow > .names { grid-column: 2 / 4; }
  .gen > .companyrow > .countryflag { grid-column: 4; justify-self: start; }
}
.companyrow .biglogo { max-width: 100%; }
.axcode { cursor: help; border-bottom: 1px dotted var(--muted); }
.freightcode { margin-top: 1rem; }
.freightcode .mono { font-family: ui-monospace, Consolas, monospace; }

/* catalogue statistics */
.statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-3); margin: var(--space-3) 0; }
.stat { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-3); background: var(--bg); }
.stat .num { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat .lbl { color: var(--muted); font-size: .85rem; }
.statblocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: var(--space-3); align-items: start; }
.statblocks .bars svg { color: var(--accent); }
@media (max-width: 40rem) { .statblocks { grid-template-columns: minmax(0, 1fr); } .statblocks .barrow { grid-template-columns: minmax(5rem, 9rem) 1fr auto; } }
/* report: title row with tools top right */
.titlebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.titlebar h1 { margin: 0; }
.tools { display: flex; align-items: center; gap: var(--space-2); }
.iconbtn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); min-width: var(--tap); min-height: var(--tap); padding: 0 var(--space-2); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); text-decoration: none; cursor: pointer; font: inherit; font-size: .9rem; font-weight: 600; }
.iconbtn:hover { border-color: var(--accent); color: var(--accent); }
.iconbtn svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* legend swatches stay small (the generic .chart svg rule must not stretch them) */
ul.legend li { display: flex; align-items: center; gap: var(--space-2); }
ul.legend svg { width: 12px; height: 12px; flex: none; display: inline-block; }
figure.chart svg.pie { width: 16rem; height: 16rem; max-width: 100%; flex: none; }

/* Button hierarchy: primary (blue, filled) = the main action; positive (green, filled) = add to my collection;
   secondary (outlined) = other actions; wish (rose outline) = wishlist; tertiary (text) = low-key; danger (red) = destructive */
.btn.secondary, .btn.wish { background: var(--surface); border: 1.5px solid var(--accent); color: var(--accent); }
.btn.secondary:hover { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.btn.wish { border-color: var(--wish); color: var(--wish); }
.btn.wish:hover { background: color-mix(in srgb, var(--wish) 10%, var(--surface)); }
.btn.positive { background: var(--positive); color: var(--positive-text); }
.btn.positive:hover, .btn:not(.secondary):not(.wish):not(.tertiary):not(.positive):not(.danger):hover { filter: brightness(1.08); }
.btn.tertiary { background: transparent; color: var(--accent); }
.btn.tertiary:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.btn.icon { width: 34px; min-width: 34px; height: 30px; min-height: 30px; padding: 0; font-size: 1rem; line-height: 1; }
.rowactions { display: inline-flex; gap: var(--space-3); align-items: center; white-space: nowrap; }
.btn { transition: filter .12s, background .12s; }
.brand { display: inline-flex; align-items: center; gap: var(--space-3); }
.brandlogo { width: 28px; height: 28px; display: block; }

/* catalogue list thumbnails */
.thumbcell { width: 96px; padding-right: 0; }
.thumb { display: flex; align-items: center; justify-content: center; width: 88px; height: 66px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; overflow: hidden; cursor: zoom-in; }
.thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.thumb.none { cursor: default; background: var(--bg); border-style: dashed; }
.bigimage { display: block; max-width: 100%; max-height: 75vh; margin: var(--space-3) auto; border-radius: var(--radius); background: #fff; }

/* Baan Bouw: overview of layouts and the plan image */
.layouts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,16rem));gap:var(--space-4)}
.layoutcard{display:flex;flex-direction:column;border:1px solid var(--border,#d0d5dd);border-radius:8px;overflow:hidden;background:var(--surface,#fff)}
.layoutplan{display:flex;align-items:center;justify-content:center;height:8rem;background:var(--surface-2,#f2f4f7);text-decoration:none}
.layoutplan img{width:100%;height:100%;object-fit:contain}
.layoutinfo{padding:var(--space-3)}
.layoutinfo h2{margin:0 0 var(--space-2)}
.plan{margin:0 0 var(--space-3)}
.plan img{display:block;max-width:50%;height:auto;cursor:zoom-in;border:1px solid var(--border,#d0d5dd);border-radius:6px}

/* Article form: automatically translated fields */
.autotr{border-color:var(--accent,#2f6fb3);background:var(--surface-2,#f2f4f7)}
.autotr-note{margin:0;font-style:italic}

@media (max-width:40rem){.plan img{max-width:100%}}
ul.photos a[data-zoom]{cursor:zoom-in}
dialog:has(.zoom){width:min(90rem,calc(100vw - 1rem))}
.zoom .bigimage{max-height:80vh;max-width:100%;width:auto;height:auto}

/* Header: language menu with flags, icon links with tooltips */
.langmenu{position:relative}
.langmenu summary{list-style:none;display:inline-flex;align-items:center;gap:var(--space-1);min-height:var(--tap);padding:0 var(--space-2);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;font-weight:600;font-size:.9rem}
.langmenu summary::-webkit-details-marker{display:none}
.langmenu summary:hover,.langmenu[open] summary{border-color:var(--accent)}
.langmenu img{display:block;border:1px solid var(--border);border-radius:2px;object-fit:cover}
.langmenu ul{position:absolute;right:0;z-index:20;margin:var(--space-1) 0 0;padding:var(--space-1);list-style:none;min-width:11rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 4px 12px rgb(0 0 0 / .15)}
.langmenu li a{display:flex;align-items:center;gap:var(--space-2);min-height:var(--tap);padding:0 var(--space-2);text-decoration:none;border-radius:var(--radius)}
.langmenu li a:hover{background:var(--bg)}
.langmenu li a[aria-current="true"]{font-weight:700;background:var(--bg)}
.account{display:flex;align-items:center;gap:var(--space-1)}
.iconlink{display:inline-flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);padding:0;border:1px solid transparent;border-radius:var(--radius);background:none;color:var(--accent);cursor:pointer}
.iconlink:hover{border-color:var(--accent)}
.iconlink svg{width:1.3rem;height:1.3rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media print{.langmenu{display:none}}
.flag.requested{background:#e8f0fb;color:#1f4e8c;border-color:#b7cdea}

.carousel{display:flex;align-items:center;justify-content:center;gap:var(--space-3);flex-wrap:wrap;margin:var(--space-2) 0}
.gallerystrip{display:flex;gap:var(--space-2);flex-wrap:wrap;margin:var(--space-2) 0}
.gallerykeep{list-style:none;padding:0;display:flex;gap:var(--space-3);flex-wrap:wrap}

/* combinations: article picker and the visual train */
.picklist{list-style:none;margin:var(--space-2) 0;padding:0;display:grid;gap:var(--space-2)}
.picklist li{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-1) 0;border-bottom:1px solid var(--border)}
.picklist .picktitle{flex:1;min-width:0}
.picklist .pickqty{width:4.5rem}
.sticky-actions{position:sticky;bottom:0;background:var(--surface,#fff);padding:var(--space-2) 0}
dialog:has(.dlg.wide){width:min(64rem,calc(100vw - 1rem));max-width:none}
.dlg.wide form,.dlg.wide .filters{min-width:0}
.dialog-body{overflow-x:clip}
.dlg.wide input[type=search],.dlg.wide select{width:100%;min-width:0}
.combostrip{list-style:none;margin:var(--space-3) 0;padding:var(--space-2);display:flex;gap:var(--space-2);overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg)}
.combostrip li{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:2px;max-width:200px;padding:2px}
.combostrip .ownline{align-self:stretch;height:3px;background:var(--border)}
.combostrip li.owned .ownline{background:var(--ok,#2e7d32)}
.combostrip li.missing{opacity:.8}
.combostrip li.missing .ownline{background:var(--warn,#c62828)}
.combostrip li[draggable=true]{cursor:grab}
.combostrip li.dragging,tr.dragging{opacity:.4}
.combostrip img{height:72px;width:auto;max-width:200px;display:block;object-fit:contain;background:#fff}
.combostrip .nophoto{display:flex;align-items:center;justify-content:center;height:72px;min-width:110px;padding:0 var(--space-2);border:1px dashed var(--border);font-size:.8rem}
.combostrip .cap{font-size:.7rem;color:var(--muted,#666)}
tr[draggable=true]{cursor:grab}
@media print{.combostrip{flex-wrap:wrap;overflow:visible;border:0}}

/* close cross in the top right corner of a dialog */
.dlg{position:relative}
.dlg-x{position:absolute;top:var(--space-2);right:var(--space-2);width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border);border-radius:50%;background:var(--surface,#fff);color:var(--text);font-size:1.6rem;line-height:1;cursor:pointer;padding:0}
.dlg-x:hover,.dlg-x:focus-visible{background:var(--bg)}
.dlg:has(.dlg-x) h1{padding-right:3rem}

/* drag handle for reordering: touch-action none so a finger drags instead of scrolling */
.draghandle{display:inline-block;cursor:grab;touch-action:none;user-select:none;padding:0 .4rem;margin-right:.25rem;color:var(--muted);font-size:1.2rem;line-height:1}
.combostrip li .draghandle{margin:0;padding:.1rem .5rem}
.dragging{opacity:.5}
.dialog-content .dlg-x ~ h1{padding-right:3rem}

/* Help */
.helplayout{display:grid;grid-template-columns:15rem minmax(0,1fr);gap:var(--space-4)}
.helpnav ul{list-style:none;margin:0 0 var(--space-2);padding:0}
.helpnav li a,.helpnav p a{display:block;padding:.25rem .5rem;border-radius:var(--radius);text-decoration:none}
.helpnav a[aria-current=page]{background:var(--surface-2,#eef1f5);font-weight:600}
.helpgroup{font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted,#667);margin:var(--space-3) 0 var(--space-1)}
.helptext{max-width:46rem}
.helptext h2{margin-top:var(--space-4)}
.helptext li{margin:.2rem 0}
.helpfoot{display:flex;justify-content:space-between;gap:var(--space-3);margin-top:var(--space-4)}
.helpfoot .next{margin-left:auto}
.helpcards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:var(--space-2)}
.helpcards a{display:flex;flex-direction:column;gap:.25rem;height:100%;padding:var(--space-2) var(--space-3);border:1px solid var(--border);border-radius:var(--radius);text-decoration:none;background:var(--surface)}
.helpcards a:hover,.helpcards a:focus-visible{border-color:var(--accent)}
.helpedit{width:100%;min-height:16rem;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.9rem}
.helpsyntax pre{white-space:pre-wrap;background:var(--bg);padding:var(--space-2);border-radius:var(--radius)}
@media (max-width:48rem){.helplayout{grid-template-columns:1fr}.helpnav{border-bottom:1px solid var(--border);padding-bottom:var(--space-2)}}

.helplink{margin:-.25rem 0 var(--space-2)}
.helpnav summary{cursor:pointer;font-weight:600;padding:.4rem .5rem;border:1px solid var(--border);border-radius:var(--radius)}
@media (min-width:48.01rem){.helpnav summary{display:none}}

/* Back link at the top of a page, shown as a button like the rest of the site. */
.backnav { margin: 0 0 var(--space-3); }
.backnav .btn { font-weight: 500; }
@media print { .backnav { display: none; } }

/* On small screens the navigation only offers what is used at a fair: start, catalogue, collection, wishlist. */
@media (max-width: 899.98px) { .primary li.desktoponly { display: none; } }

/* Start page */
.homegrid { display: grid; gap: var(--space-3); grid-template-columns: 1fr;
  grid-template-areas: "welcome" "photos" "cats" "news" "online"; }
.homegrid > .card { margin: 0; }
.h-welcome { grid-area: welcome; } .h-photos { grid-area: photos; } .h-cats { grid-area: cats; } .h-news { grid-area: news; } .h-online { grid-area: online; }
@media (min-width: 900px) {
  /* welcome text and news left, details right; the news starts level with the photo carousel and ends level with Online */
  .homegrid { grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); grid-template-areas: "welcome cats" "news photos" "news online"; }
}
.cycle { position: relative; }
.cycle .slide { display: block; text-decoration: none; color: inherit; }
.cycle .slide[hidden] { display: none; }
.cycle.js { height: 14rem; }
.cycle.js .slide { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .8s ease-in-out; }
.cycle.js .slide.on { opacity: 1; pointer-events: auto; z-index: 1; }
.cyclepause { position: absolute; right: .5rem; bottom: .5rem; z-index: 2; min-width: 32px; min-height: 32px; padding: 0 .5rem; border: 1px solid var(--border); border-radius: var(--radius); background: color-mix(in srgb, var(--surface) 85%, transparent); color: var(--text); font-size: .8rem; cursor: pointer; }
.cyclepause:hover { border-color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .cycle.js .slide { transition: none; } }
.cycle img { width: 100%; height: 14rem; object-fit: contain; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); display: block; }
.cycle .caption { display: block; margin-top: .4rem; font-size: .9rem; }
table.compact th.plain { font-weight: normal; text-align: left; }
.plainlist { list-style: none; margin: 0; padding: 0; }
.plainlist li { padding: .25rem 0; border-bottom: 1px solid var(--border); }
.plainlist li:last-child { border-bottom: 0; }

/* Formatted text (news) and its editor */
.richtext { line-height: 1.55; overflow-wrap: anywhere; }
.richtext h2, .richtext h3 { margin: 1rem 0 .4rem; }
.richtext ul, .richtext ol { padding-left: 1.5rem; }
.richtext blockquote { margin: .75rem 0; padding: .25rem 1rem; border-left: 4px solid var(--border); color: var(--muted, inherit); }
.richtext-editor { border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.rt-bar { display: flex; flex-wrap: wrap; gap: .25rem; padding: .35rem; border-bottom: 1px solid var(--border); background: var(--bg); }
.rt-btn { min-width: 2.2rem; min-height: 2.2rem; padding: 0 .4rem; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; cursor: pointer; font: inherit; }
.rt-btn:hover, .rt-btn:focus-visible { border-color: var(--primary, #1d5fbf); }
.rt-bold { font-weight: 700; } .rt-italic { font-style: italic; } .rt-underline { text-decoration: underline; }
.rt-area { min-height: 9rem; padding: .6rem .75rem; outline: none; }
.rt-area:focus { box-shadow: 0 0 0 2px var(--primary, #1d5fbf) inset; }
.rt-area.autotr { background: #fffbe6; }

/* Beheer: buttons grouped by subject */
.beheergroups { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-3); margin: var(--space-3) 0; }
.beheergroups section { border: 1px solid var(--border); border-radius: var(--radius); padding: .75rem 1rem; background: var(--bg); }
.beheergroups h2 { margin: 0 0 .5rem; font-size: 1.05rem; }
.beheergroups .actions { margin: 0; }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.scalebox { column-count: 2; column-gap: var(--space-4); padding: var(--space-2) var(--space-3); margin: 0 0 var(--space-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.scalebox .check { display: flex; align-items: center; gap: var(--space-2); min-height: 34px; break-inside: avoid; cursor: pointer; }
.scalebox .check input { width: auto; margin: 0; flex: none; }
@media (max-width: 30rem) { .scalebox { column-count: 1; } }
.lengthbar{margin:var(--space-2) 0 var(--space-3)}
.lengthmeter{width:100%;height:14px;display:block;margin-top:4px}
.combostrip li{align-self:flex-start}
.lenline{position:relative;align-self:stretch;display:block;margin-top:6px;height:10px;border-top:3px solid var(--text);border-right:3px solid var(--text);color:var(--text)}
.lenline.over{border-color:var(--danger,#c62828);color:var(--danger,#c62828)}
.lenline .lenlbl{position:absolute;right:-3px;top:12px;font-size:.7rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.combostrip li{padding-bottom:22px}
tr.overlength td{color:var(--danger,#c62828)}
.lengthmeter.over::-webkit-meter-even-less-good-value{background:var(--danger,#c62828)}
.lengthmeter.over:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:var(--danger,#c62828)}
.itemtop{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-4);align-items:start}
@media (min-width:56rem){.itemtop{grid-template-columns:minmax(0,1fr) minmax(0,24rem)}}
.itemphotos h2{margin-top:0}
.photogrid{list-style:none;margin:0 0 var(--space-3);padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}
.photogrid li{display:flex;flex-wrap:wrap;gap:4px;align-items:center;justify-content:center;padding:4px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.photogrid li>a{flex:1 0 100%;display:block}
.photogrid img{width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;display:block;background:#fff}
.dropzone{border:2px dashed var(--border);border-radius:var(--radius);padding:var(--space-4);margin:var(--space-3) 0;background:var(--surface);text-align:center}
.dropzone.over{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--surface))}
.dropzone .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);opacity:0}
.dropzone label.btn:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.uploadbar{width:100%;height:14px}
.uploadlog{text-align:left;max-height:12rem;overflow:auto;color:var(--danger,#c62828)}
.crumbs{margin:var(--space-2) 0}
.folderlist{list-style:none;padding:0;columns:2 16rem}
.folderlist li{padding:2px 0;break-inside:avoid}
.filethumb{width:48px;height:36px;object-fit:contain;background:#fff;display:block}

/* Vraag en aanbod */
.marketgrid{list-style:none;margin:0 0 var(--space-3);padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:var(--space-3)}
.marketcard{display:flex;flex-direction:column;gap:4px;height:100%;padding:var(--space-2);border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:inherit;text-decoration:none}
.marketcard:hover,.marketcard:focus-visible{border-color:var(--accent,currentColor)}
.marketcard .thumb{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius)}
.price{font-weight:600;font-variant-numeric:tabular-nums}
img.sellerflag{vertical-align:-2px;margin-inline-end:4px;border:1px solid var(--border)}

/* submenu under "Start" (desktop only) */
.primary .submenu{display:none}
@media (min-width: 900px) {
  .primary li.hassub{position:relative}
  .primary .submenu{position:absolute;top:100%;left:0;z-index:20;min-width:13rem;flex-direction:column;flex-wrap:nowrap;padding:var(--space-1) 0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 4px 12px rgb(0 0 0 / .15)}
  .primary li.hassub:hover>.submenu,.primary li.hassub:focus-within>.submenu{display:flex}
  .primary .submenu li{flex:0 0 auto}
  .primary .submenu a{border-bottom:0;white-space:nowrap}
}