/* =========================================================
   FRONTNESS ANALYTICS: appen
   Bygger vidare på style.css: tokens, reset, typsnitt och
   :focus-visible kommer därifrån. Här ligger bara appen.

   Tonen är densamma som på frontness.se: ljust, luftigt,
   rem-baserat, pillerformade knappar och hårfina kanter.
   Ingen skuggtung dashboard-look. Det är en redaktionell
   sida som råkar innehålla siffror.
   ========================================================= */

:root{
  /* Grönt finns inte i grundpaletten. Det behövs bara här, för att
     visa att ett tal gick åt rätt håll. Terrakottan får stå för motsatsen. */
  --pos:#3f7d55;
  --neg:var(--accent);
  --hot:#b15f2c;
  --warm:#d8b48a;
  --cold:#d8d7d3;
}

.a-body{ background:#f4f3f0; color:var(--ink) }
.a-body.a-locked{ overflow:hidden }

/* ============================== ram ============================== */
.a-main{ min-height:100vh; padding-bottom:6rem }
.a-shell{ width:100%; max-width:76rem; margin-inline:auto; padding:0 1.25rem }
.a-shell--narrow{ max-width:52rem }
@media (min-width:640px){ .a-shell{ padding-inline:2rem } }

.a-h1{ font-size:1.75rem; font-weight:600; letter-spacing:-.02em; line-height:1.15 }
@media (min-width:640px){ .a-h1{ font-size:2.25rem } }
/* Kontovyn: rubriken står ensam ovanför korten (ingen a-page-head), så den
   behöver egen luft ned till första kortet. */
.a-shell--narrow > .a-h1{ margin-bottom:1.75rem }
.a-sub{ margin-top:.375rem; font-size:.9375rem; color:var(--muted) }
.a-muted{ color:var(--muted) }
.a-note{ margin-top:1rem; font-size:.8125rem }
.a-num{ text-align:right; font-variant-numeric:tabular-nums }

.a-link{
  display:inline; padding:0; border:0; background:none; cursor:pointer;
  color:var(--ink); font:inherit; font-size:.875rem;
  text-decoration:underline; text-underline-offset:.2em; text-decoration-color:var(--line);
  transition:text-decoration-color .2s, color .2s;
}
.a-link:hover{ color:var(--accent); text-decoration-color:currentColor }

/* ============================ toppraden ===========================
   Samma hörn som de andra Frontness-apparna: identiteten till vänster, en
   klocka och kontrollerna till höger. Här står "Analytics" i text i stället
   för logotypen. Alla kontroller är 2,25 rem höga så raden läser som en rad. */
.a-top{
  position:sticky; top:0; z-index:20; margin-bottom:2.5rem;
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap; row-gap:.6rem;
  padding:.85rem 1.25rem;
  background:color-mix(in srgb, #f4f3f0 90%, transparent);
  backdrop-filter:blur(10px);
}
@media (min-width:640px){ .a-top{ padding-inline:2rem } }

.a-top__brand{
  font-size:1.0625rem; font-weight:600; letter-spacing:-.02em; color:var(--ink);
}
.a-top__brand:hover{ color:var(--accent) }
.a-top__spacer{ flex:1 }

/* Sajtväljaren i vänstra hörnet: domänen med en chevron, och en meny under. */
.a-top__switch{ position:relative }
.a-top__switch-btn{
  display:inline-flex; align-items:center; gap:.4rem;
  max-width:min(20rem, 52vw); padding:.3rem .5rem .3rem .1rem;
  border:0; background:none; cursor:pointer; color:var(--ink);
}
.a-top__switch-name{
  font-size:1.0625rem; font-weight:600; letter-spacing:-.02em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.a-top__chev{ display:grid; place-items:center; color:var(--muted); transition:transform .2s, color .2s }
.a-top__chev svg{ width:1rem; height:1rem }
.a-top__switch-btn:hover .a-top__chev{ color:var(--ink) }
.a-top__switch-btn[aria-expanded="true"] .a-top__chev{ transform:rotate(180deg); color:var(--ink) }

.a-top__sitemenu{
  position:absolute; top:calc(100% + .5rem); left:0; z-index:30;
  min-width:15rem; max-width:22rem; padding:.375rem;
  border:1px solid var(--line); border-radius:var(--radius-card-sm); background:var(--background);
  box-shadow:0 1px 2px rgba(10,10,10,.05), 0 20px 40px -24px rgba(10,10,10,.4);
}
.a-top__sitemenu[hidden]{ display:none }
.a-top__sitemenu-item{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; width:100%;
  padding:.5rem .625rem; border:0; border-radius:.625rem; background:none; text-align:left;
  font:inherit; font-size:.875rem; color:var(--ink); cursor:pointer;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.a-top__sitemenu-item:hover{ background:var(--surface) }
.a-top__sitemenu-item.is-on{ font-weight:600 }
.a-top__sitemenu-tick{ color:var(--accent); flex:0 0 auto }
.a-top__sitemenu-new{
  margin-top:.25rem; padding-top:.625rem; border-top:1px solid var(--line);
  border-radius:0 0 .5rem .5rem; color:var(--muted);
}
.a-top__sitemenu-new:hover{ color:var(--ink) }

.a-top__acts{ position:relative; display:flex; align-items:center; gap:.5rem }

/* Klockan: svensk tid, svenskt datum, samma höjd som ikonerna. */
.a-top__clock{
  display:inline-flex; align-items:center; gap:.5rem;
  height:2.25rem; padding:0 .9rem; box-sizing:border-box;
  border-radius:var(--radius-pill);
  font-size:.78rem; color:var(--muted); white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.a-top__clock-time{ font-weight:600; color:var(--ink) }
.a-top__clock-dot{ opacity:.5 }
@media (max-width:720px){ .a-top__clock{ display:none } }

/* Ikonknapparna. Rundade, dämpade i vila. */
.a-top__icon{
  display:grid; place-items:center; width:2.25rem; height:2.25rem; flex:0 0 auto;
  border-radius:50%; border:1px solid transparent; background:transparent;
  color:var(--muted); transition:background .18s, color .18s, border-color .18s;
}
.a-top__icon svg{ width:1.15rem; height:1.15rem }
.a-top__icon:hover{ background:var(--surface); color:var(--ink) }
.a-top__icon.is-on{ background:var(--surface); color:var(--ink) }
/* Kugghjulet får samma ring som avataren: de två läses ihop som "du och ditt konto". */
.a-top__icon--ring{ border-color:var(--line); background:var(--surface) }
.a-top__icon--ring:hover{ border-color:var(--subtle) }

/* Avataren: initialen i en ring, eller en meny som fälls ut. */
.a-top__user{ position:relative }
.a-top__avatar{
  display:grid; place-items:center; width:2.25rem; height:2.25rem; flex:0 0 auto;
  border:1px solid var(--line); border-radius:50%; background:var(--surface);
  color:var(--ink); font:inherit; font-size:.85rem; font-weight:600; line-height:1;
  cursor:pointer; transition:border-color .18s, box-shadow .18s;
}
.a-top__avatar:hover{ border-color:var(--subtle) }
.a-top__avatar[aria-expanded="true"]{ box-shadow:0 0 0 3px var(--surface-2) }

.a-top__menu{
  position:absolute; top:calc(100% + .6rem); right:0; z-index:30;
  min-width:13rem; padding:.375rem;
  border:1px solid var(--line); border-radius:var(--radius-card-sm); background:var(--background);
  box-shadow:0 1px 2px rgba(10,10,10,.05), 0 20px 40px -24px rgba(10,10,10,.4);
}
.a-top__menu[hidden]{ display:none }
.a-top__menu-email{
  padding:.5rem .625rem .625rem; margin-bottom:.25rem;
  border-bottom:1px solid var(--line);
  font-size:.75rem; color:var(--muted); word-break:break-all;
}
.a-top__menu-item{
  display:block; width:100%; text-align:left;
  padding:.5rem .625rem; border:0; border-radius:.625rem; background:none;
  font:inherit; font-size:.875rem; color:var(--ink); cursor:pointer;
}
.a-top__menu-item:hover{ background:var(--surface) }
.a-top__menu-item--danger{ color:var(--accent) }

/* ============================= knappar =========================== */
.a-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  border:1px solid transparent; border-radius:var(--radius-pill);
  padding:.8125rem 1.5rem; font-size:.875rem; font-weight:500; line-height:1;
  cursor:pointer; white-space:nowrap; text-align:center;
  transition:background .2s, border-color .2s, color .2s, opacity .2s;
}
.a-btn--dark{ background:var(--ink); color:#fff }
.a-btn--dark:hover{ background:var(--accent) }
.a-btn--ghost{ border-color:var(--line); background:#fff; color:var(--ink) }
.a-btn--ghost:hover{ border-color:var(--ink) }
.a-btn--danger{ border-color:var(--accent); background:#fff; color:var(--accent) }
.a-btn--danger:hover{ background:var(--accent); color:#fff }
.a-btn--sm{ padding:.625rem 1.125rem; font-size:.8125rem }
.a-btn--block{ display:flex; width:100% }
.a-btn:disabled,.a-btn.is-disabled{ opacity:.45; cursor:default; pointer-events:none }

.a-icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.75rem; height:1.75rem; flex:none;
  border-radius:var(--radius-pill); border:1px solid transparent;
  font-size:1.125rem; line-height:1; color:var(--muted); cursor:pointer;
  transition:background .2s, color .2s;
}
.a-icon-btn:hover{ background:var(--surface); color:var(--ink) }

/* ============================== kort ============================= */
.a-card{
  border:1px solid #fff; border-radius:var(--radius-card);
  background:#f9f9f9; box-shadow:var(--shadow-card);
  padding:1.75rem; margin-bottom:1.25rem;
}
@media (min-width:640px){ .a-card{ padding:2rem } }
/* Farokortet: utan kant markeras det i stället med en tunn accentring. */
.a-card--danger{ box-shadow:0 0 0 1px rgba(177,95,44,.28), var(--shadow-card) }
.a-card__title{ font-size:1.0625rem; font-weight:600; letter-spacing:-.01em }
.a-card__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1.25rem; flex-wrap:wrap }

/* Uppgifter som text, inte som fält.
   Ett fält man kan skriva i ser ut som något som väntar på att fyllas i, och de
   flesta besök i kontovyn handlar om något annat. Pennan är vägen in. */
.a-facts{ display:grid; grid-template-columns:1fr; gap:1.25rem }
@media (min-width:640px){
  .a-facts{ grid-template-columns:1fr 1fr }
  /* E-posten är lång och får hela bredden. Den är alltid sist. */
  .a-fact:last-child{ grid-column:1 / -1 }
}
.a-fact__k{
  font-size:.6875rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.06em; color:rgba(10,10,10,.55);
}
.a-fact__v{ margin-top:.375rem; font-size:.9375rem; line-height:1.4; word-break:break-word }
/* "Ej angett" är inte ett värde, det är frånvaron av ett. Det ska synas. */
.a-fact__v.is-tom{ color:var(--subtle) }
.a-fact__v--inline{ margin-top:0 }

/* ============================ formulär =========================== */
.a-form{ display:flex; flex-direction:column; gap:1rem }
.a-form--two{ display:grid; grid-template-columns:1fr; gap:1rem }
@media (min-width:640px){
  .a-form--two{ grid-template-columns:1fr 1fr }
  .a-form--two .a-field--wide{ grid-column:1 / -1 }
  .a-form--two .a-form__actions{ grid-column:1 / -1 }
}
.a-field{ display:flex; flex-direction:column; gap:.375rem; min-width:0 }
.a-field > span{
  font-size:.6875rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.06em; color:rgba(10,10,10,.55);
}
.a-input{
  width:100%; border:1px solid var(--line); border-radius:.875rem; background:#fff;
  padding:.8125rem 1rem; font-family:inherit; font-size:.9375rem; color:inherit;
  outline:none; transition:border-color .2s;
}
.a-input:focus{ border-color:rgba(10,10,10,.35) }
.a-input:disabled{ background:var(--surface); color:var(--muted) }
.a-input::placeholder{ color:rgba(10,10,10,.3); opacity:1 }
.a-input--date{ padding:.5rem .75rem; font-size:.8125rem; width:auto }
.a-help{ font-style:normal; font-size:.75rem; line-height:1.5; color:var(--muted) }

.a-select{
  appearance:none; -webkit-appearance:none;
  border:1px solid var(--line); border-radius:var(--radius-pill); background:#fff;
  padding:.625rem 2.25rem .625rem 1.125rem; font-family:inherit; font-size:.8125rem; font-weight:500;
  color:var(--ink); cursor:pointer; outline:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%238d8d8d' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; background-size:.625rem;
}
.a-select:hover{ border-color:var(--ink) }

/* ============================ banners ============================ */
.a-banners{ position:fixed; inset:1rem 1rem auto; z-index:200; display:flex; justify-content:center; pointer-events:none }
.a-banner{
  display:flex; align-items:center; gap:.875rem; pointer-events:auto;
  max-width:36rem; border:1px solid var(--line); border-radius:var(--radius-pill);
  background:#fff; padding:.75rem .75rem .75rem 1.25rem;
  font-size:.875rem; line-height:1.4;
  box-shadow:0 1px 2px rgba(10,10,10,.04);
}
.a-banner--error{ border-color:rgba(177,95,44,.4); color:var(--accent) }
.a-banner--ok{ border-color:rgba(63,125,85,.35); color:var(--pos) }
.a-banner--info{ color:var(--ink) }
.a-banner__x{
  flex:none; width:1.5rem; height:1.5rem; border-radius:var(--radius-pill);
  font-size:1rem; line-height:1; color:inherit; cursor:pointer; opacity:.6;
}
.a-banner__x:hover{ opacity:1 }

/* ============================= modal ============================= */
.a-overlay{
  position:fixed; inset:0; z-index:150; display:flex; align-items:center; justify-content:center;
  padding:1.25rem; background:rgba(10,10,10,.35); overflow-y:auto;
}
.a-modal{ width:100%; max-width:30rem; margin:auto; padding:1.75rem }
.a-modal__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1.25rem }
.a-modal__title{ font-size:1.25rem; font-weight:600; letter-spacing:-.01em }
.a-modal__warn{
  margin-bottom:1.25rem; border-radius:var(--radius-card-sm);
  background:var(--surface); padding:1rem 1.125rem;
  font-size:.875rem; line-height:1.6; color:var(--ink);
}

/* ============================ skelett ============================ */
/* Ett skelett håller platsen. En snurrande cirkel gör bara det oklart
   hur mycket som är på väg. */
.a-skel{
  border-radius:.875rem; background:var(--surface); height:1rem; margin-bottom:.75rem;
  animation:a-pulse 1.4s ease-in-out infinite;
}
.a-skel--line{ height:1rem }
.a-skel--kpi{ height:5.5rem; margin:0 }
.a-skel--chart{ height:15rem; margin:0 }
.a-skel--card{ height:11rem; margin:0; border-radius:var(--radius-card) }
.a-skel--list{ height:20rem; margin:0; border-radius:var(--radius-card) }
@keyframes a-pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.45 } }

/* ============================ tomrum ============================= */
.a-empty{ padding:2rem 0; text-align:center }
.a-empty__title{ font-size:.9375rem; font-weight:500; color:var(--ink) }
.a-empty__help{ margin-top:.5rem; margin-inline:auto; max-width:38ch; font-size:.8125rem; line-height:1.6; color:var(--muted) }

/* ======================== inloggningsvyn =========================
   Själva skärmen bor i auth.css, samma struktur som app.frontness.io.
   Den tar hela ytan: ingen topbar ovanför, ingen bottenluft under. */
.a-main--auth{ min-height:0; padding-bottom:0 }

.a-tabs{ display:flex; gap:.375rem; flex-wrap:wrap }
.a-tabs--auth{
  margin-bottom:1.5rem; padding:.25rem; gap:.25rem;
  border-radius:var(--radius-pill); background:var(--surface);
}
.a-tabs--auth .a-tab{ flex:1 }
.a-tab{
  border:0; border-radius:var(--radius-pill); background:none; cursor:pointer;
  padding:.5rem .875rem; font-family:inherit; font-size:.8125rem; font-weight:500;
  color:var(--muted); white-space:nowrap; transition:background .2s, color .2s;
}
.a-tab:hover{ color:var(--ink) }
.a-tab.is-on{ background:#fff; color:var(--ink) }
.a-tabs:not(.a-tabs--auth) .a-tab.is-on{ background:var(--ink); color:#fff }

.a-noscript{ max-width:30rem; margin:6rem auto }
.a-noscript h1{ font-size:1.5rem; font-weight:600; margin-bottom:.75rem }

/* =========================== sajtlistan ========================== */
.a-page-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem;
  flex-wrap:wrap; margin-bottom:1.75rem;
}
.a-usage{ padding:1.5rem }
.a-usage__row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1rem }
.a-usage__num{ font-size:1rem; font-weight:500 }
.a-usage__help{ margin-top:.25rem; font-size:.8125rem; line-height:1.5; color:var(--muted) }
.a-usage__over{ margin-top:.75rem; font-size:.8125rem; color:var(--accent) }

.a-meter{ height:.375rem; border-radius:var(--radius-pill); background:var(--surface); overflow:hidden }
.a-meter__fill{ height:100%; border-radius:var(--radius-pill); background:var(--ink); transition:width .4s ease }
.a-meter.is-over .a-meter__fill{ background:var(--accent) }

.a-sitegrid{ display:grid; grid-template-columns:1fr; gap:1.25rem }
@media (min-width:640px){ .a-sitegrid{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1024px){ .a-sitegrid{ grid-template-columns:repeat(3,1fr) } }

.a-site{ display:block; margin:0; transition:border-color .2s, transform .2s }
a.a-site:hover{ border-color:var(--ink); transform:translateY(-2px) }
.a-site--new{ grid-column:1 / -1 }
.a-site__head{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:1rem }
.a-site__domain{ font-size:1rem; font-weight:600; letter-spacing:-.01em; word-break:break-all }
.a-site__big{ font-size:2.5rem; font-weight:600; letter-spacing:-.03em; line-height:1 }
.a-site__label{ margin-top:.375rem; font-size:.8125rem; color:var(--muted) }
.a-site__foot{ margin-top:1.25rem; padding-top:1rem; border-top:1px solid var(--line); font-size:.75rem; color:var(--muted) }
.a-site__help{ margin-bottom:1rem; font-size:.875rem; line-height:1.6; color:var(--muted) }

.a-badge{
  display:inline-flex; align-items:center; flex:none;
  border-radius:var(--radius-pill); background:var(--surface);
  padding:.25rem .625rem; font-size:.6875rem; font-weight:500; color:var(--muted);
}
.a-badge--wait{ background:rgba(177,95,44,.1); color:var(--accent) }

.a-snippet{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
  border-radius:var(--radius-card-sm); background:var(--surface); padding:1rem }
.a-snippet__code{
  flex:1 1 20rem; min-width:0; overflow-x:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.75rem; line-height:1.7;
  color:var(--ink); white-space:pre;
}

/* =========================== dashboarden ========================= */
.a-page-head--dash{ align-items:flex-start }
.a-dash-controls{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap }

.a-live{
  display:inline-flex; align-items:center; gap:.5rem;
  border:1px solid var(--line); border-radius:var(--radius-pill);
  padding:.5rem .875rem; font-size:.8125rem; font-weight:500; color:var(--ink);
}
.a-live i{ width:.4375rem; height:.4375rem; border-radius:50%; background:var(--pos); animation:a-blink 2s ease-in-out infinite }
.a-live.is-quiet i{ background:var(--subtle); animation:none }
.a-live.is-quiet{ color:var(--muted) }
@keyframes a-blink{ 0%,100%{ opacity:1 } 50%{ opacity:.25 } }

.a-range{ display:flex; align-items:center; gap:.5rem }

/* ---------------------- Search Console ----------------------
   Knappen står bredvid periodväljaren och ska väga lika mycket som den:
   .a-btn--sm ger samma vertikala padding och samma teckengrad som .a-select,
   så raden håller sin linje. Den ska inte skrika: den är en väg in till en
   sidosak, inte sidans ärende. */
/* Grön prick: ansluten och klar. Sitter i Synlighets fot. */
.a-gsc__dot{
  width:.4375rem; height:.4375rem; border-radius:50%;
  background:var(--pos); flex:0 0 auto;
}
/* Kopplingen lever, men hämtningen har stannat. Grönt vore en lögn. */
.a-gsc__dot--off{ background:var(--accent) }

/* ---------------------------------------------------------------- vyflikarna

   Besökare och Synlighet. Skiljer sig från .a-tabs med flit: de sitter inuti
   ett kort och byter innehållet i en lista, de här byter hela sidan. En
   understruken flik läses som navigering, en pillerknapp som ett filter, och
   det är precis skillnaden. */
.a-viewtabs{
  display:flex; gap:1.5rem; margin-bottom:1.5rem;
  border-bottom:1px solid var(--line);
}
.a-viewtab{
  border:0; background:none; cursor:pointer; padding:0 0 .75rem;
  font-family:inherit; font-size:.9375rem; font-weight:500; color:var(--muted);
  border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color .2s, border-color .2s;
}
.a-viewtab:hover{ color:var(--ink) }
.a-viewtab.is-on{ color:var(--ink); border-bottom-color:var(--ink) }

/* Undernavigeringen under Inställningar. Samma form som flikarna ovanför men
   mindre och utan understruken kant: två identiska rader hade sett ut som en
   enda som brutits, och då syns det inte vilken som byter ämne och vilken som
   byter sida inom ämnet. Rullar i sidled på mobil i stället för att radbryta:
   fem korta ord som blir två rader läses som två grupper. */
.a-viewtabs--sub{
  gap:1.25rem; margin-top:-.75rem; margin-bottom:1.5rem;
  border-bottom:0; overflow-x:auto; scrollbar-width:none;
}
.a-viewtabs--sub::-webkit-scrollbar{ display:none }
.a-viewtabs--sub .a-viewtab{
  padding:.375rem 0; font-size:.875rem; white-space:nowrap; border-bottom-width:1px;
}

/* ---------------------------------------------------------------- Synlighet */

/* Rutan när sajten inte är kopplad. Den ÄR hela fliken, och ska förklara vad
   man får, inte bara be om ett klick. */
.a-gsc-hero{ padding:2.5rem; text-align:center }
.a-gsc-hero__title{ font-size:1.375rem; font-weight:600; margin-bottom:.75rem }
.a-gsc-hero__text{
  max-width:34rem; margin:0 auto 1.5rem; color:var(--muted);
  font-size:.9375rem; line-height:1.6;
}
.a-gsc-hero__fine{ margin-top:1rem; max-width:34rem; margin-inline:auto }
/* Googles eget felmeddelande i hjälterutan. Monospace: det är ett svar från
   en maskin, och ska gå att söka på ord för ord. */
.a-perf-fel{
  max-width:34rem; margin:1rem auto 0; padding:.625rem .875rem;
  border-radius:var(--radius-card-sm); background:color-mix(in srgb, var(--accent) 8%, transparent);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.75rem; text-align:left;
}

/* Noten om Googles eftersläpning sitter till vänster i grafens huvud, och
   legenden till höger. Utan detta hamnar båda i högerkanten på varandra. */
.a-chartcard__head--split{ justify-content:space-between; align-items:center; gap:1rem }
.a-chart-note{ font-size:.75rem; margin:0 }
.a-lists-note{ font-size:.75rem; margin:0 0 .75rem }

/* ---------------------------------------------------------------- Prestanda

   Googles egna färggränser: 90+ bra, 50-89 behöver arbete, under 50 dåligt. Vi
   använder samma, för en kund som ser 62 hos oss och rött hos Google ska inte
   behöva undra vem som har rätt. --hot är terrakottan, --warm sanden. */
.a-perf-head{ display:grid; grid-template-columns:auto 1fr; gap:1.5rem; align-items:center }
.a-perf-head__title{ font-size:1.0625rem; font-weight:600; line-height:1.35 }
.a-perf-head__text .a-note{ margin-top:.5rem }

/* Betyget: en ring, som hos Google. conic-gradient ritar den utan en enda
   extra byte, och rundningen till hela procent räcker: ringen läses, inte mäts. */
.a-perf-score{
  display:grid; place-items:center; width:6.5rem; height:6.5rem; border-radius:50%;
  background:conic-gradient(currentColor calc(var(--p) * 1%), var(--surface-2) 0);
  position:relative; color:var(--pos);
}
.a-perf-score::after{
  content:''; position:absolute; inset:.5rem; border-radius:50%; background:var(--background);
}
.a-perf-score__n{ position:relative; z-index:1; font-size:1.75rem; font-weight:600; line-height:1; font-variant-numeric:tabular-nums }
.a-perf-score__of{ position:relative; z-index:1; margin-top:.15rem; font-size:.625rem; color:var(--muted) }
.a-perf-score--good{ color:var(--pos) }
.a-perf-score--okay{ color:var(--warm) }
.a-perf-score--bad{ color:var(--hot) }
.a-perf-score--none{ color:var(--line) }

.a-perf-lage{ grid-column:1 / -1 }
.a-perf-note{ margin:0 }

/* Tabellen skrollar i sitt eget kort i stället för att spränga sidan. */
.a-list__body--scroll{ overflow-x:auto }
/* Förloppet medan kön betas av. Återanvänder .a-malbar: en stapel som visar
   hur långt kvar det är är samma sak här som i Mål, och två upplagor av den
   hade glidit isär vid första ändringen. */
.a-perf-run{ padding:1.25rem 1.5rem }
.a-perf-prog{ display:grid; gap:.5rem }
.a-perf-prog__rad{ display:flex; align-items:center; justify-content:space-between; gap:1rem }
.a-perf-prog__txt{ font-size:.8125rem; font-weight:500; font-variant-numeric:tabular-nums }
.a-perf-prog__nu{ display:flex; align-items:center; gap:.4rem; font-size:.75rem; color:var(--muted) }
.a-perf-prog__vila{ margin:0 }

/* Snurran. Två pixlar och en rotation: ingen bild, ingen bibliotek.
   prefers-reduced-motion respekteras, för en evig rotation är precis det
   inställningen finns för. */
.a-spin{
  width:.75rem; height:.75rem; flex:0 0 auto; border-radius:50%;
  border:1.5px solid var(--line); border-top-color:var(--ink);
  animation:a-spin .9s linear infinite;
}
@keyframes a-spin{ to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion:reduce){ .a-spin{ animation-duration:2.4s } }

.a-perf-table{ width:100%; min-width:34rem }
.a-perf-table th{ white-space:nowrap }
.a-perf-row.is-waiting td{ color:var(--muted) }
.a-perf-url{
  display:inline-block; max-width:28rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  vertical-align:bottom; color:var(--ink); text-decoration:none;
}
.a-perf-url:hover{ color:var(--accent); text-decoration:underline }

/* Betygspillret i tabellen. Samma tre band som ringen. */
.a-perf-pill{
  display:inline-grid; place-items:center; min-width:2rem; padding:.15rem .4rem;
  border-radius:.4rem; font-size:.8125rem; font-weight:600; font-variant-numeric:tabular-nums;
}
.a-perf-pill--good{ background:color-mix(in srgb, var(--pos) 14%, transparent); color:var(--pos) }
.a-perf-pill--okay{ background:color-mix(in srgb, var(--warm) 26%, transparent); color:#8a6a3e }
.a-perf-pill--bad{ background:color-mix(in srgb, var(--hot) 12%, transparent); color:var(--hot) }

.a-perf-delta{ margin-left:.4rem; font-size:.6875rem; font-variant-numeric:tabular-nums }
.a-perf-delta.is-good{ color:var(--pos) }
.a-perf-delta.is-bad{ color:var(--accent) }

/* Core Web Vitals: färgen sitter på texten, inte på en platta. Tre plattor per
   rad hade gjort tabellen till ett lapptäcke. */
.a-perf-v{ font-variant-numeric:tabular-nums }
.a-perf-v--good{ color:var(--pos) }
.a-perf-v--okay{ color:#8a6a3e }
.a-perf-v--bad{ color:var(--hot) }

@media (max-width:720px){
  .a-perf-head{ grid-template-columns:1fr; justify-items:start; gap:1rem }
  .a-perf-url{ max-width:11rem }

}

/* ---------------------------------------------------------------- Mål

   Börvärden. Ett kort per mål, i ett rutnät som Prestanda och Synlighet. */
/* ---------------------------------------------------------------- Strategi

   Den fria texten över målen. Läge normalt / redigering: pennan byter ut texten
   mot en textruta, utan att lämna sidan. */
.a-strategi{ margin-bottom:1.5rem }
.a-strategi__head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.75rem }
.a-strategi__title{ font-size:1.0625rem; font-weight:600; letter-spacing:-.01em }
/* pre-wrap: radbrytningarna kunden skrev ska stå kvar, utan att vi tolkar texten. */
.a-strategi__text{ white-space:pre-wrap; line-height:1.65; font-size:.9375rem; color:var(--ink) }
.a-strategi__empty{ font-size:.9375rem; line-height:1.6; margin:0 }
.a-strategi__meta{ margin-top:.75rem }
.a-strategi__area{ display:block; resize:vertical; min-height:9rem; line-height:1.6 }
.a-strategi--edit .a-gsc-actions{ margin-top:.75rem }

/* Diskret ikonknapp (pennan). Tydligare vid hover och tangentfokus. */
.a-iconbtn{
  display:grid; place-items:center; width:2rem; height:2rem; flex:none;
  border:1px solid var(--line); border-radius:.5rem; background:#fff;
  color:var(--muted); cursor:pointer; transition:color .18s, border-color .18s;
}
.a-iconbtn:hover{ color:var(--ink); border-color:var(--ink) }

.a-mal{ display:grid; grid-template-columns:1fr; gap:1.25rem }
@media (min-width:760px){ .a-mal{ grid-template-columns:repeat(2, 1fr) } }
@media (min-width:1180px){ .a-mal{ grid-template-columns:repeat(3, 1fr) } }

.a-malkort{ display:flex; flex-direction:column; gap:.875rem }
.a-malkort__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem }
.a-malkort__title{ font-size:1rem; font-weight:600; line-height:1.35 }
.a-malkort__source{ margin-top:.2rem; font-size:.75rem; color:var(--subtle) }

.a-malkort__status{
  flex:0 0 auto; padding:.2rem .55rem; border-radius:var(--radius-pill);
  font-size:.6875rem; font-weight:600; white-space:nowrap;
  background:var(--surface); color:var(--muted);
}
.a-malkort--reached .a-malkort__status{ background:color-mix(in srgb, var(--pos) 14%, transparent); color:var(--pos) }
/* "Kan inte mätas" är inte ett fel och ska inte vara rött. Det är ett vet-inte. */
.a-malkort--unknown .a-malkort__status{ background:var(--surface-2); color:var(--subtle) }

.a-malkort__tal{ display:flex; align-items:baseline; gap:.5rem }
.a-malkort__nu{ font-size:1.875rem; font-weight:600; letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums }
.a-malkort__av{ font-size:.8125rem; color:var(--muted); font-variant-numeric:tabular-nums }

.a-malbar{ height:.375rem; border-radius:var(--radius-pill); background:var(--surface-2); overflow:hidden }
.a-malbar__fill{
  display:block; height:100%; border-radius:inherit;
  background:var(--ink); transition:width .3s;
}
.a-malkort--reached .a-malbar__fill{ background:var(--pos) }

.a-malkort__fot{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap;
  margin-top:auto; padding-top:.25rem;
}
.a-malkort__fot .a-note{ margin:0 }
.a-malkort__akt{ display:flex; gap:.875rem }
.a-malkort__del{ color:var(--accent) }

.a-mal-add{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:1.5rem }
.a-mal-add .a-note{ margin:0 }

/* Rutan. Fälten står i en kolumn: rutan är smal, och två i bredd hade tvingat
   fram en radbrytning mitt i ett sökord. */
.a-malform{ display:grid; gap:1rem; margin-bottom:1.25rem }
.a-malform__select{ width:100%; border-radius:.875rem; padding:.8125rem 2.25rem .8125rem 1rem; font-size:.9375rem }

.a-gsc-foot{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap }
.a-gsc-foot__on{ display:flex; align-items:center; gap:.5rem; font-size:.8125rem; font-weight:500 }
.a-gsc-foot__facts p{ margin:0 }
.a-gsc-foot__facts .a-note{ margin-top:.25rem }

.a-gsc-list{ display:grid; gap:.4rem; margin:1rem 0 .5rem; max-height:22rem; overflow-y:auto }
.a-gsc-item{
  display:flex; align-items:center; gap:.75rem; width:100%; text-align:left;
  padding:.8rem 1rem; border:1px solid var(--line); border-radius:var(--radius-card-sm);
  background:#fff; color:var(--ink); font:inherit; cursor:pointer;
  transition:border-color .18s, background .18s;
}
.a-gsc-item:hover{ border-color:var(--ink) }
.a-gsc-item[disabled]{ opacity:.5; cursor:wait }
/* Serverns förslag, inte ett val: markerad, men man måste ändå klicka. */
.a-gsc-item.is-vald{ border-color:var(--accent) }
.a-gsc-item__url{
  flex:1; min-width:0; word-break:break-all;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.8125rem;
}
.a-gsc-item__level{
  flex:0 0 auto; font-size:.6875rem; color:var(--muted);
  text-transform:uppercase; letter-spacing:.04em;
}

.a-gsc-facts{ display:grid; grid-template-columns:auto 1fr; gap:.5rem 1.25rem; margin-bottom:1rem }
.a-gsc-facts dt{ font-size:.8125rem; color:var(--muted) }
.a-gsc-facts dd{ font-size:.8125rem; word-break:break-all }

.a-gsc-actions{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:1rem }
.a-gsc__msg:empty{ display:none }
.a-gsc__err{ color:var(--accent) }

/* aktiva filter */
.a-activefilters{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-bottom:1.5rem }
.a-fchip{
  display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
  border:1px solid var(--line); border-radius:var(--radius-pill); background:#fff;
  padding:.4375rem .75rem .4375rem .875rem; font-family:inherit; font-size:.8125rem;
  transition:border-color .2s, background .2s;
}
.a-fchip:hover{ border-color:var(--ink) }
.a-fchip__k{ color:var(--muted) }
.a-fchip__v{ font-weight:500; max-width:16rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.a-fchip__x{ color:var(--muted); font-size:1rem; line-height:1 }
.a-fchip:hover .a-fchip__x{ color:var(--accent) }
.a-fchip__all{ margin-left:.25rem }

/* toppraden */
.a-kpis{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  border:1px solid #fff; border-radius:var(--radius-card); box-shadow:var(--shadow-card);
  background:var(--line); overflow:hidden; margin-bottom:1.25rem;
}
@media (min-width:768px){ .a-kpis{ grid-template-columns:repeat(3,1fr) } }
@media (min-width:1100px){ .a-kpis{ grid-template-columns:repeat(6,1fr) } }

/* Synlighet har fyra tal, Besökare sex. Reglerna måste stå EFTER dem ovan:
   specificiteten är densamma, så det är ordningen som avgör, och stod de före
   hade Besökare-flikens sexkolumnsregel brutit isär fyra tal på breda skärmar.
   Två i bredd på mobil ärvs från .a-kpis och blir 2x2, vilket är rätt. */
@media (min-width:768px){ .a-kpis--gsc{ grid-template-columns:repeat(4,1fr) } }
.a-kpi{ background:#f9f9f9; padding:1.25rem 1.125rem }
/* Jämförelsen mot förra perioden ligger nu i en tooltip (title) på kortet, inte
   som en egen rad — sex "Nytt jämfört med förra perioden" var mest brus. */
.a-kpi--tip{ cursor:help }
.a-kpi__label{ font-size:.6875rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--muted) }
.a-kpi__value{ margin-top:.5rem; font-size:1.625rem; font-weight:600; letter-spacing:-.02em; line-height:1.1; font-variant-numeric:tabular-nums }
.a-kpi__delta{ margin-top:.375rem; font-size:.75rem; font-weight:500 }
.a-kpi__delta span{ font-weight:400; color:var(--muted) }
.a-kpi__delta.is-good{ color:var(--pos) }
.a-kpi__delta.is-bad{ color:var(--neg) }
.a-kpi__delta--none{ color:var(--muted); font-weight:400 }

/* ------------------------------------------------------- betygsringen

   Ritades av Synlighetsindexet på Översikt och av prestandan. Indexet är
   borta; ringen och rutnätet omkring den lever vidare som prestandans
   sajtbetyg. Namnen står kvar (a-vi), för de sitter i app.js och ett
   namnbyte hade gett en diff i två filer utan att ändra en pixel. */
.a-vi{ display:grid; grid-template-columns:1fr; gap:1.75rem; align-items:center }
@media (min-width:720px){ .a-vi{ grid-template-columns:auto 1fr; gap:2.75rem } }
.a-vi__ringwrap{ display:grid; place-items:center }
.a-vi__head{ margin-bottom:1.25rem }
.a-vi__title{ font-size:1.125rem; font-weight:600; letter-spacing:-.02em; margin-bottom:.25rem }

.a-vi-ring{ position:relative; width:11rem; height:11rem; flex:none }
.a-vi-ring svg{ width:100%; height:100%; transform:rotate(-90deg) }
.a-vi-ring__track{ fill:none; stroke:var(--surface); stroke-width:9 }
.a-vi-ring__arc{ fill:none; stroke-width:9; stroke-linecap:round; transition:stroke-dashoffset .9s cubic-bezier(.2,.7,.2,1) }
.a-vi-ring__mid{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center }
.a-vi-ring__score{ font-size:2.875rem; font-weight:700; line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums }
.a-vi-ring__of{ font-size:.75rem; color:var(--muted); margin-top:.15rem }
.a-vi-ring__grade{ margin-top:.4rem; font-size:.8125rem; font-weight:600; letter-spacing:.01em }

/* Nivåfärgerna. Egna, inte accenten: rött betyder illa, grönt bra, och det ska
   inte gå att blanda ihop med varumärkesfärgen. */
.a-vi-ring--weak   .a-vi-ring__arc{ stroke:#c2410c } .a-vi-ring--weak   .a-vi-ring__grade{ color:#c2410c }
.a-vi-ring--ok     .a-vi-ring__arc{ stroke:#b8862f } .a-vi-ring--ok     .a-vi-ring__grade{ color:#b8862f }
.a-vi-ring--good   .a-vi-ring__arc{ stroke:#5f8a4c } .a-vi-ring--good   .a-vi-ring__grade{ color:#5f8a4c }
.a-vi-ring--strong .a-vi-ring__arc{ stroke:#3f7d47 } .a-vi-ring--strong .a-vi-ring__grade{ color:#3f7d47 }
.a-vi-ring--unknown .a-vi-ring__arc{ stroke:var(--line) } .a-vi-ring--unknown .a-vi-ring__grade{ color:var(--muted) }

.a-vi__pillars{ display:flex; flex-direction:column; gap:1.05rem; min-width:0 }
/* Prestandaringens lägesväljare (Mobil/Dator) under ringen. */
.a-perf-head .a-perf-lage{ margin-top:1.25rem; justify-content:center }

/* ---- Notiser: luft mellan elementen + dynamisk extra-mottagare ---- */
.a-notify{ display:flex; flex-direction:column; gap:1.25rem }
.a-notify__foot{ margin-top:.25rem }

/* diagram */
.a-chartcard{ padding:1.5rem }
.a-chartcard__head{ display:flex; justify-content:flex-end; margin-bottom:1rem }
.a-legend{ display:flex; align-items:center; gap:.5rem; font-size:.75rem; color:var(--muted) }
.a-legend__i{ width:.75rem; height:2px; border-radius:2px; display:inline-block }
.a-legend__i--ink{ background:var(--ink) }
.a-legend__i--accent{ background:var(--accent); margin-left:.75rem }

.a-chart{ display:grid; grid-template-columns:2.75rem 1fr; grid-template-rows:auto auto; gap:0 .5rem }

/* Dubbla axlar (Synlighet): klick till vänster, visningar till höger. Skalorna
   skiljer sig hundrafalt, och på en delad axel hade klicklinjen legat platt
   längs nollan.

   Regeln MÅSTE stå efter .a-chart: specificiteten är densamma, så ordningen
   avgör. Stod den före vann tvåkolumnsregeln, och då fanns ingen tredje kolumn
   att lägga höger axel i. Den hamnade på nästa rad, under grafen, som en lös
   sifferkolumn mitt i kortet. */
.a-chart--dual{ grid-template-columns:2.75rem 1fr 2.75rem }
.a-chart__y--right{ align-items:flex-start }
.a-chart__y{
  display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end;
  height:12.5rem; padding-block:.25rem; font-size:.6875rem; color:var(--subtle);
  font-variant-numeric:tabular-nums;
}
.a-chart__canvas{ position:relative; height:12.5rem }
.a-chart__svg{ width:100%; height:100%; display:block; overflow:visible }
.a-grid{ stroke:var(--line); stroke-width:1 }
.a-line{ fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.a-line--visitors{ stroke:var(--ink) }
.a-line--views{ stroke:var(--accent); stroke-width:1.5; opacity:.7 }

.a-chart__x{
  grid-column:2; display:flex; justify-content:space-between;
  margin-top:.625rem; font-size:.6875rem; color:var(--subtle);
}
.a-chart__x span:only-child{ margin-inline:auto }

.a-cross,.a-dot,.a-tip{ position:absolute; opacity:0; pointer-events:none; transition:opacity .15s }
.a-chart__canvas.is-hover .a-cross,
.a-chart__canvas.is-hover .a-dot,
.a-chart__canvas.is-hover .a-tip{ opacity:1 }
.a-cross{ top:0; bottom:0; width:1px; background:var(--line) }
.a-dot{ width:.5rem; height:.5rem; margin:-.25rem 0 0 -.25rem; border-radius:50%; border:2px solid #fff }
.a-dot--v{ background:var(--ink) }
.a-dot--p{ background:var(--accent) }
.a-tip{
  transform:translate(-50%,-125%); min-width:9rem;
  border:1px solid var(--line); border-radius:.875rem; background:#fff; padding:.625rem .75rem;
  font-size:.75rem; line-height:1.5; white-space:nowrap; z-index:2;
  box-shadow:0 2px 8px rgba(10,10,10,.06);
}
.a-tip.is-left{ transform:translate(-6%,-125%) }
.a-tip.is-right{ transform:translate(-94%,-125%) }
.a-tip__when{ display:block; font-weight:600; margin-bottom:.25rem }
.a-tip__v,.a-tip__p{ display:block; color:var(--muted) }
.a-tip__v::before,.a-tip__p::before{
  content:''; display:inline-block; width:.5rem; height:2px; border-radius:2px;
  margin-right:.375rem; vertical-align:middle;
}
.a-tip__v::before{ background:var(--ink) }
.a-tip__p::before{ background:var(--accent) }

/* topplistor */
.a-lists{ display:grid; grid-template-columns:1fr; gap:1.25rem; margin-bottom:1.25rem }
@media (min-width:900px){ .a-lists{ grid-template-columns:repeat(2,1fr) } }
.a-list{ margin:0; display:flex; flex-direction:column }
.a-list__head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.25rem }
.a-list__title{ font-size:1.0625rem; font-weight:600; letter-spacing:-.01em }
.a-list__body{ flex:1 }
.a-list__sub{
  margin:1.25rem 0 .625rem; font-size:.6875rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.06em; color:var(--muted);
}
.a-list__body > .a-list__sub:first-child{ margin-top:0 }

.a-rows{ display:flex; flex-direction:column; gap:.125rem }
.a-row{
  position:relative; display:flex; align-items:center; gap:.75rem; width:100%;
  border:0; border-radius:.625rem; background:none;
  padding:.5625rem .75rem; font-family:inherit; font-size:.875rem; text-align:left;
  overflow:hidden;
}
.a-row--click{ cursor:pointer }
.a-row--click:hover .a-row__bar{ background:var(--surface-2) }
.a-row__bar{
  position:absolute; inset:0 auto 0 0; z-index:0;
  border-radius:.625rem; background:var(--surface); transition:background .2s, width .3s ease;
}
.a-row__bar--accent{ background:rgba(177,95,44,.14) }
.a-row--click:hover .a-row__bar--accent{ background:rgba(177,95,44,.24) }
/* Ikonen/flaggan före namnet i topplistorna. Enfärgade märken tonas ner till
   muted; flaggorna bär sina egna färger. */
.a-row__ico{
  position:relative; z-index:1; flex:none;
  display:grid; place-items:center; width:1.375rem; color:var(--muted);
}
.a-row__ico svg{ display:block }
.a-flag{
  display:block; width:20px; height:14px; border-radius:3px; overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(10,10,10,.12);
}
.a-flag svg{ display:block; width:100%; height:100% }

.a-row__name{
  position:relative; z-index:1; flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.a-row__meta{ position:relative; z-index:1; flex:none; font-size:.75rem; color:var(--muted) }
.a-row__n{ position:relative; z-index:1; flex:none; font-weight:500; font-variant-numeric:tabular-nums }
.a-row--intent{ gap:1rem }

/* mål och tabeller */
.a-tablewrap{ overflow-x:auto; margin-top:1rem }
.a-table{ width:100%; border-collapse:collapse; font-size:.875rem }
.a-table th{
  padding:.625rem .75rem; border-bottom:1px solid var(--line); text-align:left;
  font-size:.6875rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--muted);
  white-space:nowrap;
}
.a-table td{ padding:.75rem; border-bottom:1px solid var(--line); vertical-align:top }
.a-table tr:last-child td{ border-bottom:0 }
.a-table td.a-num,.a-table th.a-num{ text-align:right; font-variant-numeric:tabular-nums }
.a-goals{ overflow-x:auto }

/* intent */
.a-intent__head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:1.25rem }
.a-intent__avg{ font-size:.8125rem; color:var(--muted) }
.a-intent__avg b{ font-size:1.125rem; font-weight:600; color:var(--ink) }
.a-stack{ display:flex; height:.875rem; border-radius:var(--radius-pill); overflow:hidden; background:var(--surface) }
.a-stack__seg--hot{ background:var(--hot) }
.a-stack__seg--warm{ background:var(--warm) }
.a-stack__seg--cold{ background:var(--cold) }
.a-stack__key{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:.75rem; font-size:.75rem; color:var(--muted) }
.a-stack__key span{ display:inline-flex; align-items:center; gap:.375rem }
.a-dotk{ width:.5rem; height:.5rem; border-radius:50%; display:inline-block }
.a-dotk--hot{ background:var(--hot) }
.a-dotk--warm{ background:var(--warm) }
.a-dotk--cold{ background:var(--cold) }
.a-intent__note{ margin-top:1rem; font-size:.8125rem; line-height:1.6; color:var(--muted) }
.a-intent__thin{ margin-top:1.25rem; font-size:.8125rem }

/* uppgraderingsrutan: en inbjudan, inte ett fel */
.a-upsell{ background:var(--surface); border-color:transparent; text-align:center; padding:2.25rem }
.a-upsell__tag{
  display:inline-block; border-radius:var(--radius-pill); background:var(--ink);
  padding:.25rem .75rem; font-size:.6875rem; font-weight:600; color:#fff;
  text-transform:uppercase; letter-spacing:.06em;
}
.a-upsell__title{ margin-top:1rem; font-size:1.25rem; font-weight:600; letter-spacing:-.01em }
.a-upsell__body{
  margin:.625rem auto 1.5rem; max-width:44ch;
  font-size:.9375rem; line-height:1.65; color:var(--muted);
}

/* ============================== kontot =========================== */
.a-planbox .a-usage__num{ margin-bottom:.75rem }
/* Etiketten över plannamnet. Kortet svarar på "vad har jag?", och då ska det
   stå vad frågan gäller innan svaret kommer. */
.a-planbox__label{
  margin-bottom:.25rem;
  font-size:.6875rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em;
  color:rgba(10,10,10,.45);
}

.a-price__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.75rem }
.a-toggle{ display:inline-flex; gap:.25rem; border-radius:var(--radius-pill); background:var(--surface); padding:.25rem }
.a-toggle__b{
  border-radius:var(--radius-pill); background:none; cursor:pointer;
  padding:.5rem .875rem; font-family:inherit; font-size:.8125rem; font-weight:500; color:var(--muted);
  transition:background .2s, color .2s;
}
.a-toggle__b em{ font-style:normal; font-size:.6875rem; opacity:.75 }
.a-toggle__b.is-on{ background:#fff; color:var(--ink) }

.a-volume{ display:grid; grid-template-columns:1fr auto; gap:.5rem 1rem; margin-bottom:2rem }
.a-volume__label{ font-size:.6875rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:rgba(10,10,10,.55) }
.a-volume__out{ font-size:.9375rem; font-weight:600; text-align:right; font-variant-numeric:tabular-nums }
.a-slider{ grid-column:1 / -1; width:100%; appearance:none; -webkit-appearance:none; background:none; cursor:pointer }
.a-slider::-webkit-slider-runnable-track{ height:.25rem; border-radius:var(--radius-pill); background:var(--surface-2) }
.a-slider::-moz-range-track{ height:.25rem; border-radius:var(--radius-pill); background:var(--surface-2) }
.a-slider::-webkit-slider-thumb{
  -webkit-appearance:none; margin-top:-.4375rem;
  width:1.125rem; height:1.125rem; border-radius:50%;
  border:2px solid #fff; background:var(--ink);
}
.a-slider::-moz-range-thumb{
  width:1.125rem; height:1.125rem; border:2px solid #fff; border-radius:50%; background:var(--ink);
}

.a-plans{ display:grid; grid-template-columns:1fr; gap:1.25rem }
@media (min-width:820px){ .a-plans{ grid-template-columns:repeat(3,1fr) } }
.a-plan{
  position:relative; display:flex; flex-direction:column;
  border:1px solid var(--line); border-radius:var(--radius-card); padding:1.75rem;
}
.a-plan.is-popular{ border-color:var(--ink) }
.a-plan--quiet{ background:var(--surface); border-color:transparent }
.a-plan__tag{
  position:absolute; top:-.625rem; left:1.75rem;
  border-radius:var(--radius-pill); background:var(--ink);
  padding:.1875rem .625rem; font-size:.625rem; font-weight:600; color:#fff;
  text-transform:uppercase; letter-spacing:.06em;
}
.a-plan__name{ font-size:1.125rem; font-weight:600; letter-spacing:-.01em }
.a-plan__blurb{ margin-top:.375rem; font-size:.8125rem; line-height:1.55; color:var(--muted) }
.a-plan__price{ margin-top:1.25rem; font-size:.875rem; color:var(--muted) }
.a-plan__price b{ font-size:2rem; font-weight:600; letter-spacing:-.03em; color:var(--ink) }
.a-plan__price span{ color:var(--muted) }
.a-plan__meta{ margin-top:.25rem; font-size:.75rem; color:var(--muted) }
.a-plan__features{ flex:1; margin:1.5rem 0; display:flex; flex-direction:column; gap:.5rem }
.a-plan__features li{ padding-left:1.125rem; position:relative; font-size:.8125rem; line-height:1.5; color:var(--muted) }
.a-plan__features li::before{ content:'·'; position:absolute; left:.25rem; color:var(--accent); font-weight:700 }

.a-devices{ display:flex; flex-direction:column; gap:.75rem }
.a-device{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
  border-bottom:1px solid var(--line); padding-bottom:.75rem }
.a-device:last-child{ border-bottom:0; padding-bottom:0 }
.a-device__ua{ font-size:.875rem; font-weight:500 }
.a-device .a-muted{ margin-top:.1875rem; font-size:.75rem }

.a-gdpr{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
  border-top:1px solid var(--line); padding-top:1.25rem; margin-top:1.25rem;
}
.a-gdpr:first-of-type{ border-top:0; padding-top:0; margin-top:0 }
.a-gdpr__h{ font-size:.9375rem; font-weight:600 }
.a-gdpr .a-muted{ margin-top:.25rem; max-width:44ch; font-size:.8125rem; line-height:1.55 }

/* ========================= API & MCP ============================ */
/* Anslutningsuppgifterna: en etikett, adressen som kod, en kopieraknapp. */
.a-conn{
  display:flex; flex-direction:column; gap:.5rem;
  margin:1.25rem 0; padding:1rem; border-radius:var(--radius-card-sm); background:var(--surface);
}

/* Hänvisningen till den andra sortens nyckel. Markerad med en linje i kanten
   och inte som en ruta: den ska läsas av den som söker efter den, utan att
   konkurrera med kortets egen knapp. */
.a-conn-hint{
  margin:0 0 .25rem; padding:.75rem 0 .75rem 1rem;
  border-left:2px solid var(--line); line-height:1.6;
}
.a-conn__row{ display:flex; align-items:center; gap:.75rem; min-width:0 }
.a-conn__k{ flex:0 0 3rem; font-size:.6875rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--muted) }
.a-conn__v{
  flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.8125rem; color:var(--ink);
}
.a-conn__row .a-btn{ flex:0 0 auto }

/* Nyckellistan. */
.a-keys{ display:flex; flex-direction:column; gap:.75rem; margin-top:.25rem }
.a-key{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  border-bottom:1px solid var(--line); padding-bottom:.75rem;
}
.a-key:last-child{ border-bottom:0; padding-bottom:0 }
.a-key__main{ min-width:0 }
.a-key__name{ font-size:.875rem; font-weight:500 }
.a-key__scope{
  margin-left:.375rem; padding:.0625rem .4375rem; border-radius:var(--radius-pill);
  background:var(--surface); font-size:.6875rem; font-weight:500; color:var(--muted);
}
.a-key .a-muted{ margin-top:.1875rem; font-size:.75rem }
.a-key code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace }

/* "Så kopplar du": hopfällbart, med kodblock. */
.a-help-box{ margin-top:1.25rem; border-top:1px solid var(--line); padding-top:1rem }
.a-help-box summary{ cursor:pointer; font-size:.875rem; font-weight:500; color:var(--ink); list-style:none }
.a-help-box summary::-webkit-details-marker{ display:none }
.a-help-box summary::before{ content:'+ '; color:var(--muted) }
.a-help-box[open] summary::before{ content:'– ' }
.a-help-box .a-muted{ margin-top:.75rem; font-size:.8125rem }
/* Mellanrubrik inuti en hjälpruta: Claude Code-rutan har ett stycke för dig
   själv och ett för teamet, och de ska gå att skilja åt utan att läsa båda. */
.a-help-box__h{ margin-top:1.5rem; font-size:.8125rem; font-weight:600 }
/* Två hjälprutor efter varandra ska inte ge dubbla linjer. */
.a-help-box + .a-help-box{ margin-top:0; padding-top:.75rem; border-top:0 }
.a-code{
  margin-top:.5rem; padding:.875rem 1rem; overflow-x:auto;
  border-radius:var(--radius-card-sm); background:var(--ink); color:#f4f3f1;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.75rem; line-height:1.6;
}

/* Endpointlistan i REST-rutan. Sökvägen i egen kolumn så att de går att läsa
   som en lista och inte som löptext: den som letar efter rätt endpoint läser
   vänsterkanten, inte meningarna. Bryter till två rader när det är trångt,
   hellre än att klämma ihop sökvägen till oläslighet. */
.a-ends{ display:flex; flex-direction:column; gap:.5rem; margin-top:.75rem }
.a-ends li{ display:flex; flex-wrap:wrap; gap:.25rem .75rem; align-items:baseline }
.a-ends li > code{
  flex:0 0 9.5rem;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.75rem; color:var(--ink);
}
.a-ends span{ flex:1 1 12rem; font-size:.8125rem; color:var(--muted); line-height:1.6 }
.a-ends span code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.75rem }

/* Nyckeln som visas en gång i rutan. */
.a-keyshow{ display:flex; align-items:center; gap:.5rem; margin:1rem 0 1.25rem }
.a-keyshow__val{
  flex:1 1 auto; min-width:0; overflow-x:auto; white-space:nowrap;
  padding:.625rem .75rem; border:1px solid var(--line); border-radius:.625rem; background:var(--surface);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.8125rem;
}

/* ============================== mobil ============================ */
@media (max-width:640px){
  .a-top{ margin-bottom:1.75rem }
  .a-page-head{ align-items:flex-start; flex-direction:column }
  .a-dash-controls{ width:100% }
  .a-card{ padding:1.375rem; border-radius:var(--radius-card-sm) }
  .a-kpis{ border-radius:var(--radius-card-sm) }
  .a-kpi__value{ font-size:1.375rem }
  .a-chart{ grid-template-columns:2.25rem 1fr }
  .a-chart--dual{ grid-template-columns:2.25rem 1fr 2.25rem }
  .a-chart__y,.a-chart__canvas{ height:10rem }
  .a-gsc-hero{ padding:1.75rem 1.25rem }
  .a-gsc-hero__title{ font-size:1.125rem }
  /* Noten och legenden får inte trängas på en rad som inte rymmer dem. */
  .a-chartcard__head--split{ flex-wrap:wrap; gap:.5rem }
  .a-tip{ min-width:8rem; font-size:.6875rem }
  .a-gdpr{ flex-direction:column; align-items:stretch }
  .a-plan{ padding:1.5rem }
}

/* =========================================================
   Planväljaren: helskärm, det enda man ser innan man kommit igång.
   ========================================================= */

.a-onb{
  max-width:64rem; margin:0 auto; padding:3rem 1.25rem 4rem;
}
@media (min-width:640px){ .a-onb{ padding:4.5rem 2rem 5rem } }

.a-onb__head{ text-align:center; max-width:38rem; margin:0 auto 3rem }
.a-onb__logo{ height:1.25rem; width:auto; margin:0 auto 2rem }
.a-onb__h{
  font-size:clamp(1.75rem, 4vw, 2.5rem); font-weight:600;
  letter-spacing:-.03em; line-height:1.1; margin-bottom:.875rem;
}
.a-onb__sub{ font-size:1rem; line-height:1.7; color:var(--muted) }

/* ── volym och intervall ────────────────────────────────────────────────── */
.a-onb__ctrl{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-card-sm, 1.25rem);
  padding:1.75rem; margin-bottom:1.5rem; display:grid; gap:1.5rem;
}
@media (min-width:720px){
  .a-onb__ctrl{ grid-template-columns:1fr auto; align-items:end; gap:2.5rem }
}
.a-onb__vol{ display:grid; gap:.625rem }
.a-onb__vollabel{ font-size:.8125rem; font-weight:500; color:var(--muted) }
.a-onb__volout{ font-size:1.5rem; font-weight:600; letter-spacing:-.02em }
.a-onb__vol input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:2px;
  background:var(--line); border-radius:2px; outline:none;
}
.a-onb__vol input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:1.25rem; height:1.25rem; border-radius:50%;
  background:var(--ink); cursor:pointer; border:3px solid #fff;
  box-shadow:0 0 0 1px var(--line); transition:background .2s;
}
.a-onb__vol input[type=range]::-webkit-slider-thumb:hover{ background:var(--accent) }
.a-onb__vol input[type=range]::-moz-range-thumb{
  width:1.25rem; height:1.25rem; border-radius:50%; background:var(--ink);
  cursor:pointer; border:3px solid #fff; box-shadow:0 0 0 1px var(--line);
}

.a-onb__toggle{
  display:inline-flex; padding:.25rem; background:var(--surface);
  border-radius:9999px; justify-self:start;
}
.a-onb__toggle button{
  padding:.5rem 1rem; border:0; cursor:pointer; background:none;
  border-radius:9999px; font:inherit; font-size:.875rem; color:#4a4a4a;
  transition:background .2s, color .2s; white-space:nowrap;
}
.a-onb__toggle button.is-on{
  background:#fff; color:var(--ink); font-weight:500;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.a-onb__toggle b{ color:var(--accent); font-size:.6875rem; font-weight:600 }

/* ── korten ─────────────────────────────────────────────────────────────── */
/* Fyra kort sedan Gratis kom till. Två i bredd redan på surfplatta, fyra först
   när skärmen verkligen rymmer dem: fyra kolumner på 900 px hade gett
   prisraderna en radbrytning mitt i talet. */
.a-onb__plans{ display:grid; gap:1.25rem; align-items:start }
@media (min-width:700px){ .a-onb__plans{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1180px){ .a-onb__plans{ grid-template-columns:repeat(4,1fr) } }

.a-plan{
  position:relative; background:#fff; border:1px solid var(--line);
  border-radius:1.75rem; padding:1.75rem;
}
.a-plan--pop{ border-color:var(--ink); box-shadow:0 20px 50px -30px rgba(20,18,15,.3) }
.a-plan--ent{ background:transparent; border-style:dashed }

/* Gratis. Ingen ram i bläck och ingen skugga: kortet ska stå först utan att
   konkurrera med "Mest valda" om blicken. En nolla i kronor drar ändå ögat. */
.a-plan--free{ background:var(--surface); border-color:transparent }
/* Den plan man redan står på. Märkningen räcker; kortet ska inte se valbart ut. */
.a-plan--nu{ border-color:var(--line); background:#fff }
.a-plan--nu .a-plan__flag{ background:var(--muted) }
.a-plan__flag{
  position:absolute; top:-.625rem; left:1.75rem;
  background:var(--ink); color:#fff; font-size:.625rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  padding:.25rem .625rem; border-radius:9999px;
}
.a-plan__h{ font-size:1.125rem; font-weight:600; margin-bottom:.25rem }
.a-plan__blurb{
  font-size:.8125rem; line-height:1.55; color:var(--muted);
  margin-bottom:1.25rem; min-height:2.5rem;
}
.a-plan__price{ display:flex; align-items:baseline; gap:.375rem; margin-bottom:.25rem }
.a-plan__price b{ font-size:2.25rem; font-weight:600; letter-spacing:-.03em; line-height:1 }
.a-plan__price span{ font-size:.875rem; color:var(--muted) }
.a-plan__talk{ font-size:1.375rem !important }
.a-plan__billed{ font-size:.75rem; color:var(--muted); margin-bottom:1.5rem }
.a-plan .a-btn--block{ margin-bottom:1.5rem }

.a-plan__list{ display:grid; gap:.625rem; font-size:.8125rem; line-height:1.5; color:#4a4a4a }
.a-plan__list li{ position:relative; padding-left:1.25rem }
.a-plan__list li::before{
  content:''; position:absolute; left:0; top:.375rem;
  width:.4375rem; height:.4375rem; border-radius:50%; border:1.5px solid var(--accent);
}
/* "Allt i Start, plus:" är en rubrik i listan, inte en punkt. */
.a-plan__all{ font-weight:600; color:var(--ink); padding-left:0 !important; margin-top:.25rem }
.a-plan__all::before{ display:none !important }

/* ── foten ──────────────────────────────────────────────────────────────── */
.a-onb__foot{
  display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; align-items:center;
  margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--line);
  font-size:.8125rem; color:var(--muted);
}

/* ============================ Formulär (leads) ==========================
   Ett svar är ett kort, som målen. Olästa markeras med en accentkant till
   vänster: syns i ögonvrån utan att skrika. Installationen och notiserna bor
   på samma sida, för en småföretagare ska se allt som rör formuläret utan att
   leta i undermenyer. */
.a-leadhead{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-bottom:1rem;
}
.a-leads{ display:flex; flex-direction:column; gap:1rem; margin-bottom:2rem }

.a-lead{ padding:1.25rem 1.5rem }
.a-lead--unread{ border-left:3px solid var(--accent) }
.a-lead__head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem }
.a-lead__who{ min-width:0 }
.a-lead__name{ font-size:1.0625rem; font-weight:600; color:var(--ink); margin:0 }
.a-lead__mail{ font-size:.875rem; color:var(--accent); text-decoration:none; word-break:break-all }
.a-lead__mail:hover{ text-decoration:underline }
.a-lead__time{ flex:none; font-size:.8125rem; color:var(--muted) }

.a-lead__fields{ width:100%; border-collapse:collapse; margin:.875rem 0 .25rem }
.a-lead__fields td{ padding:.3125rem 0; font-size:.875rem; vertical-align:top }
.a-lead__label{ color:var(--muted); white-space:nowrap; padding-right:1rem !important }
.a-lead__val{ color:var(--ink); font-weight:500; width:100% }

.a-lead__msg{
  margin:.875rem 0 .25rem; padding:.875rem 1rem;
  background:var(--surface); border-radius:var(--radius-control);
  font-size:.9375rem; line-height:1.6; color:var(--ink);
}
.a-lead__foot{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  flex-wrap:wrap; margin-top:1rem;
}
.a-lead__akt{ display:inline-flex; gap:1rem; flex:none }
.a-lead__del{ color:var(--muted) }
.a-lead__del:hover{ color:var(--neg) }

/* ── notiser och installation ── */
.a-lead-settings{ margin-bottom:1.5rem }
.a-lead-settings .a-field{ margin-top:1rem }

.a-check{ display:flex; align-items:flex-start; gap:.625rem; font-size:.9375rem; color:var(--ink); cursor:pointer }
.a-check input{ margin-top:.15rem; flex:none; width:1.05rem; height:1.05rem; accent-color:var(--accent) }

.a-steps{ margin:0; padding:0; list-style:none; counter-reset:step }
.a-steps > li{
  position:relative; padding:0 0 1.5rem 2.75rem; counter-increment:step;
  font-size:.9375rem; line-height:1.65; color:var(--ink);
}
.a-steps > li:last-child{ padding-bottom:0 }
.a-steps > li::before{
  content:counter(step); position:absolute; left:0; top:-.1rem;
  width:1.875rem; height:1.875rem; border-radius:50%;
  background:var(--surface); color:var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-size:.875rem; font-weight:600;
}
.a-steps code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.8125rem;
  background:var(--surface); padding:.05rem .3rem; border-radius:.35rem;
}

/* ---------------------------------------------------------------- Dragspel

   Installationsstegen som accordions med ikon. Native <details>, så öppning
   sköter webbläsaren; vi ritar bara badgen, titeln och pilen. */
.a-acc-list{ margin-top:1.25rem; display:flex; flex-direction:column; gap:.625rem }
.a-acc{
  border:1px solid var(--line); border-radius:var(--radius-card-sm);
  background:#fff; overflow:hidden;
}
.a-acc__sum{
  display:flex; align-items:center; gap:.875rem; padding:.9375rem 1.0625rem;
  cursor:pointer; list-style:none; user-select:none;
}
.a-acc__sum::-webkit-details-marker{ display:none }
.a-acc__sum:hover{ background:var(--surface) }
.a-acc[open] .a-acc__sum{ background:var(--surface); border-bottom:1px solid var(--line) }
.a-acc__ikon{
  display:grid; place-items:center; width:2rem; height:2rem; flex:none;
  border-radius:.5rem; background:#fff; border:1px solid var(--line); color:var(--accent);
}
.a-acc[open] .a-acc__ikon{ background:var(--accent); border-color:var(--accent); color:#fff }
/* Numret i brickan (1, 2, 3) i stället för en ikon. */
.a-acc__ikon--num{ font-size:.875rem; font-weight:600; font-variant-numeric:tabular-nums }
.a-acc__title{
  flex:1; min-width:0; font-size:.9375rem; font-weight:600; color:var(--ink);
  letter-spacing:-.01em;
}
.a-acc__title code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.8125rem; font-weight:500;
  background:#fff; border:1px solid var(--line); padding:.05rem .3rem; border-radius:.35rem;
}
.a-acc[open] .a-acc__title code{ background:var(--background) }
.a-acc__chev{ flex:none; color:var(--muted); display:grid; transition:transform .2s ease }
.a-acc[open] .a-acc__chev{ transform:rotate(180deg) }
.a-acc__body{ padding:1rem 1.0625rem 1.125rem; font-size:.9375rem; line-height:1.65; color:var(--ink) }
.a-acc__body > p{ margin:0 0 .75rem }
.a-acc__body > p:last-child{ margin-bottom:0 }
.a-acc__body code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.8125rem;
  background:var(--surface); padding:.05rem .3rem; border-radius:.35rem;
}

/* ---- Hel sektion som dragspel (Notiser, Så kopplar du formuläret) ----
   Ärver kortramen från .a-card men styr sin egen padding via huvud och kropp,
   så att rubriken blir kortets klickbara huvud. */
.a-acc-kort{ padding:0; overflow:hidden }
.a-acc-kort__sum{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.5rem 1.75rem; cursor:pointer; list-style:none; user-select:none;
}
.a-acc-kort__sum::-webkit-details-marker{ display:none }
.a-acc-kort__sum:hover .a-acc-kort__title{ color:var(--accent) }
.a-acc-kort__title{
  font-size:1.0625rem; font-weight:600; letter-spacing:-.01em; color:var(--ink);
  transition:color .18s;
}
.a-acc-kort__title code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.875rem; font-weight:500;
}
/* Metatexten på summeringsraden: vad inställningen står på just nu. Ligger till
   höger om titeln och trycker chevronen ytterst. margin-left:auto i stället för
   en ändrad justify-content, så att kort UTAN meta ser likadana ut som förut. */
.a-acc-kort__meta{
  margin-left:auto; flex:none; font-size:.8125rem; color:var(--muted);
}
.a-acc-kort__chev{ flex:none; color:var(--muted); display:grid; transition:transform .2s ease }
.a-acc-kort[open] .a-acc-kort__chev{ transform:rotate(180deg) }
.a-acc-kort__body{ padding:0 1.75rem 1.75rem }
@media (min-width:640px){
  .a-acc-kort__sum{ padding:1.5rem 2rem }
  .a-acc-kort__body{ padding:0 2rem 2rem }
}

.a-snippet--block{ align-items:stretch; margin-top:.875rem }
.a-snippet__code--pre{
  margin:0; white-space:pre; overflow-x:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.75rem; line-height:1.7;
  color:var(--ink);
}

/* ============================= rapport ==============================
 *
 * Månadsrapporterna. Listan är avsiktligt lugn: en rad per månad, med
 * månadsnamnet stort och nyckeltalen diskret bredvid. Den som skummar ska
 * kunna följa en kolumn av månader nedåt och se riktningen utan att öppna
 * något; den som vill veta mer fäller ut en.
 */
.a-rapporter{ display:grid; gap:.875rem }

.a-rapport{ padding:0; overflow:hidden }

/* Hela huvudet är knappen — en liten pil att träffa hade varit sämre på mobil. */
.a-rapport__head{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  width:100%; padding:1.25rem 1.5rem; border:0; background:none; cursor:pointer;
  text-align:left; font:inherit; color:inherit;
}
.a-rapport__head:hover{ background:var(--surface-2) }
.a-rapport.is-open .a-rapport__head{ border-bottom:1px solid var(--line) }

.a-rapport__manad{ font-size:1.125rem; font-weight:600; letter-spacing:-.01em; text-transform:capitalize }
.a-rapport__meta{
  display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap;
  font-size:.8125rem; color:var(--muted); font-variant-numeric:tabular-nums;
}
.a-rapport__delta--up{ color:var(--pos) }
.a-rapport__delta--down{ color:var(--neg) }
.a-rapport__delta--flat{ color:var(--muted) }

/* Första meningen ur sammanfattningen, som aptitretare i hopfällt läge. */
.a-rapport__excerpt{
  margin:0; padding:0 1.5rem 1.25rem; font-size:.875rem; line-height:1.6; color:var(--muted);
}

.a-rapport__body{ padding:1.5rem }

/* Brödtexten. Bredden är satt för läsbarhet, inte för att fylla kortet —
   en rad på 120 tecken tappar man bort sig i. */
.a-rapport__text{ max-width:62ch }
.a-rapport__text p{ margin:0 0 1rem; font-size:.9375rem; line-height:1.7 }
.a-rapport__text p:last-child{ margin-bottom:0 }

.a-rapport__rubrik{
  margin:2rem 0 .875rem; font-size:.75rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
}

.a-rapport__lista{ margin:0; padding-left:1.125rem; display:grid; gap:.5rem }
.a-rapport__lista li{ font-size:.9375rem; line-height:1.6 }
.a-rapport__mal--reached{ color:var(--pos) }
.a-rapport__mal--behind{ color:var(--neg) }
.a-rapport__mal--unknown{ color:var(--muted) }

.a-rapport__fot{ margin-top:1.75rem; padding-top:1rem; border-top:1px solid var(--line) }
.a-rapport-fot{ margin-top:1.5rem }

/* Åtgärderna i en utfälld rapport: mejla till vänster, ta bort längst till
   höger. Avståndet emellan är avsiktligt: de två knapparna gör helt olika
   saker och ska inte sitta som ett par. */
.a-rapport__akt{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  flex-wrap:wrap; margin-top:1.25rem;
}
.a-rapport__akt .a-note{ margin:0 }
.a-rapport__del{ color:var(--accent) }

/* Periodväljaren under listan. Takt och period bredvid varandra där det finns
   plats, i en kolumn på mobil. */
.a-rapport-fot-wrap .a-acc-kort{ margin-top:1.25rem }
.a-rapport-valj{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)) }

/* =========================== personer ============================
   Vilka som ser sajten: ägaren, de inbjudna, och inbjudningar som ännu inte
   lösts in. Alla tre i EN lista, för det är en fråga och inte tre. En inbjudan
   som väntar är en person som snart står där, och den letar man efter på samma
   ställe som personen. */

.a-persons{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column }

.a-person{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.875rem 0; border-top:1px solid var(--line); flex-wrap:wrap;
}
.a-person:first-child{ border-top:0; padding-top:0 }
.a-person:last-child{ padding-bottom:0 }

.a-person__who{ min-width:0; display:flex; flex-direction:column; gap:.125rem }
.a-person__namn{ font-size:.9375rem; font-weight:500; color:var(--ink); word-break:break-word }
.a-person__epost{ font-size:.75rem; color:var(--muted); word-break:break-all }

.a-person__akt{ display:inline-flex; align-items:center; gap:1rem; flex:none }

/* Den som väntar på att lösa in sin inbjudan är inte där än, och raden ska
   säga det utan att skrika. Dämpad, inte genomstruken: hen kommer förmodligen. */
.a-person--invited .a-person__namn{ color:var(--muted) }

.a-badge--shared{ background:rgba(177,95,44,.1); color:var(--accent) }

/* Rollväljaren på en personrad. Mindre än periodväljaren ovanför: den byter
   en rad, inte hela vyn. */
.a-select--sm{ padding:.375rem 1.75rem .375rem .625rem; font-size:.8125rem }

/* ── inbjudningsformuläret ── */
.a-invite{ margin-bottom:1rem }
.a-radios{ display:grid; gap:.75rem; margin:1rem 0 1.25rem }
.a-radio{
  display:flex; align-items:flex-start; gap:.625rem; cursor:pointer;
  border:1px solid var(--line); border-radius:var(--radius-card-sm); padding:.875rem 1rem;
  transition:border-color .2s;
}
.a-radio:hover{ border-color:var(--ink) }
.a-radio input{ margin-top:.15rem; flex:none; width:1.05rem; height:1.05rem; accent-color:var(--accent) }
.a-radio input:checked ~ span strong{ color:var(--accent) }
.a-radio span{ display:flex; flex-direction:column; gap:.125rem; font-size:.9375rem }
.a-radio .a-help{ margin:0 }

/* ── delade sajter i sajtlistan ── */

/* Rubriken som delar listan i "dina" och "delade med dig". Bryter rutnätet över
   hela bredden: en mellanrubrik som bara tar en kolumn läses som ett kort. */
.a-sitegrid__break{ grid-column:1 / -1; margin-top:1rem }
.a-sitegrid__title{ font-size:1rem; font-weight:600; letter-spacing:-.01em }
.a-sitegrid__help{ margin-top:.25rem; font-size:.8125rem; line-height:1.5; color:var(--muted) }

/* En sajt man är inbjuden till ser ut som en annan sajt, med en tunn markering
   i kanten. Inte en annan färg på hela kortet: siffrorna är lika sanna. */
.a-site--shared{ border-left:3px solid rgba(177,95,44,.35) }

.a-page-head--sub{ margin-bottom:1.25rem }
.a-h2{ font-size:1.125rem; font-weight:600; letter-spacing:-.01em }

@media (max-width:640px){
  .a-person{ align-items:flex-start }
  .a-person__akt{ width:100%; justify-content:space-between }
}

/* Mätkoden i den tomma trafikvyn. Texten ovanför är centrerad, raden är det
   inte: kod läses från vänsterkanten.

   Knappen läggs UNDER koden i stället för bredvid. Raden är runt sjuttio tecken
   och en knapp vid sidan hade lämnat en ruta så smal att man fick skrolla i
   sidled för att se vad man kopierar. Det man ska kunna läsa ska rymmas. */
.a-snippet--empty{
  margin:1.25rem auto 0; max-width:42rem; text-align:left;
  flex-direction:column; align-items:flex-start;
}
.a-snippet--empty .a-snippet__code{
  flex:none; width:100%; white-space:pre-wrap; overflow-wrap:anywhere;
}