/* The firm search in the hero (index.html #din-assistent), where «Kom i gang
   gratis» stood until 3 Nov 2026. Its own file because only the front page has
   it. «Søk» is the one filled button in the view. */
.din { --din-bredde: 34rem; --din-inn: var(--l-s-2); display: block; width: min(100%, var(--din-bredde)); }

.din__sok { position: relative; display: grid; gap: var(--l-s-2); }
.din__etikett { font-weight: var(--l-w-semi); font-size: var(--l-t-md); color: var(--l-ink); text-align: center; }
.din__bar { position: relative; display: grid; }
.din__felt {
  width: 100%; min-height: calc(var(--l-control) + 2 * var(--din-inn));
  padding-inline: var(--l-s-5) calc(var(--din-inn) + var(--l-control) * 2);
  border: 1px solid var(--l-line-2); border-radius: var(--l-r-pill); background: var(--l-frame);
  font: inherit; font-size: var(--l-t-lg); color: var(--l-ink); box-shadow: var(--l-sh-card); outline: none;
}
.din__felt:focus { border-color: var(--l-purple); box-shadow: var(--l-sh-focus); }
/* A <button> does not inherit the page's font by itself. */
.din__knapp { position: absolute; inset-block: var(--din-inn); inset-inline-end: var(--din-inn); min-height: 0; font-family: inherit; font-weight: var(--l-w-bold); cursor: pointer; }
.din__uten-skript { display: block; margin-top: var(--l-s-3); font-weight: var(--l-w-semi); color: var(--l-purple-ink); }

/* The hits fall over the demo under the hero, and its phone stands in a stacking
   context of its own: the hero as a whole has to lie above it. */
.hero:has(.din) { position: relative; z-index: 6; }
/* Each row is the whole target, one line: the name, and where. */
.din__treff {
  position: absolute; z-index: 5; top: 100%; inset-inline: 0; margin: var(--l-s-2) 0 0; padding: var(--l-s-2);
  list-style: none; display: grid; gap: var(--l-s-1); text-align: start;
  border-radius: var(--l-r-card); background: var(--l-frame); box-shadow: var(--l-sh-hover);
}
.din__treff[hidden] { display: none; }
.din__rad {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--l-s-3);
  padding: var(--l-s-3) var(--l-s-4); border-radius: var(--l-r-input, var(--l-s-3)); cursor: pointer; color: var(--l-ink);
}
.din__rad b { font-weight: var(--l-w-semi); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.din__rad span { flex: none; font-size: var(--l-t-sm); color: var(--l-mute); }
.din__rad.er-valgt { background: var(--l-purple-soft); }
@media (hover: hover) { .din__rad:hover { background: var(--l-purple-soft); } }

/* Under the bar, in the room the list would take, so the page does not move. */
.din__melding { position: absolute; top: 100%; inset-inline: 0; margin: var(--l-s-2) 0 0; text-align: center; color: var(--l-mute); font-size: var(--l-t-md); }
.din__melding[hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .din__felt { transition: border-color var(--l-t-base) var(--l-ease), box-shadow var(--l-t-base) var(--l-ease); }
  .din__rad { transition: background-color var(--l-t-fast) var(--l-ease), translate var(--l-t-base) var(--l-ease); }
  .din__treff:not([hidden]), .din__melding:not([hidden]) { animation: din-inn var(--l-t-slow) var(--l-ease) backwards; }
  @keyframes din-inn { from { opacity: 0; translate: 0 var(--l-s-2); } }
  @media (hover: hover) { .din__rad:hover { translate: var(--l-lift-sm) 0; } }
}