/* Dygnssidorna (bixbooking.com/ och /foretag, ombyggda från docs/marketing/hemsida-dygn/
   *.mall.html — Marketings artifacter, granskade av iOS/web/Payment/Tillväxt/Pelle 2026-09-29).
   Delad av båda sidorna. Sidspecifik logik (räknaren) ligger i web/foretag/dygn-calc.js,
   sidspecifik runtime (reveal/himmel/klocka) i web/shared/dygn.js.

   Färg och typsnitt hämtas INTE härifrån in i innehållet — varje element bär sina egna
   clamp()-mått och färger som inline style, exakt som i de granskade mallarna, för att
   garantera pixelträff. Den här filen bär bara det som mallens egna <style>-block hade:
   animationer, hover, media queries och de handfull komponenter (kvitto, skrivare,
   telefonram) som är för sammansatta för att vara läsbara som ren inline style. */

.dygn { overflow-x: clip; }
.dygn a { color: inherit; text-decoration: none; }
.dygn a:hover { opacity: .75; }
.dygn-hov:hover { opacity: .88; }
.dygn-hov9:hover { opacity: .9; }

/* Hoppa-till-innehåll (samma mönster som home.css:926 .skip, egen kopia: den filen
   laddas inte här). Osynlig tills tangentbordsfokus. */
.dygn-skip {
  position: fixed; top: -120px; left: 16px; z-index: 600; background: #F0EDE8; color: #141414;
  padding: 13px 22px; border-radius: 12px; font-size: 14px; font-weight: 600; letter-spacing: -.01em;
  transition: top .25s cubic-bezier(.22, 1, .36, 1);
}
.dygn-skip:focus { top: 16px; }

@keyframes dygnClouds { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes dygnSway { 0%, 100% { transform: rotate(-1.2deg) translateY(1px); } 50% { transform: rotate(1deg) translateY(-2px); } }
@keyframes dygnBob { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-4px) rotate(1deg); } }
@keyframes dygnDrift { 0% { transform: translateX(-30vw); } 100% { transform: translateX(130vw); } }
@keyframes dygnFeed { 0% { transform: translateY(-100%); } 12% { transform: translateY(-86%); } 16% { transform: translateY(-86%); } 34% { transform: translateY(-60%); } 38% { transform: translateY(-60%); } 58% { transform: translateY(-32%); } 62% { transform: translateY(-32%); } 84% { transform: translateY(-4%); } 100% { transform: translateY(0); } }
@keyframes dygnBack { 0% { transform: translateY(0); } 100% { transform: translateY(-100%); } }
@keyframes dygnStA { 0%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes dygnStB { 0%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes dygnLed { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

@media (prefers-reduced-motion: reduce) {
  .dygn [data-anim] { animation: none !important; }
  .dygn-feed-body { animation-duration: .001s !important; }
}

.dygn [data-cel] { transition: opacity 280ms ease; }
@media (min-width: 900px) { .dygn .dygn-flip > :first-child { order: 2; } }
@media (max-width: 760px) {
  .dygn [data-cel] { width: clamp(90px, 26vw, 140px) !important; height: clamp(90px, 26vw, 140px) !important; }
  .dygn-clouds-track { opacity: .45; }
}

/* Konsumentens hero-sökruta (/hitta?q=) */
.dygn-search input::placeholder { color: rgba(240, 237, 232, .62); }
.dygn-search:focus-within { box-shadow: inset 0 0 0 2px #F0EDE8 !important; }

/* Företagssidans citat-figurer (19:30) */
@media (min-width: 760px) {
  .dygn-quote { grid-template-columns: minmax(0, 300px) minmax(0, 1fr) !important; }
  .dygn-quote > img { order: 2; }
}
@media (max-width: 759px) {
  .dygn-quote { grid-template-columns: 1fr !important; }
  .dygn-quote > img { max-width: 420px; justify-self: center; }
}
/* Prisresultatets två rader ihop på mobil */
@media (max-width: 760px) {
  .dygn-res span { display: inline !important; }
  .dygn-res span + span::before { content: " "; }
}

/* ── Logotyp ─────────────────────────────────────────────────────────── */
.dygn-logo { display: inline-flex; align-items: baseline; font-size: 22px; font-weight: 700; line-height: 1; }
.dygn-logo-bi { letter-spacing: -.04em; }
.dygn-footer-logo { display: inline-flex; align-items: baseline; font-size: 18px; font-weight: 700; line-height: 1; }

/* ── Klockpillret ────────────────────────────────────────────────────── */
.dygn-clock {
  position: fixed; right: clamp(12px, 3vw, 40px); bottom: clamp(12px, 3vw, 32px); z-index: 15;
  opacity: 0; transform: translateY(8px); transition: opacity 400ms ease, transform 500ms cubic-bezier(.22, 1, .36, 1);
  display: flex; align-items: baseline; gap: 10px; padding: 10px 16px; border-radius: 999px;
  background: rgba(13, 20, 34, .55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px rgba(240, 237, 232, .14); color: #F0EDE8; pointer-events: none;
}
.dygn-clock.is-on { opacity: 1; transform: none; }
.dygn-clock-t { font-size: 18px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.dygn-clock-l { font-size: 12px; color: rgba(240, 237, 232, .66); white-space: nowrap; }

/* ── Himlen (sol/måne, styrd av dygn.js paint()) ────────────────────────── */
.dygn-sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.dygn-cel { position: absolute; left: 0; top: 0; will-change: transform, opacity; }
.dygn-cel img { width: 100%; height: 100%; object-fit: contain; }
.dygn-cel-moon { width: clamp(120px, 30vw, 440px); aspect-ratio: 1 / 1; }
.dygn-cel-sun { width: clamp(140px, 32vw, 480px); aspect-ratio: 1 / 1; opacity: 0; }

/* ── Notisbanderollen som driver över himlen (hero) ─────────────────────── */
.dygn-notif-track { position: absolute; z-index: 2; top: clamp(90px, 10vw, 130px); left: 0; display: flex; align-items: center; animation: dygnDrift 30s linear infinite; }
.dygn-notif-pill {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 14px;
  transform-origin: 100% 50%; animation: dygnSway 3.4s ease-in-out infinite;
  background: #F0EDE8; color: #141414; box-shadow: 0 10px 24px rgba(0, 0, 0, .25); white-space: nowrap;
}
.dygn-notif-icon { width: 26px; height: 26px; border-radius: 7px; background: #141414; display: flex; align-items: center; justify-content: center; }
.dygn-notif-icon span { width: 6px; height: 6px; border-radius: 50%; background: #F0EDE8; }
.dygn-notif-t { font-size: 13px; font-weight: 600; }
.dygn-notif-time { font-size: 13px; color: rgba(20, 20, 20, .6); font-variant-numeric: tabular-nums; }
.dygn-notif-line { width: clamp(20px, 5vw, 72px); height: 1px; background: linear-gradient(90deg, rgba(240, 237, 232, .2), rgba(240, 237, 232, .55)); }
.dygn-notif-plane { width: clamp(64px, 10vw, 150px); height: auto; margin-left: -2px; animation: dygnBob 3.4s ease-in-out infinite; }

/* ── Molnremsan (botten av hero/solnedgång) ─────────────────────────────── */
.dygn-clouds { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: clamp(200px, 24vw, 340px); overflow: hidden; pointer-events: none; }
/* Molnbilden är en rektangel med rak över- och underkant. Hjältens moln ligger under första
   vyn och syntes därför bara som ett skarpt band mitt på skärmen när man scrollade (Pelle
   2026-09-30: granska hela sajten). Masken tonar in bandet uppifrån och ut nedåt. */
.dygn-clouds { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 35%, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 35%, #000 55%, transparent 100%); }
.dygn-clouds-track { display: flex; width: 200%; height: 100%; animation: dygnClouds 60s linear infinite; }
.dygn-clouds-track img { width: 50%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.dygn-clouds-track img:last-child { transform: scaleX(-1); }

/* ── Telefonram (appskärmdumpar) ─────────────────────────────────────── */
.dygn-phone { width: min(100%, 300px); box-sizing: border-box; padding: 9px; border-radius: 50px; background: #0A0A0A; box-shadow: inset 0 0 0 1px rgba(240, 237, 232, .16), 0 0 0 1px rgba(0, 0, 0, .5), 0 40px 90px rgba(0, 0, 0, .45); }
.dygn-phone img { display: block; width: 100%; height: auto; border-radius: 41px; }

/* ── Bosse-bubblan (statisk chatt-mockup i 08:15/21:00) ─────────────────── */
.dygn-chat { border-radius: 28px; background: #141414; color: #F0EDE8; padding: 22px; box-shadow: inset 0 0 0 1px rgba(240, 237, 232, .08), 0 40px 90px rgba(0, 0, 0, .45); display: flex; flex-direction: column; gap: 14px; }
.dygn-chat-head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; box-shadow: inset 0 -1px 0 rgba(240, 237, 232, .08); }
.dygn-chat-avatar { width: 34px; height: 34px; border-radius: 50%; background: #1F1F1F; box-shadow: inset 0 0 0 1px #2E2E2E; display: flex; align-items: baseline; justify-content: center; padding-top: 7px; box-sizing: border-box; font-size: 15px; font-weight: 700; }
.dygn-chat-avatar span { width: 2px; height: 2px; border-radius: 50%; background: #F0EDE8; margin-left: .5px; }
.dygn-chat-name { font-size: 16px; font-weight: 600; }
.dygn-chat-bubble-me { align-self: flex-end; max-width: 80%; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: #F0EDE8; color: #141414; font-size: 15px; line-height: 1.45; }
.dygn-chat-bubble { align-self: flex-start; padding: 12px 14px; border-radius: 16px 16px 16px 4px; background: #1F1F1F; font-size: 15px; line-height: 1.45; text-wrap: pretty; }

/* ── Kvitto (räknaren, /foretag) ─────────────────────────────────────── */
.dygn-rcpt-perf-top { height: 10px; background: radial-gradient(circle at 7px 0, transparent 6px, #F7F4EE 6.5px) 0 0/14px 10px repeat-x; }
.dygn-rcpt-perf-bot { height: 10px; background: radial-gradient(circle at 7px 10px, transparent 6px, #F7F4EE 6.5px) 0 0/14px 10px repeat-x; }
.dygn-rcpt-body {
  position: relative; background: #F7F4EE; color: #1A1A1A;
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px; line-height: 1.45; padding: 18px 24px 14px; font-variant-numeric: tabular-nums;
}
.dygn-rcpt-stamp {
  position: absolute; right: 10px; top: 15px; z-index: 2; pointer-events: none; transform: rotate(-6deg);
  padding: 2px 7px; border: 2px solid rgba(184, 82, 60, .8); border-radius: 5px; color: #ae533f; /* 4,66:1 mot kvittopappret (axe 2026-09-30, var 3,66:1) */
  font-size: 11px; line-height: 1.4; font-weight: 700; letter-spacing: .18em; mix-blend-mode: multiply;
}
.dygn-rcpt-head { text-align: center; display: flex; flex-direction: column; gap: 2px; }
.dygn-rcpt-head strong { font-size: 15px; letter-spacing: .14em; }
.dygn-rcpt-logo { display: inline-flex; align-items: baseline; font-family: 'Inter Tight', system-ui, sans-serif; font-size: 30px; font-weight: 700; line-height: 1; }
.dygn-rcpt-hr { border-top: 1px dashed rgba(26, 26, 26, .45); margin: 12px 0; }
.dygn-rcpt-hr.double { border-top-style: double; }
.dygn-rcpt-row { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; box-sizing: border-box; }
.dygn-rcpt-row .sub { display: flex; flex-direction: column; gap: 1px; }
.dygn-rcpt-row .sub small { font-size: 11.5px; opacity: .62; }
.dygn-rcpt-field { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 5px 0; }
.dygn-rcpt-field-label { display: flex; flex-direction: column; gap: 1px; }
.dygn-rcpt-field-label small { font-size: 11.5px; opacity: .62; }
.dygn-rcpt-field-val { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.dygn-rcpt-field-val input {
  width: 84px; padding: 2px 0; border: 0; border-bottom: 1px dashed rgba(26, 26, 26, .55); background: transparent;
  font: inherit; color: #1A1A1A; text-align: right; outline: none; -moz-appearance: textfield;
}
.dygn-rcpt-field-val .unit { width: 22px; }
.dygn-rcpt-kv { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-weight: 700; }
.dygn-rcpt-kv span:first-child { letter-spacing: .04em; white-space: nowrap; }
.dygn-rcpt-kv span:last-child { font-size: clamp(15px, 4.4vw, 20px); white-space: nowrap; }
.dygn-rcpt-barcode { margin: 16px auto 6px; width: 78%; height: 34px; background: repeating-linear-gradient(90deg, #1A1A1A 0 2px, transparent 2px 4px, #1A1A1A 4px 5px, transparent 5px 8px, #1A1A1A 8px 11px, transparent 11px 12px, #1A1A1A 12px 13px, transparent 13px 16px); }
.dygn-rcpt-hint { text-align: center; font-size: 11px; opacity: .7; letter-spacing: .18em; }

.dygn-printer {
  cursor: pointer; position: relative; z-index: 2; width: 100%; height: 78px; box-sizing: border-box; padding: 14px 18px 0;
  border-radius: 18px 18px 12px 12px; background: linear-gradient(180deg, #2E2E2E 0%, #1C1C1C 60%, #161616 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 24px 40px rgba(0, 0, 0, .38);
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; letter-spacing: .16em;
  color: rgba(240, 237, 232, .72); display: flex; justify-content: space-between; align-items: flex-start; border: 0;
}
.dygn-printer-unit[data-phase="print"] .dygn-printer { cursor: default; }
.dygn-printer-label { display: inline-flex; align-items: center; gap: 8px; }
.dygn-led { width: 7px; height: 7px; border-radius: 50%; background: rgba(240, 237, 232, .35); }
.dygn-printer-unit[data-phase="print"] .dygn-led { background: #F0EDE8; box-shadow: 0 0 8px #F0EDE8; animation: dygnLed .35s linear 7; }
.dygn-printer-status { position: relative; display: inline-block; min-width: 170px; text-align: right; }
.dygn-status-idle { white-space: nowrap; }
.dygn-printer-unit[data-phase="print"] .dygn-status-idle { display: none; }
.dygn-status-print { display: none; }
.dygn-printer-unit[data-phase="print"] .dygn-status-print { display: block; }
.dygn-status-print span { position: absolute; right: 0; top: 0; white-space: nowrap; }
.dygn-printer-unit[data-phase="print"] .st-a { animation: dygnStA 2.4s linear both; }
.dygn-printer-unit[data-phase="print"] .st-b { animation: dygnStB 2.4s linear both; }
.dygn-printer-slot { position: absolute; left: 16px; right: 16px; bottom: 12px; height: 7px; border-radius: 4px; background: #050505; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .9), 0 1px 0 rgba(255, 255, 255, .06); }
.dygn-printer:focus-visible { outline: 2px solid #F0EDE8; outline-offset: 2px; }

.dygn-feed { position: relative; z-index: 1; width: calc(100% - 44px); margin-top: -15px; overflow: hidden; padding: 0 12px 60px; box-sizing: content-box; }
.dygn-feed-body { display: none; width: 100%; cursor: pointer; filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .32)); border: 0; padding: 0; background: none; text-align: inherit; font: inherit; }
.dygn-printer-unit[data-phase="print"] .dygn-feed-body,
.dygn-printer-unit[data-phase="back"] .dygn-feed-body { display: block; }
.dygn-printer-unit[data-phase="print"] .dygn-feed-body { animation: dygnFeed 2.4s linear both; }
.dygn-printer-unit[data-phase="back"] .dygn-feed-body { animation: dygnBack .9s cubic-bezier(.55, 0, .75, .2) both; }
.dygn-feed-body:focus-visible { outline: 2px solid #F0EDE8; outline-offset: 2px; }

/* ── QR-dekalen (kundsidan 19:00) ────────────────────────────────────── */
.dygn-qrcard { width: min(100%, 280px); box-sizing: border-box; border-radius: 26px; padding: 24px 24px 20px; background: #F0EDE8; color: #141414; box-shadow: 0 40px 90px rgba(0, 0, 0, .45); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.dygn-qrcard svg { display: block; }

/* ── Knappar ─────────────────────────────────────────────────────────── */
.dygn-btn-light { height: 48px; padding: 0 24px; border-radius: 999px; background: #F0EDE8; color: #141414; font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; white-space: nowrap; }
.dygn-btn-ghost { height: 48px; padding: 0 24px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(240, 237, 232, .4); font-size: 15px; font-weight: 500; display: inline-flex; align-items: center; white-space: nowrap; }

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.dygn-faq { box-shadow: inset 0 1px 0 rgba(240, 237, 232, .14); }
.dygn-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; font-size: clamp(17px, 1.5vw, 20px); font-weight: 500; letter-spacing: -.01em; }
.dygn-faq summary::-webkit-details-marker { display: none; }
.dygn-faq-plus { font-size: 22px; font-weight: 300; color: var(--sub); }
.dygn-faq p { margin: 0 0 22px; max-width: 560px; font-size: 16px; line-height: 1.6; color: var(--sub); text-wrap: pretty; }

/* ── Startsidans sökförslag + direktlänkar (Pelles beställning 2026-09-21, behållen i
   dygn-hjälten på Marketings beslut 2026-09-29). Lista under sökfältet i hjältens
   mörka stil. Max-höjd + intern scroll av samma skäl som den gamla .biz-search-panel:
   hjältesektionen har egen overflow:hidden och klipper annars en högre panel. ── */
.dygn-suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 30; box-sizing: border-box;
  padding: 8px; border-radius: 22px; text-align: left;
  background: rgba(20, 20, 20, .97); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: inset 0 0 0 1px rgba(240, 237, 232, .14), 0 30px 70px rgba(0, 0, 0, .5);
  max-height: min(340px, 60vh); overflow-y: auto; overscroll-behavior: contain;
}
.dygn-suggest[hidden] { display: none; }
.dygn-suggest.up { top: auto; bottom: calc(100% + 8px); }
.dygn-suggest-head { padding: 10px 14px 6px; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(240, 237, 232, .55); }
.dygn-suggest-hint { padding: 12px 14px; font-size: 14px; line-height: 1.45; color: rgba(240, 237, 232, .7); }
.dygn .dygn-suggest-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 14px; color: #F0EDE8; }
.dygn .dygn-suggest-row:hover, .dygn .dygn-suggest-row:focus-visible { opacity: 1; background: rgba(240, 237, 232, .08); outline: none; }
.dygn .dygn-suggest-row:focus-visible { box-shadow: inset 0 0 0 2px rgba(240, 237, 232, .55); }
.dygn-suggest-name { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.dygn-suggest-sub { display: block; margin-top: 2px; font-size: 12.5px; color: rgba(240, 237, 232, .6); }
.dygn-suggest-tag { flex-shrink: 0; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
.dygn-suggest-tag.book { background: #F0EDE8; color: #141414; }
.dygn-suggest-tag.knock { border: 1px dashed rgba(240, 237, 232, .4); color: rgba(240, 237, 232, .85); }
.dygn-suggest-go { flex-shrink: 0; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(240, 237, 232, .6); }

/* Bosse-kortet vid #kom-igang (mountForetagChat). Kortets form låg i landing.css:206-213,
   som dygnssidan inte laddar, så kvar blev bara ivory-färgen ur foretag.css (Pelles beslut
   2026-09-27). Samma mått här, skopat under .dygn, plus en skugga som lyfter kortet från
   nattblått. :where() håller specificiteten på landing.css-nivå (0,1,0), så .f-card.is-chat
   { display: flex } fortfarande vinner i samtalsläget. Länkreseten ovan (.dygn a) tog
   understrykningen från kortets länkar; knappen .ac-btn ("Öppna Mitt företag" i slutläget)
   undantas och får egen färg, annars grå på mörkt (web 2026-09-29). max-width 560 som
   foretag.css satte på gamla sidan. */
:where(.dygn) .f-card, :where(.dygn) .f-card * { box-sizing: border-box; }
:where(.dygn) .f-card { position: relative; width: 100%; max-width: 560px; padding: 18px; display: grid; gap: 14px; border-radius: var(--radius-sheet); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
@media (min-width: 900px) { :where(.dygn) .f-card { padding: 22px; } }
.dygn .f-card a:not(.ac-btn) { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px; }
.dygn .f-card a:not(.ac-btn):hover { color: var(--text-primary); opacity: 1; }
.dygn .f-card a.ac-btn { color: var(--accent-text); }

/* ── Framsidans första synfält: branschchips och "Går att boka nu" (Marketing 2026-10-12, framsida-hitta 1.4 till 1.6) ── */
.dygn-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: 0 calc(-1 * clamp(16px, 4vw, 48px)); padding: 2px clamp(16px, 4vw, 48px); scroll-padding: 0 clamp(16px, 4vw, 48px); }
.dygn-chips::-webkit-scrollbar { display: none; }
.dygn-chip { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 500; white-space: nowrap; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(240, 237, 232, .28); text-decoration: none; }
.dygn-chip:first-child { background: #F0EDE8; color: #141414; box-shadow: none; font-weight: 600; }
.dygn-chip:hover { box-shadow: inset 0 0 0 1px rgba(240, 237, 232, .6); }
.dygn-chip:first-child:hover { box-shadow: none; opacity: .92; }
.dygn-nu { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.dygn-nu-rubrik { margin: 0 0 2px; font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--sub); }
.dygn-nu-rubrik[hidden] { display: none; }
/* Plats för tre rader tills listan har hämtats, så att innehållet under inte hoppar. */
.dygn-nu:not(.dygn-nu-klar) .dygn-nu-lista { min-height: 208px; }
@media (max-width: 380px) { .dygn-nu:not(.dygn-nu-klar) .dygn-nu-lista { min-height: 229px; } }
.dygn-nu-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dygn-nu-rad, .dygn-nu-saknar { display: flex; align-items: center; gap: 12px; box-sizing: border-box; min-height: 64px; padding: 10px 12px 10px 14px; border-radius: 16px; background: rgba(240, 237, 232, .08); box-shadow: inset 0 0 0 1px rgba(240, 237, 232, .14); text-decoration: none; color: var(--ink); }
.dygn-nu-rad:hover { box-shadow: inset 0 0 0 1px rgba(240, 237, 232, .4); }
.dygn-nu-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.dygn-nu-namn { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.dygn-nu-under { display: block; font-size: 12.5px; line-height: 1.35; color: var(--sub); }
.dygn-nu-tid { flex: none; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dygn-nu-knapp { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; background: #F0EDE8; color: #141414; }
.dygn-nu-rad[data-kind="forfragan"] .dygn-nu-knapp { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(240, 237, 232, .45); }
.dygn-nu-saknar { background: transparent; box-shadow: inset 0 0 0 1px rgba(240, 237, 232, .22); flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }
.dygn-nu-saknar:hover { box-shadow: inset 0 0 0 1px rgba(240, 237, 232, .5); }
.dygn-nu-tomt { display: flex; flex-direction: column; gap: 6px; margin: 0; font-size: 15px; line-height: 1.5; color: var(--sub); }
.dygn-nu-tomt strong { color: var(--ink); font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
@media (max-width: 420px) {
  .dygn-nu-rad { gap: 10px; padding-left: 12px; }
  .dygn-nu-knapp { padding: 0 12px; }
}