/* Kubinu kit components: one block per partial in templates/kit/components/. The list, record, form, empty-state and
   confirm patterns of the Kubinu studio, re-expressed in the --k-* tokens. Tokens only. */

/* ---------- page header ---------- */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; margin-block: 4px 16px; }
.page-head-text { display: grid; gap: 4px; flex: 1 1 18rem; }
.page-head h1 { font: var(--k-headline-s); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.page-head .helper { font: var(--k-body-m); color: var(--k-fg-muted); max-width: 68ch; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; font: var(--k-label-m); letter-spacing: .08em; text-transform: uppercase; color: var(--k-fg-muted); }
.crumbs a { color: var(--k-fg-muted); display: inline-block; padding-block: 14px; margin-block: -14px; }  /* 44 px hit area, no extra height */
.crumbs a:hover { color: var(--k-fg); }
.crumb-sep { color: var(--k-outline); }
@media (min-width: 600px) { .page-head h1 { font: var(--k-headline-m); } .page-head { margin-bottom: 20px; } }
@media (max-width: 599px) { .page-head > .actions { flex: 1 1 100%; } .page-head > .actions > .btn:only-child { flex: 1; } }

/* ---------- card with parts ---------- */
.card--parts { padding: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 8px 16px; border-bottom: 1px solid var(--k-outline-variant); }
.card-head h2 { font: var(--k-title-m); }
.card-meta { font: var(--k-label-s); text-transform: uppercase; letter-spacing: .08em; color: var(--k-fg-muted); white-space: nowrap; }
a.card-meta { display: inline-flex; align-items: center; min-height: 44px; color: var(--k-link); }
.card-body { padding: 16px; }
.card--flush > .card-body { padding: 0; }
.card--flush > .card-body > .table-wrap { border: 0; border-radius: 0 0 var(--k-radius-lg) var(--k-radius-lg); }
.card-foot { padding: 10px 16px; border-top: 1px solid var(--k-outline-variant); font: var(--k-body-s); color: var(--k-fg-muted); }
.table-wrap > .card-head { background: var(--k-surface); }
@media (min-width: 600px) { .card-head, .card-foot { padding-inline: 20px; } .card-body { padding: 20px; } }

/* ---------- forms laid out ---------- */
.form-grid { display: grid; gap: 16px; }
@media (min-width: 720px) { .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-grid > .span, .form-grid > .form-errors, .form-grid > .actions { grid-column: 1 / -1; } }
.form-errors { margin-bottom: 4px; }
.form-foot { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; padding-top: 8px; }

/* ---------- filter bar ---------- */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.filters > .chips { flex: 1 1 auto; }
.chip-count { margin-left: 2px; }
.filter-selects { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.filter-select .input { min-height: 44px; width: auto; min-width: 9rem; max-width: 100%; border-radius: var(--k-radius-full); padding-inline: 14px; }
.filter-selects[data-enhanced] .filter-apply { display: none; }  /* ui.js applies on change; the button is for when scripts are off */
.search { position: relative; flex: 0 1 20rem; min-width: 12rem; margin: 0 0 0 auto; }
.search .ico { position: absolute; left: 14px; top: 12px; width: 20px; height: 20px; color: var(--k-fg-muted); pointer-events: none; }
.search .input { min-height: 44px; padding-left: 44px; border-radius: var(--k-radius-full); }
@media (max-width: 719px) {
  .filters > .chips, .filter-selects, .search { flex: 1 1 100%; margin-left: 0; }
  .chips--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
  .chips--scroll::-webkit-scrollbar { display: none; }
  .filter-select { flex: 1 1 9rem; }
  .filter-select .input { width: 100%; }
}

/* ---------- pagination ---------- */
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 8px 16px; border-top: 1px solid var(--k-outline-variant); }
.pager-count { font: var(--k-coord); color: var(--k-fg-muted); }
.pages { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; }
.page-btn { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 8px; border-radius: var(--k-radius-full); font: var(--k-label-l); font-variant-numeric: tabular-nums; text-decoration: none; color: var(--k-fg); }
.page-btn .ico { width: 20px; height: 20px; }
a.page-btn:hover { background: var(--k-surface-high); }
.page-btn.is-on { background: var(--k-primary); color: var(--k-on-primary); }
.page-btn.is-gap { min-width: 24px; color: var(--k-fg-muted); }
.page-btn.is-off { color: var(--k-fg-disabled); }
.pages-of { display: none; padding-inline: 4px 8px; font: var(--k-coord); color: var(--k-fg-muted); }
/* phones: previous, the current page "of N", next; the numbered links would wrap */
@media (max-width: 599px) {
  .pager { justify-content: center; } .pager-count { flex: 1 1 100%; text-align: center; }
  .pages > .page-btn:not(.is-on):not([rel]):not(.is-off) { display: none; }
  .pages-of { display: inline; }
}

/* ---------- empty state: the tile motif with its dashed slot ---------- */
.empty { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 48px 24px; }
.empty--compact { padding: 32px 16px; }
.motif { position: relative; display: grid; grid-template-columns: repeat(3, 16px); gap: 5px; margin-bottom: 12px; }
.motif i { width: 16px; height: 16px; border-radius: 3px; background: var(--k-surface-highest); }
.motif .motif-slot { background: transparent; border: 1.5px dashed var(--k-outline); }
.motif b { position: absolute; left: 42px; top: 42px; width: 16px; height: 16px; border-radius: 3px; background: var(--k-accent); transform: translate(9px, 8px) rotate(20deg); }
.empty--compact .motif { scale: .85; margin-bottom: 4px; }
.empty-title { font: var(--k-title-l); }
.empty-title--lg { font: var(--k-headline-s); letter-spacing: -0.01em; }
.empty-text { color: var(--k-fg-muted); font: var(--k-body-m); max-width: 46ch; }
.empty > .btn, .empty > .actions { margin-top: 8px; }
@media (min-width: 600px) { .empty-title--lg { font: var(--k-headline-m); } }

/* ---------- small pieces several screens share ---------- */
.space-below { margin-bottom: 16px; }
.space-above { margin-top: 16px; }
.nowrap { white-space: nowrap; }
/* a set of tick boxes (CheckboxSelectMultiple(attrs={"class": "choices"})) flows into columns */
div.choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0 16px; }
div.choices > * { min-width: 0; }
/* a labelled date in the filter bar: <label class="filter-select filter-date"><span>From</span><input type="date"></label> */
.filter-date { display: inline-flex; align-items: center; gap: 8px; font: var(--k-label-l); color: var(--k-fg-muted); }
.filter-date > * { min-width: 0; }
.filter-date .input { flex: 1; min-width: 9rem; }
/* a quiet "show more" link: <details class="more"><summary>The first 20</summary>...</details> */
.more > summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--k-link); font: var(--k-label-l); }

/* ---------- rows: a short list inside a card ---------- */
.rows { margin: 0; padding: 0; list-style: none; font: var(--k-body-m); }
.rows > li { min-width: 0; padding: 12px 16px; border-top: 1px solid var(--k-outline-variant); }
.rows > li:first-child { border-top: 0; }
.rows > li > * { min-width: 0; overflow-wrap: anywhere; }
.rows--plain > li { padding-inline: 0; }
.rows--foot { border-top: 1px solid var(--k-outline-variant); background: var(--k-surface); }
@media (min-width: 600px) { .rows > li { padding-inline: 20px; } .rows--plain > li { padding-inline: 0; } }
/* split: a name on the left, a mono date or figure on the right */
.rows--split > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 16px; min-height: 48px; padding-block: 8px; }
.rows--split a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -6px; color: var(--k-fg); font-weight: 600; text-decoration: none; }
.rows--split a:hover { text-decoration: underline; }
.rows--split form { margin: 0; }
.rows-meta { font: var(--k-coord); color: var(--k-fg-muted); }

/* ---------- error pages ---------- */
.error-card { width: min(36rem, 100%); padding: 0; }
.error-card .empty { padding: 40px 20px; }
.error-card .eyebrow { justify-content: center; overflow-wrap: anywhere; }
.error-ref { font-size: .75rem; margin-top: 8px; }

/* ---------- legend for maps ---------- */
.legend-box { display: grid; gap: 6px; font: var(--k-body-s); min-width: 0; }
.legend-unit { color: var(--k-fg-muted); margin-top: -4px; }
.ramp { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; margin: 2px 0 0; padding: 0; list-style: none; }
.ramp li { display: grid; gap: 4px; }
.ramp-sw { display: block; height: 14px; border-radius: 2px; border: 1px solid var(--k-outline-variant); }
.ramp li:first-child .ramp-sw { border-radius: var(--k-radius-xs) 2px 2px var(--k-radius-xs); }
.ramp li:last-child .ramp-sw { border-radius: 2px var(--k-radius-xs) var(--k-radius-xs) 2px; }
.ramp span { font: var(--k-coord); font-size: .6875rem; line-height: 1rem; color: var(--k-fg-muted); overflow-wrap: anywhere; }
/* the classes of a map's result ramp, low to high: on a dark map the order of the five colours is turned round
   (tokens.css, --k-map-ramp-*), so the legend and the map always agree and the highest class stands out most */
.ramp-1 { background: var(--k-map-ramp-1); } .ramp-2 { background: var(--k-map-ramp-2); } .ramp-3 { background: var(--k-map-ramp-3); } .ramp-4 { background: var(--k-map-ramp-4); } .ramp-5 { background: var(--k-map-ramp-5); }
.legend-classes { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.legend-classes li, .legend-nodata { display: flex; align-items: center; gap: 8px; }
.sw { width: 12px; height: 12px; border-radius: var(--k-radius-xs); flex: none; background: var(--k-chart-1); border: 1px solid var(--k-outline-variant); }
.sw--line { height: 3px; width: 16px; border: 0; border-radius: var(--k-radius-full); }
.sw--slot { background: transparent; border: 1.5px dashed var(--k-outline); }
.sw-1 { background: var(--k-chart-1); } .sw-2 { background: var(--k-chart-2); } .sw-3 { background: var(--k-chart-3); }
.sw-4 { background: var(--k-chart-4); } .sw-5 { background: var(--k-chart-5); } .sw-6 { background: var(--k-chart-6); }
.sw-water { background: var(--k-lc-water); } .sw-built-up { background: var(--k-lc-built-up); } .sw-forest { background: var(--k-lc-forest); }
.sw-cropland { background: var(--k-lc-cropland); } .sw-grassland { background: var(--k-lc-grassland); } .sw-bare { background: var(--k-lc-bare); }
.sw-road { background: var(--k-fg); } .sw-boundary { background: var(--k-map-boundary); }
.legend-nodata { color: var(--k-fg-muted); }
.legend-source { font: var(--k-label-s); letter-spacing: .04em; color: var(--k-fg-muted); }
/* compact (inside a map panel): the steps stack, so a label never wraps under its swatch */
.legend-box--compact .ramp { grid-auto-flow: row; grid-auto-columns: auto; gap: 3px; }
.legend-box--compact .ramp li { grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 8px; }
.legend-box--compact .ramp-sw, .legend-box--compact .ramp li:first-child .ramp-sw, .legend-box--compact .ramp li:last-child .ramp-sw { height: 12px; border-radius: 2px; }

/* ---------- limits note: what a number or a map does not show ---------- */
.limits { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border: 1px solid var(--k-outline-variant); border-left: 3px solid var(--k-outline); border-radius: var(--k-radius-sm) var(--k-radius-md) var(--k-radius-md) var(--k-radius-sm);
  background: var(--k-surface); font: var(--k-body-m); color: var(--k-fg); }
.limits > .ico { width: 20px; height: 20px; color: var(--k-fg-muted); }
.limits-body { display: grid; gap: 4px; flex: 1; }
.limits-title { font: var(--k-label-m); text-transform: uppercase; letter-spacing: .08em; color: var(--k-fg-muted); }
.limits ul { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; }
.limits-source { display: flex; flex-wrap: wrap; gap: 2px 16px; font: var(--k-body-s); color: var(--k-fg-muted); }
.limits-source a { color: var(--k-link); }

/* ---------- record pages ---------- */
.record { display: grid; gap: 16px; align-items: start; }
@media (min-width: 1100px) { .record { grid-template-columns: minmax(0, 1fr) 22rem; } }
.record > * { min-width: 0; }
.section-title { font: var(--k-title-l); margin-block: 8px; }
.prose { max-width: 68ch; display: grid; gap: 12px; }
.prose h2 { font: var(--k-title-l); margin-top: 8px; }
.prose ul, .prose ol { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }