/* Blixtflow – bransch: hantverkare (prefix hv-). Byggkänsla: ritningsrutnät, måttband, tumstock och
   skyddsgult (Gnista). ind-craft.js drar ut måttbandet när man skrollar, bygger arbetsordern, räknar
   ritningen och flyttar kortet på projekttavlan. Bygger på ai.css. */
.page-craft { --bp: #1C1442; --bp-2: #241A55; --bp-line: rgba(200, 168, 242, .09); --bp-line-2: rgba(200, 168, 242, .17); --tape: #F2FAA3; --tape-ink: #2C0E3D; }

/* ==========================================================================
   1. Hjälten
   ========================================================================== */
.hv-hero { background: radial-gradient(70% 60% at 85% 10%, rgba(155, 93, 229, .32), transparent 62%), linear-gradient(180deg, var(--bp) 0%, #22113F 60%, var(--natt) 100%); }
.hv-grid { position: absolute; inset: 0; z-index: -1; background: linear-gradient(var(--bp-line-2) 1px, transparent 1px) 0 0 / 120px 120px, linear-gradient(90deg, var(--bp-line-2) 1px, transparent 1px) 0 0 / 120px 120px, linear-gradient(var(--bp-line) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, var(--bp-line) 1px, transparent 1px) 0 0 / 24px 24px; -webkit-mask-image: radial-gradient(90% 80% at 70% 30%, #000 30%, transparent 85%); mask-image: radial-gradient(90% 80% at 70% 30%, #000 30%, transparent 85%); }
.hv-plan { position: absolute; right: -2%; top: 14%; width: min(720px, 60%); opacity: .8; }
.hv-plan path { stroke-dasharray: 2400; stroke-dashoffset: 0; }
.motion .hv-plan path { animation: hv-draw 3.5s .3s var(--ease-out) backwards; }
.hv-hero .air-title { max-width: 13ch; }
.hv-show { position: relative; display: grid; justify-items: end; padding: 48px 0 196px; }
.hv-job { position: relative; width: min(400px, 100%); padding: 18px; border-radius: 22px; color: var(--ink); background: linear-gradient(var(--line-2) 1px, transparent 1px) 0 0 / 100% 22px, #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 60px 110px -40px rgba(0, 0, 0, .95), 0 30px 90px -40px rgba(155, 93, 229, .7); }
.hv-job::before { content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 6px; border-radius: 0 0 6px 6px; background: repeating-linear-gradient(-45deg, var(--natt) 0 8px, var(--gnista) 8px 16px); }
.motion .hv-job { animation: chp-rise 1.2s .2s var(--ease-out) backwards; }
.hv-job__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.hv-job__top b { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; color: var(--primar-ink); font-variant-numeric: tabular-nums; }
.hv-job__top .ic { width: 16px; height: 16px; }
.hv-job__top span { padding: 3px 10px; border-radius: 999px; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: #D9480F; }
.hv-job h3 { margin: 8px 0 10px; font-size: 1.3rem; letter-spacing: -.02em; }
.hv-job dl { display: grid; gap: 6px; }
.hv-job dl div { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 8px; padding: 7px 10px; border-radius: 10px; font-size: .82rem; background: var(--ljus); }
.motion .hv-job dl div { animation: fade-up .5s var(--ease-out) backwards; animation-delay: calc(1.2s + var(--i) * .25s); }
.hv-job dt { font-weight: 800; color: var(--muted); }
.hv-job__pics { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.hv-job__pics > span { overflow: hidden; width: 64px; height: 48px; border-radius: 10px; box-shadow: 0 0 0 2px #fff, 0 6px 14px -6px rgba(44, 14, 61, .5); }
.hv-job__pics > span + span { rotate: 4deg; }
.motion .hv-job__pics > span { animation: chp-pop .6s var(--spring) backwards; animation-delay: 2.4s; }
.motion .hv-job__pics > span + span { animation-delay: 2.7s; }
.hv-snap { display: block; width: 100%; height: 100%; }
.hv-job__pics small { display: inline-flex; align-items: center; gap: 5px; margin-left: 4px; font-size: .76rem; font-weight: 700; color: var(--muted); }
.hv-job__pics small .ic { width: 14px; height: 14px; color: var(--primar-ink); }
.hv-job__who { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: .8rem; font-weight: 700; }
.hv-job__who i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: .7rem; font-style: normal; color: var(--natt); background: var(--gnista); box-shadow: inset 0 0 0 1.5px var(--natt); }
.hv-call { position: absolute; left: -10px; bottom: -16px; z-index: 3; width: min(290px, 70%); padding: 14px; border-radius: 20px; color: var(--ink); background: #fff; box-shadow: 0 40px 80px -24px rgba(0, 0, 0, .9); }
.motion .hv-call { animation: hv-slide 1s 1.6s var(--ease-out) backwards; }
.hv-call__top { display: flex; align-items: center; gap: 10px; }
.hv-call__top span:last-child { display: grid; }
.hv-call__top small { font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ok); }
.hv-call__top b { font-variant-numeric: tabular-nums; }
.hv-call__ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: #fff; background: var(--ok); }
.hv-call__ic .ic { width: 16px; height: 16px; }
.motion .hv-call__ic { animation: air-buzz 1.4s 2s ease-in-out 3; }
.hv-call__q, .hv-call__a { margin-top: 8px; padding: 8px 11px; border-radius: 14px; font-size: .8rem; line-height: 1.4; }
.hv-call__q { background: var(--line-2); border-bottom-left-radius: 4px; }
.hv-call__a { color: #fff; background: var(--primar-ink); border-bottom-right-radius: 4px; }
.motion .hv-call__a { animation: fade-up .5s 2.8s var(--ease-out) backwards; }
.hv-busy { position: absolute; right: 8px; top: 2px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; font-size: .76rem; font-weight: 800; color: #fff; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hv-busy i { width: 8px; height: 8px; border-radius: 50%; background: #FF8A5B; box-shadow: 0 0 0 4px rgba(255, 138, 91, .25); }
.hv-booked { position: absolute; right: 0; bottom: 96px; z-index: 3; display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; font-size: .78rem; font-weight: 800; color: var(--natt); background: var(--gnista); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .8); }
.hv-booked .ic { width: 15px; height: 15px; }
.motion .hv-booked { animation: chp-pop .6s 3.6s var(--spring) backwards, bob 6s 4.6s ease-in-out infinite; }
.hv-bx { position: absolute; left: 4%; top: -18px; z-index: 4; width: 160px; }
.hv-rule { position: absolute; left: 0; right: 0; bottom: calc(var(--sheet-r) + 8px); height: 34px; overflow: hidden; pointer-events: none; }
.hv-rule span { display: flex; width: max-content; height: 100%; background: var(--tape); box-shadow: 0 6px 20px -8px rgba(0, 0, 0, .6); }
.hv-rule i { position: relative; width: 48px; height: 100%; padding: 13px 0 0 4px; font-size: .62rem; font-style: normal; font-weight: 800; color: var(--tape-ink); background: linear-gradient(90deg, var(--tape-ink) 1.5px, transparent 1.5px) 0 0 / 48px 12px no-repeat, linear-gradient(90deg, var(--tape-ink) 1px, transparent 1px) 0 0 / 9.6px 6px repeat-x; }
.motion .hv-rule span { animation: hv-ruler 40s ease-in-out infinite alternate; }
@media (min-width: 1000px) and (max-width: 1199px) { .hv-bx { top: auto; left: auto; right: -10px; bottom: -20px; width: 116px; } .hv-booked { display: none; } }
@media (max-width: 999px) { .hv-bx { left: 0; width: 120px; } .hv-show { justify-items: center; } .hv-plan { width: 90%; top: auto; bottom: 10%; opacity: .5; } }
@media (max-width: 599px) {
  .hv-show { padding: 56px 0 200px; }
  .hv-job { padding: 14px; }
  .hv-job h3 { font-size: 1.1rem; }
  .hv-job dl div { grid-template-columns: 60px minmax(0, 1fr); font-size: .76rem; }
  .hv-call { left: -4px; width: 74%; }
  .hv-booked { display: none; }
  .hv-busy { right: auto; left: 0; }
  .hv-bx { top: auto; left: auto; right: -12px; bottom: -6px; width: 104px; }
  .hv-rule { display: none; }
}

/* ==========================================================================
   2. En dag på jobbet – måttbandet
   ========================================================================== */
.hv-day { color: #fff; background: linear-gradient(var(--bp-line) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(90deg, var(--bp-line) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(180deg, #22113F, var(--bp)); }
.hv-day__wrap { display: grid; gap: 28px; }
.hv-day__head { display: grid; gap: 22px; align-items: end; }
@media (min-width: 1000px) { .hv-day__head { grid-template-columns: minmax(0, 1fr) auto; gap: 56px; } }
.hv-day__head .lead { max-width: 600px; color: var(--on-dark-muted); }
.hv-tally { display: grid; grid-template-columns: repeat(2, minmax(120px, 1fr)); gap: 10px; }
.hv-tally p { display: grid; gap: 4px; padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--on-dark-line); }
.hv-tally b { font-size: 2.2rem; font-weight: 800; line-height: 1; color: var(--gnista); font-variant-numeric: tabular-nums; }
.hv-tally b.is-bump { animation: bump .45s var(--spring); }
.hv-tally span { font-size: .84rem; color: var(--on-dark-muted); }
.hv-tally--zero b { color: #fff; }
.hv-stage { position: relative; height: 330px; }
.hv-cards { position: absolute; inset: 0; }
.hv-pin { position: absolute; left: calc(var(--x) * 1% - 10px); top: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 9px; width: 210px; padding: 11px 12px; border-radius: 16px; color: var(--ink); background: #fff; box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .95); opacity: 0; transform: translateY(16px) scale(.9); transition: opacity .35s, transform .55s var(--spring), box-shadow .3s; }
.hv-pin::after { content: ""; position: absolute; left: 22px; top: 100%; width: 2px; height: 62px; background: repeating-linear-gradient(180deg, var(--gnista) 0 4px, transparent 4px 8px); }
.hv-pin--low { top: auto; bottom: 0; }
.hv-pin--low::after { top: auto; bottom: 100%; height: 56px; }
.hv-pin.is-on { opacity: 1; transform: none; }
.hv-pin.is-new { box-shadow: 0 0 0 3px var(--gnista), 0 24px 50px -24px rgba(0, 0, 0, .95); }
.hv-pin__ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: #fff; background: var(--primar-ink); }
.hv-pin__ic .ic { width: 15px; height: 15px; }
.hv-pin__txt { display: grid; min-width: 0; }
.hv-pin__txt small { font-size: .7rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.hv-pin__txt b { font-size: .84rem; line-height: 1.25; }
.hv-pin em { grid-column: 2; justify-self: start; padding: 1px 8px; border-radius: 999px; font-size: .66rem; font-style: normal; font-weight: 800; color: var(--natt); background: var(--gnista); }
.hv-tape { position: absolute; left: 0; right: 0; top: 50%; display: flex; align-items: center; height: 44px; margin-top: -22px; }
.hv-tape__case { position: relative; z-index: 2; flex: none; display: grid; place-items: center; width: 74px; height: 74px; margin-right: -8px; border-radius: 20px; color: var(--natt); background: linear-gradient(145deg, #FFE36E, #F2C230); box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .15), 0 18px 30px -12px rgba(0, 0, 0, .8); }
.hv-tape__case i { position: absolute; inset: 14px; border-radius: 50%; background: radial-gradient(circle, var(--natt) 0 5px, transparent 5.5px), #E9B620; box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .12); }
.hv-tape__case .ic { position: relative; width: 22px; height: 22px; fill: var(--gnista); stroke: var(--natt); }
.hv-tape__blade { position: relative; flex: none; width: calc(var(--p) * (100% - 66px)); height: 34px; overflow: hidden; border-radius: 0 4px 4px 0; background: var(--tape); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .8); }
.hv-tape__marks { position: absolute; inset: 0 auto 0 0; width: calc(100% / max(var(--p), .001)); background: linear-gradient(90deg, var(--tape-ink) 1.5px, transparent 1.5px) 0 0 / 10% 14px repeat-x, linear-gradient(90deg, rgba(44, 14, 61, .7) 1px, transparent 1px) 0 0 / 2% 7px repeat-x; }
.hv-tape__marks i { position: absolute; left: calc(var(--m) * 10% + 4px); bottom: 3px; font-size: .74rem; font-style: normal; font-weight: 800; color: var(--tape-ink); font-variant-numeric: tabular-nums; }
.hv-tape__hook { position: absolute; right: 0; top: -4px; bottom: -4px; width: 7px; border-radius: 2px; background: linear-gradient(180deg, #E9E2F1, #A79CB6); }
@media (max-width: 999px) {
  .hv-day.is-pinned .hv-day__head .lead { display: none; }
  .hv-day__wrap { gap: 18px; }
  .hv-tally b { font-size: 1.6rem; }
  .hv-tally p { padding: 10px 12px; }
  .hv-stage { height: auto; display: grid; gap: 14px; }
  .hv-cards { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .hv-pin { position: static; width: auto; padding: 7px 8px; gap: 2px 7px; border-radius: 12px; }
  .hv-pin::after { display: none; }
  .hv-pin__ic { width: 22px; height: 22px; border-radius: 7px; }
  .hv-pin__ic .ic { width: 12px; height: 12px; }
  .hv-pin__txt b { font-size: .72rem; }
  .hv-pin__txt small { font-size: .62rem; }
  .hv-pin em { display: none; }
  .hv-tape { position: relative; top: auto; margin: 0; }
  .hv-tape__case { width: 54px; height: 54px; border-radius: 15px; }
  .hv-tape__case i { inset: 10px; }
  .hv-tape__blade { height: 28px; width: calc(var(--p) * (100% - 46px)); }
  .hv-tape__marks i { font-size: .6rem; }
  .hv-tape__marks i:nth-child(2n) { display: none; }
}

/* ==========================================================================
   3. Arbetsordern
   ========================================================================== */
.hv-wo { display: grid; gap: 22px; margin-top: 40px; }
@media (min-width: 1000px) { .hv-wo { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: start; gap: 28px; } }
.hv-wo__ctl { display: grid; gap: 20px; padding: clamp(20px, 3vw, 28px); border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow-2); }
.hv-wo__h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.hv-wo__h span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; font-size: .74rem; letter-spacing: 0; color: var(--natt); background: var(--gnista); box-shadow: inset 0 0 0 1.5px var(--natt); }
.hv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hv-chips[hidden] { display: none; }
.hv-chips button { padding: 10px 15px; border: 0; border-radius: 12px; cursor: pointer; font: inherit; font-size: .9rem; font-weight: 700; color: var(--ink); background: var(--ljus); box-shadow: inset 0 0 0 1px var(--line); transition: background-color .2s, color .2s, transform .3s var(--spring), box-shadow .2s; }
.hv-chips button:hover { transform: translateY(-2px); }
.hv-chips button[aria-pressed="true"] { color: #fff; background: var(--natt); box-shadow: 0 12px 24px -12px rgba(44, 14, 61, .7), inset 0 -3px 0 var(--gnista); }
.hv-chips--issue:not([hidden]) { animation: fade-up .4s var(--ease-out); }
.hv-photo { display: inline-flex; align-items: center; justify-self: start; gap: 9px; padding: 12px 18px; border: 2px dashed var(--ton); border-radius: 14px; cursor: pointer; font: inherit; font-weight: 800; color: var(--primar-ink); background: #fff; transition: background-color .2s, border-color .2s, transform .3s var(--spring); }
.hv-photo:hover { transform: translateY(-2px); border-color: var(--primar); background: var(--ljus); }
.hv-photo .ic { width: 18px; height: 18px; }
.hv-photo.is-done { border-style: solid; border-color: var(--ok); color: var(--ok); background: var(--ok-soft); }
.hv-order { position: relative; padding: 22px; border-radius: 22px; background: linear-gradient(var(--line-2) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, var(--line-2) 1px, transparent 1px) 0 0 / 22px 22px, #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow-2); }
@media (min-width: 1000px) { .hv-order { position: sticky; top: calc(var(--header-h) + 24px); rotate: 1deg; } }
.hv-order::before { content: ""; position: absolute; left: 50%; top: -14px; width: 90px; height: 26px; margin-left: -45px; border-radius: 8px 8px 4px 4px; background: linear-gradient(180deg, #DCD3E8, #B9AECB); box-shadow: 0 4px 10px -4px rgba(44, 14, 61, .4); }
.hv-order__top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 2px solid var(--natt); }
.hv-order__top b { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; }
.hv-order__top span { font-weight: 800; color: var(--primar-ink); font-variant-numeric: tabular-nums; }
.hv-order__ask { margin: 14px 0; padding: 10px 13px; border-radius: 14px 14px 14px 4px; font-size: .86rem; line-height: 1.45; color: #fff; background: var(--primar-ink); }
.hv-order dl { display: grid; }
.hv-order dl div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.hv-order dt { font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.hv-order dd { font-weight: 700; }
.hv-order dd.is-new, .hv-order dd .is-new { animation: hv-flash .8s ease; }
.hv-prio { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .8rem; font-weight: 800; color: #fff; background: #D9480F; }
.hv-prio[data-p="vecka"] { color: var(--natt); background: var(--gnista); }
.hv-prio[data-p="offert"] { color: #fff; background: var(--primar-ink); }
.hv-order__pics { display: flex; flex-wrap: wrap; gap: 6px; }
.hv-order__pics > span:not(.hv-order__none) { overflow: hidden; width: 56px; height: 42px; border-radius: 8px; box-shadow: 0 0 0 2px #fff, 0 4px 10px -4px rgba(44, 14, 61, .5); animation: chp-pop .5s var(--spring); }
.hv-order__none { font-weight: 600; color: var(--muted); }
.hv-order__stamp { position: absolute; right: 18px; bottom: 16px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border: 2.5px solid var(--ok); border-radius: 8px; font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ok); rotate: -8deg; opacity: .85; }
.hv-order__stamp .ic { width: 14px; height: 14px; stroke-width: 3; }
.hv-order.is-stamp .hv-order__stamp { animation: hv-stamp .5s var(--spring); }
.hv-wo__note { margin-top: 16px; font-size: .8rem; color: var(--muted); }

/* ==========================================================================
   4. Ritningen
   ========================================================================== */
.hv-calc { background: linear-gradient(var(--bp-line) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, var(--bp-line) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(180deg, var(--natt), var(--bp)); }
.hv-sliders { display: grid; gap: 16px; margin-top: 24px; }
.hv-range p { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.hv-range label { font-weight: 700; }
.hv-range output { font-size: 1.1rem; font-weight: 800; color: var(--gnista); font-variant-numeric: tabular-nums; }
.hv-range input { --fill: 50%; width: 100%; height: 28px; margin: 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; }
.hv-range input::-webkit-slider-runnable-track { height: 10px; border-radius: 2px; background: linear-gradient(90deg, rgba(44, 14, 61, .55) 1px, transparent 1px) 0 0 / 10px 5px repeat-x, linear-gradient(90deg, var(--gnista) var(--fill), rgba(255, 255, 255, .14) var(--fill)); }
.hv-range input::-moz-range-track { height: 10px; border-radius: 2px; background: linear-gradient(90deg, var(--gnista) var(--fill), rgba(255, 255, 255, .14) var(--fill)); }
.hv-range input::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 30px; margin-top: -10px; border-radius: 4px; background: #fff; box-shadow: 0 0 0 3px var(--natt), 0 6px 14px rgba(0, 0, 0, .5); }
.hv-range input::-moz-range-thumb { width: 12px; height: 26px; border: 3px solid var(--natt); border-radius: 4px; background: #fff; }
.hv-range input:focus-visible { outline: 3px solid var(--gnista); outline-offset: 4px; border-radius: 8px; }
.hv-print { display: grid; justify-items: center; gap: 16px; }
.hv-print__paper { position: relative; width: min(470px, 100%); padding: 20px; border: 2px solid rgba(200, 168, 242, .5); border-radius: 6px; color: #E9E2F8; background: linear-gradient(rgba(200, 168, 242, .1) 1px, transparent 1px) 0 0 / 20px 20px, linear-gradient(90deg, rgba(200, 168, 242, .1) 1px, transparent 1px) 0 0 / 20px 20px, #251A5C; box-shadow: inset 0 0 0 6px #251A5C, inset 0 0 0 7px rgba(200, 168, 242, .35), 0 50px 90px -40px rgba(0, 0, 0, .95); font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; rotate: -1deg; }
.hv-print__no { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ton); }
.hv-print__draw { --w: .5; position: relative; padding: 34px 6px 6px; }
.hv-dim { position: relative; display: grid; place-items: center; width: calc(18% + var(--w) * 82%); height: 28px; transition: width .5s var(--ease-out); }
.hv-dim i { position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px solid var(--gnista); }
.hv-dim i::before, .hv-dim i::after { content: ""; position: absolute; top: -9px; width: 1.5px; height: 18px; background: var(--gnista); }
.hv-dim i::before { left: 0; } .hv-dim i::after { right: 0; }
.hv-dim span { position: relative; padding: 0 8px; font-size: .86rem; font-weight: 800; color: var(--gnista); background: #251A5C; white-space: nowrap; }
.hv-print__weeks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; height: 110px; margin-top: 10px; }
.hv-print__weeks span { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 4px; }
.hv-print__weeks i { align-self: end; height: calc(12% + var(--w) * 88%); border: 1.5px solid var(--ton); background: repeating-linear-gradient(-45deg, rgba(200, 168, 242, .35) 0 2px, transparent 2px 7px); transition: height .5s var(--ease-out); transition-delay: calc(var(--i) * .06s); }
.hv-print__weeks small { font-size: .66rem; text-align: center; color: var(--ton); }
.hv-print__big { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; }
.hv-print__big b { font-family: var(--font); font-size: 3rem; font-weight: 800; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.hv-print__big span { font-size: .84rem; color: var(--ton); }
.hv-block { width: 100%; margin-top: 16px; border-collapse: collapse; font-size: .78rem; }
.hv-block th, .hv-block td { padding: 7px 9px; border: 1.5px solid rgba(200, 168, 242, .45); text-align: left; }
.hv-block th { width: 44%; font-weight: 600; color: var(--ton); }
.hv-block td { font-weight: 700; color: #fff; }
.hv-block__sum td b { font-family: var(--font); font-size: 1.15rem; color: var(--gnista); }
.hv-block .air-price { color: var(--gnista); }
.hv-calc__note { max-width: 440px; font-size: .78rem; line-height: 1.5; text-align: center; color: var(--on-dark-muted); }

/* ==========================================================================
   5. Kunden som gäst
   ========================================================================== */
.hv-points { display: grid; gap: 10px; margin-top: 24px; }
.hv-points li { display: flex; align-items: flex-start; gap: 10px; font-weight: 600; }
.hv-points .ic { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 6px; stroke-width: 3; color: var(--natt); background: var(--gnista); }
.hv-kb { position: relative; padding: 18px; border-radius: 26px; background: #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow-2); }
.hv-kb__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.hv-kb__top > b { display: inline-flex; align-items: center; gap: 8px; font-size: 1.05rem; }
.hv-kb__top > b .ic { width: 17px; height: 17px; color: var(--primar-ink); }
.hv-kb__guest { display: inline-flex; align-items: center; gap: 7px; padding: 4px 6px 4px 4px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--ljus); box-shadow: inset 0 0 0 1px var(--line); }
.hv-kb__guest i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-style: normal; font-weight: 800; color: var(--natt); background: var(--gnista); }
.hv-kb__guest em { padding: 2px 8px; border-radius: 999px; font-size: .68rem; font-style: normal; font-weight: 800; color: #fff; background: var(--natt); }
.hv-kb__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.hv-kb__col { display: grid; align-content: start; gap: 8px; min-height: 230px; padding: 10px; border-radius: 16px; background: var(--ljus); }
.hv-kb__name { display: flex; align-items: center; justify-content: space-between; font-size: .76rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.hv-kb__name span { display: grid; place-items: center; min-width: 22px; height: 22px; border-radius: 999px; font-size: .7rem; letter-spacing: 0; color: var(--ink); background: #fff; }
.hv-kb__card { display: grid; gap: 2px; padding: 10px 11px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 6px 14px -10px rgba(44, 14, 61, .5); }
.hv-kb__card b { font-size: .86rem; }
.hv-kb__card small { font-size: .74rem; color: var(--muted); }
.hv-kb__col:last-child .hv-kb__card { background: #F2FAF6; }
.hv-kb__col:last-child .hv-kb__card small { color: var(--ok); font-weight: 800; }
.hv-kb__card--move { position: relative; box-shadow: 0 0 0 2px var(--gnista), 0 0 0 3.5px var(--natt), 0 14px 24px -12px rgba(44, 14, 61, .6); }
.hv-kb__card--move.is-moving { animation: hv-hop .7s var(--spring); }
.hv-kb__comment { position: relative; display: flex; align-items: flex-start; gap: 10px; max-width: 330px; margin: 14px 0 0 auto; padding: 10px 14px 10px 10px; border-radius: 18px 18px 4px 18px; font-size: .84rem; line-height: 1.4; color: #fff; background: var(--natt); }
.hv-kb__comment > i { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-style: normal; font-weight: 800; color: var(--natt); background: var(--gnista); }
.hv-kb__comment span { display: grid; gap: 2px; }
.hv-kb__comment b { font-size: .76rem; color: var(--ton); }
.reveal-on .hv-kb.is-in .hv-kb__comment { animation: chp-pop .6s 1.6s var(--spring) backwards; }
@media (max-width: 479px) { .hv-kb { padding: 12px; } .hv-kb__cols { gap: 6px; } .hv-kb__col { padding: 6px; min-height: 200px; } .hv-kb__card { padding: 7px; } .hv-kb__card b { font-size: .74rem; } .hv-kb__name { font-size: .64rem; } }

/* ==========================================================================
   6. Offertfrågorna
   ========================================================================== */
.hv-quotes { background: radial-gradient(60% 50% at 20% 20%, rgba(155, 93, 229, .2), transparent 70%), var(--natt); }
.hv-desk { display: grid; gap: 18px; margin-top: 44px; }
@media (min-width: 1000px) { .hv-desk { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: start; } }
.hv-inbox { overflow: hidden; border-radius: 24px; color: var(--ink); background: #fff; box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .9); }
.hv-inbox__h { display: flex; align-items: center; gap: 8px; padding: 15px 18px; border-bottom: 1px solid var(--line-2); }
.hv-inbox__h img { padding: 3px; border-radius: 7px; background: var(--ljus); }
.hv-inbox__h span { margin-left: auto; padding: 2px 9px; border-radius: 999px; font-size: .72rem; font-weight: 800; color: var(--natt); background: var(--gnista); }
.hv-inbox li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line-2); transition: background-color .2s; }
.hv-inbox li:last-child { border-bottom: 0; }
.hv-inbox li:hover { background: var(--ljus); }
.hv-inbox li > i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: #fff; background: var(--natt); }
.hv-inbox li:nth-child(2n) > i { background: var(--primar-ink); }
.hv-inbox .ic { width: 17px; height: 17px; }
.hv-inbox li > span:not(.hv-av) { display: grid; min-width: 0; }
.hv-inbox li b { font-size: .9rem; }
.hv-inbox li small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .84rem; color: var(--muted); }
.hv-tag { padding: 3px 9px; border-radius: 6px; font-size: .7rem; font-style: normal; font-weight: 800; color: var(--natt); background: var(--gnista); }
.hv-tag--bygg { color: #fff; background: var(--primar-ink); }
.hv-tag--garanti { color: var(--primar-ink); background: var(--soft); }
.hv-av { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: .74rem; font-weight: 800; color: #fff; background: hsl(270 45% 45%); box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--line); }
.reveal-on .hv-desk.is-in .hv-inbox li { animation: hv-slide .7s var(--ease-out) backwards; animation-delay: calc(.3s + var(--i) * .15s); }
.hv-side { display: grid; gap: 14px; }
.hv-team { padding: 16px; border-radius: 22px; color: var(--ink); background: #fff; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9); }
.hv-team__h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.hv-team__h .ic { width: 18px; height: 18px; color: var(--primar-ink); }
.hv-team__h span { margin-left: auto; font-size: .78rem; font-weight: 700; color: var(--muted); }
.hv-team__msg { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; font-size: .86rem; line-height: 1.4; }
.hv-team__msg > i { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; font-style: normal; font-weight: 800; color: var(--natt); background: var(--ton); }
.hv-team__msg + .hv-team__msg > i { background: var(--gnista); }
.hv-team__msg > span { display: grid; gap: 1px; }
.hv-team .fm-ref { padding: 0 6px; border-radius: 6px; font-weight: 800; color: var(--primar-ink); background: var(--soft); }
.hv-team .fm-at { font-weight: 800; color: var(--primar-ink); }
.reveal-on .hv-desk.is-in .hv-team__msg { animation: fade-up .5s var(--ease-out) backwards; animation-delay: calc(1s + var(--i) * .5s); }
.hv-event { display: flex; align-items: stretch; gap: 14px; padding: 14px; border-radius: 22px; color: var(--natt); background: var(--gnista); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); }
.hv-event__day { display: grid; place-content: center; justify-items: center; min-width: 62px; padding: 6px; border-radius: 14px; color: #fff; background: var(--natt); }
.hv-event__day small { font-size: .7rem; font-weight: 800; text-transform: uppercase; color: var(--gnista); }
.hv-event__day b { font-size: 1.6rem; line-height: 1; }
.hv-event > div { display: grid; gap: 2px; }
.hv-event > div small { font-size: .78rem; font-weight: 700; }
.hv-event > div b { font-size: 1.05rem; }
.hv-event > div span { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 700; }
.hv-event .ic { width: 14px; height: 14px; }
.reveal-on .hv-desk.is-in .hv-event { animation: chp-pop .7s 2s var(--spring) backwards; }
@media (max-width: 599px) { .hv-inbox li { grid-template-columns: auto minmax(0, 1fr) auto; padding: 12px 14px; } .hv-av { display: none; } }
.hv-def { padding-bottom: calc(clamp(76px, 10vw, 136px) + var(--sheet-r)); }

@keyframes hv-draw { from { stroke-dashoffset: 2400; } }
@keyframes hv-ruler { to { transform: translateX(-480px); } }
@keyframes hv-slide { from { opacity: 0; transform: translateX(-40px); } }
@keyframes hv-flash { 0% { background: var(--gnista); } 100% { background: transparent; } }
@keyframes hv-stamp { 0% { opacity: 0; scale: 2; } 100% { opacity: .85; scale: 1; } }
@keyframes hv-hop { 40% { translate: 0 -10px; rotate: -3deg; } }