/* ============================================================================
   Maskinportal — Global component primitives ("Mark & Maskine").
   Custom design system: no Bootstrap, no MudBlazor.
   Naming: strict BEM (.block__element--modifier); state classes are `is-*`;
   JS hooks are data-* attributes, never styled classes.
   Placement rule: only cross-cutting primitives live here — slice-specific
   styling belongs in co-located .razor.css files (which always override these,
   because the scoped bundle is un-layered).
   Admin chrome + shared admin-page patterns live in AdminLayout.razor.css.
   ========================================================================= */
@layer components {

  /* ---- Buttons (min 44px tap target) ---- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    min-height: var(--tap-min); padding: var(--sp-3) var(--sp-5);
    font: inherit; font-weight: 600; font-size: var(--text-base);
    border-radius: var(--radius-sm); border: 2px solid transparent; cursor: pointer;
    text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                transform 50ms ease;
  }
  .btn:active { transform: translateY(1px); }
  .btn[disabled], .btn:disabled { opacity: 0.55; cursor: not-allowed; }
  .btn--primary { background: var(--brand-900); color: #fff; }
  .btn--primary:hover { background: var(--brand-700); color: #fff; }
  .btn--cta { background: var(--color-cta); color: var(--color-cta-text); transition: background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform 50ms ease; }
  .btn--cta:hover { background: var(--accent-600); color: var(--brand-950); box-shadow: var(--shadow-glow); }
  .btn--ghost { background: transparent; border-color: var(--line-strong); color: var(--ink-900); }
  .btn--ghost:hover { background: var(--surface-2); }
  .btn--danger { background: var(--danger-600); color: #fff; }
  .btn--danger:hover { background: var(--danger-700); color: #fff; }
  .btn--danger-ghost { background: transparent; border-color: var(--danger-600); color: var(--danger-600); }
  .btn--danger-ghost:hover { background: var(--danger-050); color: var(--danger-700); }
  .btn--sm { min-height: 2.25rem; padding: var(--sp-2) var(--sp-3); font-size: var(--text-sm); }
  .btn--lg { min-height: 3.25rem; padding: var(--sp-3) var(--sp-6); font-size: var(--text-lg); }
  .btn--icon { min-width: var(--tap-min); padding: var(--sp-2); }

  /* ---- Header / nav (glass over content) ---- */
  .site-header {
    position: sticky; top: 0; z-index: var(--z-header);
    background: var(--surface); border-bottom: 1px solid var(--line);
    min-height: var(--header-h);
    transition: box-shadow var(--dur-base) var(--ease-out);
  }
  /* Glass lives on a pseudo-element, NOT the header itself: backdrop-filter turns the
     element into a backdrop root, and the mobile dropdown (a descendant) could then no
     longer blur the page content behind it — its own glass would silently sample nothing. */
  @supports (backdrop-filter: blur(1px)) {
    .site-header { background: transparent; }
    .site-header::before {
      content: ""; position: absolute; inset: 0; z-index: -1;
      background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(14px) saturate(1.3);
    }
  }
  .site-header.is-scrolled { box-shadow: var(--shadow-1); }
  .site-header__inner { display: flex; align-items: center; gap: var(--sp-5); min-height: var(--header-h); position: relative; }
  .brand { display: inline-flex; align-items: center; gap: var(--sp-3); text-decoration: none; color: var(--ink-900); font-weight: 800; font-size: var(--text-lg); min-width: 0; }
  /* object-fit: contain — on very narrow phones max-width squeezes the img box; contain keeps the
     wordmark's aspect ratio instead of squishing it. */
  .brand__logo { display: block; width: auto; height: 3.5rem; max-width: 100%; object-fit: contain; }
  /* Small screens: shrink the wordmark and drop the toggle's text so the header never overflows. */
  @media (max-width: 39.9375rem) {
    .site-header__inner { gap: var(--sp-3); }
    .brand__logo { height: 2.8rem; }
    .site-nav__toggle-label { display: none; }
  }
  .brand__name { font-family: var(--font-display); letter-spacing: -0.01em; }
  .site-nav { margin-left: auto; display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; }
  .site-nav a { position: relative; display: inline-flex; align-items: center; min-height: var(--tap-min); padding: 0 var(--sp-4); border-radius: var(--radius-sm); color: var(--ink-700); text-decoration: none; font-weight: 600; }
  .site-nav a:hover { background: var(--surface-2); color: var(--ink-900); }
  .site-nav a.active { color: var(--brand-700); font-weight: 700; }
  .site-nav a.active::after {
    content: ""; position: absolute; left: var(--sp-4); right: var(--sp-4); bottom: 4px;
    height: 3px; border-radius: var(--radius-pill); background: var(--brand-500);
  }
  .site-nav__toggle { display: none; }
  .header-search { display: none; }
  @media (min-width: 64rem) {
    .header-search { display: flex; align-items: center; gap: var(--sp-2); }
    .header-search .input { min-width: 14rem; }
  }
  /* Mobile nav (progressive enhancement — only when JS stamped html.js;
     without JS the nav simply wraps under the brand). */
  @media (max-width: 55.9375rem) {
    html.js .site-nav__toggle { display: inline-flex; margin-left: auto; }
    html.js .site-nav {
      display: none;
      position: absolute; top: 100%; left: 0; right: 0;
      margin-left: 0; padding: var(--sp-3) var(--sp-5) var(--sp-5);
      flex-direction: column; align-items: stretch; gap: var(--sp-1);
      background: var(--surface); border-bottom: 1px solid var(--line);
      box-shadow: var(--shadow-2);
    }
    html.js .site-header.is-open .site-nav { display: flex; }
    html.js .site-nav a { min-height: var(--tap-min); }
    /* Same glass as the header (see the backdrop-root note above). */
    @supports (backdrop-filter: blur(1px)) {
      html.js .site-nav { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(14px) saturate(1.3); }
    }
  }

  /* ---- Footer: markup + styles live scoped in Components/Layout/PublicFooter.razor(.css) ---- */

  /* ---- Prose (long-form content pages: /om + legal pages) ---- */
  .prose-header {
    border-bottom: 1px solid var(--line-strong);
    padding-bottom: var(--sp-6);
    margin-bottom: var(--sp-8);
  }
  .prose-header::before {
    content: "";
    display: block;
    width: 3rem; height: 4px;
    background: var(--brand-500);
    border-radius: var(--radius-pill);
    margin-bottom: var(--sp-4);
  }
  .prose-header__lead { font-size: var(--text-lg); color: var(--ink-700); max-width: 60ch; margin-top: var(--sp-3); }
  .prose-header__meta { font-size: var(--text-sm); color: var(--ink-500); margin-top: var(--sp-3); }
  .prose h2 { margin-top: var(--sp-8); }
  .prose h2:first-child { margin-top: 0; }
  .prose h3 { margin-top: var(--sp-6); }
  .prose p, .prose li { max-width: 68ch; }
  .prose ul, .prose ol { padding-left: 1.4rem; margin: 0 0 var(--sp-4); }
  .prose li { margin-top: var(--sp-2); }
  .prose li::marker { color: var(--brand-600); font-weight: 600; }
  .prose address { font-style: normal; }
  .prose-footer {
    border-top: 1px solid var(--line);
    margin-top: var(--sp-8);
    padding-top: var(--sp-6);
    display: flex; flex-wrap: wrap; gap: var(--sp-3);
  }

  /* ---- Hero (dark: dyb mark) ---- */
  .hero {
    background:
      radial-gradient(56rem 28rem at 85% -30%, rgba(23, 168, 107, 0.28), transparent 70%),
      radial-gradient(40rem 20rem at -10% 110%, rgba(242, 179, 61, 0.10), transparent 70%),
      linear-gradient(155deg, var(--brand-950) 0%, var(--brand-900) 45%, var(--brand-800) 100%);
    color: var(--dark-text);
  }
  .hero__inner { padding-block: var(--sp-10); }
  @media (min-width: 56rem) { .hero__inner { padding-block: var(--sp-12); } }
  .hero__title { font-size: var(--text-display); max-width: 18ch; margin-bottom: var(--sp-4); color: #fff; }
  .hero__lead { font-size: var(--text-lg); color: var(--dark-muted); max-width: 56ch; }
  .hero__search { margin-top: var(--sp-6); max-width: 40rem; }
  .hero__search .input { border-color: transparent; }
  .hero__quick-links { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); align-items: center; color: var(--dark-muted); }
  .hero .quick-link { background: rgba(233, 242, 237, 0.06); border-color: var(--dark-line); color: var(--dark-text); }
  .hero .quick-link:hover { border-color: var(--brand-400); color: #fff; background: rgba(23, 168, 107, 0.14); }
  .hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
  /* Copy left, machine showcase right on desktop; the showcase simply disappears below 64rem. */
  .hero__copy { min-width: 0; }
  .hero__showcase-wrap { display: none; }
  @media (min-width: 64rem) {
    .hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; gap: var(--sp-10); align-items: center; }
    .hero__showcase-wrap { display: block; }
  }
  .hero__showcase {
    position: relative; aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg); overflow: hidden;
    border: 1px solid var(--dark-line); box-shadow: var(--shadow-3);
  }
  .hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 900ms var(--ease-in-out); pointer-events: none; }
  .hero__slide.is-active { opacity: 1; pointer-events: auto; }
  .hero__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .hero__slide-caption {
    position: absolute; left: var(--sp-3); bottom: var(--sp-3);
    max-width: calc(100% - 2 * var(--sp-3));
    padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-sm);
    background: rgba(12, 32, 21, 0.78); color: var(--dark-text);
    font-size: var(--text-sm); font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .hero__slide-badge {
    position: absolute; top: var(--sp-3); left: var(--sp-3);
    padding: 2px var(--sp-3); border-radius: var(--radius-pill);
    background: var(--brand-500); color: #fff;
    font-size: var(--text-xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
  }
  /* Cycle progress: thin amber line filling over the 5 s interval (duration must match
     ROTATE_MS in app.js). Hidden while hover/focus pauses rotation, and entirely under
     reduced motion (no auto-rotation happens there at all). */
  .hero__progress {
    position: absolute; left: 0; bottom: 0; height: 3px; width: 0;
    background: var(--accent-500); z-index: 1;
  }
  .hero__progress.is-running { animation: mp-hero-progress 5s linear both; }
  @keyframes mp-hero-progress { from { width: 0; } to { width: 100%; } }
  [data-rotate].is-paused .hero__progress { opacity: 0; }
  /* No reduced-motion hiding here: rotation runs regardless (see app.js note); reduced
     motion only removes the slide crossfade, which is handled at .hero__slide. */
  /* Manual cycling dots: small visual dots on 24×44px hit areas (the one deliberate
     exception to the 44px width floor — ten full-width targets cannot fit the column). */
  .hero__dots { display: flex; justify-content: center; gap: var(--sp-1); margin-top: var(--sp-2); }
  .hero__dot {
    width: 1.5rem; height: 2.75rem; padding: 0; border: 0; background: none;
    display: grid; place-items: center; cursor: pointer;
  }
  .hero__dot::before {
    content: ""; width: 0.625rem; height: 0.625rem; border-radius: 50%;
    background: var(--dark-line);
    transition: background var(--dur-fast) var(--ease-out), scale var(--dur-fast) var(--ease-out);
  }
  .hero__dot:hover::before { background: var(--dark-muted); }
  .hero__dot.is-active::before { background: var(--brand-400); scale: 1.4; }
  .hero__dot:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-pill); }
  /* (No reduced-motion override here: the pure-opacity crossfade is exempted in base.css.) */
  /* One-time page-load rise for hero children (CSS-only; killed by reduced-motion). */
  html.js .hero__copy > *, html.js .hero__showcase-wrap { animation: mp-rise var(--dur-hero) var(--ease-out) both; }
  html.js .hero__copy > *:nth-child(2) { animation-delay: 80ms; }
  html.js .hero__copy > *:nth-child(3) { animation-delay: 160ms; }
  html.js .hero__copy > *:nth-child(n + 4) { animation-delay: 240ms; }
  html.js .hero__showcase-wrap { animation-delay: 160ms; }
  @keyframes mp-rise {
    from { opacity: 0; translate: 0 14px; }
    to   { opacity: 1; translate: 0 0; }
  }

  /* ---- Sections ---- */
  .section--tint { background: var(--surface-2); border-block: 1px solid var(--line); }
  .section--flush-top { padding-top: var(--sp-5); }
  .section__head { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: baseline; justify-content: space-between; margin-bottom: var(--sp-5); }
  .section__eyebrow {
    display: block; font-family: var(--font-display); font-weight: 600;
    font-size: var(--text-sm); letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--brand-600); margin-bottom: var(--sp-2);
  }

  /* ---- Card ---- */
  .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-1); overflow: hidden; }
  .card__body { padding: var(--sp-5); }
  .card__media { aspect-ratio: 4 / 3; background: var(--surface-2); overflow: hidden; }
  .card__media img { width: 100%; height: 100%; object-fit: cover; }
  .card--flat { box-shadow: none; }

  /* ---- Price ---- */
  .price {
    font-family: var(--font-display); font-weight: 700;
    color: var(--color-price);
    font-feature-settings: var(--numeric-data);
    margin: 0;
  }
  .price--onrequest { color: var(--ink-500); font-weight: 600; }

  /* ---- Badge / pill ---- */
  .badge {
    display: inline-flex; align-items: center; gap: var(--sp-1);
    padding: 0.15rem var(--sp-3); border-radius: var(--radius-pill);
    font-size: var(--text-sm); font-weight: 600;
    background: var(--brand-100); color: var(--brand-800);
  }
  .badge--accent { background: var(--accent-100); color: var(--accent-800); }
  .badge--ok { background: var(--ok-050); color: var(--ok-600); }
  .badge--warn { background: var(--warn-050); color: var(--warn-700); }
  .badge--danger { background: var(--danger-050); color: var(--danger-700); }
  .badge--info { background: var(--info-050); color: var(--info-600); }
  .badge--neutral { background: var(--surface-2); color: var(--ink-700); }
  .badge--outline { background: transparent; border: 1px solid var(--line-strong); color: var(--ink-700); }

  /* ---- Alert (MpAlert) ---- */
  .mp-alert { display: flex; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-2); }
  .mp-alert--error { background: var(--danger-050); border-color: var(--danger-600); color: var(--danger-700); }
  .mp-alert--info { background: var(--info-050); border-color: var(--info-600); color: var(--ink-900); }
  .mp-alert--ok { background: var(--ok-050); border-color: var(--ok-600); color: var(--ink-900); }
  .mp-alert--warn { background: var(--warn-050); border-color: var(--warn-600); color: var(--ink-900); }

  /* ---- Forms ---- */
  .field { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
  .field label { font-weight: 600; }
  .field__hint { color: var(--ink-500); font-size: var(--text-sm); margin: 0; }
  .field__error { color: var(--danger-700); font-size: var(--text-sm); font-weight: 600; margin: 0; }
  .input {
    font: inherit; font-size: var(--text-base); padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--ink-900);
    min-height: var(--tap-min); width: 100%;
  }
  .input::placeholder { color: var(--ink-500); }
  .input:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--brand-500); }
  .select {
    font: inherit; font-size: var(--text-base); padding: var(--sp-3) var(--sp-8) var(--sp-3) var(--sp-4);
    border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
    background-color: var(--surface); color: var(--ink-900);
    min-height: var(--tap-min); width: 100%;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M1 1l7 7 7-7' fill='none' stroke='%234A4A42' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--sp-4) center;
  }
  .select:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--brand-500); }
  /* Customizable select (Chromium 135+): styled picker panel + options; other browsers
     keep their native popup. Pure progressive enhancement — no JS. */
  @supports (appearance: base-select) {
    .select, .select::picker(select) { appearance: base-select; }
    .select::picker(select) {
      margin-top: var(--sp-1);
      border: 1px solid var(--line-strong);
      border-radius: var(--radius-sm);
      background: var(--surface);
      box-shadow: var(--shadow-2);
      padding: var(--sp-1);
    }
    .select option {
      display: flex; align-items: center; gap: var(--sp-2);
      min-height: var(--tap-min);
      padding: var(--sp-2) var(--sp-3);
      border-radius: 6px;
      font-size: var(--text-base);
    }
    .select option:hover, .select option:focus-visible { background: var(--brand-050); }
    .select option:checked { background: var(--brand-100); font-weight: 600; }
    .select option::checkmark { color: var(--brand-600); }
    .select::picker-icon { display: none; } /* we draw our own chevron */
  }
  .check { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 600; min-height: var(--tap-min); }
  /* flex: none — a wrapping label (long dealer names) must squeeze the text, never the box. */
  .check input { width: 1.25rem; height: 1.25rem; flex: none; accent-color: var(--brand-700); }
  /* ---- Dual-handle range slider (price facet; JS-only enhancement over from/to inputs).
     The two native ranges are stacked full-width with pointer-events only on their thumbs —
     the standard dual-range overlay. ---- */
  .range-slider { position: relative; height: var(--tap-min); margin-top: var(--sp-1); display: none; }
  html.js .range-slider { display: block; }
  .range-slider__track {
    position: absolute; top: 50%; left: 0.8125rem; right: 0.8125rem; height: 6px;
    transform: translateY(-50%); border-radius: var(--radius-pill); background: var(--brand-100);
  }
  .range-slider__fill { position: absolute; top: 0; bottom: 0; border-radius: inherit; background: var(--brand-500); }
  .range-slider input[type="range"] {
    position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
    -webkit-appearance: none; appearance: none; background: none; pointer-events: none;
  }
  .range-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; pointer-events: auto;
    width: 1.625rem; height: 1.625rem; border-radius: 50%;
    background: #fff; border: 3px solid var(--brand-700); box-shadow: var(--shadow-1); cursor: grab;
  }
  .range-slider input[type="range"]::-moz-range-thumb {
    pointer-events: auto; width: 1.625rem; height: 1.625rem; border-radius: 50%;
    background: #fff; border: 3px solid var(--brand-700); box-shadow: var(--shadow-1); cursor: grab;
  }
  .range-slider input[type="range"]:focus-visible { outline: none; }
  .range-slider input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--focus); outline-offset: 2px; }
  .range-slider input[type="range"]:focus-visible::-moz-range-thumb { outline: 3px solid var(--focus); outline-offset: 2px; }
  .input-group { display: flex; width: 100%; }
  .input-group .input { flex: 1 1 auto; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
  .input-group .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; flex-shrink: 0; }
  .fieldset { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--sp-4); margin: 0 0 var(--sp-4); min-width: 0; }
  .fieldset legend { font-weight: 700; padding-inline: var(--sp-2); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-700); }
  .form-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

  /* ---- Plain data table (admin + public data) ---- */
  .table { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
  .table th, .table td { text-align: left; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); }
  .table thead th { background: var(--surface-2); color: var(--ink-700); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.05em; }
  .table td { font-feature-settings: var(--numeric-data); }
  .table--hover tbody tr:hover { background: var(--brand-050); }

  /* ---- Breadcrumbs ---- */
  .breadcrumbs { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; color: var(--ink-500); font-size: var(--text-sm); }
  .breadcrumbs a { color: var(--ink-500); }
  .breadcrumbs a:hover { color: var(--brand-700); }
  .breadcrumbs [aria-current="page"] { color: var(--ink-700); font-weight: 600; }

  /* ---- Pagination (MpPagination — link mode & button mode) ---- */
  .pagination { display: flex; flex-direction: column; gap: var(--sp-3); align-items: center; margin-block: var(--sp-6); }
  .pagination__list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; align-items: center; justify-content: center; }
  .pagination__link {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: var(--tap-min); min-height: var(--tap-min); padding: 0 var(--sp-3);
    border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--ink-900);
    font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
    font-feature-settings: var(--numeric-data);
  }
  .pagination__link:hover { background: var(--surface-2); color: var(--ink-900); }
  .pagination__link--current { background: var(--brand-800); border-color: var(--brand-800); color: #fff; cursor: default; }
  .pagination__link--current:hover { background: var(--brand-800); color: #fff; }
  .pagination__gap { color: var(--ink-500); padding-inline: var(--sp-1); }
  .pagination__summary { color: var(--ink-500); font-size: var(--text-sm); margin: 0; }

  /* ---- Chips (active filters) + quick links ---- */
  .chip-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
  .chip {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    min-height: var(--tap-min); padding: var(--sp-1) var(--sp-4);
    border-radius: var(--radius-pill); border: 1px solid var(--brand-200);
    background: var(--brand-050); color: var(--brand-800);
    font-weight: 600; font-size: var(--text-sm); text-decoration: none;
  }
  .chip:hover { background: var(--brand-100); color: var(--brand-900); }
  .chip__x { font-weight: 700; }
  .quick-link {
    display: inline-flex; align-items: center;
    min-height: var(--tap-min); padding: var(--sp-1) var(--sp-4);
    border-radius: var(--radius-pill); border: 1px solid var(--line-strong);
    background: var(--surface); color: var(--ink-700);
    font-weight: 600; text-decoration: none;
  }
  .quick-link:hover { border-color: var(--brand-500); color: var(--brand-800); background: var(--brand-050); }

  /* ---- Skeleton (streaming pending states) ---- */
  .skeleton {
    background: linear-gradient(90deg, var(--surface-2) 25%, #E6EAE8 37%, var(--surface-2) 63%);
    background-size: 400% 100%;
    animation: mp-shimmer 1.6s ease infinite;
    border-radius: var(--radius-sm);
  }
  .skeleton--text { height: 1em; }
  .skeleton--media { aspect-ratio: 4 / 3; }
  @keyframes mp-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
  @media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

  /* ---- Empty state ---- */
  .empty-state { text-align: center; padding: var(--sp-10) var(--sp-5); display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); }
  .empty-state__title { font-family: var(--font-display); font-size: var(--text-xl); margin: 0; }
  .empty-state__body { color: var(--ink-500); max-width: 44ch; margin: 0; }
  .empty-state__action { margin-top: var(--sp-3); display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; }

  /* ---- Grids ---- */
  .mp-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
  .mp-grid > li { margin: 0; }
  .tile-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @media (min-width: 40rem) { .tile-grid { grid-template-columns: repeat(3, 1fr); } }
  @media (min-width: 64rem) { .tile-grid { grid-template-columns: repeat(6, 1fr); } }
  .trust-grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }

  /* ---- Listing result card ---- */
  .listing-card {
    display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    overflow: hidden; text-decoration: none; color: inherit; box-shadow: var(--shadow-1);
    transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out);
  }
  .listing-card:hover { box-shadow: var(--shadow-2); transform: translateY(-3px); border-color: var(--brand-300); }
  .listing-card:active { transform: translateY(0); }
  @media (prefers-reduced-motion: reduce) { .listing-card:hover { transform: none; } }
  .listing-card__media { aspect-ratio: 4 / 3; background: var(--surface-2); display: grid; place-items: center; overflow: hidden; }
  .listing-card__media img { width: 100%; height: 100%; object-fit: cover; }
  .listing-card__placeholder { width: 4rem; height: 4rem; color: var(--moss-500); }
  .listing-card__body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
  .listing-card__body .badge { align-self: flex-start; }
  .listing-card__kicker { color: var(--ink-500); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; margin: 0; }
  .listing-card__title {
    font-size: var(--text-lg); margin: 0; font-weight: 700;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  /* Three-cell stat strip (år/timer/hk) — a quiet echo of the detail page's data plate.
     Fixed columns so the stats sit on ONE line and align across neighbouring cards. */
  .listing-card__meta {
    display: grid; grid-template-columns: repeat(3, 1fr); margin: 0;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface-2); overflow: hidden;
  }
  .listing-card__meta > div { padding: var(--sp-1) var(--sp-2); min-width: 0; }
  .listing-card__meta > div + div { border-left: 1px solid var(--line); }
  .listing-card__meta dt {
    font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--ink-500); font-weight: 600;
  }
  .listing-card__meta dd {
    margin: 0; font-weight: 700; color: var(--ink-700); font-size: var(--text-sm);
    font-feature-settings: var(--numeric-data);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .listing-card__price { font-size: var(--text-lg); margin: 0; margin-top: auto; }
  .listing-card__dealer { margin: 0; color: var(--ink-500); font-size: var(--text-sm); }

  /* ---- Tooltip primitive: [data-tooltip] shows its text below the element on
     hover/keyboard-focus. For icon-only controls whose purpose isn't self-evident. ---- */
  [data-tooltip] { position: relative; }
  [data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute; top: calc(100% + 6px); right: 0;
    padding: 3px var(--sp-2); border-radius: var(--radius-sm);
    background: var(--ink-900); color: #fff;
    font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.01em;
    white-space: nowrap; opacity: 0; pointer-events: none;
    transition: opacity var(--dur-fast) var(--ease-out);
    z-index: 5;
  }
  [data-tooltip]:hover::after,
  [data-tooltip]:focus-visible::after { opacity: 1; }

  /* ---- Sammenlign (compare): card toggle + bottom bar ---- */
  .listing-card-shell { position: relative; height: 100%; }
  .compare-toggle {
    position: absolute; top: var(--sp-3); right: var(--sp-3); z-index: 2;
    width: 2.75rem; height: 2.75rem; padding: 0;
    display: grid; place-items: center; cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 50%;
    background: rgba(12, 32, 21, 0.55); color: #fff;
    backdrop-filter: blur(6px);
    transition: background var(--dur-fast) var(--ease-out);
  }
  .compare-toggle:hover { background: rgba(12, 32, 21, 0.85); }
  .compare-toggle.is-active { background: var(--brand-500); border-color: var(--brand-400); }
  .compare-toggle:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
  /* Detail page variant is a normal ghost button; active state tints it brand. */
  .btn.compare-detail.is-active { border-color: var(--brand-500); color: var(--brand-700); background: var(--brand-050); }

  .compare-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-drawer);
    background: var(--surface); border-top: 1px solid var(--line-strong);
    box-shadow: 0 -6px 24px rgba(12, 32, 21, 0.12);
  }
  .compare-bar__inner {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-4); padding-block: var(--sp-3);
  }
  .compare-bar__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); flex: 1 1 auto; min-width: 0; }
  .compare-bar__chip {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    padding: 2px var(--sp-1) 2px 2px; max-width: 16rem;
    border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface-2);
  }
  .compare-bar__chip img { width: 2.25rem; height: 2.25rem; border-radius: 50%; object-fit: cover; display: block; }
  .compare-bar__chip-title {
    font-size: var(--text-sm); font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .compare-bar__chip-remove {
    width: var(--tap-min); height: var(--tap-min); padding: 0; border: 0; border-radius: 50%;
    background: none; cursor: pointer; font-size: 1.375rem; line-height: 1; color: var(--ink-500);
  }
  .compare-bar__chip-remove:hover { color: var(--danger); background: var(--danger-050); }
  .compare-bar__chip-remove:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
  .compare-bar__meta { display: flex; align-items: center; gap: var(--sp-3); }
  .compare-bar__count { font-weight: 700; color: var(--ink-700); font-feature-settings: var(--numeric-data); }
  .compare-bar__hint { font-size: var(--text-sm); color: var(--ink-500); }
  /* The "4/4, remove one first" hint only shows while the refusal flash is on. */
  .compare-bar__hint--full { display: none; }
  .compare-bar.is-full .compare-bar__hint--full { display: inline; color: var(--accent-800); font-weight: 600; }
  .compare-bar.is-full .compare-bar__count { color: var(--accent-800); }
  .compare-bar__actions { display: flex; align-items: center; gap: var(--sp-3); margin-left: auto; }
  .btn.is-disabled { opacity: 0.55; pointer-events: none; }
  /* The fixed bar must never cover page content INCLUDING the footer: pad the BODY by the
     bar's measured height (JS sets --compare-bar-h on every render/resize; the fallback
     covers the first paint). */
  body.has-compare-bar { padding-bottom: calc(var(--compare-bar-h, 6rem) + var(--sp-4)); }
  @media (max-width: 39.9375rem) {
    /* Photo-less chips keep their title — a bare × would be unidentifiable. */
    .compare-bar__chip:has(img) .compare-bar__chip-title { display: none; }
    .compare-bar__chip { padding: 2px; }
  }

  /* ---- Spinner (shared: live admin indicators) ---- */
  .spinner { display: inline-block; width: 1em; height: 1em; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: mp-spin .7s linear infinite; vertical-align: -0.15em; }
  @keyframes mp-spin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s; } }

  /* ==========================================================================
     LEGACY — classes still referenced by pre-redesign markup.
     Each block is deleted when the phase that rewrites its markup lands.
     ======================================================================== */

  /* legacy (Phase 2: PublicHeader/PublicFooter rewrite) */
  .brand__mark { width: 2.25rem; height: 2.25rem; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--brand-700), var(--brand-500)); display: grid; place-items: center; color: #fff; font-weight: 800; }
  .brand__tagline { color: var(--ink-500); font-weight: 500; font-size: var(--text-sm); }

  /* legacy (Phase 2: Home rewrite) */
  .feature-grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
  .hero p.lead, .lead { font-size: var(--text-lg); color: var(--ink-700); max-width: 56ch; }

  /* legacy (Phase 2: SearchListings facet form) */
  .search-form { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
  .search-form__input { flex: 1 1 18rem; min-width: 0; }

  /* legacy (Phase 2: ListingCard rewrite) */
  .listing-card__specs { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: 0; padding: 0; color: var(--ink-500); font-size: var(--text-sm); }
  .listing-card__specs li + li::before { content: "·"; margin-right: var(--sp-3); }

  /* legacy (Phase 2: ListingDetail rewrite — .detail layout moves to ListingDetail.razor.css) */
  .detail { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; }
  @media (min-width: 56rem) { .detail { grid-template-columns: 1.6fr 1fr; align-items: start; } }
  .detail__gallery { border-radius: var(--radius); overflow: hidden; background: var(--surface-2); }
  .detail__hero { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
  .detail__placeholder { aspect-ratio: 4 / 3; display: grid; place-items: center; font-size: 5rem; opacity: .4; }
  .detail__summary { position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
  .detail__title { font-size: var(--text-2xl); margin: 0; }
  .detail__price { font-size: var(--text-2xl); font-weight: 800; color: var(--color-price); margin: 0; }
  .detail__facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); margin: 0; }
  .detail__facts dt { color: var(--ink-500); font-size: var(--text-sm); }
  .detail__facts dd { margin: 0; font-weight: 700; }
  .detail__dealer { border-top: 1px solid var(--line); padding-top: var(--sp-4); }
  .detail__block { border-top: 1px solid var(--line); padding-top: var(--sp-6); }
  .spec-table { width: 100%; border-collapse: collapse; }
  .spec-table th, .spec-table td { text-align: left; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); }
  .spec-table th { color: var(--ink-500); font-weight: 600; width: 40%; }

}

@layer utilities {
  .muted { color: var(--ink-500); }
  /* --ink-500 is a light-surface gray; on the dark hero it fails contrast. */
  .hero .muted { color: var(--dark-muted); }
  .tabular { font-feature-settings: var(--numeric-data); }
  .text-center { text-align: center; }
  .hide-until-md { display: none; }
  @media (min-width: 56rem) {
    .hide-until-md { display: initial; }
    .hide-from-md { display: none; }
  }
}