/* ==========================================================================
  path: /wp-content/themes/bedrebyttede/assets/css/tokens.css
   BedreByttede token.css — "The Movement" vibe
   Neutral surfaces, energized greens, crisp spacing, subtle motion
   ========================================================================== */

/* ---- Base Reset --------------------------------------------------------- */
:where(*, *::before, *::after) {
  box-sizing: border-box;
}

:where(html) {
  -webkit-text-size-adjust: 100%
}

:where(body) {
  margin: 0;
  min-height: 100dvh;
  text-rendering: optimizeLegibility
}

:where(img, svg, video, canvas) {
  display: block;
  max-width: 100%
}

:where(button, input, textarea, select) {
  font: inherit;
  color: inherit;
  background: var(--input-bg);
  border-radius: var(--radius-1);
}

:where(a) {
  color: inherit;
  text-decoration: none
}

:where(ul, ol) {
  margin: 0;
  padding: 0;
  list-style: none
}

:where(figure) {
  margin: 0 !important
}

:where(figcaption) {
  margin: 0
}

/* ---- Font Family Enqueue --------------------------------------------------------- */
/* Manrope Variable — self-hosted */
@font-face {
  font-family: "Manrope";
  src:
    url("/wp-content/themes/bedrebyttede/assets/fonts/Manrope-VariableFont_wght.woff2") format("woff2-variations");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- Breakpoints (mobile-first) ---------------------------------------- */
/* --- Viewport Breakpoints (2026 Golden Standard) ---------------------- */
/* Note: No package.json/postcss found. Using literal rems in @media rules. */
/* xs: <48rem, sm: 40rem, md: 48rem, lg: 64rem, xl: 80rem, 2xl: 96rem */

/* ---- Core Tokens -------------------------------------------------------- */
:root {
  /* Brand — BedreByttede Greens */
  --brand: #2D6A5B;
  /* primary */
  --brand-600: #255A4E;
  --brand-700: #1E4D3A;
  /* deep */
  --brand-300: #4E8E7D;
  /* lighter for hovers */
  --brand-100: #D7E7E1;
  /* tint for pills/backgrounds */

  /* Supporting */
  --accent: #2BB673;
  /* action/success pop */
  --warn: #F59E0B;
  --danger: #EF4444;

  /* App Surfaces (light) */
  --bg: #F2F4F7;
  /* soft gray-green paper */
  --bg-1: #E6E9EB;
  --surface: #FFFFFF;
  --surface-2: #F2F2F2;
  --surface-veil: color-mix(in srgb, var(--surface) 88%, transparent);
  --surface-1: var(--surface-veil);
  --surface-letterbox-grad: linear-gradient(0deg,
      color-mix(in srgb, var(--surface) 92%, transparent) 0%,
      color-mix(in srgb, var(--surface-2) 70%, transparent) 45%,
      color-mix(in srgb, var(--surface) 0%, transparent) 100%);

  /* Text */
  --text: #151616;
  --text-1: #282a2b;
  --text-2: #47484b;
  --text-3: #747779;
  --text-opposite: #E6F0EB;
  --text-w-bg: #E6F0EB;
  --link: var(--brand);

  /* Lines */
  --line: #DCE5E1;
  --line-strong: #C9D6D1;

  /* Radii / Borders */
  --radius-1: 8px;
  --radius-2: 16px;
  --radius-3: 24px;
  --radius-round: 9999px;
  --border-1: 1px;
  --border-2: 2px;
  --border-3: 3px;

  /* Spacing (4px scale) */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-18: 72px;
  --space-20: 80px;
  --space-22: 88px;
  --space-24: 96px;

  /* BB alias tokens */
  --bb-surface-0: var(--surface);
  --bb-radius: var(--card-radius);
  --bb-text-primary: var(--text);
  --text-muted: var(--text-3);
  --bb-dur: var(--dur-2);
  --bb-ease: var(--ease-out);
  --bb-surface-grid-columns-idle: minmax(0, 1.6fr) minmax(0, 0.9fr);
  --bb-surface-grid-columns-active: minmax(0, 0.9fr) minmax(0, 2.2fr);
  --bb-surface-grid-transition: var(--dur-3);

  /* Typography */
  --font-sans: "Manrope", ui-sans-serif, -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --fs-xxs: 11px;
  --fs-xs: 12px !important;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: 28px;
  --fs-4xl: 32px;
  --lh-tight: 1.2;
  --lh-base: 1.5;
  --lh-relaxed: 1.65;

  /* Motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;

  /* Elevation */
  --shadow-1: inset 0 1px 2px rgba(175, 175, 175, 0.70), 0 1px 2px rgba(41, 41, 41, 0.30), 0 2px 4px rgba(41, 41, 41, 0.15);
  --shadow-2: inset 0 1px 2px rgba(175, 175, 175, 0.50), 0 2px 4px rgba(41, 41, 41, 0.30), 0 4px 8px rgba(41, 41, 41, 0.15);
  --shadow-3: inset 0 1px 2px rgba(175, 175, 175, 0.30), 0 4px 6px rgba(41, 41, 41, 0.30), 0 6px 10px rgba(41, 41, 41, 0.15);


  /* Component tokens */
  --btn-bg: var(--surface);
  --btn-fg: var(--text);
  --btn-line: var(--line);
  --btn-radius: var(--radius-2);
  --btn-toggle-bg: color-mix(in oklab, var(--brand-100) 80%, var(--surface) 20%);
  --btn-toggle-fg: var(--brand-700);
  --btn-toggle-border: color-mix(in oklab, var(--brand) 45%, transparent);
  --btn-toggle-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand) 30%, transparent);

  --input-bg: #fff;
  --input-fg: var(--text);
  --input-ph: #82948B;
  --input-line: var(--line);
  --input-radius: 12px;

  --card-radius: 14px;

  /* Containers */
  --container-sm: 640px;
  --container-md: 880px;
  --container-lg: 1120px;
  --container-xl: 1280px;

  /* Movement gradient (hero/cta bands) */
  --grad-move: linear-gradient(135deg, #2D6A5B 0%, #1E4D3A 50%, #2BB673 100%);
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    /* Brand — BedreByttede Greens */
    --brand: #387e6c;
    /* primary */
    --brand-600: #5aa997;
    --brand-700: #2e6d54;
    /* deep */
    --brand-300: #60a895;
    /* lighter for hovers */
    --brand-100: #D7E7E1;
    /* tint for pills/backgrounds */

    --bg: #1c1d1c;
    --bg-1: #151615;
    --surface: #252826;
    --surface-2: #3b3e3c;
    --text: #E6F0EB;
    --text-1: #D4D8DB;
    --text-2: #C3C6C9;
    --text-3: #a5a6ab;
    --text-opposite: #151616;
    --text-w-bg: #E6F0EB;
    --line: #4e5350;
    --line-strong: #2c3b2c;

    --btn-bg: #333433;
    --btn-fg: var(--text);
    --btn-line: #323332;
    --btn-toggle-bg: color-mix(in srgb, var(--brand) 18%, transparent);
    --btn-toggle-fg: color-mix(in srgb, var(--surface) 92%, var(--brand-100) 8%);
    --btn-toggle-border: color-mix(in srgb, var(--brand) 55%, transparent);
    --btn-toggle-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 40%, transparent);
    --input-bg: #17201C;
    --input-fg: var(--text);
    --input-ph: #8EA29A;
    --input-line: #26342E;

    --shadow-1: inset 0 1px 2px rgba(175, 175, 175, 0.30), 0 1px 2px rgba(41, 41, 41, 0.30), 0 2px 4px rgba(41, 41, 41, 0.15);
    --shadow-2: inset 0 1px 2px rgba(175, 175, 175, 0.50), 0 2px 4px rgba(41, 41, 41, 0.30), 0 4px 8px rgba(41, 41, 41, 0.15);
    --shadow-3: inset 0 1px 2px rgba(175, 175, 175, 0.70), 0 4px 6px rgba(41, 41, 41, 0.30), 0 6px 10px rgba(41, 41, 41, 0.15);

    --surface-veil: color-mix(in srgb, var(--surface) 70%, transparent);
    --surface-1: var(--surface-veil);
    --surface-letterbox-grad: linear-gradient(0deg,
        color-mix(in srgb, var(--surface) 80%, transparent) 0%,
        color-mix(in srgb, var(--surface) 55%, transparent) 45%,
        color-mix(in srgb, var(--surface) 0%, transparent) 100%);
  }
}

@supports not (background: color-mix(in srgb, white 50%, transparent)) {
  :root {
    --surface-veil: var(--surface);
    --surface-1: var(--surface-veil);
    --surface-letterbox-grad: linear-gradient(0deg,
        var(--surface) 0%,
        var(--surface) 45%,
        transparent 100%);
  }
}

/* ---- App Globals -------------------------------------------------------- */
#main {
  margin-top: 3rem;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-base)
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 var(--space-3);
  font-weight: 700;
  line-height: var(--lh-tight)
}

h1,
.h1-fa {
  font-size: clamp(var(--fs-2xl), 2.5vw, var(--fs-4xl))
}

h2 {
  font-size: clamp(var(--fs-xl), 2.0vw, var(--fs-3xl))
}

h3 {
  font-size: var(--fs-xl)
}

h4 {
  font-size: var(--fs-lg)
}

p {
  margin: 0 0 var(--space-4);
  color: var(--text-2)
}

a {
  color: var(--link)
}

a:hover {
  text-decoration: underline
}

.bg-brand-100 {
  background: var(--brand-100) !important
}

.bg-brand-300 {
  background: var(--brand-300) !important;
}

.bg-brand {
  background: var(--brand) !important;
}

.bg-brand-600 {
  background: var(--brand-600) !important;
}

.bg-brand-700 {
  background: var(--brand-700) !important;
}

.text-1 {
  color: var(--text-1) !important;
}

.text-2 {
  color: var(--text-2) !important;
}

.text-3 {
  color: var(--text-3) !important;
}

/* ---- Layout Primitives -------------------------------------------------- */
.container {
  width: min(100% - var(--space-8), var(--container-lg));
  margin-inline: auto
}

@media (min-width: 48rem) {
  .container {
    width: min(100% - var(--space-10), var(--container-lg))
  }
}

@media (min-width: 80rem) {
  .container {
    width: min(100% - var(--space-10), var(--container-xl))
  }
}

.section {
  padding-block: var(--space-8)
}

@media (min-width: 48rem) {
  .section {
    padding-block: var(--space-10)
  }
}

.stack {
  display: grid;
  gap: var(--space-4);
  overflow-x: auto;
}

.stack--tight {
  gap: var(--space-2)
}

.stack--loose {
  gap: var(--space-6)
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center
}

/*
   .grid / .bb-grid
   Master layout primitive. Progression: 1 -> 2 -> 3 -> 4 columns.
   Logic centralized here, but powered by responsive.css Media Queries.
*/
.grid,
.bb-grid {
  --min: 220px;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 48rem) {

  .grid,
  .bb-grid {
    gap: var(--space-5)
  }
}

.flex-row-spbtwn {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
}

.flex-r-alb {
  display: flex;
  flex-direction: row;
  align-items: baseline !important;
  justify-content: space-between;
}

.flex-column

/* Sidebar layout for /brugerprofil */
.sidebar {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--space-6)
}

@media (max-width:72rem) {
  .sidebar {
    grid-template-columns: 1fr
  }
}

:root {
  /* App chrome */
  --header-h: 48px;
  /* 64px on md+ handled in component CSS */
  --tap: 44px;
  --z-header: 60;

  /* Micro motion used for subtle text reveals */
  --reveal-dur: 320ms;
  --reveal-ease: cubic-bezier(.16, 1, .3, 1);
}


.card-radius {
  border-radius: var(--card-radius) !important;
}

/* ---- Components --------------------------------------------------------- */
/* App Header */
.app-header {
  position: sticky;
  top: 0;
  z-index: 60;
  backdrop-filter: saturate(120%) blur(8px);
  background: color-mix(in oklab, var(--surface), transparent 8%);
  border-bottom: var(--border-1) solid var(--line)
}

.app-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: var(--header-h);
  padding-inline: var(--space-4)
}

@media (min-width: 48rem) {
  .app-header__inner {
    padding-inline: var(--space-6)
  }
}

/* Searchbar / Filters (Marketplace) */
.searchbar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--surface);
  border: var(--border-1) solid var(--line);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-1)
}

.input,
select,
textarea {
  width: 100%;
  background: var(--input-bg);
  color: var(--input-fg);
  border: var(--border-1) solid var(--input-line);
  border-radius: var(--input-radius);
  padding: var(--space-2) var(--space-3);
  outline: none;
  transition: border-color var(--dur-1), box-shadow var(--dur-1)
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7l5 5 5-5' stroke='%236A7A72' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 1em;
  padding-right: calc(var(--space-4) + 1em);
}

.input::placeholder,
textarea::placeholder {
  color: var(--input-ph)
}

.input:focus,
textarea:focus,
select:focus {
  border-color: color-mix(in oklab, var(--brand), white 25%);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand), transparent 82%);
}

/* Autofill override - prevent white background */
.input:-webkit-autofill,
.input:-webkit-autofill:hover,
.input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px var(--input-bg) inset;
  -webkit-text-fill-color: var(--input-fg);
  transition: background-color 5000s ease-in-out 0s;
}


/* Cards & Tiles */
.card {
  background: var(--surface);
  border: var(--border-1) solid var(--line);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-1);
  overflow: hidden
}

.card:hover {
  box-shadow: var(--shadow-2);
  transition: box-shadow var(--dur-2) var(--ease-out)
}

.card__body {
  padding: var(--space-4)
}

.card__footer {
  padding: var(--space-3) var(--space-4);
  border-top: var(--border-1) solid var(--line)
}

.tile {
  display: grid;
  gap: var(--space-3)
}

.tile__img {
  aspect-ratio: 1/1;
  border-radius: var(--radius-2);
  background: var(--surface-2);
  overflow: hidden
}

.tile__title {
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.tile__meta {
  font-size: var(--fs-xs);
  color: var(--text-3)
}

/* Buttons */
.btn {
  --_bg: var(--btn-bg);
  --_fg: var(--btn-fg);
  --_bd: var(--btn-line);
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px 14px;
  border-radius: var(--btn-radius);
  border: var(--border-1) solid var(--_bd);
  background: var(--_bg);
  color: var(--_fg);
  line-height: var(--lh-base);
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), background var(--dur-2)
}

/*.btn i[class^="fa-"], .btn i[class*=" fa-"] { margin-right: .45rem; }*/
.btn:hover {
  box-shadow: var(--shadow-1);
  transform: translateY(-1px)
}

.btn:active {
  transform: translateY(0)
}

.btn--primary {
  --_bg: var(--brand);
  --_fg: #fff;
  --_bd: transparent;
  border-color: var(--_bg);
  box-shadow: var(--shadow-1);
}

.btn--success {
  --_bg: var(--accent);
  --_fg: #fff;
  --_bd: transparent
}

.btn--danger {
  --_bg: var(--danger);
  --_fg: #fff;
  --_bd: transparent
}

.btn--subtle {
  --_bg: var(--surface-2)
}

.btn--ghost {
  --_bg: transparent;
  --_bd: transparent;
  font-size: 0.85rem;
  color: var(--text-muted);
  padding: var(--space-2);
}

.btn--sm {
  padding: 8px 10px;
  font-size: var(--fs-sm)
}

.btn--lg {
  padding: 12px 16px;
  font-size: var(--fs-lg);
  border-radius: var(--radius-3)
}

.btn--image-pick {
  --_bg: none;
  border: var(--border-2) dashed var(--_bd);
  color: var(--_bd);
}

/* =========================
   Pills / Badges / Search
   ========================= */

/* Pills (shared chip style: used by price, town, dist, etc.) */
.bb-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  line-height: 1;
}

.bb-pill--active {
  background: var(--brand-100);
  color: var(--brand-700);
  border-color: color-mix(in oklab, var(--brand), white 60%);
}

.bb-pill--ghost {
  background: var(--surface-veil);
  border-color: transparent;
  color: var(--text-3) !important;
  border-radius: var(--radius-round);
}

/* Optional semantic variants (price/town/dist just reuse base) */


/* Badges */
.bb-badge {
  display: inline-block;
  font-weight: 700;
  font-size: var(--fs-xs);
  line-height: 1;
  padding: 6px 8px;
  border-radius: var(--radius-round);
  background: var(--surface);
  color: var(--text);
  border: var(--border-1) solid var(--line-strong);
}

/* Swap-type tints (loan / trade) */
.bb-badge--lan {
  background: color-mix(in oklab, var(--brand), white 85%);
  color: var(--brand-700);
  border: var(--border-1) solid color-mix(in oklab, var(--brand), white 70%);
}

.bb-badge--byt {
  background: color-mix(in oklab, var(--accent), white 85%);
  color: color-mix(in oklab, var(--accent), black 75%);
  border: var(--border-1) solid color-mix(in oklab, var(--accent), white 70%);
}

/* Boost badge (card corner) */
.bb-badge--boosted {
  position: absolute;
  top: 8px;
  left: 8px;
  border-radius: var(--radius-round);
  background: var(--accent);
  color: #fff;
  border: var(--border-1) solid color-mix(in oklab, var(--accent), black 12%);
  box-shadow: var(--shadow-2);
}

/* Search */
.bb-search__field {
  display: flex;
  align-items: center;
}

.bb-search__input {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  background: var(--bg);
  color: var(--input-fg);
  border: var(--border-1) solid var(--surface-2);
  border-radius: var(--input-radius) 0 0 var(--input-radius);
  outline: none;
  transition: border-color var(--dur-1), box-shadow var(--dur-1);
}

.bb-search__input::placeholder {
  color: var(--input-ph);
}

.bb-search__input:focus {
  border-color: color-mix(in oklab, var(--brand), white 25%);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand), transparent 82%);
}

.bb-search__btn {
  padding: var(--space-2) var(--space-3);
  border-radius: 0 var(--btn-radius) var(--btn-radius) 0;
  border: 0solid var(--btn-line);
  background: var(--surface-2);
  color: var(--text-w-bg);
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
  min-height: 52px;
}

.bb-search__btn:hover {
  box-shadow: var(--shadow-1);
  transform: translateY(-1px);
}

/* Suggest dropdown */
.bb-search__suggest {
  position: relative;
  margin: var(--space-1) 0 0;
  padding: 0;
  list-style: none;
}

.bb-search__suggest[hidden] {
  display: none;
}

.bb-search__suggest li {
  background: var(--surface);
  color: var(--text);
  border: var(--border-1) solid var(--line);
  border-top: none;
  padding: .5rem .6rem;
  cursor: pointer;
}

.bb-search__suggest li:first-child {
  border-top: var(--border-1) solid var(--line);
  border-top-left-radius: var(--radius-2);
  border-top-right-radius: var(--radius-2);
}

.bb-search__suggest li:last-child {
  border-bottom-left-radius: var(--radius-2);
  border-bottom-right-radius: var(--radius-2);
}

.bb-search__suggest li[aria-selected="true"] {
  background: var(--surface-2)
}

/* Toolbar / Chips row */
.toolbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--surface);
  border-bottom: var(--border-1) solid var(--line);
  box-shadow: var(--shadow-1)
}

.chips {
  display: grid;
  grid-auto-flow: column;
  gap: var(--space-2);
  overflow-x: auto;
  padding: var(--space-2);
  scrollbar-width: thin
}

.chips::-webkit-scrollbar {
  height: 6px
}

.chips::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: var(--radius-round)
}

/* Toasts */
.toast {
  position: fixed;
  inset-inline: 0;
  bottom: var(--space-6);
  display: grid;
  place-items: center;
  z-index: 60;
  pointer-events: none
}

.toast__item {
  pointer-events: auto;
  background: var(--surface);
  color: var(--text);
  border: var(--border-1) solid var(--line);
  border-radius: var(--radius-2);
  padding: 10px 14px;
  box-shadow: var(--shadow-2)
}

/* Modal (shared global surface) */
.modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  background: color-mix(in oklab, black, transparent 70%)
}

.modal__panel {
  width: min(100% - var(--space-8), 720px);
  background: var(--surface);
  border: var(--border-1) solid var(--line);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-3);
  overflow: hidden
}

.modal__head,
.modal__foot {
  padding: var(--space-4);
  border-bottom: var(--border-1) solid var(--line)
}

.modal__foot {
  border-bottom: 0;
  border-top: var(--border-1) solid var(--line)
}

.modal__body {
  padding: var(--space-4)
}

/* Figure defaults */
.figure,
:where(figure) {
  display: block;
  margin-block: 0;
}

:where(figure)> :is(img, video, canvas) {
  border-radius: var(--radius-2);
  display: block;
  max-width: 100%;
  height: auto;
}

:where(figcaption) {
  font-size: var(--fs-xs);
  color: var(--text-3);
  margin-top: var(--space-2);
  line-height: var(--lh-relaxed);
}

/* Optional helpers */
.figure--tight {
  margin-block: var(--space-2);
}

.figure--fullbleed {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  max-width: none;
}

/* Hero Img/Video/etc */
/* Wrapper */
.bb-hero {
  --hero-h: 220px;
  /* default height */
  position: relative;
  display: block;
  width: 100%;
  border-radius: var(--radius-3, 16px);
  overflow: hidden;
  background: var(--surface-2, #0f0f0f);
  /* fallback used for letterbox bars too */
}

/* Ensure the inner media fills the wrapper’s box */
.bb-hero>img,
.bb-hero>picture,
.bb-hero>picture>img,
.bb-hero>video {
  display: block;
  width: 100%;
  height: var(--hero-h);
  object-fit: cover;
  /* crop nicely by default */
  object-position: center;
}

/* Letterbox mode (bars visible when ratios differ) */
.bb-hero--letterbox>img,
.bb-hero--letterbox>picture>img,
.bb-hero--letterbox>video {
  object-fit: contain;
  background: var(--surface-veil);
}

/* Optional ratio-driven variant (auto height) */
.bb-hero--ratio {
  height: auto;
  aspect-ratio: var(--hero-ratio, 16/9);
}

.bb-hero--ratio>img,
.bb-hero--ratio>picture>img,
.bb-hero--ratio>video {
  height: 100%;
}

/* Sizes */
.bb-hero--sm {
  --hero-h: 160px;
}

.bb-hero--md {
  --hero-h: 220px;
}

/* default */
.bb-hero--lg {
  --hero-h: 320px;
}

.bb-hero--xl {
  --hero-h: clamp(320px, 42vh, 520px);
}

/* Scale up a bit on wider screens */
@media (min-width: 720px) {
  .bb-hero--sm {
    --hero-h: 200px;
  }

  .bb-hero--md {
    --hero-h: 280px;
  }

  .bb-hero--lg {
    --hero-h: 380px;
  }

  .bb-hero--xl {
    --hero-h: clamp(420px, 52vh, 640px);
  }
}

/* Optional overlay helpers */
.bb-hero__gradient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, .35));
}

.bb-hero__content {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  color: var(--text-on-dark, #fff);
}

/* Make the media obey our box sizing even if a global img{height:auto} exists */
.bb-hero>img,
.bb-hero>picture>img,
.bb-hero>video {
  display: block;
  width: 100% !important;
  height: var(--hero-h) !important;
  object-fit: cover;
  object-position: center center !important;
}

/* Letterbox variant stays centered too */
.bb-hero--letterbox>img,
.bb-hero--letterbox>picture>img,
.bb-hero--letterbox>video {
  object-fit: contain;
  object-position: center center !important;
  background: var(--surface-1, #000);
}


/* ---- BB Specific Hooks -------------------------------------------------- */
/* 1) Single bytteting header (your grid requirement) */
.bb-bytteting-header {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--space-6)
}

@media (max-width:62rem) {
  .bb-bytteting-header {
    grid-template-columns: 1fr;
    gap: var(--space-4)
  }
}

.bb-bytteting-image {
  border-radius: var(--radius-2);
  overflow: hidden;
  background: var(--surface-2)
}

.bb-bytteting-lender {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-1);
  padding: var(--space-4)
}

/* 2) Filter badge (source of truth badge near “Anvend”) */
.bb-filter-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--radius-round);
  background: var(--brand-100);
  color: var(--brand-700);
  border: 1px solid color-mix(in oklab, var(--brand), white 65%)
}

.bb-filter-badge .count {
  font-weight: 700
}

/* 3) Chat banners (status-driven) */
#chat-banner {
  border-radius: var(--radius-2);
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text-2)
}

.bb-banner--due {
  background: color-mix(in oklab, var(--warn), white 88%);
  border-color: color-mix(in oklab, var(--warn), white 70%);
  color: #7A4E00
}

.bb-banner--ok {
  background: color-mix(in oklab, var(--accent), white 90%);
  border-color: color-mix(in oklab, var(--accent), white 70%);
  color: #0E5A3C
}

.bb-banner--alert {
  background: color-mix(in oklab, var(--danger), white 90%);
  border-color: color-mix(in oklab, var(--danger), white 70%);
  color: #7A0F0F
}

/* 4) Offer/Action rails in chat */
.bb-dynamic-actions .pill {
  background: var(--surface-2)
}

.bb-dynamic-actions .pill.is-primary {
  background: var(--brand-100);
  color: var(--brand-700);
  border-color: color-mix(in oklab, var(--brand), white 65%)
}

/* 5) Marketplace “rail” categories (parent → child reveal) */


/* 6) Result item price & meta */
.bb-price {
  font-weight: 800;
  color: var(--text);
  font-size: var(--fs-lg)
}

.bb-meta {
  font-size: var(--fs-xs);
  color: var(--text-3)
}

/* 7) “Boostet” halo */
.bb-boost {
  position: relative
}

.bb-boost::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--radius-2) + 2px);
  background: conic-gradient(from 180deg, var(--brand) 0 40%, transparent 40% 60%, var(--accent) 60% 100%);
  filter: blur(8px);
  opacity: .25;
  z-index: -1
}

/* 8) Mobile bottom nav (Movement style) */
.bb-bottom-nav {
  position: sticky;
  bottom: 0;
  z-index: 70;
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: var(--shadow-1)
}

.bb-bottom-nav__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0
}

.bb-bottom-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 56px;
  font-size: 12px;
  color: var(--text-2)
}

.bb-bottom-nav a.is-primary {
  grid-column: 2/span 2;
  height: 56px;
  margin: 6px;
  border-radius: 14px;
  background: var(--brand);
  color: #fff;
  font-weight: 700
}

@media (--md) {
  .bb-bottom-nav__inner {
    grid-template-columns: repeat(5, 1fr)
  }
}

/* 9) “The Movement” CTA band */
.bb-cta-band {
  --_pad: 24px;
  border-radius: var(--card-radius);
  background: var(--grad-move);
  color: #fff;
  padding: var(--_pad);
  box-shadow: var(--shadow-2);
}

.bb-cta-band h3 {
  color: #fff;
  margin-bottom: 6px
}

.bb-cta-band .cta-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap
}

.bb-cta-band a.btn,
.bb-cta-band .btn {
  /* ensure contrast against gradient */
  --_bg: rgba(255, 255, 255, .12);
  --_fg: #fff;
  --_bd: rgba(255, 255, 255, .26);
  backdrop-filter: saturate(120%) blur(2px);
}

.bb-cta-band .btn:hover {
  box-shadow: var(--shadow-1);
  transform: translateY(-1px)
}

@media (--md) {
  .bb-cta-band {
    --_pad: 28px
  }
}

/* 10) Utility link (“Vis ældre beskeder” etc.) */
.bb-link {
  color: color-mix(in oklab, var(--brand), black 0%);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dashed color-mix(in oklab, var(--brand), transparent 65%);
  transition: border-color var(--dur-2) var(--ease-in-out);
}

.bb-link:hover {
  text-decoration: none;
  border-bottom-color: color-mix(in oklab, var(--brand), transparent 30%);
}

.bb-link:active {
  opacity: .9
}

.bb-link:focus-visible {
  outline: 3px solid color-mix(in oklab, var(--brand), transparent 75%);
  outline-offset: 2px;
  border-radius: 6px;
}

/* 11) Steady numerals for UI metrics */
.bb-price,
.nav-rail,
.bb-bottom-nav,
.counter,
table {
  font-variant-numeric: tabular-nums;
  /* broader engine support */
  -moz-font-feature-settings: "tnum" 1;
  -webkit-font-feature-settings: "tnum" 1;
  font-feature-settings: "tnum" 1;
}

/* 12) Image fallback returns the logo in a pattern. */
/* tokens.css (or surface.css), keep as a modifier only */
.bb-image--fallback {
  /* two layers of the same icon for subtle parallax */
  --bb-pat: url("/wp-content/themes/bedrebyttede/assets/brand/mark.png");
  --s1: 18px;
  /* small, dense layer */
  --s2: 48px;
  /* larger, lighter layer */

  background-image:
    var(--bb-pat),
    var(--bb-pat);
  background-repeat: repeat, repeat;
  background-size: var(--s1) var(--s1), var(--s2) var(--s2);
  background-position: 0 0, 16px 16px;
  /* slight offset between layers */

  /* tone it down */
  filter: grayscale(1) opacity(.55);
  background-color: var(--surface-2);
  border: var(--border-1) solid var(--line);
  border-radius: var(--radius-2);

  /* gentle drift animation */
  animation:
    bb-pat-pan-1 40s linear infinite,
    bb-pat-pan-2 60s linear infinite;
}

/* motion-safe variant */
@media (prefers-reduced-motion: reduce) {
  .bb-image--fallback {
    animation: none;
  }
}

@keyframes bb-pat-pan-1 {
  to {
    background-position: var(--s1) var(--s1), 16px 16px;
  }
}

@keyframes bb-pat-pan-2 {
  to {
    background-position: 0 0, calc(16px + var(--s2)) calc(16px + var(--s2));
  }
}

/* 13) Report form */
form[data-bb-report] {
  display: grid;
  gap: var(--space-4, 16px);
  /* ≈ 1rem */
}

form[data-bb-report] label {
  font-weight: 600;
  color: var(--text-2);
}

form[data-bb-report] .form-element__wrapper {
  display: grid;
  gap: var(--space-1);
}

/* Avatar + fallback (initials from slug) */
.bb-avatar {
  width: var(--bb-avatar-size, 72px);
  height: var(--bb-avatar-size, 72px);
  border-radius: var(--radius-round);
  overflow: hidden;
  display: inline-grid;
  place-items: center;
  background: var(--surface-2);
  border: var(--border-1) solid var(--line);
  position: relative;
}

.bb-avatar__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bb-avatar__initials {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--brand-100);
  color: var(--brand-700);
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  box-shadow: var(--shadow-1);
  /* scales with size */
  font-size: calc(var(--bb-avatar-size, 72px) * 0.39);
}

.bb-avatar--has-img .bb-avatar__initials {
  background: transparent;
  color: transparent;
  box-shadow: none;
}

/* ---- Utilities ---------------------------------------------------------- */
.is-disabled {
  pointer-events: none;
  opacity: .5
}

.hidden {
  display: none !important
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0
}

.my-0 {
  margin-block: 0
}

.my-2 {
  margin-block: var(--space-2)
}

.my-4 {
  margin-block: var(--space-4)
}

.my-6 {
  margin-block: var(--space-6)
}

.mx-auto {
  margin-inline: auto
}

.py-2 {
  padding-block: var(--space-2)
}

.py-4 {
  padding-block: var(--space-4)
}

.py-6 {
  padding-block: var(--space-6)
}

.p-0 {
  padding: 0
}

.p-2 {
  padding: var(--space-2)
}

.p-3 {
  padding: var(--space-3)
}

.p-4 {
  padding: var(--space-4)
}

.p-6 {
  padding: var(--space-6)
}

.mb-0 {
  margin-bottom: 0
}

.mb-1 {
  margin-bottom: var(--space-1);
}

.mb-2 {
  margin-bottom: var(--space-2)
}

.mb-4 {
  margin-bottom: var(--space-4)
}

.mb-6 {
  margin-bottom: var(--space-6)
}

.mt-0 {
  margin-top: 0
}

.mt-2 {
  margin-top: var(--space-2)
}

.mt-4 {
  margin-top: var(--space-4)
}

.mt-6 {
  margin-top: var(--space-6)
}

.mr-0 {
  margin-right: 0
}

.mr-2 {
  margin-right: var(--space-2)
}

.mr-4 {
  margin-right: var(--space-4)
}

.mr-6 {
  margin-right: var(--space-6)
}

.ml-0 {
  margin-left: 0
}

.ml-2 {
  margin-left: var(--space-2)
}

.ml-4 {
  margin-left: var(--space-4)
}

.ml-6 {
  margin-left: var(--space-6)
}

.flex {
  display: flex
}

.grid {
  display: grid
}

.ai-b {
  align-items: baseline
}

.ai-c {
  align-items: center
}

.jc-b {
  justify-content: space-between
}

.gap-2 {
  gap: var(--space-2)
}

.gap-4 {
  gap: var(--space-4)
}

.w-100 {
  width: 100%
}

.max-w-lg {
  max-width: var(--container-lg)
}

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.lines-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.fs-xxs {
  font-size: var(--fs-xxs)
}

.fs-xs {
  font-size: var(--fs-xs)
}

.fs-sm {
  font-size: var(--fs-sm)
}

.fs-md {
  font-size: var(--fs-md)
}

.fs-lg {
  font-size: var(--fs-lg)
}

.fs-xl {
  font-size: var(--fs-xl)
}

.fs-2xl {
  font-size: var(--fs-2xl)
}

.fs-3xl {
  font-size: var(--fs-3xl)
}

.fs-4xl {
  font-size: var(--fs-4xl)
}

/* ---- Small Progressive Enhancements ------------------------------------ */
/* Focus rings harmonized to brand */
:where(a, button, [role="button"], .input, select, textarea):focus-visible {
  outline: 2px solid color-mix(in oklab, var(--brand), transparent 75%);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important
  }
}

/* Buttons (anchors with .btn) should never underline */
a.btn,
.btn[href] {
  text-decoration: none !important;
}

a.btn:hover,
a.btn:focus,
.btn[href]:hover,
.btn[href]:focus {
  text-decoration: none !important;
}

/* Icons in links: never underline (but only for non-button links) */
:where(a):where(:not(.btn)) :where(i.fa,
  i.fas, i.far, i.fal, i.fad, i.fab,
  i.fa-solid, i.fa-regular, i.fa-light, i.fa-thin, i.fa-duotone, i.fa-brands,
  i[class^="fa-"], i[class*=" fa-"],
  svg.svg-inline--fa) {
  text-decoration: none !important;
  -webkit-text-decoration: none !important;
  display: inline-block;
  /* opt out of text-decoration run on inline links */
  vertical-align: middle;
}

.bb-activity-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  min-width: 1.5rem;
  height: 1.5rem;
  font-size: 1.1rem;
  line-height: 1;
  font-style: normal;
  flex-shrink: 0;
  color: currentColor;
}

/* === Tokenized utilities used by Market ================================== */

/* Small section label used in fallbacks/related blocks */
.bb-subhead {
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--text);
  margin: .25rem 0 .5rem;
}

/* Generic shimmer utility (apply to a block you want to skeletonize) */
.bb-shimmer {
  position: relative;
  overflow: hidden;
  background: var(--surface-2);
  border-radius: var(--card-radius);
}

.bb-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      transparent 0%,
      color-mix(in oklab, var(--surface), transparent 60%) 45%,
      transparent 90%);
  background-size: 200% 100%;
  animation: bb-shimmer 1.1s linear infinite;
}

@keyframes bb-shimmer {
  0% {
    background-position: 200% 0
  }

  100% {
    background-position: -200% 0
  }
}

/* Match-highlight inside suggest rows */
.bb-sug-hl {
  color: var(--text-2);
}


/* ==========================================================================
   Site-wide: on-brand checkboxes + number inputs (Font Awesome shapes)
   ========================================================================== */

/* Native accent when supported */
:where(input[type="checkbox"], input[type="radio"], input[type="range"], progress) {
  accent-color: var(--brand);
  max-width: var(--space-6);
}

/* Checkbox — custom fallback (Font Awesome 'check' glyph) */
@supports (-webkit-appearance: none) or (-moz-appearance: none) {
  :where(input[type="checkbox"]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    inline-size: 18px;
    block-size: 18px;
    border: var(--border-1) solid var(--input-line);
    border-radius: 6px;
    background: var(--input-bg);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand) 0%, transparent);
    display: inline-grid;
    place-content: center;
    cursor: pointer;
    transition: border-color var(--dur-1) var(--ease-in-out),
      box-shadow var(--dur-1) var(--ease-in-out),
      background var(--dur-1);
  }

  /* FA6 solid 'check' (viewBox 0 0 512 512) as a mask */
  :where(input[type="checkbox"])::after {
    content: "";
    inline-size: 12px;
    block-size: 12px;
    transform: scale(0);
    transition: transform var(--dur-1) var(--ease-out);
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M173.898 439.404l-166.4-166.4c-12.497-12.497-12.497-32.758 0-45.255l22.627-22.627c12.497-12.497 32.758-12.497 45.255 0L192 312.69 436.62 68.07c12.497-12.497 32.758-12.497 45.255 0l22.627 22.627c12.497 12.497 12.497 32.758 0 45.255l-294.4 294.4c-12.497 12.497-32.758 12.497-45.255.001z'/%3E%3C/svg%3E") center/contain no-repeat;
    background: var(--text-w-bg);
  }

  :where(input[type="checkbox"]:checked) {
    background: var(--brand);
    border-color: var(--brand);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand) 30%, transparent);
  }

  :where(input[type="checkbox"]:checked)::after {
    transform: scale(1);
  }

  :where(input[type="checkbox"]:hover:not(:disabled)) {
    border-color: color-mix(in oklab, var(--brand), var(--input-line) 40%);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand) 45%, transparent);
  }

  :where(input[type="checkbox"]:focus-visible) {
    outline: 3px solid color-mix(in oklab, var(--brand), transparent 75%);
    outline-offset: 2px;
  }

  :where(input[type="checkbox"]:disabled) {
    opacity: .55;
    cursor: not-allowed;
    filter: grayscale(.2);
  }
}



/* Keep native WebKit spinner HIT AREA; hide glyphs */
:where(input[type="number"])::-webkit-outer-spin-button,
:where(input[type="number"])::-webkit-inner-spin-button {
  opacity: 0;
  margin: 0;
  -webkit-appearance: inner-spin-button;
}

/* Normalize Firefox; keyboard step still works */
:where(input[type="number"]) {
  -moz-appearance: textfield;
}

/* Harmonized focus ring */
:where(input[type="number"]:focus-visible) {
  outline: 3px solid color-mix(in oklab, var(--brand), transparent 75%);
  outline-offset: 2px;
  border-color: color-mix(in oklab, var(--brand), white 25%);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand), transparent 82%);
}

/* ==========================================================================
   Site-wide number input steppers — paint the *inner spin button* itself
   Keeps native click targets; shows FA carets in light & dark.
   ========================================================================== */

:where(input[type="number"]) {
  -moz-appearance: textfield;
  /* hide FF spinners */
  padding-right: 2.6rem;
  /* room for spinner zone */
  font-variant-numeric: tabular-nums;
}

/* Remove the extra outer button gutter in WebKit */
:where(input[type="number"])::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Style the actual clickable spinner control */
:where(input[type="number"])::-webkit-inner-spin-button {
  -webkit-appearance: inner-spin-button;
  /* keep click/step behavior */
  opacity: 1;
  /* make it visible */
  margin: 0;

  /* LIGHT THEME: divider + FA caret-up + caret-down */
  background:
    /* divider bar */
    linear-gradient(to left, var(--line) 1px, transparent 1px) right 2.1rem center/1px 60% no-repeat,
    /* caret-up */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'><path fill='%236A7A72' d='M160 160c6.1 0 12.3 2.3 17 7l135 136c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-34 0L160 217 42 337c-9.4 9.4-24.6 9.4-34 0s-9.4-24.6 0-33.9l135-136c4.7-4.7 10.9-7 17-7z'/></svg>") right .55rem 38%/14px 14px no-repeat,
    /* caret-down */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'><path fill='%236A7A72' d='M160 352c-6.1 0-12.3-2.3-17-7L8 209C-1.4 199.6-1.4 184.4 8 175s24.6-9.4 34 0l118 120 118-120c9.4-9.4 24.6-9.4 34 0s9.4 24.6 0 33.9L177 345c-4.7 4.7-10.9 7-17 7z'/></svg>") right .55rem 62%/14px 14px no-repeat;
}

/* Hover/focus: slightly stronger color */
:where(input[type="number"]:hover)::-webkit-inner-spin-button,
:where(input[type="number"]:focus)::-webkit-inner-spin-button {
  background:
    linear-gradient(to left, color-mix(in oklab, var(--brand-100), transparent 30%) 1px, transparent 1px) right 2.1rem center/1px 60% no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'><path fill='%23405147' d='M160 160c6.1 0 12.3 2.3 17 7l135 136c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-34 0L160 217 42 337c-9.4 9.4-24.6 9.4-34 0s-9.4-24.6 0-33.9l135-136c4.7-4.7 10.9-7 17-7z'/></svg>") right .55rem 38%/14px 14px no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'><path fill='%23405147' d='M160 352c-6.1 0-12.3-2.3-17-7L8 209C-1.4 199.6-1.4 184.4 8 175s24.6-9.4 34 0l118 120 118-120c9.4-9.4 24.6-9.4 34 0s9.4 24.6 0 33.9L177 345c-4.7 4.7-10.9 7-17 7z'/></svg>") right .55rem 62%/14px 14px no-repeat;
}

/* Dark-mode: brighter chevrons for contrast */
@media (prefers-color-scheme: dark) {
  :where(input[type="number"])::-webkit-inner-spin-button {
    background:
      linear-gradient(to left, var(--line) 1px, transparent 1px) right 2.1rem center/1px 60% no-repeat,
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'><path fill='%23E6F0EB' d='M160 160c6.1 0 12.3 2.3 17 7l135 136c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-34 0L160 217 42 337c-9.4 9.4-24.6 9.4-34 0s-9.4-24.6 0-33.9l135-136c4.7-4.7 10.9-7 17-7z'/></svg>") right .55rem 38%/14px 14px no-repeat,
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'><path fill='%23E6F0EB' d='M160 352c-6.1 0-12.3-2.3-17-7L8 209C-1.4 199.6-1.4 184.4 8 175s24.6-9.4 34 0l118 120 118-120c9.4-9.4 24.6-9.4 34 0s-9.4 24.6 0 33.9L177 345c-4.7 4.7-10.9 7-17 7z'/></svg>") right .55rem 62%/14px 14px no-repeat;
  }
}

/* Optional: checkbox/radio accent stays on-brand */
:where(input[type="checkbox"], input[type="radio"], input[type="range"], progress) {
  accent-color: var(--brand);
}