/* =========================================================
   Lokal synlighetsrapport. Hämtad ur frontness.se/assets/css/
   verktyg.css: QR-studion och verktygsöversiktens kort är
   borttagna, de hör till andra appar. Bygger på base.css.
   ========================================================= */
/* =========================================================
   FRONTNESS — Verktyg
   Bygger vidare på style.css (tokens, reset, header, footer,
   .shell, .pill, .eyebrow). Allt här prefixas .vt- för att
   inte krocka med sajtens egna komponenter.

   Ytan är vit. Grått används bara till hårfina ramar, inbäddade
   textblock och kartans gatunät — aldrig som kortbakgrund.
   ========================================================= */

:root{
  /* Statuspalett — reserverad. Används ALDRIG som serie-/dekorfärg.
     Bär aldrig betydelse ensam: alltid glyf + text bredvid. */
  --st-good:#0ca30c;
  --st-warn:#fab219;
  --st-bad:#d03b3b;
  /* Glyffärg inuti respektive fyllning, vald på fyllningens luminans
     (ink 5,9:1 / 10,8:1, vit 4,8:1) så den alltid klarar kontrast. */
  --st-good-glyph:#0a0a0a;
  --st-warn-glyph:#0a0a0a;
  --st-bad-glyph:#ffffff;

  --vt-muted:rgba(17,17,17,.62);
  --vt-faint:rgba(17,17,17,.45);
  --vt-hair:#e9e8e5;                  /* hårfin ram */
  --vt-inset:#faf9f8;                 /* inbäddade textblock */
  --vt-lift:0 1px 2px rgba(17,17,17,.04), 0 8px 24px -16px rgba(17,17,17,.18);
  --vt-lift-hover:0 1px 2px rgba(17,17,17,.05), 0 14px 34px -18px rgba(17,17,17,.26);
}

.vt-report{ background:var(--background) }

/* ============================ hjälpare ============================ */
.vt-sect{ padding:4rem 1.25rem }
@media (min-width:640px){ .vt-sect{ padding-left:2rem; padding-right:2rem } }
@media (min-width:1024px){ .vt-sect{ padding-top:5.5rem; padding-bottom:5.5rem } }
.vt-sect--acc{ padding-top:0 }

.vt-head{ display:flex; align-items:baseline; gap:1.25rem; margin-bottom:2rem; flex-wrap:wrap }
.vt-head h2{ font-size:1.875rem; font-weight:600; letter-spacing:-.02em; line-height:1.1 }
@media (min-width:640px){ .vt-head h2{ font-size:2.25rem } }
.vt-head__note{ margin-left:auto; font-size:.875rem; color:var(--vt-faint) }

.vt-sub-h{ margin:2.25rem 0 1rem; font-size:.8125rem; letter-spacing:.1em; text-transform:uppercase; color:var(--vt-faint) }
.vt-note{ font-size:.875rem; color:var(--vt-faint); margin-top:1rem; line-height:1.65 }

/* Kort: vitt, hårfin ram, lyft vid hovring. */
.vt-card,.vt-tile,.vt-act,.vt-t3,.vt-kwnum,.vt-swap,.vt-gap,.vt-cat,.vt-citem,.vt-serp{
  background:var(--background); border:1px solid var(--vt-hair); border-radius:var(--radius-card-sm);
}
.vt-card,.vt-tile,.vt-act,.vt-t3,.vt-gap,.vt-swap{ box-shadow:var(--vt-lift) }
.vt-card:hover,.vt-tile:hover,.vt-act:hover,.vt-t3:hover{ box-shadow:var(--vt-lift-hover) }

/* ============================== hero ============================== */
.vt-hero{ position:relative; overflow:hidden; background:var(--background); border-bottom:1px solid var(--vt-hair) }
.vt-hero__bg{ position:absolute; inset:0; z-index:0 }
.vt-hero__bg img{ width:100%; height:100%; object-fit:cover; filter:saturate(.35) contrast(.95) }
/* Scrimmen gör bilden till en antydan, inte en bakgrund man läser text mot.
   Vitt lager + toning från vänster där texten och mätaren står. */
.vt-hero--photo .vt-hero__bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, #fff 0%, rgba(255,255,255,.97) 44%, rgba(255,255,255,.88) 70%, rgba(255,255,255,.8) 100%);
}
.vt-hero__inner{ position:relative; z-index:1; padding:6.5rem 1.25rem 3.5rem; display:grid; gap:2.5rem; align-items:center }
@media (min-width:640px){ .vt-hero__inner{ padding-left:2rem; padding-right:2rem } }
@media (min-width:900px){ .vt-hero__inner{ grid-template-columns:auto 1fr; gap:3.5rem; padding-top:8rem; padding-bottom:5rem } }

.vt-kicker{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
  font-size:.875rem; color:var(--vt-muted); margin-bottom:1.25rem }
.vt-beta{ font-size:.6875rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); border:1px solid rgba(177,95,44,.35); background:rgba(177,95,44,.06);
  border-radius:var(--radius-pill); padding:.25rem .6rem }

.vt-hero h1{ max-width:16ch; font-size:2rem; font-weight:600; line-height:1.06; letter-spacing:-.025em }
@media (min-width:640px){ .vt-hero h1{ font-size:2.875rem } }
.vt-verdict{ margin-top:1.25rem; max-width:52ch; font-size:1.0625rem; line-height:1.6; color:var(--vt-muted) }
.vt-chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.75rem }
.vt-chip{ font-size:.8125rem; color:var(--vt-muted); border:1px solid var(--vt-hair); background:var(--background);
  border-radius:var(--radius-pill); padding:.35rem .85rem }

/* Mätare: en kvot mot ett tak. Spåret är ett ljust steg av fyllningens egen ramp. */
.vt-dial{ position:relative; width:14rem; height:14rem; flex:none; justify-self:start }
.vt-dial svg{ width:100%; height:100%; transform:rotate(-90deg) }
.vt-dial__num{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center }
/* Hjältesiffra: sajtens sans, proportionella siffror (ej tabular). */
.vt-dial__num b{ font-size:3.5rem; font-weight:600; line-height:1; letter-spacing:-.03em }
.vt-dial__num span{ font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--vt-faint); margin-top:.5rem }

/* ============================ beta-band =========================== */
.vt-betabar{ background:var(--vt-inset); border-bottom:1px solid var(--vt-hair);
  padding:.875rem 1.25rem; font-size:.8125rem; line-height:1.6; color:var(--vt-muted); text-align:center }
.vt-betabar strong{ color:var(--foreground); font-weight:600 }

/* ============================= topprad ============================ */
.vt-topbar{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.88); backdrop-filter:blur(14px); border-bottom:1px solid var(--vt-hair) }
.vt-topbar__in{ display:flex; align-items:center; gap:.75rem; height:3.75rem; padding:0 1.25rem }
@media (min-width:640px){ .vt-topbar__in{ padding-left:2rem; padding-right:2rem; gap:1rem } }
.vt-topbar .logo{ height:1.125rem }
.vt-topbar__dom{ font-size:.8125rem; color:var(--vt-muted); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.vt-tbtn{ display:inline-flex; align-items:center; gap:.45rem; font:inherit; font-size:.8125rem; color:var(--vt-muted);
  border:1px solid var(--vt-hair); border-radius:.65rem; padding:.45rem .75rem; background:var(--background);
  cursor:pointer; text-decoration:none; white-space:nowrap; transition:color .2s,border-color .2s,box-shadow .2s }
.vt-tbtn:hover{ color:var(--foreground); border-color:var(--subtle); box-shadow:var(--vt-lift) }
.vt-ico{ width:.95rem; height:.95rem; flex:none; fill:none; stroke:currentColor; stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round }
@media (max-width:720px){
  .vt-tbtn__l{ position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0) }
  .vt-tbtn{ padding:.45rem .55rem }
}

/* ============================== kartan ============================ */
.vt-maplayout{ display:grid; gap:1.5rem; grid-template-columns:minmax(0,1fr) }
/* Rutnätsobjekt har min-width:auto. Utan detta växer kolumnen till tabellens
   min-content och sprängs ur vyn på mobil, trots overflow-x på tabellen. */
.vt-maplayout > *{ min-width:0 }
@media (min-width:1024px){
  .vt-maplayout{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:2rem; align-items:start }
  .vt-maplayout__map{ position:sticky; top:5rem }
}
.vt-maplayout__list .vt-tablewrap{ margin-top:0 }
.vt-map{ position:relative; width:100%; border:1px solid var(--vt-hair); border-radius:var(--radius-card);
  overflow:hidden; background:#fbfaf9 }
.vt-map__streets{ position:absolute; inset:0 }
.vt-map__streets svg{ width:100%; height:100%; display:block }
/* Samma lagerstil som startsidans hero-karta (se .hero__map i style.css). */
.vt-map__streets path{ fill:none; vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round }
.vt-map__streets .m-water path{ fill:#eeece8; stroke:none }
.vt-map__streets .m-river path{ stroke:rgba(177,95,44,.22); stroke-width:1.6px }
.vt-map__streets .m-minor path{ stroke:#eae8e4; stroke-width:1px }
.vt-map__streets .m-major path{ stroke:#e0ded9; stroke-width:1.3px }
.vt-map__streets .m-trunk path{ stroke:#d2cfc9; stroke-width:1.9px }

/* Markör: färgen bär styrkebandet (status), talet står i punkten och storleken
   förstärker samma sak. Aldrig färg ensam. Det egna företaget är mörkt — det ska
   inte tävla i samma skala som grannarnas färgband. */
.vt-pin{ position:absolute; transform:translate(-50%,-50%); width:var(--d); height:var(--d);
  border-radius:50%; display:grid; place-items:center; cursor:pointer; padding:0; border:0;
  font:inherit; font-size:.75rem; font-weight:700; font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 2px #fff, 0 2px 10px -4px rgba(17,17,17,.4);
  transition:transform .18s, box-shadow .18s; z-index:2 }
.vt-pin:hover,.vt-pin:focus-visible{ transform:translate(-50%,-50%) scale(1.1); z-index:5 }
/* Glyffärg vald på fyllningens luminans, precis som statusdiskarna. */
.vt-pin--good{ background:var(--st-good); color:var(--st-good-glyph) }
.vt-pin--warn{ background:var(--st-warn); color:var(--st-warn-glyph) }
.vt-pin--bad{  background:var(--st-bad);  color:var(--st-bad-glyph) }
.vt-pin--self{ background:var(--ink); color:#fff; z-index:4;
  box-shadow:0 0 0 2px #fff, 0 0 0 7px rgba(17,17,17,.12), 0 4px 16px -4px rgba(17,17,17,.55) }
.vt-pin--self .vt-pin__lbl{ opacity:1 }   /* ditt eget namn står alltid framme */
.vt-pin__lbl{ position:absolute; top:calc(100% + .4rem); left:50%; transform:translateX(-50%);
  white-space:nowrap; font-size:.75rem; font-weight:500; color:var(--foreground);
  background:rgba(255,255,255,.94); border:1px solid var(--vt-hair); border-radius:.4rem; padding:.15rem .45rem;
  opacity:0; pointer-events:none; transition:opacity .18s }
.vt-pin:hover .vt-pin__lbl,.vt-pin:focus-visible .vt-pin__lbl,.vt-pin.is-open .vt-pin__lbl{ opacity:1 }
.vt-pin--self .vt-pin__lbl{ color:var(--foreground); font-weight:600 }

.vt-maplegend{ display:flex; flex-wrap:wrap; gap:1.25rem; margin-top:1rem; font-size:.8125rem; color:var(--vt-muted) }
.vt-maplegend i{ margin-right:.45rem }
.vt-swatch{ display:inline-block; width:.75rem; height:.75rem; border-radius:.25rem; vertical-align:-1px }
.vt-swatch--self{ border-radius:50%; background:var(--ink) }
.vt-maplegend .vt-swatch{ border-radius:50% }
.vt-maplegend__note{ color:var(--vt-faint) }

.vt-mapname{ font-weight:500 }
tr.is-self .vt-mapname{ color:var(--accent); font-weight:600 }
.vt-strength{ display:flex; align-items:center; gap:.6rem; min-width:9rem }
.vt-strength .vt-meter{ flex:1 }
.vt-strength b{ font-size:.8125rem; font-weight:600; font-variant-numeric:tabular-nums; width:1.6rem; text-align:right }
/* Talet bär ink; bandet visas av en prick, inte av textfärgen. */
.vt-strength__v{ position:relative; padding-left:.75rem }
.vt-strength__v::before{ content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:.4375rem; height:.4375rem; border-radius:50% }
.vt-strength__v--good::before{ background:var(--st-good) }
.vt-strength__v--warn::before{ background:var(--st-warn) }
.vt-strength__v--bad::before{  background:var(--st-bad) }
.vt-strength__v--self::before{ background:var(--ink) }

/* Expanderbara konkurrentrader. */
.vt-maprow{ cursor:pointer }
.vt-maprow:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px }
.vt-chev{ display:inline-block; width:.45rem; height:.45rem; border-right:1.5px solid var(--vt-faint);
  border-bottom:1.5px solid var(--vt-faint); transform:rotate(45deg) translate(-1px,-1px);
  transition:transform .2s }
.vt-maprow.is-open .vt-chev{ transform:rotate(225deg) translate(-1px,-1px) }
.vt-maprow__detail td{ background:var(--vt-inset); padding:0 }
.vt-facts__wrap{ padding:1.125rem 1.125rem 1.25rem }
.vt-facts{ display:grid; grid-template-columns:auto 1fr; gap:.4rem 1.25rem; font-size:.8125rem }
.vt-facts dt{ color:var(--vt-faint) }
.vt-facts dd{ color:var(--foreground) }
.vt-facts__links{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:1rem }
.vt-facts__links a{ text-decoration:none }

/* Diskret utfällbar fotnot. */
.vt-mini{ margin-top:1.25rem; font-size:.8125rem; color:var(--vt-faint) }
.vt-mini summary{ cursor:pointer; color:var(--accent) }
.vt-mini p{ margin-top:.6rem; max-width:70ch; line-height:1.7 }
.vt-mini strong{ color:var(--foreground) }

/* ============================= callouts =========================== */
.vt-callout{ margin-top:1.5rem; padding:1rem 1.25rem; border-radius:var(--radius-control);
  font-size:.9375rem; line-height:1.65; color:var(--vt-muted); background:var(--vt-inset);
  border:1px solid var(--vt-hair); border-left-width:3px }
/* Står callouten ovanför kartlayouten ska luften under den vara lika stor som
   gapet mellan listan och kartan (.vt-maplayout gap: 2rem) – annars klibbar den
   fast i tabellen under. */
.vt-callout + .vt-maplayout{ margin-top:2rem }
.vt-callout strong{ color:var(--foreground) }
.vt-callout--bad{ border-left-color:var(--st-bad) }
.vt-callout--warn{ border-left-color:var(--st-warn) }

/* ============================ accordions ========================== */
.vt-acc{ border-bottom:1px solid var(--vt-hair) }
.vt-acc:first-of-type{ border-top:1px solid var(--vt-hair) }
.vt-acc summary{ display:flex; align-items:center; gap:1rem; cursor:pointer; list-style:none;
  padding:1.5rem .25rem; transition:color .2s }
.vt-acc summary::-webkit-details-marker{ display:none }
.vt-acc summary:hover .vt-acc__t{ color:var(--accent) }
/* Ikonen till vänster om rubriken: dämpad tills sektionen hovras eller är öppen,
   så tio ikoner i rad inte konkurrerar med rubrikerna de sitter bredvid. */
.vt-acc__ico{ flex:none; width:1.5rem; display:grid; place-items:center; color:var(--vt-faint);
  transition:color .2s }
.vt-acc__ico [data-icon]{ font-size:1.125rem; line-height:0 }
.vt-acc summary:hover .vt-acc__ico,
.vt-acc[open] > summary .vt-acc__ico{ color:var(--accent) }
.vt-acc__t{ font-size:1.0625rem; font-weight:600; letter-spacing:-.01em; transition:color .2s }
@media (min-width:640px){ .vt-acc__t{ font-size:1.25rem } }
.vt-acc__m{ margin-left:auto; display:flex; align-items:center; gap:.5rem;
  font-size:.8125rem; color:var(--vt-faint); text-align:right }
/* Sifferchips i accordion-huvudet: talet står självt, färgen säger vad det betyder.
   Tonad bakgrund i stället för fylld – huvudena är många, och tre mättade prickar
   per rad hade skrikit högre än rubrikerna de sitter bredvid. */
.vt-mchip{ display:inline-flex; align-items:center; justify-content:center; min-width:1.75rem;
  padding:.2rem .5rem; border-radius:var(--radius-pill); font-size:.8125rem; font-weight:600;
  font-variant-numeric:tabular-nums; line-height:1.2; border:1px solid transparent; cursor:default }
.vt-mchip--good{ color:#0a7a0a; background:rgba(12,163,12,.10); border-color:rgba(12,163,12,.22) }
.vt-mchip--warn{ color:#8a6100; background:rgba(250,178,25,.16); border-color:rgba(250,178,25,.35) }
.vt-mchip--bad{ color:#a52a2a; background:rgba(208,59,59,.10); border-color:rgba(208,59,59,.24) }
.vt-mchip--accent{ color:var(--accent); background:rgba(177,95,44,.10); border-color:rgba(177,95,44,.22) }
/* Chevron. Roterar när sektionen är öppen. */
.vt-acc summary::after{
  content:''; flex:none; width:.6rem; height:.6rem; margin-left:.25rem;
  border-right:1.6px solid var(--vt-faint); border-bottom:1.6px solid var(--vt-faint);
  transform:rotate(45deg) translate(-2px,-2px); transition:transform .25s }
.vt-acc[open] summary::after{ transform:rotate(225deg) translate(-2px,-2px) }
.vt-acc__body{ padding:.25rem .25rem 2.5rem }
@media (prefers-reduced-motion:reduce){ .vt-acc summary::after{ transition:none } }

.vt-dot{ width:.5rem; height:.5rem; border-radius:50%; flex:none }
.vt-dot--good{ background:var(--st-good) }
.vt-dot--warn{ background:var(--st-warn) }
.vt-dot--bad{ background:var(--st-bad) }

/* ======================= GBP: ersätt-blocken ====================== */
.vt-swap{ padding:1.5rem; margin-bottom:1rem }
.vt-swap__head{ display:flex; align-items:center; gap:1rem; margin-bottom:1rem }
.vt-swap__head h3{ font-size:1rem; font-weight:600; flex:1 }
.vt-swap__cols{ display:grid; gap:.875rem }
@media (min-width:760px){ .vt-swap__cols{ grid-template-columns:1fr 1fr } }
.vt-swap__col{ padding:1rem 1.125rem; border-radius:var(--radius-control); border:1px solid var(--vt-hair) }
.vt-swap__col b{ display:block; font-size:.6875rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  margin-bottom:.5rem; color:var(--vt-faint) }
.vt-swap__col p{ font-size:.9375rem; line-height:1.65 }
.vt-swap__col--old{ background:var(--vt-inset) }
.vt-swap__col--old p{ color:var(--vt-muted); text-decoration:line-through; text-decoration-color:rgba(208,59,59,.4) }
.vt-swap__col--old p.is-empty{ text-decoration:none; font-style:italic; color:var(--vt-faint) }
.vt-swap__col--new{ background:#fff; border-color:rgba(177,95,44,.3); box-shadow:inset 3px 0 0 var(--accent) }
.vt-swap__why{ margin-top:.875rem; font-size:.8125rem; color:var(--vt-faint); line-height:1.6 }
.vt-quote{ font-size:.9375rem; line-height:1.7; white-space:pre-wrap; padding:1rem 1.125rem;
  background:var(--vt-inset); border-radius:var(--radius-control); border:1px solid var(--vt-hair) }

.vt-copy{ font:inherit; font-size:.75rem; font-weight:500; color:var(--vt-muted); cursor:pointer;
  background:var(--background); border:1px solid var(--vt-hair); border-radius:.5rem; padding:.35rem .7rem;
  white-space:nowrap; transition:color .2s,border-color .2s }
.vt-copy:hover{ color:var(--accent); border-color:rgba(177,95,44,.4) }

.vt-steps{ counter-reset:vtstep; margin-top:1rem; padding:0; list-style:none }
.vt-steps li{ counter-increment:vtstep; position:relative; padding:.55rem 0 .55rem 2.25rem;
  font-size:.9375rem; line-height:1.6; border-bottom:1px solid var(--vt-hair) }
.vt-steps li:last-child{ border-bottom:0 }
.vt-steps li::before{ content:counter(vtstep); position:absolute; left:0; top:.55rem;
  width:1.5rem; height:1.5rem; border-radius:50%; display:grid; place-items:center;
  font-size:.75rem; font-weight:600; color:#fff; background:var(--ink) }

/* ========================= innehållsluckor ======================== */
.vt-gap{ padding:1.5rem; margin-bottom:1rem }
.vt-gap__page{ display:grid; gap:.75rem; margin-top:1rem; padding:1rem 1.125rem;
  background:var(--vt-inset); border:1px solid var(--vt-hair); border-radius:var(--radius-control) }
.vt-gap__page > div{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; font-size:.9375rem }
.vt-gap__page b{ font-size:.6875rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--vt-faint); width:8rem; flex:none }
.vt-gap__page code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.8125rem; color:var(--accent) }

/* =========================== KPI-brickor ========================== */
.vt-tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); gap:.875rem }
.vt-tile{ padding:1.25rem; transition:box-shadow .2s }
.vt-tile b{ display:block; font-size:1.75rem; font-weight:600; letter-spacing:-.02em; line-height:1.1; margin-bottom:.35rem }
.vt-tile span{ font-size:.875rem; color:var(--vt-muted); display:block }
.vt-tile .vt-tile__sub{ font-size:.8125rem; color:var(--vt-faint); margin-top:.4rem }

/* ====================== kategorimätare (rader) ==================== */
.vt-cats{ display:flex; flex-direction:column; gap:.625rem; margin-top:2rem }
.vt-cat{ padding:1.25rem 1.5rem }
.vt-cat__row{ display:flex; align-items:center; gap:.875rem; margin-bottom:.75rem }
.vt-cat__badge{ font-size:.75rem; font-weight:600; letter-spacing:.06em; color:var(--vt-muted);
  border:1px solid var(--vt-hair); background:var(--vt-inset); border-radius:.5rem; padding:.2rem .5rem; flex:none }
.vt-cat__label{ font-weight:600; font-size:1rem }
.vt-cat__score{ margin-left:auto; font-size:.875rem; color:var(--vt-muted); font-variant-numeric:tabular-nums }
.vt-cat__sum{ font-size:.875rem; color:var(--vt-muted); margin-top:.75rem; line-height:1.6 }

.vt-meter{ height:.625rem; border-radius:var(--radius-pill); overflow:hidden }
.vt-meter i{ display:block; height:100%; border-radius:var(--radius-pill) }

/* ======================= segmenterade staplar ===================== */
/* Stackad stapel: 2px yt-glugg mellan varje segment. */
.vt-statusbar{ display:flex; height:1.375rem; border-radius:var(--radius-pill); overflow:hidden; gap:2px;
  margin:.5rem 0 1rem; background:var(--background) }
.vt-statusbar i{ display:block; height:100% }
.vt-legend{ display:flex; flex-wrap:wrap; gap:1.25rem; font-size:.875rem; color:var(--vt-muted) }
.vt-legend b{ color:var(--foreground); font-weight:600 }
.vt-legend .vt-swatch{ margin-right:.5rem }

/* ============================ checklista ========================== */
.vt-filters{ display:flex; gap:.5rem; margin-bottom:1.5rem; flex-wrap:wrap }
.vt-fbtn{ font:inherit; font-size:.8125rem; color:var(--vt-muted); background:var(--background); border:1px solid var(--vt-hair);
  border-radius:var(--radius-pill); padding:.5rem 1rem; cursor:pointer; transition:all .2s }
.vt-fbtn:hover{ color:var(--foreground); border-color:var(--subtle) }
.vt-fbtn.is-on{ color:#fff; background:var(--ink); border-color:var(--ink); font-weight:500 }

.vt-clgroup{ margin-bottom:2rem }
.vt-clgroup h3{ font-size:.8125rem; letter-spacing:.1em; text-transform:uppercase; color:var(--vt-faint);
  margin-bottom:.875rem; display:flex; gap:.75rem; align-items:center; flex-wrap:wrap }
.vt-clgroup h3 .vt-cnt{ font-weight:400 }
.vt-citem{ display:grid; grid-template-columns:1.5rem 1fr auto; gap:.875rem; align-items:start;
  padding:.875rem 1.125rem; margin-bottom:.5rem }
.vt-citem__item{ font-weight:600; font-size:.9375rem }
.vt-citem__detail{ font-size:.875rem; color:var(--vt-muted); margin-top:.2rem; line-height:1.6 }

/* Statusdisk: fyllningen bär tillståndet, glyfen gör den läsbar utan färg. */
.vt-st{ width:1.375rem; height:1.375rem; border-radius:50%; display:grid; place-items:center;
  font-size:.75rem; font-weight:700; margin-top:.15rem; flex:none }
.vt-st--pass{ background:var(--st-good); color:var(--st-good-glyph) }
.vt-st--warn{ background:var(--st-warn); color:var(--st-warn-glyph) }
.vt-st--fail{ background:var(--st-bad);  color:var(--st-bad-glyph) }

/* Effektmärke: texten bär ink, pricken bär färgen. */
.vt-imp{ display:inline-flex; align-items:center; gap:.4rem; font-size:.75rem; letter-spacing:.03em;
  color:var(--vt-muted); border:1px solid var(--vt-hair); border-radius:.5rem; padding:.3rem .6rem;
  white-space:nowrap; margin-top:.15rem }
.vt-imp::before{ content:''; width:.5rem; height:.5rem; border-radius:50%; flex:none; background:var(--subtle) }
.vt-imp--high::before{ background:var(--st-bad) }
.vt-imp--medium::before{ background:var(--st-warn) }
.vt-imp--low::before{ background:var(--subtle) }

/* =========================== åtgärdsplan ========================== */
.vt-actions{ display:flex; flex-direction:column; gap:.875rem; counter-reset:vtact }
.vt-act{ display:grid; grid-template-columns:3rem 1fr; gap:1.25rem; padding:1.5rem; transition:box-shadow .2s }
.vt-act::before{ counter-increment:vtact; content:counter(vtact,decimal-leading-zero);
  font-size:1.25rem; font-weight:600; color:var(--accent); line-height:1.4; font-variant-numeric:tabular-nums }
.vt-act h3{ font-size:1.0625rem; font-weight:600; margin-bottom:.4rem }
.vt-act__why{ font-size:.875rem; color:var(--vt-muted); margin-bottom:.75rem; line-height:1.6 }
.vt-act__how{ font-size:.875rem; background:var(--vt-inset); border-left:2px solid var(--accent);
  border-radius:0 var(--radius-control) var(--radius-control) 0; padding:.75rem 1rem; line-height:1.6 }
.vt-act__meta{ display:flex; gap:.5rem; margin-top:.875rem; flex-wrap:wrap }

/* ============================ topp tre ============================ */
.vt-top3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(18rem,1fr)); gap:.875rem; counter-reset:vt3 }
.vt-t3{ padding:1.75rem 1.5rem 1.5rem; position:relative; transition:box-shadow .2s }
.vt-t3::before{ counter-increment:vt3; content:counter(vt3); position:absolute; top:-.875rem; left:1.25rem;
  width:1.875rem; height:1.875rem; border-radius:50%; display:grid; place-items:center; font-size:.875rem; font-weight:600;
  color:#fff; background:var(--ink) }
.vt-t3 h3{ font-size:1rem; font-weight:600; margin:.25rem 0 .5rem }
.vt-t3__why{ font-size:.875rem; color:var(--vt-muted); margin-bottom:.75rem; line-height:1.6 }
.vt-t3__how{ font-size:.875rem; background:var(--vt-inset); border-left:2px solid var(--accent);
  border-radius:0 var(--radius-control) var(--radius-control) 0; padding:.7rem .9rem; line-height:1.6; margin-bottom:.75rem }
.vt-t3__doit{ font-size:.8125rem; font-weight:600; color:var(--accent) }

/* ============================== tabeller ========================== */
/* position:relative gör behållaren till containing block, så absolut placerade
   ättlingar (t.ex. .sr-only) klipps med tabellen i stället för att dra ut sidan. */
.vt-tablewrap{ position:relative; overflow-x:auto; border:1px solid var(--vt-hair);
  border-radius:var(--radius-card-sm); background:var(--background); margin-top:1.5rem }
.vt-tablewrap--tall{ max-height:34rem; overflow-y:auto }
.vt-tablewrap--tall thead th{ position:sticky; top:0; background:var(--background); z-index:1 }
.vt-tablewrap table{ width:100%; border-collapse:collapse }
.vt-tablewrap th{ text-align:left; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--vt-faint);
  font-weight:500; padding:.95rem 1.125rem .75rem; border-bottom:1px solid var(--vt-hair); white-space:nowrap }
.vt-tablewrap td{ padding:.8rem 1.125rem; border-bottom:1px solid var(--vt-hair); font-size:.875rem }
.vt-tablewrap tr:last-child td{ border-bottom:0 }
.vt-tablewrap tbody tr:hover td{ background:var(--vt-inset) }
.vt-tablewrap tbody tr.is-self td{ background:rgba(177,95,44,.045) }
/* Sifferkolumner: tabular så de linjerar vertikalt. */
th.vt-num,td.vt-num{ text-align:right; white-space:nowrap }
td.vt-num{ color:var(--vt-muted); font-variant-numeric:tabular-nums }
.vt-sub{ color:var(--vt-muted); font-size:.8125rem }

.vt-trend{ margin-left:.4rem; font-size:.8125rem; font-weight:600 }
.vt-trend--up{ color:#0b6b0b }
.vt-trend--down{ color:#a52a2a }
.vt-trend--new{ color:var(--accent) }
.vt-youbadge{ margin-left:.5rem; font-size:.6875rem; letter-spacing:.06em; color:#fff; background:var(--accent);
  border-radius:.4rem; padding:.15rem .45rem }
/* Domänen tillhör ett företag som också syns i kartpaketet: samma konkurrent, två vyer. */
.vt-inpack{ margin-left:.5rem; font-size:.6875rem; color:var(--vt-muted); background:var(--vt-inset);
  border:1px solid var(--vt-hair); border-radius:.4rem; padding:.15rem .45rem; white-space:nowrap }

/* ========================== kort & insikter ======================= */
.vt-grid2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(18rem,1fr)); gap:.875rem }
.vt-card{ padding:1.5rem; transition:box-shadow .2s }
.vt-card h3{ font-size:1rem; font-weight:600; margin-bottom:.5rem }
.vt-card p{ font-size:.875rem; color:var(--vt-muted); line-height:1.7 }

.vt-strengths{ margin-top:.5rem }
.vt-strengths li{ list-style:none; display:flex; gap:.75rem; align-items:start; padding:.75rem 0;
  border-bottom:1px solid var(--vt-hair); font-size:.9375rem; line-height:1.6 }
.vt-strengths li:last-child{ border-bottom:0 }
.vt-strengths li::before{ content:'✓'; color:#0b6b0b; font-weight:700; flex:none }

/* ====================== sökord: kort & grupper ==================== */
.vt-kwlede{ font-size:1.0625rem; color:var(--vt-muted); max-width:44rem; margin-bottom:1.75rem; line-height:1.65 }
.vt-kwnums{ display:grid; grid-template-columns:repeat(auto-fit,minmax(10rem,1fr)); gap:.875rem }
.vt-kwnum{ padding:1.25rem }
.vt-kwnum b{ display:block; font-size:2rem; font-weight:600; letter-spacing:-.02em; color:var(--accent); line-height:1.1 }
.vt-kwnum span{ font-size:.875rem; color:var(--vt-muted); display:block; margin-top:.3rem }

.vt-kwgroup{ margin-top:1.75rem }
.vt-kwgroup>h3{ font-size:.8125rem; letter-spacing:.1em; text-transform:uppercase; color:var(--vt-faint);
  margin-bottom:.25rem; display:flex; gap:.75rem; align-items:center; flex-wrap:wrap }
.vt-kwgroup>h3 .vt-cnt{ font-weight:400 }
.vt-kwgroup>h3 .vt-hint{ margin-left:auto; text-transform:none; letter-spacing:0; font-size:.875rem; color:var(--vt-faint) }
.vt-srccard{ position:relative }
.vt-srccard .vt-kw{ font-size:.9375rem; font-weight:600; margin-bottom:.6rem; padding-right:7rem; word-break:break-word }
.vt-srccard .vt-src{ position:absolute; top:1.5rem; right:1.5rem; font-size:.75rem; color:var(--vt-faint);
  border:1px solid var(--vt-hair); background:var(--vt-inset); border-radius:.5rem; padding:.2rem .5rem; white-space:nowrap }
.vt-kmeta{ display:flex; gap:1rem; font-size:.875rem; color:var(--vt-muted); margin-bottom:.7rem; flex-wrap:wrap }
.vt-kmeta b{ color:var(--foreground); font-weight:600 }
.vt-kwact{ background:var(--vt-inset); border-left:2px solid var(--accent);
  border-radius:0 var(--radius-control) var(--radius-control) 0; padding:.7rem 1rem; font-size:.875rem; line-height:1.6; margin-top:.75rem }
.vt-kwact b{ display:block; font-size:.75rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  color:var(--vt-faint); margin-bottom:.2rem }

/* ====================== konkurrenter & SERP ======================= */
.vt-compbar{ display:inline-block; height:.4375rem; border-radius:var(--radius-pill); background:var(--accent);
  vertical-align:middle; margin-left:.5rem; min-width:.375rem }
.vt-serp{ margin-top:1.5rem; padding:1.5rem }
.vt-serp h3{ font-size:.9375rem; font-weight:600; margin-bottom:.25rem }
.vt-serp__kw{ font-size:.875rem; color:var(--accent); margin-bottom:1rem }
.vt-serp__pill{ display:inline-flex; align-items:center; gap:.5rem; font-size:.8125rem; border-radius:var(--radius-pill);
  padding:.4rem .9rem; margin-bottom:1rem; border:1px solid var(--vt-hair); background:var(--vt-inset); color:var(--vt-muted) }
.vt-serp__row{ display:grid; grid-template-columns:2rem 1fr auto; gap:.75rem; align-items:center; padding:.625rem 0;
  border-bottom:1px solid var(--vt-hair); font-size:.875rem }
.vt-serp__row:last-child{ border-bottom:0 }
.vt-serp__rk{ color:var(--vt-faint); font-variant-numeric:tabular-nums }
.vt-serp__dm{ color:var(--vt-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.vt-serp__row.is-you .vt-serp__dm{ color:var(--foreground); font-weight:600 }

/* ============================= ordlista =========================== */
.vt-glossary details{ border:1px solid var(--vt-hair); border-radius:var(--radius-control); margin-bottom:.5rem; overflow:hidden }
.vt-glossary summary{ cursor:pointer; padding:.95rem 1.25rem; font-weight:600; font-size:.9375rem; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:1rem }
.vt-glossary summary::-webkit-details-marker{ display:none }
.vt-glossary summary::after{ content:'+'; color:var(--vt-faint); font-size:1.0625rem; flex:none }
.vt-glossary details[open] summary::after{ content:'–' }
.vt-glossary details p{ padding:0 1.25rem 1rem; color:var(--vt-muted); font-size:.875rem; line-height:1.7 }

/* ======================= ordlista: högerpanel ===================== */
.vt-drawer{ margin:0 0 0 auto; height:100dvh; max-height:100dvh; width:min(28rem, 100vw);
  border:0; border-left:1px solid var(--vt-hair); border-radius:0; padding:0;
  background:var(--background); color:var(--foreground); overflow-y:auto }
.vt-drawer::backdrop{ background:rgba(10,10,10,.5); backdrop-filter:blur(3px) }
.vt-drawer[open]{ animation:vt-slidein .28s cubic-bezier(.22,1,.36,1) }
@keyframes vt-slidein{ from{ transform:translateX(100%) } to{ transform:none } }
@media (prefers-reduced-motion:reduce){ .vt-drawer[open]{ animation:none } }
.vt-drawer__head{ position:sticky; top:0; z-index:1; display:flex; align-items:center; gap:1rem;
  padding:1.5rem 1.75rem 1rem; background:var(--background); border-bottom:1px solid var(--vt-hair) }
.vt-drawer__head h2{ flex:1; font-size:1.25rem; font-weight:600; letter-spacing:-.01em }
.vt-drawer__close{ background:none; border:0; color:var(--vt-faint); font-size:1.125rem; cursor:pointer; line-height:1 }
.vt-drawer .vt-glossary{ padding:1.25rem 1.75rem 2.5rem }

/* =========================== dela-dialog ========================== */
.vt-dialog{ background:var(--background); color:var(--foreground); border:1px solid var(--vt-hair); border-radius:var(--radius-card-sm);
  padding:1.875rem; max-width:26rem; width:calc(100vw - 3rem); position:relative; box-shadow:var(--vt-lift-hover) }
.vt-dialog::backdrop{ background:rgba(10,10,10,.55); backdrop-filter:blur(4px) }
.vt-dialog h3{ font-size:1.125rem; font-weight:600; margin-bottom:.5rem }
.vt-dialog>p{ color:var(--vt-muted); font-size:.875rem; margin-bottom:1.125rem; line-height:1.6 }
.vt-dialog form{ display:flex; gap:.5rem; flex-wrap:wrap }
.vt-dialog input[type=email]{ flex:1; min-width:12rem; background:var(--vt-inset); border:1px solid var(--vt-hair);
  border-radius:var(--radius-control); color:inherit; font:inherit; font-size:.9375rem; padding:.75rem .9rem; outline:none }
.vt-dialog input[type=email]:focus{ border-color:var(--accent) }
.vt-dialog__close{ position:absolute; top:.875rem; right:1rem; background:none; border:0; color:var(--vt-faint);
  font-size:1.125rem; cursor:pointer; line-height:1 }
.vt-msg{ font-size:.8125rem; margin-top:.75rem; min-height:1.125rem }
.vt-msg.is-ok{ color:#0b6b0b }
.vt-msg.is-err{ color:#a52a2a }

/* ===================== startsida: domän + e-post =================== */
/* Domän och e-post är lika viktiga och lika breda – de står bredvid varandra.
   Knappen får egen rad: tre element i bredd blir trångt långt före mobilbredd,
   och en knapp som krymper med fälten ser lånad ut. Under 36rem staplas allt. */
.vt-form{ display:grid; grid-template-columns:1fr 1fr; gap:.75rem; max-width:34rem; margin-top:2rem }
/* Fälten står på en ljus botten i samma familj som ramen — hårlinjen syntes
   knappt, och ett formulär man inte hittar fylls inte i. Vit botten och en
   mörkare ram gör dem till tydliga inmatningsytor. */
.vt-form input{ width:100%; background:#fff; border:1px solid #d5d2cc;
  border-radius:var(--radius-control); color:inherit; font:inherit; font-size:1rem; padding:1rem 1.125rem; outline:none;
  transition:border-color .2s, box-shadow .2s }
/* Etiketten sitter över fältet i stället för att bara finnas för skärmläsare.
   Platshållaren försvinner när man börjar skriva – etiketten står kvar, så
   man ser vad som ska stå var även halvvägs in i ifyllningen. */
.vt-field{ display:grid; gap:.4375rem; align-content:start }
.vt-field label{ font-size:.8125rem; font-weight:500; letter-spacing:.01em; color:var(--muted) }
.vt-field:focus-within label{ color:var(--ink) }
.vt-form input:hover{ border-color:#b9b5ad }
.vt-form input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(177,95,44,.15) }
.vt-form input:invalid:not(:placeholder-shown){ border-color:rgba(208,59,59,.5) }
.vt-form input::placeholder{ color:var(--subtle) }
.vt-form .pill{ grid-column:1 / -1; justify-self:start; margin-top:.375rem }
/* Honungsfältet. Inte display:none – en del bottar hoppar över dolda fält, men
   fyller i det som bara är flyttat ur vägen. Döljningen upprepas inline i markupen:
   en cachad stilmall får aldrig kunna visa fältet för en riktig besökare. */
.vt-hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden }
.vt-form__note{ grid-column:1 / -1; margin:.75rem 0 0; max-width:32rem;
  font-size:.8125rem; line-height:1.7; color:var(--subtle) }
@media (max-width:36rem){ .vt-form{ grid-template-columns:1fr } }
.vt-err{ color:#a52a2a; font-size:.875rem; margin-top:1rem; min-height:1.25rem }

/* ----------------- körlayout: förloppet som högerspalt ---------------- */
/* Heron ska äga första skärmen: formuläret är sidans enda uppgift. min-height
   på dvh, inte vh, så mobilens adressfält inte klipper botten. */
.subhero:has(.vt-run){ display:flex; align-items:center; min-height:100dvh }
.vt-run{ display:grid; gap:2.5rem; width:100% }
@media (min-width:1024px){
  /* Före inskick tar bilden högerspalten. När begäran gått iväg är det kvittensen
     som ska stå där – bilden lämnar plats, den har gjort sitt. */
  .vt-run:not(.is-running){ grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:4rem; align-items:center }
  .vt-run.is-running{ grid-template-columns:minmax(0,1fr) 25rem; gap:3.5rem; align-items:start }
  .vt-run.is-running .vt-run__aside{ position:sticky; top:6rem }
}
.vt-run.is-running .vt-run__media{ display:none }
.vt-panel{ background:var(--background); border:1px solid var(--vt-hair); border-radius:var(--radius-card);
  padding:1.75rem; box-shadow:var(--vt-lift) }

/* Panelens topprad: vad som analyseras just nu, med en större snurra. */
.vt-panel__head{ display:flex; align-items:center; gap:.875rem; margin-bottom:1.5rem }
.vt-panel__of{ display:flex; flex-direction:column; min-width:0 }
.vt-panel__of span{ font-size:.8125rem; color:var(--vt-faint) }
.vt-panel__of b{ font-size:1.0625rem; font-weight:600; letter-spacing:-.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

.vt-loader{ position:relative; flex:none; width:2.5rem; height:2.5rem; border-radius:50%;
  border:2px solid var(--vt-hair) }
.vt-loader::after{ content:''; position:absolute; inset:-2px; border-radius:50%;
  border:2px solid transparent; border-top-color:var(--accent);
  animation:vt-spin .9s linear infinite }
@media (prefers-reduced-motion:reduce){
  .vt-loader::after{ animation:none; border:2px solid var(--accent); opacity:.35 }
}

.vt-sent-mark{ flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:2.5rem; height:2.5rem; border-radius:50%; background:var(--ink); color:#fff; font-size:1.1rem }

.vt-bar{ height:3px; background:var(--vt-hair); border-radius:var(--radius-pill); overflow:hidden; margin-bottom:1rem }
.vt-bar i{ display:block; height:100%; width:0; background:var(--accent); border-radius:var(--radius-pill); transition:width .8s ease }
.vt-eta{ font-size:.8125rem; color:var(--vt-faint); margin-bottom:1.25rem }

/* Stegen. Förlopp är inte status – därför ink, inte grönt. Statusfärgerna är
   reserverade för godkänt/varning/underkänt i själva rapporten. */
.vt-steps-run{ list-style:none; margin:0; padding:0; position:relative }
/* Skenan bakom prickarna, från första till sista prickens mitt. */
.vt-steps-run::before{ content:''; position:absolute; left:.5625rem; top:1.15rem; bottom:1.15rem;
  width:1px; background:var(--vt-hair) }
.vt-step{ position:relative; display:flex; align-items:flex-start; gap:.875rem; padding:.5rem 0;
  font-size:.9375rem; line-height:1.45; color:var(--vt-faint); transition:color .3s }
.vt-step.is-active{ color:var(--foreground); font-weight:500 }
.vt-step.is-done{ color:var(--vt-muted) }

.vt-step__dot{ position:relative; z-index:1; flex:none; width:1.125rem; height:1.125rem; margin-top:.1rem;
  border-radius:50%; border:1.5px solid var(--vt-hair); background:var(--background);
  display:grid; place-items:center; transition:border-color .3s, background .3s }

/* Aktiv: en roterande båge i accenten. Ingen fyllning – den är inte klar än. */
.vt-step.is-active .vt-step__dot{ border-color:rgba(177,95,44,.22) }
.vt-step.is-active .vt-step__dot::after{ content:''; position:absolute; inset:-1.5px; border-radius:50%;
  border:1.5px solid transparent; border-top-color:var(--accent); animation:vt-spin .8s linear infinite }
@keyframes vt-spin{ to{ transform:rotate(360deg) } }

/* Klar: ifylld ink-prick med en ritad bock. */
.vt-step.is-done .vt-step__dot{ background:var(--ink); border-color:var(--ink) }
.vt-step.is-done .vt-step__dot::after{ content:''; width:.4rem; height:.2rem; margin-top:-.1rem;
  border-left:1.5px solid #fff; border-bottom:1.5px solid #fff; transform:rotate(-45deg) }

@media (prefers-reduced-motion:reduce){
  .vt-step.is-active .vt-step__dot::after{ animation:none; border-top-color:transparent;
    border:1.5px solid var(--accent) }
}

.vt-panel__warn{ margin-top:1.25rem; padding-top:1.25rem; border-top:1px solid var(--vt-hair);
  font-size:.8125rem; line-height:1.6; color:var(--vt-faint) }
.vt-cancel{ margin-top:.875rem; font:inherit; font-size:.8125rem; color:var(--vt-muted); cursor:pointer;
  background:none; border:1px solid var(--vt-hair); border-radius:var(--radius-pill); padding:.5rem 1rem;
  transition:color .2s, border-color .2s }
.vt-cancel:hover{ color:#a52a2a; border-color:rgba(165,42,42,.35) }

/* ======================= /verktyg — översikt ====================== */
/* Översiktens sektion bär heroens ljusaste ton, så bandet fortsätter neråt i
   stället för att brytas av en ny färg. Korten ligger ljusare än underlaget och
   lyfter därför utan att behöva en kraftig ram. */
/* ============================== utskrift ========================== */
@media print{
  .vt-topbar,.header,.footer,.vt-dialog,.vt-copy{ display:none !important }
  .vt-hero{ border-bottom:0 }
  .vt-hero__bg{ display:none }
  .vt-acc__body{ display:block !important }
  .vt-card,.vt-tile,.vt-act,.vt-t3,.vt-swap,.vt-gap,.vt-tool{ box-shadow:none }
}