/* Bidragskompassen – optional smart search: calm status line above results, hints, hero extras */

.smartbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px var(--sp-lg);
  min-height: 32px; margin-bottom: var(--sp-md);
  font-size: var(--fs-sm); color: var(--text-soft);
}
.smartbar__status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.smartbar__status .link-btn { font-size: inherit; color: var(--text); }
.smartbar__dot {
  flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--blue-400);
  animation: smart-pulse 1.2s ease-in-out infinite;
}
@keyframes smart-pulse { 50% { opacity: 0.25; } }
.smartbar__about { color: var(--text-soft); }
.smartbar__suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--text); }
.smartbar__chip { min-height: 32px; font-weight: 700; }
.smartbar__nofit { flex-basis: 100%; font-size: var(--fs-sm); }
.smartbar__nofit p + p { margin-top: 6px; }

.card__smart { color: var(--blue-500); font-style: italic; }
.card__smart::before { content: "◇ "; font-style: normal; }

.combo__opt--smart { background: var(--blue-100); }
.combo__smart { font-weight: 700; }

/* Hero list: calm loading hint while the smart answer is on its way */
.combo__hint {
  display: flex; align-items: center; gap: 8px; padding: 10px 16px 10px 24px;
  border-bottom: 1px solid rgba(60, 60, 59, 0.18); background: var(--beige-100);
  font-size: var(--fs-sm); color: var(--blue-500);
}
.combo__hint-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--blue-400); animation: smart-pulse 1.2s ease-in-out infinite; }

/* Live hero counters – widths reserved so changing numbers and labels never shift the layout */
.counter__num { display: inline-block; min-width: 2ch; text-align: right; font-variant-numeric: lining-nums tabular-nums; }
.counter__label { min-width: 8ch; }
.counter__caption {
  flex-basis: 100%; min-height: 1.3em; margin-top: calc(-1 * var(--sp-sm));
  font-size: var(--fs-sm); font-style: italic; color: var(--blue-200);
}
.hero__counters.is-zero .counter__num { color: var(--blue-300); }
.hero__cue { border-radius: var(--r-pill); transition: background-color 0.3s, color 0.3s, padding 0.3s; }
.hero__cue.is-emphasised { padding-inline: 20px; background: var(--white); color: var(--blue-600); }

/* Fördjupning – marker on cards/Kompassen results and the link block in the drawer */
.fd-badge {
  display: inline-block; margin-left: 8px; padding: 2px 6px; border-radius: var(--r-sm);
  background: var(--blue-600); color: var(--white); font-size: 10px; letter-spacing: var(--track-caps); text-transform: uppercase; font-weight: 700;
}
.dfd {
  position: relative; display: grid; gap: 4px; margin-top: var(--sp-md); padding: var(--sp-md) 56px var(--sp-md) var(--sp-md);
  background: var(--blue-600); color: var(--white); text-decoration: none; transition: background-color 0.2s;
}
.dfd:hover { background: var(--blue-500); }
.dfd:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; }
.dfd__kicker { color: var(--blue-200); }
.dfd__title { font-family: var(--serif); font-size: 1.5rem; line-height: 1.15; }
.dfd__text { color: var(--blue-100); }
.dfd__arrow { position: absolute; right: var(--sp-md); top: 50%; transform: translateY(-50%); font-size: 1.5rem; transition: transform 0.25s var(--ease); }
.dfd:hover .dfd__arrow { transform: translate(4px, -50%); }