/* =========================================================
   COPPLA: skrivbordet.

   Dragspelen är borta. Det som stod i dem är nu appar: ett
   centrerat rutnät med tre kolumner, och en app i taget när
   man öppnar en.

   Varför ett fast antal kolumner och inte auto-fit: ett
   rutnät som ändrar antal kolumner ändrar också var varje
   app LIGGER, och muskelminnet för "Fortnox är näst längst
   ner till höger" är hela poängen med ett skrivbord. Fyra
   kolumner överallt, ikonerna krymper i stället — även på
   en telefon, där fyra ikoner på 4 rem fortfarande får plats
   men fyra på 5,25 inte hade gjort det.

   Ingenting här uppfinner en egen färg. Tokens från
   style.css, samma som resten.
   ========================================================= */

/* ============================== topbaren ===========================
   Projektnamnet står där logotypen stod. Det är domänen — frontness.se —
   och inte "Coppla", för det är det man känner igen sitt eget konto på.
   Produktnamnet hjälper ingen som redan är inloggad. */

.d-top__namn{
  font-size:1rem; font-weight:600; letter-spacing:-.02em;
  display:inline-flex; align-items:center; gap:.5rem;
}
.d-top__namn--tom{ color:var(--subtle) }

/* Tillbaka-pilen. Bara synlig inne i en app; på skrivbordet finns
   ingenting att gå tillbaka TILL, och en död pil är en lögn. */
.d-back{
  width:2.25rem; height:2.25rem; flex:none; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:var(--radius-pill);
  background:var(--background); color:var(--foreground);
  transition:background .2s, border-color .2s, transform .2s;
}
.d-back:hover{ background:var(--surface); border-color:var(--subtle); transform:translateX(-2px) }

/* Brödsmulan i topbaren: frontness.se / Fortnox */
.d-crumb{ display:inline-flex; align-items:center; gap:.5rem; min-width:0 }
.d-crumb__sep{ color:var(--subtle) }
.d-crumb__nu{
  font-size:1rem; font-weight:600; letter-spacing:-.02em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ============================= skrivbordet =========================
   Centrerat och smalt. Ett rutnät som får breda ut sig över 76rem blir
   en gles tabell, inte ett skrivbord. */

/* Bredden och centreringen ligger på RUTNÄTET och inte på skrivbordet.
   Skrivbordet måste kunna krympa till en smal rad när en app är öppen,
   och ett max-width på 34rem hade då slagits ut av en fast bredd i stället
   för att följa med. */
.d-desk{ width:100%; padding:1.5rem 1.25rem }
.d-grid{ width:100%; max-width:34rem; margin-inline:auto }

/* Skrivbordet står mitt på skärmen, inte klistrat i överkanten.
   Det är den enda vyn där det går: en app kan vara längre än fönstret,
   och "mitt på" är ingen plats för något man scrollar i.

   margin-block:auto på rutnätet och inte justify-content:center på
   behållaren — de centrerar likadant, men den senare klipper toppen
   när innehållet är högre än skärmen i stället för att låta den
   scrollas fram. */
.a-main--desk{ display:flex; flex-direction:column; padding-bottom:0 }
.a-main--desk .d-desk{ flex:1; display:flex; flex-direction:column }
.a-main--desk .d-grid{ margin-block:auto }

/* ============================== scenen =============================
   Skrivbordet och den öppna appen ligger på samma yta och rör sig mot
   varandra: ikonerna skjuts ut åt vänster, appen glider in från höger.

   Varför inte bara byta innehåll: ett byte säger ingenting om var man
   är. Rörelsen gör det — man SER att skrivbordet ligger kvar därborta,
   och kanten som blir synlig är både en påminnelse och vägen tillbaka.

   Under 1024 px finns ingen plats för två ytor bredvid varandra. Där
   lägger sig appen över hela scenen i stället, som en app på en telefon
   gör, och glider in från samma håll. Samma rörelse, annan mål­bild. */

.d-scen{
  flex:1; min-height:0; position:relative;
  display:flex; flex-direction:column;
  /* Panelen står utanför högerkanten tills den öppnas. Utan det här blir
     den en vågrät rullningslist över hela appen. */
  overflow:hidden;
}

/* Skrivbordet KRYMPER, det åker inte ut.
   Först sköt jag ut rutnätet åt vänster tills bara en kant syntes. Fel:
   en halv ikon i kanten går inte att klicka på och säger inte vilken app
   den är. Poängen med att skrivbordet ligger kvar är att man ska kunna gå
   vidare till nästa app utan att backa först — och då måste apparna synas
   hela.

   EN SAK RÖR SIG, INTE TVÅ. Skrivbordet animerade sin bredd samtidigt som
   panelen gled in, men rutnätet kan inte animera sin omställning från fyra
   kolumner till två — den sker i en bildruta. Resultatet blev att raden såg
   FÄRDIG ut direkt och panelen kom efter, som två händelser i rad i stället
   för en. Nu ställer skrivbordet om sig på en gång och bara panelen rör sig.
   Ögat följer den som glider, och det som redan står stilla stör inte. */

.d-panel{
  position:absolute; inset:0; z-index:20;
  overflow-y:auto; overscroll-behavior:contain;
  background:var(--surface);
  transform:translateX(100%);
  transition:transform .42s cubic-bezier(.22,.61,.36,1);
}
.d-scen.is-open .d-panel{ transform:translateX(0) }

/* Samma botten som resten av appen i mörkt läge. Panelen täcker hela ytan
   till höger om menyn, alltså är den bakgrunden när en app är öppen — låg
   den kvar på --surface blev skrivbordet svart och appen grå, som två olika
   program. Det som ska lyfta från botten lyfter på egen hand: korten, den
   markerade menyraden och de två ramarna i Hemsida. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .d-panel{ background:#010101 }
}
:root[data-theme="dark"] .d-panel{ background:#010101 }

@media (min-width:1024px){
  /* SIDOMENY, INTE MINIATYRSKRIVBORD.
     Ikonerna låg först i två små kolumner — en hopkrympt kopia av
     skrivbordet. Det fungerade men läste sig långsamt: man hittar en app i
     ett rutnät genom att känna igen dess plats, och en meny läser man. Inne
     i en app vill man välja nästa, inte minnas var den låg.

     Raderna är därför som i vilken SaaS som helst: ikon till vänster, namn
     bredvid, den öppna markerad. ORDNINGEN är densamma som på skrivbordet,
     så den du dragit högst upp står högst upp här också.

     Hem fungerar precis som förut: pilen i topbaren, och ytan under
     raderna. */
  /* INGEN LINJE. Den fanns för att skilja menyn från appen när de låg på
     olika toner. Nu ligger de på samma svarta botten, och då skiljer linjen
     ingenting åt — den delar bara skärmen i två med ett streck. Det som säger
     var man är är den markerade raden, inte en kant. */
  .d-panel{ left:14rem }

  .d-scen.is-open .d-desk{
    /* Luft till vänster om raderna. Ikonerna satt en hårsmån från kanten och
       låg då till vänster om tillbaka-pilen ovanför — två saker som borde
       höra ihop men pekade åt olika håll.

       Toppen följer sidans egen: första menyraden ska börja i höjd med
       rubriken bredvid, inte en tum ovanför den. */
    width:14rem; padding:2rem 1rem 1rem 1.125rem;
    /* Menyn scrollar för sig på en låg skärm med många kopplingar. */
    overflow-y:auto; overscroll-behavior:contain;
  }

  .d-scen.is-open .d-grid{
    grid-template-columns:1fr; gap:.125rem; margin-block:0; max-width:none;
  }

  .d-scen.is-open .d-app{
    flex-direction:row; align-items:center; gap:.625rem;
    padding:.4375rem .5rem; border-radius:.75rem; text-align:left;
    transition:background .15s;
  }
  .d-scen.is-open .d-app:hover{ background:var(--surface-2) }
  .d-scen.is-open .d-app:hover .d-app__ikon{ transform:none }

  .d-scen.is-open .d-app__ikon{
    max-width:1.875rem; border-radius:.5rem; flex:none; box-shadow:none;
  }
  .d-scen.is-open .d-app__ikon svg{ width:1rem; height:1rem }
  .d-scen.is-open .d-app__namn{
    flex:1; min-width:0; font-size:.8125rem; line-height:1.3;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }

  /* Den öppna appen. En meny där allt ser likadant ut svarar inte på frågan
     "var är jag", och den frågan ställer man varje gång man tittar dit.

     LJUSARE ÄN IKONBRICKAN. Raden låg på --background, som är mörkare än
     brickorna den innehåller — markeringen blev då en grop under ikonen i
     stället för en upphöjning bakom den, och på den nya svarta botten syntes
     den knappt alls. Nu ligger raden över brickans ton, och ikonen läses som
     något som står PÅ den markerade raden. */
  .d-scen.is-open .d-app.is-pa{ background:var(--surface-2); box-shadow:var(--shadow-card) }
  /* I mörkt läge är --surface-2 samma ton som brickan (#1e1d1b), och då tar
     de ut varandra. Ett snäpp till, mellan brickan och linjen: raden syns mot
     botten, brickan syns mot raden. */
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]) .d-scen.is-open .d-app.is-pa{ background:#262523 }
  }
  :root[data-theme="dark"] .d-scen.is-open .d-app.is-pa{ background:#262523 }
  .d-scen.is-open .d-app.is-pa .d-app__namn{ font-weight:600 }

  /* "Lägg till" sist, med luft över: den är vägen till fler appar, inte en
     app bland dem. */
  .d-scen.is-open .d-app--add{ margin-top:.5rem }
  .d-scen.is-open .d-app--add .d-app__ikon{ border-width:1px }
}

.d-grid{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:1.75rem 1rem;
}

/* ------------------------------ hemsidan -------------------------- */
/* YTAN ÄR SIDANS. Här stod en skärmram och en telefonram bredvid varandra,
   och då fick sidan halva bredden för att visa något man ändå bara ser en av
   åt gången. Nu tar förhandsvisningen plats, och knappen i toppraden byter
   bredd i stället. */

/* Raden ligger i sidhuvudet bredvid rubriken. Ingen egen marginal alltså —
   huvudet bär avståndet ned till förhandsvisningen. */
/* Raden ligger i sidhuvudet bredvid rubriken. Botten-justerad: väljarna har
   en etikett över sig och lägesknappen inte, och de ska stå på samma linje
   NEDTILL — annars ser knappen ut att ha hasat upp. */
.d-sajt__topp2{
  display:flex; align-items:flex-end; gap:1rem; flex-wrap:wrap; flex:1; min-width:0;
}

/* Kugghjulet. Samma höjd som väljarknapparna, kvadratiskt. */
/* Papperskorgen. Sist i listen, avskild med lite luft: den tar bort sidan
   man tittar på, och en knapp som raderar ska inte stå tätt intill en som
   byter bredd. */
.d-sajt__slang{
  flex:none; margin-left:.5rem; display:grid; place-items:center;
  width:1.75rem; height:1.75rem; border:0; border-radius:var(--radius-control);
  background:none; color:var(--subtle); cursor:pointer;
  transition:background .15s, color .15s;
}
.d-sajt__slang:hover{ background:var(--danger-bg); color:var(--danger) }

/* Rutan bakom kugghjulet: fältet överst, det farliga sist och avskilt. */
.a-inst__fara{ margin-top:1.5rem; padding-top:1.25rem; border-top:1px solid var(--line) }
.a-inst__fara .a-conn__note{ margin-bottom:.75rem }

/* Kugghjulet väger mot RUBRIKEN i andra änden av raden, inte mot knapparna
   omkring sig: de två är radens ytterpunkter, och en liten ikon mot en
   rubrik på 1.875rem såg ut att ha glömts kvar. */
.d-valj__kugg{
  display:grid; place-items:center; width:2.5rem; height:2.5rem;
  border:1px solid var(--line); border-radius:var(--radius-pill);
  background:var(--background); color:var(--muted); cursor:pointer;
}
.d-valj__kugg svg{ width:1.25rem; height:1.25rem }
.d-valj__kugg:hover{ color:var(--foreground); border-color:var(--subtle) }
.d-valj--inst{ flex-direction:row }

/* ---- väljaren ---- */
/* En egen och inte en <select>: listan bär antal filer per sida och ett
   sökfält, och ingen av dem får plats i en inbyggd meny. */
/* Etikett över, knapp under. Tre väljare bredvid varandra där den ena bär ett
   företagsnamn och den andra ett filnamn är en gissningslek utan etiketter —
   vilken som är vilken syns först när man öppnat fel. */
.d-valj{ position:relative; min-width:0; display:flex; flex-direction:column; gap:.1875rem }
.d-valj__etikett{
  font-size:.6875rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--subtle);
}
.d-valj__knapp{
  display:inline-flex; align-items:center; gap:.5rem; max-width:22rem;
  padding:.4375rem .75rem .4375rem .875rem;
  border:1px solid var(--line); border-radius:var(--radius-pill);
  background:var(--background); color:var(--foreground); cursor:pointer;
  font:inherit; font-size:.9375rem; font-weight:500; letter-spacing:-.01em;
}
.d-valj__knapp:hover{ border-color:var(--subtle) }

/* Väljaren som rubrik. Samma mått som .d-page__h, utan kant och botten:
   det ska läsas som sidans namn först och som en knapp i andra hand. */
.d-valj__knapp--rubrik{
  max-width:none; padding:0; gap:.4375rem;
  border:0; background:none; color:var(--foreground);
  font-size:1.875rem; font-weight:600; letter-spacing:-.025em; line-height:1.15;
}
.d-valj__knapp--rubrik svg{ color:var(--subtle); transition:color .15s, transform .15s }
.d-valj__knapp--rubrik:hover svg{ color:var(--foreground); transform:translateY(1px) }
.d-valj__knapp--rubrik[aria-expanded="true"] svg{ transform:rotate(180deg) }
.d-valj__namn{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

.d-valj__meny{
  position:absolute; top:calc(100% + .375rem); left:0; z-index:30;
  /* Menyn hänger under KNAPPEN, inte under etiketten. */
  margin-top:.125rem;
  width:max(16rem, 100%); max-width:24rem; padding:.375rem;
  display:flex; flex-direction:column; gap:.125rem;
  background:var(--background); border:1px solid var(--line);
  border-radius:var(--radius-card-sm); box-shadow:var(--shadow-card);
}
/* Kugghjulets meny öppnas åt vänster: knappen står längst till höger på raden,
   och en meny som växer åt höger därifrån hamnar utanför skärmen. Regeln står
   EFTER .d-valj__meny med flit — de har samma specificitet, och då avgör
   ordningen. */
.d-valj__meny--hoger{ left:auto; right:0; width:max-content; max-width:20rem }

.d-valj__sok{
  font:inherit; font-size:.875rem; color:inherit; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius-control);
  padding:.4375rem .625rem; margin-bottom:.25rem; outline:none;
}
.d-valj__sok:focus{ border-color:var(--accent) }

/* Listan rullar, menyn växer inte. Tjugo kunder ska inte skjuta knappen
   utanför skärmen. */
.d-valj__lista{
  display:flex; flex-direction:column; gap:.125rem;
  max-height:15rem; overflow-y:auto; overscroll-behavior:contain;
}
.d-valj__alt{
  display:flex; align-items:center; gap:.75rem; width:100%;
  padding:.4375rem .625rem; border:0; border-radius:var(--radius-control);
  background:none; color:var(--foreground); cursor:pointer;
  font:inherit; font-size:.875rem; text-align:left;
}
.d-valj__alt > span:first-child{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.d-valj__alt:hover{ background:var(--surface-2) }
.d-valj__alt.is-pa{ background:var(--surface-2); font-weight:600 }
/* Det som inte går att ångra står sist och i varningsfärg — men som text och
   inte som en röd knapp: en röd yta i en meny drar blicken till det farligaste
   varje gång man öppnar den. */
.d-valj__alt--fara{ color:var(--danger) }
.d-valj__alt--fara:hover{ background:var(--danger-bg) }
.d-valj__antal{ flex:none; font-size:.75rem; color:var(--subtle); font-variant-numeric:tabular-nums }
.d-valj__tom{ padding:.5rem .625rem; font-size:.875rem; color:var(--muted) }
.d-valj__ny{
  margin-top:.25rem; padding:.4375rem .625rem; border:0; border-top:1px solid var(--line);
  border-radius:0 0 var(--radius-control) var(--radius-control);
  background:none; color:var(--muted); cursor:pointer; font:inherit; font-size:.875rem;
  text-align:left;
}
.d-valj__ny:hover{ color:var(--foreground) }

/* ---- desktop eller mobil ---- */
/* Höger sida av topprad: det man gör med sidan. */
.d-sajt__hoger{ margin-left:auto; display:flex; align-items:center; gap:.5rem }

/* Publiceringen. Adressen står som en länk och inte som en etikett: det man
   vill göra med en publicerad sida är att öppna den. */
.d-sajt__live{
  max-width:14rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:.8125rem; color:var(--muted); text-decoration:none;
}
.d-sajt__live:hover{ color:var(--foreground); text-decoration:underline }

.d-sajt__fel{
  font:inherit; font-size:.8125rem; color:var(--danger, #e5484d);
  background:none; border:none; padding:0; cursor:pointer; text-align:left;
}
.d-sajt__fel:hover{ text-decoration:underline }

/* "Koppla domän" är inte en handling utan en väg till rutan där man gör det.
   Därför text och inte knapp — den ser inte ut att publicera något. */
.d-sajt__doman{
  font:inherit; font-size:.8125rem; color:var(--muted);
  background:none; border:none; padding:0; cursor:pointer;
}
.d-sajt__doman:hover{ color:var(--foreground); text-decoration:underline }

.d-sajt__pub{ flex:none; white-space:nowrap }
.d-sajt__pub:disabled{ opacity:.6; cursor:default }

/* DNS-raderna i inställningsrutan. En tabell, för det ÄR en tabell: tre
   kolumner som ska skrivas av exakt, och en punktlista hade dolt vilken
   kolumn som är vilken. */
.a-inst__dns{ margin-top:.25rem }
.a-inst__dnstab{
  width:100%; margin-top:.5rem; border-collapse:collapse;
  font-size:.8125rem; line-height:1.5;
}
.a-inst__dnstab td{
  padding:.375rem .5rem; border-top:1px solid var(--line);
  vertical-align:top; word-break:break-all;
}
.a-inst__dnstab td:first-child{ width:3.5rem; color:var(--muted); font-weight:600 }
.a-inst__dnstab code{ font-size:.8125rem }

@media (max-width:40rem){
  .d-sajt__live{ max-width:8rem }
}

/* Lägesknappen bor i förhandsvisningens list, längst till höger. Den hör till
   BILDEN och inte till appen runt omkring — man byter bredd på det man
   tittar på, inte på sidan man står på. */
.d-lagen{
  flex:none; margin-left:auto; display:inline-flex; gap:.125rem; padding:.125rem;
  border:1px solid var(--line); border-radius:var(--radius-pill); background:var(--background);
}
.d-lagen__val{
  padding:.25rem .625rem; border:0; border-radius:var(--radius-pill);
  background:none; color:var(--muted); cursor:pointer; font:inherit; font-size:.75rem;
  font-weight:500; transition:background .15s, color .15s;
}
.d-lagen__val.is-pa{ background:var(--surface-2); color:var(--foreground) }

/* ---- själva ytan ---- */
/* Höjden räknas ur fönstret och inte ur ett fast mått: en förhandsvisning som
   slutar mitt på skärmen visar en sida ingen har. Taket finns för att en
   mycket hög skärm inte ska göra ramen till en korridor. */
.d-sajt{ width:100%; display:flex; justify-content:center }
.d-sajt__ram{
  width:100%; height:min(calc(100dvh - 12rem), 56rem); min-height:26rem;
  display:flex; flex-direction:column; overflow:hidden;
  border:1px solid var(--line); border-radius:1rem;
  background:var(--background); box-shadow:var(--shadow-card);
  transition:max-width .28s cubic-bezier(.4,0,.2,1);
}
/* Mobilläget är iPhone 12 Pro-bredd, inte "ungefär smalt": en sida som ser
   hel ut på 420 px kan vara trasig på 390. */
.d-sajt.is-mobil .d-sajt__ram{ max-width:24.375rem; border-radius:1.75rem }

/* Sparstatusen. Står mellan sökvägen och lägesknappen, tonar in och ut —
   den ska gå att se om man tittar dit och inte märkas om man inte gör det. */
.d-sajt__status{
  flex:none; font-size:.75rem; color:var(--subtle);
  opacity:0; transition:opacity .2s;
}
.d-sajt__status.is-pa{ opacity:1 }

/* Listen är LJUSARE än sidan bakom. Den bär nu något man använder — en
   sökväg man skriver i och en lägesknapp — och en rad man arbetar i ska
   ligga ovanpå, inte försvinna in i kanten. */
.d-sajt__list{
  flex:none; display:flex; align-items:center; gap:.4375rem;
  padding:.5rem .75rem; border-bottom:1px solid var(--line); background:var(--surface-2);
}
/* Brödsmulan: webbplatsen, ett snedstreck, och sökvägen som fält. Inga
   prickar framför — tre prickar är en dekoration som härmar ett fönster, och
   raden bär numera saker man använder. */
.d-sajt__brod{
  flex:1; min-width:0; display:flex; align-items:center; gap:.375rem;
  font-size:.8125rem;
}
.d-sajt__sajt{ flex:none; color:var(--muted); font-weight:500 }
.d-sajt__snet{ flex:none; color:var(--subtle) }

/* Fältet ser ut som text tills man rör det. En inramad ruta i en list hade
   sagt "formulär" om något som för det mesta bara är en upplysning. */
/* Bredden är innehållets: `size` räknas om vid varje tecken och `flex:none`
   hindrar raden från att sträcka fältet. Ett fält som är lika brett oavsett
   vad som står i det ser ut som en tom ruta bredvid ett namn. */
.d-sajt__vag{
  flex:none; width:auto; max-width:24rem;
  font:inherit; font-size:.8125rem; color:var(--foreground);
  background:none; border:1px solid transparent; border-radius:var(--radius-control);
  padding:.1875rem .375rem; outline:none;
  transition:background .15s, border-color .15s;
}

/* Startsidan står som text. Samma mått som fältet bredvid, så raden inte
   hoppar när man byter sida. */
.d-sajt__start{
  flex:none; padding:.1875rem .375rem;
  font-size:.8125rem; color:var(--foreground);
}
.d-sajt__vag:hover{ background:var(--background) }
.d-sajt__vag:focus{ background:var(--background); border-color:var(--accent) }
/* Ingen webbläsarlist i mobilläget. Tre prickar och en adressrad är en
   DATORS fönster; på en telefon finns ingen sådan, och kvar blir en ram som
   påstår fel sak om var sidan visas. */
/* Listen står kvar i mobilläget — sökvägen och lägesknappen hör till Coppla
   och inte till sidan, och det är just i mobilläget man vill kunna byta
   tillbaka. Bara webbplatsnamnet får vika: bredden är 390 px. */
.d-sajt.is-mobil .d-sajt__sajt,
.d-sajt.is-mobil .d-sajt__snet{ display:none }

/* Sidan själv. Ramen klipper hörnen, så vyn behöver varken kant eller radie
   — och en ram runt en ram hade sett ut som två fönster. */
.d-sajt__vy{ flex:1; width:100%; border:0; display:block; background:#fff }

.d-sajt--tom .d-sajt__ram{ height:auto; min-height:0 }
.d-sajt__tom{
  flex:1; display:grid; place-items:center; padding:4rem 1.5rem; text-align:center;
  border:1px dashed var(--line); border-radius:1rem; width:100%;
}
.d-sajt__tom p{ font-size:.875rem; line-height:1.6; color:var(--subtle) }
.d-sajt__not{ margin-top:1.5rem; max-width:34rem }
/* Vem som skrev. Står bredvid tiden och inte som en egen kolumn: det är en
   upplysning om raden, inte något man sorterar på. */
.d-sajt__kalla{ margin-left:.5rem; font-size:.75rem; color:var(--subtle) }

/* Vägen tillbaka står under ramarna, inte bland dem. */
.a-sajt__bort{ margin-top:2rem }

/* ------------------------------- en app --------------------------- */

.d-app{
  display:flex; flex-direction:column; align-items:center; gap:.625rem;
  text-align:center; background:none; border:none; padding:0;
}

/* Inflygningen. Ikonerna kommer in en efter en vid sidladdning och när man
   skickas hit första gången — samma rörelse som en telefon gör när den
   låser upp: brickorna reser sig och blir skarpa.

   Fördröjningen är kort (55 ms per bricka). Längre och raden blir en
   uppräkning man tvingas titta på; kortare och allt händer samtidigt, och
   då är det ingen rörelse alls utan ett hopp.

   Klassen sitter på RUTNÄTET och tas bort när rörelsen är klar — annars
   spelas den om varje gång rutnätet ritas om. */
.d-grid.is-entre .d-app{
  animation:d-app-in .48s cubic-bezier(.22,.61,.36,1) both;
  animation-delay:calc(var(--i, 0) * 55ms);
}
@keyframes d-app-in{
  from{ opacity:0; transform:translateY(.75rem) scale(.9) }
  to{ opacity:1; transform:none }
}
@media (prefers-reduced-motion:reduce){
  .d-grid.is-entre .d-app{ animation:none }
}

/* Bredden kommer från kolumnen, inte från ett mått: fyra fasta ikoner
   hade spillt utanför en telefonskärm, och taket gör att de inte heller
   blir tallrikar på en bred skärm. aspect-ratio håller dem kvadratiska
   utan att höjden behöver räknas ut. */
.d-app__ikon{
  position:relative;
  width:100%; max-width:4.5rem; aspect-ratio:1;
  display:grid; place-items:center;
  border-radius:1.375rem;                  /* ~30% — squircle utan SVG-mask */
  /* Vitt, inte grått. Tjänsternas logotyper står på vitt eftersom de är
     ritade för det, och en grå bricka bredvid en vit gjorde skrivbordet till
     två sorters appar — som om de streckritade var mindre riktiga. */
  background:var(--tile); color:var(--foreground);
  box-shadow:var(--shadow-card);
  transition:transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s, opacity .18s;
}
@media (min-width:480px){ .d-app__ikon{ max-width:5.25rem; border-radius:1.625rem } }

.d-app:hover .d-app__ikon{ transform:translateY(-3px); box-shadow:0 2px 4px rgba(17,17,16,.06), 0 16px 32px -14px rgba(17,17,16,.22) }
.d-app:active .d-app__ikon{ transform:translateY(-1px) scale(.97) }
.d-app__ikon svg{ width:1.75rem; height:1.75rem }

/* Tjänstens egen logotyp fyller ikonen i stället för ett streckglyf.

   Vit botten i BÅDA lägena, och det är undantaget som bekräftar regeln:
   logotyperna är ritade för vitt, och en PNG med hårda kanter mot en mörk
   bricka ser trasig ut. Ikonerna vi ritat själva följer med resten och
   blir mörka — de är streck i currentColor och har ingen egen färg. */
.d-app__ikon--logo{ background:#fff }
.d-app__ikon--logo img{ width:55%; height:55%; object-fit:contain }

/* UNDER DRAGNING LYFTS BRICKAN, den bleknar inte.
   Förut låg den kvar på sin plats med opacity .35 medan ingenting annat
   rörde sig — man såg att något var valt, inte vart det var på väg. Nu
   följer den pekaren, växer en aning och får en skugga som säger att den
   ligger ovanpå. De andra glider undan (FLIP i sorterbar()), och det är
   DERAS rörelse som visar var den kommer att hamna.

   `will-change` och inget mer: transformen sätts från JavaScript vid varje
   pekarrörelse, och en övergång på den hade gjort brickan efterhängsen. */
.d-app.is-lyft{
  z-index:30; cursor:grabbing; pointer-events:none;
  transition:none; will-change:transform;
}
.d-app.is-lyft .d-app__ikon{
  transform:scale(1.06);
  box-shadow:0 8px 16px -6px rgba(17,17,16,.28), 0 24px 48px -20px rgba(17,17,16,.35);
}
.d-scen.is-open .d-app.is-lyft .d-app__ikon{ transform:none }
.d-scen.is-open .d-app.is-lyft{ background:var(--surface-2); border-radius:.75rem }

/* Rutnätet under en pågående sortering: inget hovrar, inget markeras. Båda
   svarar på var pekaren är, och pekaren är upptagen med något annat. */
.d-grid.is-sorterar .d-app:hover .d-app__ikon{ transform:none }

.d-app{ cursor:grab; touch-action:manipulation }
.d-app:active{ cursor:grabbing }
.d-app--add{ cursor:pointer }

/* Ingen textmarkering medan man drar. Den vandrar med pekaren och gör
   dragningen till en blå smet — och den sitter på hela sidan, för man drar
   ofta utanför listan man drar i. */
body.sorterar{ user-select:none; -webkit-user-select:none }

.d-app__namn{
  font-size:.8125rem; font-weight:500; line-height:1.3;
  overflow-wrap:anywhere;
}

/* Pricken säger att appen behöver dig — en utgången anslutning, en
   tom obligatorisk uppgift. Siffror hör inte hit: en badge med "3" på
   ett skrivbord blir en att-göra-lista, och det är inte vad det här är. */
/* Lägg till: streckad, tom, sist. Samma mått som en app så raden inte
   hoppar till. */
.d-app--add .d-app__ikon{
  background:none; box-shadow:none;
  border:1.5px dashed var(--subtle); color:var(--muted);
}
.d-app--add:hover .d-app__ikon{ border-color:var(--foreground); color:var(--foreground) }

/* ============================== kontot =============================
   En ikon, och en meny bakom den.

   "Radera konto" stod förut framme i topbaren, en röd knapp bredvid
   "Logga ut". Två klick från att sluta för dagen till att sluta för
   gott, och skillnaden syntes bara i färgen. Nu ligger båda i samma
   meny — den som öppnar den har redan bestämt sig för att göra något
   med sitt konto. */

.d-user{ position:relative; flex:none }

/* Genomskinlig botten. En vit cirkel på grå yta är en knapp som ropar
   högre än allt annat på raden, och det här är det man trycker på minst
   ofta. Ramen räcker för att säga att den går att klicka på. */
.d-user__knapp{
  width:2.25rem; height:2.25rem; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:var(--radius-pill);
  background:transparent; color:var(--foreground);
  transition:background .2s, border-color .2s;
}
.d-user__knapp:hover,
.d-user__knapp[aria-expanded="true"]{ background:var(--surface); border-color:var(--subtle) }

.d-user__meny{
  position:absolute; top:calc(100% + .5rem); right:0; z-index:40;
  min-width:13rem; padding:.375rem;
  display:flex; flex-direction:column; gap:.125rem;
  background:var(--background); border:1px solid var(--line);
  border-radius:var(--radius-control); box-shadow:var(--shadow-card);
}

/* Adressen, inte som ett val. Den är där för att man ska kunna se
   VILKET konto man håller på att logga ut ur. */
.d-user__who{
  padding:.5rem .625rem .625rem; font-size:.75rem; color:var(--muted);
  border-bottom:1px solid var(--line); margin-bottom:.375rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.d-user__val{
  text-align:left; padding:.5rem .625rem; border-radius:.625rem;
  font-size:.8125rem; font-weight:500; transition:background .2s, color .2s;
}
.d-user__val:hover{ background:var(--surface) }
/* Samma röda som knappen bar förut. Ingen ny färg, bara en ny plats. */
.d-user__val--fara{ color:var(--danger) }
.d-user__val--fara:hover{ background:var(--danger-bg); color:var(--danger) }

/* ============================== app-sidan ==========================
   En app i taget, centrerad, med samma bredd som skrivbordet där det
   går. Fortnox och Search Console behöver mer — de får .d-page--bred. */

.d-page{ width:100%; max-width:42rem; margin-inline:auto; padding:2.5rem 1.25rem 5rem }
.d-page--bred{ max-width:58rem }
@media (min-width:640px){ .d-page{ padding-inline:2rem } }

.d-page__head{ margin-bottom:2rem }
/* Rubrik och reglage på EN rad. Hemsidan har en väljare och en lägesknapp
   som annars hade tagit en egen rad under rubriken — två centimeter av just
   den yta appen finns för. Bryter till två rader när de inte får plats. */
.d-page__head--rad{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  margin-bottom:1rem;
}
.d-page__verktyg{ flex:1; display:flex; align-items:flex-end; gap:1rem; min-width:0 }
/* Sidans namn. Ett steg upp: rubriken ska bära sidan, och på en yta som
   går ut i kanterna tappade 1.625rem greppet om den. */
.d-page__h{ font-size:1.875rem; font-weight:600; letter-spacing:-.025em; line-height:1.15 }

/* Märke, titel och kopplingens läge på EN rad. De svarar på varsin fråga man
   ställer i samma ögonblick — var är jag, och fungerar det — och två rader
   för två ord gjorde huvudet högre än det hade något att säga.

   LÄGET LIGGER TILL HÖGER, mot samma kant som innehållet under. Det satt
   tätt intill rubriken, vilket band ihop två saker som inte hör ihop: den
   ena säger vilken sida man är på, den andra om tjänsten svarar. På var
   sin sida av raden läses de som två besked i stället för ett. `auto`-
   marginalen och inte en fast bredd — då slutar etiketten exakt där kortet
   under den slutar, oavsett om sidan är 42 eller 58 rem bred. */
.d-page__titel{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap }
.d-page__titel #a-status{ display:flex; margin-left:auto }
.d-page__h{ min-width:0 }

/* Appens märke, i samma två sorter som på skrivbordet: tjänster utifrån på
   vit bricka, Copplas egna på den vanliga. Mindre än skrivbordets bricka och
   utan skugga — den ska stå bredvid rubriken, inte tävla med den. */
.d-page__ikon{
  flex:none; width:2.5rem; height:2.5rem;
  display:grid; place-items:center;
  border-radius:.8125rem;                  /* ~32%, samma squircle som brickan */
  background:var(--tile); color:var(--foreground);
}
.d-page__ikon svg{ width:1.375rem; height:1.375rem }
.d-page__ikon--logo{ background:#fff }
.d-page__ikon--logo img{ width:62%; height:62%; object-fit:contain }

/* ============================= biblioteket =========================
   Inte ett rutnät. Här VÄLJER man, och då vill man läsa vad en app gör
   innan man lägger till den — en rad med text bredvid ikonen gör det,
   en ikon med ett ord under gör det inte. */

.d-lib{ display:grid; gap:.75rem }

.d-lib__rad{
  display:flex; align-items:center; gap:1rem; width:100%; text-align:left;
  background:var(--background); border:1px solid var(--line);
  border-radius:var(--radius-card-sm); padding:1rem 1.25rem;
  transition:border-color .2s, background .2s;
}
.d-lib__rad:hover{ border-color:var(--subtle); background:var(--surface) }

.d-lib__ikon{
  width:2.75rem; height:2.75rem; flex:none; display:grid; place-items:center;
  border-radius:.875rem; background:var(--surface); color:var(--foreground);
}
.d-lib__ikon--logo{ background:#fff; border:1px solid var(--line) }
.d-lib__ikon img{ width:1.5rem; height:1.5rem; object-fit:contain }
.d-lib__ikon svg{ width:1.25rem; height:1.25rem }

/* Raden är en <button> och innehållet spans — de måste sättas i block
   uttryckligen, annars flyter namnet och beskrivningen ihop till en
   enda mening ("FortnoxKunder, fakturor och ..."). */
.d-lib__text{ min-width:0; flex:1; display:flex; flex-direction:column; gap:.2rem }
.d-lib__namn{ display:block; font-size:1rem; font-weight:600 }
.d-lib__blurb{ display:block; font-size:.8125rem; line-height:1.5; color:var(--muted) }
.d-lib__plus{ flex:none; color:var(--muted); font-size:1.25rem; line-height:1 }
.d-lib__rad:hover .d-lib__plus{ color:var(--foreground) }

.d-lib__klar{
  text-align:center; padding:3rem 1rem; color:var(--muted);
  font-size:.9375rem; line-height:1.6;
}

/* ========================== Fortnox: översikten ====================
   Siffrorna appen finns för. Medvetet få: sex tal man kan hålla i
   huvudet slår tjugo man scrollar förbi. */

.fx-kpis{
  display:grid; gap:1rem; margin-bottom:1.5rem;
  grid-template-columns:repeat(auto-fit, minmax(11rem, 1fr));
}
.fx-kpi{
  background:var(--background); border-radius:var(--radius-card-sm);
  box-shadow:var(--shadow-card); padding:1.25rem 1.375rem;
}
.fx-kpi__label{ font-size:.75rem; font-weight:500; color:var(--muted); letter-spacing:.01em }
.fx-kpi__tal{
  margin-top:.4rem; font-size:1.5rem; font-weight:600;
  letter-spacing:-.03em; line-height:1.1; font-variant-numeric:tabular-nums;
}
.fx-kpi__not{ margin-top:.3rem; font-size:.75rem; color:var(--muted) }
.fx-kpi--varning .fx-kpi__tal{ color:var(--accent) }

/* ------------------------------ stapeln --------------------------- */

.fx-diagram{
  background:var(--background); border-radius:var(--radius-card-sm);
  box-shadow:var(--shadow-card); padding:1.5rem;
}
.fx-staplar{
  display:grid; grid-template-columns:repeat(12, minmax(0,1fr));
  gap:.375rem; align-items:end; height:9rem; margin-top:1.25rem;
}
.fx-stapel{ display:flex; flex-direction:column; justify-content:flex-end; height:100%; gap:.5rem }
.fx-stapel__fyll{
  border-radius:.3125rem .3125rem .1875rem .1875rem;
  background:var(--surface-2); min-height:.1875rem;
  transition:background .2s;
}
.fx-stapel:hover .fx-stapel__fyll{ background:var(--accent) }
.fx-stapel__m{
  font-size:.625rem; color:var(--subtle); text-align:center;
  font-variant-numeric:tabular-nums;
}

/* ------------------------------- listor --------------------------- */

.fx-lista{ display:grid; gap:.5rem; margin-top:.875rem }
.fx-rad{
  display:flex; align-items:center; gap:.875rem;
  padding:.75rem .25rem; border-bottom:1px solid var(--line);
}
.fx-rad:last-child{ border-bottom:none }
.fx-rad__namn{ flex:1; min-width:0; font-size:.875rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.fx-rad__meta{ font-size:.75rem; color:var(--muted); flex:none }
.fx-rad__tal{ font-size:.875rem; font-weight:600; font-variant-numeric:tabular-nums; flex:none }
.fx-rad--sen .fx-rad__meta{ color:var(--accent); font-weight:500 }

/* Rutan som säger vad appen INTE kan visa. Den ska synas — en saknad
   kostnadssida som står i en grå fotnot läses som en detalj, och blir
   nästa gång till ett påstående om lönsamhet som ingen hade täckning
   för. */
.fx-sparr{
  margin-top:1.5rem; padding:1.125rem 1.25rem;
  border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:var(--radius-control);
  background:var(--surface); font-size:.8125rem; line-height:1.6;
}
.fx-sparr__h{ font-weight:600; margin-bottom:.25rem; font-size:.9375rem }

/* ======================== översikterna ============================
   Formen som Search Console och Analytics delar: en väljare överst,
   fyra tal som bär sin förändring, en kurva över dygnen och listor
   under. Två appar som ställer samma sorts fråga ska se likadana ut,
   och `ov-` betyder just det — översikt, inte en viss tjänst.

   Fortnox ligger kvar i sina egna `fx-`. Den räknar kronor och tolv
   månader, inte dygn och andelar, och den är redan i drift: att slå
   ihop dem hade varit en omskrivning av något som fungerar för en
   likhet som inte finns.

   Ingenting uppfinner en färg. Accenten betyder "det här drar åt fel
   håll" — inget annat, och aldrig som dekor. Grönt finns inte i
   systemet, så en förbättring får vara tyst: det är den ofta. */

.ov-topp{
  display:flex; align-items:center; gap:.875rem; flex-wrap:wrap;
  margin-bottom:1.25rem;
}
.ov-topp__namn{ font-size:1rem; font-weight:600; letter-spacing:-.01em }
.ov-topp__period{ font-size:.8125rem; color:var(--muted); margin-left:auto }

/* Realtiden i Analytics. En prick och ett tal, inte ett kort: det är en
   pågående sak och inte en mätpunkt, och den ska kunna utebli helt utan
   att lämna ett hål efter sig. Pricken pulsar för att skilja "just nu"
   från alla andra tal på sidan, som är historia. */
.ov-nu{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.75rem; font-weight:500; color:var(--muted);
}
.ov-nu::before{
  content:''; width:.4rem; height:.4rem; border-radius:50%;
  background:var(--accent); flex:none; animation:ov-puls 2.4s ease-in-out infinite;
}
@keyframes ov-puls{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }

/* Väljaren ser ut som en knapp, inte som ett formulärfält. Man byter
   egendom, man fyller inte i något. */
.ov-valj select{
  font:inherit; font-size:.9375rem; font-weight:600; letter-spacing:-.01em;
  color:inherit; background-color:var(--background);
  border:1px solid var(--line); border-radius:var(--radius-pill);
  padding:.4rem 2.25rem .4rem 1rem; cursor:pointer; appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 4.5 6 8.5 10 4.5' fill='none' stroke='%238d8d8d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-position:right .875rem center;
  background-size:.75rem; transition:border-color .2s;
}
.ov-valj select:hover{ border-color:var(--subtle) }

/* ------------------------------ nyckeltalen ---------------------- */

.ov-kpis{
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit, minmax(10rem, 1fr));
}
.ov-kpi{
  background:var(--background); border-radius:var(--radius-card-sm);
  box-shadow:var(--shadow-card); padding:1.25rem 1.375rem;
}
.ov-kpi__label{ font-size:.75rem; font-weight:500; color:var(--muted); letter-spacing:.01em }
.ov-kpi__tal{
  margin-top:.4rem; font-size:1.5rem; font-weight:600;
  letter-spacing:-.03em; line-height:1.1; font-variant-numeric:tabular-nums;
}
.ov-delta{ margin-top:.3rem; font-size:.75rem; color:var(--muted); font-variant-numeric:tabular-nums }
.ov-delta--samre{ color:var(--accent); font-weight:500 }

/* -------------------------------- korten ------------------------- */

.ov-kort{
  margin-top:1rem; background:var(--background);
  border-radius:var(--radius-card-sm); box-shadow:var(--shadow-card); padding:1.5rem;
}
.ov-kort .a-conn__note{ margin-top:.75rem }

/* Två listor bredvid varandra där det får plats. Under brytpunkten
   staplas de, och då blir de två vanliga kort i rad. */
.ov-tva{ display:grid; gap:1rem; grid-template-columns:1fr }
@media (min-width:44rem){ .ov-tva{ grid-template-columns:1fr 1fr } }
.ov-tva .ov-kort{ margin-top:1rem }

/* ------------------------------ staplarna ------------------------ */

.ov-staplar{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr);
  gap:.1875rem; align-items:end; height:7.5rem; margin-top:1.125rem;
}
.ov-stapel{ display:flex; flex-direction:column; justify-content:flex-end; height:100% }
.ov-stapel__fyll{
  border-radius:.1875rem .1875rem .0625rem .0625rem;
  background:var(--surface-2); min-height:.125rem; transition:background .2s;
}
.ov-stapel:hover .ov-stapel__fyll{ background:var(--accent) }
.ov-axel{
  display:flex; justify-content:space-between; margin-top:.5rem;
  font-size:.625rem; color:var(--subtle); font-variant-numeric:tabular-nums;
}

/* ------------------------------- listorna ------------------------ */

.ov-lista{ display:grid; gap:.25rem; margin-top:.875rem }
.ov-rad{
  display:flex; align-items:baseline; gap:.75rem;
  padding:.625rem .25rem; border-bottom:1px solid var(--line);
}
.ov-rad:last-child{ border-bottom:none }
.ov-rad__namn{
  flex:1; min-width:0; font-size:.875rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ov-rad__meta{ font-size:.6875rem; color:var(--muted); flex:none; white-space:nowrap }
.ov-rad__tal{ font-size:.875rem; font-weight:600; font-variant-numeric:tabular-nums; flex:none; min-width:2.5rem; text-align:right }
.ov-rad--fel .ov-rad__tal{ color:var(--accent) }

/* ----------------------------- inspektionen ---------------------- */

/* Utlåtandet står överst och ensamt. Det är hela svaret på frågan man
   ställde; raderna under är varför. */
.ov-utlatande{
  margin-top:1.25rem; font-size:1.125rem; font-weight:600; letter-spacing:-.02em;
  display:flex; align-items:center; gap:.5rem;
}
.ov-utlatande::before{
  content:''; width:.5rem; height:.5rem; border-radius:50%;
  background:var(--foreground); flex:none;
}
.ov-utlatande.is-fel{ color:var(--accent) }
.ov-utlatande.is-fel::before{ background:var(--accent) }

/* Löptexten i appen — fotnoten om eftersläpningen, men också felet och det
   tomma läget — står direkt mot kopplingskortet under. Utan luft läses den
   som kortets ingress i stället för som appens sista ord. */
#a-sok > .a-conn__note{ margin:.25rem .25rem 1.5rem }
.ov-fot{ margin-top:1.25rem }

.ov-kort .a-rows--kv{ margin-top:.75rem }
.ov-kort .a-orgform{ margin-top:1rem }

/* ============================== flikar =============================
   En app kan bära flera sorters innehåll. Outlook bär tre: en inkorg
   man arbetar i, en kalender man planerar i, och inställningarna för
   kopplingen. Under varandra hade mailen blivit något man scrollar
   förbi — som flikar är den det första man ser. */

.d-flikar{
  display:flex; gap:.25rem; margin-top:1.25rem;
  border-bottom:1px solid var(--line);
}
.d-flik{
  padding:.625rem .875rem; font-size:.875rem; font-weight:500;
  color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color .2s, border-color .2s;
}
.d-flik:hover{ color:var(--foreground) }
.d-flik.is-pa{ color:var(--foreground); border-bottom-color:var(--accent) }

/* En app som tar hela ytan. Tre paneler bredvid varandra får inte plats
   i de 58 rem en vanlig app-sida håller sig till. */
.d-page--full{ max-width:none }

/* ================================ mail =============================
   Tre paneler: mapparna, breven, brevet. Formen är Outlooks och Apple
   Mails för att den är inlärd — man ska inte behöva lära sig var
   någonting ligger i sin egen inkorg.

   Under 60rem finns det inte plats för tre. Då blir det en kolumn:
   mapparna överst som en rad, listan under, och brevet sist. Det är
   inte lika bekvämt, men det är läsbart — och en inkorg som kräver en
   bred skärm är en inkorg man inte kan läsa på tåget. */

.mail{
  display:grid; gap:1rem; margin-top:1.5rem;
  grid-template-columns:1fr;
  align-items:start;
}
@media (min-width:60rem){
  .mail{
    grid-template-columns:13rem minmax(18rem, 22rem) minmax(0, 1fr);
    /* Full höjd minus topbar, rubrik och flikar. Panelerna scrollar var
       för sig — en lista som tar med sig läsrutan när man bläddrar är
       en lista man tappar bort sig i. */
    height:calc(100dvh - 17rem); min-height:26rem;
  }
  .mail__sido, .mail__mitt, .mail__las{ height:100%; overflow-y:auto; overscroll-behavior:contain }
}

/* Tomma lägen och fel spänner över hela tavlan. Utan det här hamnar de i
   rutnätets första kolumn — tretton rem bred — och en mening om att det
   inte finns några adresser blir en spalt man läser i sidled. */
.mail > .a-conn__note{ grid-column:1 / -1 }

.mail__sido{ display:flex; flex-direction:column; gap:.75rem }
.mail__box{ font-size:.8125rem; font-weight:600; padding:.25rem }
/* Egen chevron, samma som översikternas väljare. Webbläsarens egen pil ser
   olika ut i varje webbläsare och i varje läge, och i mörkt läge blir den en
   svart triangel mot mörk botten. */
.mail__valj select{
  width:100%; font:inherit; font-size:.8125rem; font-weight:600; color:inherit;
  background-color:var(--background); border:1px solid var(--line);
  border-radius:var(--radius-control); padding:.5rem 2rem .5rem .75rem;
  cursor:pointer; appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 4.5 6 8.5 10 4.5' fill='none' stroke='%238d8d8d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-position:right .625rem center;
  background-size:.75rem; transition:border-color .2s;
}
.mail__valj select:hover{ border-color:var(--subtle) }
.mail__ny{ width:100% }

.mail__mappar{ display:flex; flex-direction:column; gap:.125rem }
.mail__mapp{
  display:flex; align-items:center; gap:.5rem; width:100%; text-align:left;
  padding:.5rem .625rem; border-radius:.625rem; font-size:.8125rem;
  transition:background .15s;
}
.mail__mapp:hover{ background:var(--surface-2) }
.mail__mapp.is-pa{ background:var(--background); font-weight:600; box-shadow:var(--shadow-card) }
.mail__mapp__namn{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.mail__mapp__tal{ flex:none; font-size:.6875rem; font-weight:600; color:var(--muted) }

/* ------------------------------- listan --------------------------- */

.mail__sok{ position:sticky; top:0; z-index:2; background:var(--surface); padding-bottom:.5rem }
.mail__sok input{
  width:100%; font:inherit; font-size:.8125rem; color:inherit;
  background:var(--background); border:1px solid var(--line);
  border-radius:var(--radius-control); padding:.5rem .75rem; outline:none;
}
.mail__sok input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(177,95,44,.15) }

.mail__rader{ display:flex; flex-direction:column; gap:.375rem; padding:.125rem }
.mail__rad{
  display:grid; gap:.1875rem; width:100%; text-align:left;
  grid-template-areas:"topp topp" "amne markt" "smak smak";
  grid-template-columns:minmax(0,1fr) auto;
  padding:.875rem 1rem; border-radius:var(--radius-control);
  background:var(--background); transition:box-shadow .15s;
}
.mail__rad:hover{ box-shadow:var(--shadow-card) }

/* Markeringen ligger INUTI kortet. Den var en outline, och en outline ritas
   utanför elementets ruta — i en lista som scrollar klipptes den av kanten
   och såg ut att rinna ut. En inre ram tar plats i kortet i stället, och då
   finns det ingenting att klippa. */
.mail__rad.is-pa{ box-shadow:var(--shadow-card), inset 0 0 0 1.5px var(--accent) }

.mail__rad__topp{ grid-area:topp; display:flex; align-items:baseline; gap:.5rem }
.mail__rad__fran{ flex:1; min-width:0; font-size:.8125rem; font-weight:500;
                  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.mail__rad__nar{ flex:none; font-size:.6875rem; color:var(--subtle) }
.mail__rad__amne{ grid-area:amne; font-size:.8125rem; overflow:hidden;
                  text-overflow:ellipsis; white-space:nowrap }
.mail__rad__smak{ grid-area:smak; font-size:.75rem; line-height:1.45; color:var(--muted);
                  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
                  overflow:hidden }
.mail__rad__markt{ grid-area:markt; display:flex; align-items:center; gap:.25rem; color:var(--subtle) }
.mail__flagga{ color:var(--accent); font-size:.625rem }

/* Oläst: en fetare avsändare och en prick i kanten. Inte en helt annan
   bakgrund — då blir en inkorg med tjugo olästa två listor. */
.mail__rad.is-olast .mail__rad__fran,
.mail__rad.is-olast .mail__rad__amne{ font-weight:700 }
.mail__rad.is-olast{ position:relative }
.mail__rad.is-olast::before{
  content:''; position:absolute; left:.25rem; top:.9rem;
  width:.3125rem; height:.3125rem; border-radius:50%; background:var(--accent);
}

.mail__mer{ width:100%; margin-top:.5rem }

/* ------------------------------ läsrutan -------------------------- */

.mail__las{
  background:var(--background); border-radius:var(--radius-card-sm);
  box-shadow:var(--shadow-card); padding:1.5rem; display:flex; flex-direction:column;
}
.mail__tomt{ margin:auto; color:var(--subtle); font-size:.875rem; padding:3rem 1rem; text-align:center }
.mail__tomt--stor{ max-width:34rem; line-height:1.65; color:var(--muted) }
.mail__tomt--stor p + p{ margin-top:.75rem }

.mail__huvud{ border-bottom:1px solid var(--line); padding-bottom:1rem; margin-bottom:1rem }
.mail__amne{ font-size:1.125rem; font-weight:600; letter-spacing:-.02em; line-height:1.3 }
.mail__meta{ display:flex; gap:.75rem; align-items:baseline; margin-top:.5rem; flex-wrap:wrap }
.mail__fran{ font-size:.875rem; font-weight:500 }
.mail__nar{ font-size:.75rem; color:var(--muted); margin-left:auto }
.mail__till{ margin-top:.25rem; font-size:.75rem; color:var(--muted); word-break:break-word }
.mail__akt{ display:flex; flex-wrap:wrap; gap:.375rem; margin-top:1rem }

/* Rutan om blockerade bilder. Den ska synas: en tyst blockering är en
   gåta för den som undrar var bilderna tog vägen. */
.mail__bilder{
  display:flex; align-items:center; gap:.625rem; flex-wrap:wrap;
  padding:.625rem .875rem; margin-bottom:1rem;
  border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:var(--radius-control); background:var(--surface);
  font-size:.75rem; line-height:1.5;
}

.mail__text{
  flex:1; white-space:pre-wrap; word-break:break-word;
  font:inherit; font-size:.9375rem; line-height:1.65;
}
/* Sandlådan. Ingen ram, ingen bakgrund — brevet ska se ut att ligga i
   rutan och inte i en inbäddad sida. */
/* Vit botten även i mörkt läge. Ett HTML-mejl är formgivet av avsändaren
   för vitt papper — svart text på mörk botten blir oläsligt, och att
   invertera någon annans formgivning gör den till något den inte är. */
.mail__html{ flex:1; width:100%; min-height:24rem; border:0; background:#fff;
             border-radius:var(--radius-control) }

.mail__bilagor{ margin-top:1.25rem; padding-top:1rem; border-top:1px solid var(--line) }
.mail__bilaga{
  display:flex; align-items:center; gap:.75rem; margin-top:.5rem;
  padding:.625rem .875rem; border:1px solid var(--line);
  border-radius:var(--radius-control); font-size:.8125rem;
  transition:border-color .2s, background .2s;
}
.mail__bilaga:hover{ border-color:var(--subtle); background:var(--surface) }
.mail__bilaga__namn{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.mail__bilaga__storlek{ flex:none; color:var(--muted); font-size:.75rem }

/* ----------------------------- skrivrutan ------------------------- */

.mail__skriv{ max-width:44rem; width:calc(100vw - 3rem) }
.mail__skriv textarea{
  font:inherit; font-size:.9375rem; line-height:1.6; color:inherit;
  background:var(--background); border:1px solid var(--line);
  border-radius:var(--radius-control); padding:.875rem 1rem; resize:vertical;
}
.mail__skriv textarea:focus-visible{ outline:2px solid var(--accent); outline-offset:1px }
.mail__skriv select{
  font:inherit; font-size:.9375rem; color:inherit; background:var(--background);
  border:1px solid var(--line); border-radius:var(--radius-control); padding:.75rem 1rem;
}

/* =============================== tavlan ============================
   Tre kolumner och kort man drar mellan dem. Formen är Trellos för
   att den är inlärd: en kolumn ÄR ett läge, och att flytta ett kort
   är att ändra läget.

   Kolumnerna är lika breda och scrollar var för sig. Under 52rem
   ligger de under varandra i stället — en tavla med tre kolumner på
   en telefon är tre kolumner man inte kan läsa någon av. */

.tv-topp{
  display:flex; align-items:center; gap:.875rem; flex-wrap:wrap;
  margin-top:1.5rem; margin-bottom:1rem;
}
.tv-topp .a-btn{ margin-left:auto }

.tv-tavla{ display:grid; gap:1rem; grid-template-columns:1fr; margin-top:1rem }
@media (min-width:52rem){
  .tv-tavla{
    grid-template-columns:repeat(3, minmax(0,1fr));
    align-items:start;
    height:calc(100dvh - 22rem); min-height:24rem;
  }
  .tv-kol{ height:100%; display:flex; flex-direction:column; min-height:0 }
  .tv-kol__kropp{ flex:1; overflow-y:auto; overscroll-behavior:contain }
}

.tv-kol{
  background:var(--surface-2); border-radius:var(--radius-card-sm);
  padding:.875rem; transition:background .2s, outline-color .2s;
  outline:2px solid transparent;
}
/* Kolumnen man svävar över med ett kort. Bara de kolumner som FÅR ta
   emot kortet lyser — de andra reagerar inte alls, och det är svaret
   på frågan innan man släpper. */
.tv-kol.is-over{ background:var(--surface); outline-color:var(--accent) }

.tv-kol__h{ display:flex; align-items:baseline; gap:.5rem; margin-bottom:.75rem }
.tv-kol__namn{ font-size:.8125rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase }
.tv-kol__tal{
  font-size:.6875rem; font-weight:600; color:var(--muted);
  background:var(--background); border-radius:var(--radius-pill); padding:.0625rem .4rem;
}
.tv-kol__kropp{ display:flex; flex-direction:column; gap:.625rem }
.tv-tomt{ font-size:.75rem; line-height:1.5; color:var(--subtle); padding:1rem .25rem }

/* -------------------------------- korten -------------------------- */

.tv-kort{
  background:var(--background); border-radius:var(--radius-control);
  box-shadow:var(--shadow-card); padding:.875rem;
  transition:transform .15s, box-shadow .15s, opacity .15s;
}
.tv-kort[draggable="true"]{ cursor:grab }
.tv-kort[draggable="true"]:active{ cursor:grabbing }
.tv-kort[draggable="true"]:hover{ transform:translateY(-1px) }
.tv-kort.is-dragen{ opacity:.35; box-shadow:none }

.tv-kort__text{
  font-size:.8125rem; line-height:1.55; word-break:break-word;
  display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden;
}
.tv-kort__fot{
  display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap;
  margin-top:.625rem; font-size:.6875rem; color:var(--muted);
}
.tv-kort__siffror{ white-space:nowrap }
.tv-kort__lank{ margin-left:auto; color:var(--accent); font-weight:500 }
.tv-kort__lank:hover{ text-decoration:underline }

/* Ett fel som gäller EN kolumn. Står i kolumnen, inte över tavlan: två av
   tre listor kan fungera, och en röd rad överst hade påstått motsatsen.

   Och det står som en RAD. Rutan bar förut Metas hela svar — fem stycken som
   fyllde halva kolumnen varje gång man öppnade tavlan, för ett läge som inte
   ändrar sig av att man läser om det. En kolumn utan innehåll ska se tom ut,
   inte upptagen. */
.tv-tomt--fel{
  color:var(--muted); border-left:2px solid var(--line);
  padding:.125rem 0 .125rem .625rem; line-height:1.5;
}

/* Försök igen efter ett nätverksfel. En länk och inte en knapp i fyrkant:
   den ligger mitt i en mening i en tom kolumn, och en riktig knapp där hade
   sett ut som kolumnens huvudsakliga ärende. */
.tv-igen{
  font:inherit; color:var(--foreground); background:none; border:none;
  padding:0; cursor:pointer; text-decoration:underline; text-underline-offset:2px;
}
.tv-igen:hover{ color:var(--accent) }
.tv-igen:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:.25rem }

/* Lägesknappen står bredvid kontot och är byggd av samma delar. Två runda
   knappar i rad ska vara två av samma sort — den ena byter ljus, den andra
   öppnar kontot, och ingen av dem ska se viktigare ut än den andra. */
.d-lage{ flex:none }
.d-lage:hover{ background:var(--surface-2) }

/* Kopplingens läge, som en liten knapp under rubriken.
   Ett ord och en handling. Kortet längre ned bär allt man KAN göra med en
   koppling; den här säger om den fungerar, och tar dig vidare om den inte
   gör det. Diskret med flit — en knapp som ropar lika högt som rubriken
   gör rubriken mindre. */
.d-status{
  display:inline-flex; align-items:center; gap:.4375rem;
  padding:.25rem .625rem .25rem .5rem;
  border:1px solid var(--line); border-radius:var(--radius-pill);
  background:var(--background);
  font-size:.75rem; font-weight:500; color:var(--muted);
  white-space:nowrap; transition:border-color .2s, color .2s;
}
.d-status::before{
  content:''; width:.4375rem; height:.4375rem; border-radius:50%;
  background:var(--ok); flex:none;
}
button.d-status:hover{ border-color:var(--subtle); color:var(--foreground) }

/* Behöver du göra något står det i accenten — samma färg som allt annat i
   appen som betyder "titta hit". */
.d-status--varning{ color:var(--accent); border-color:var(--accent) }
.d-status--varning::before{ background:var(--accent) }
button.d-status--varning:hover{ background:var(--accent); color:var(--on-accent) }
button.d-status--varning:hover::before{ background:var(--on-accent) }

/* Ingen nyckel i .env: det finns ingen app att fråga om samtycke, så det
   här är ett besked och inte en knapp. */
.d-status--tyst{ color:var(--subtle) }
.d-status--tyst::before{ background:var(--subtle) }

/* ============================== filerna ============================
   En lista och en smulrad. Inget rutnät med miniatyrer: filerna här är
   avtal och anteckningar, och en ikon av ett papper säger mindre om dem
   än namnet gör. Formen är en katalog man läser uppifrån och ned.

   Raderna är knappar och inte länkar. Ingen av dem leder till en adress
   — de byter innehållet i listan bredvid — och en länk som inte går att
   öppna i en ny flik är en länk som ljuger om vad den är. */

.fil{ display:flex; flex-direction:column; gap:.875rem }

.fil__topp{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
}

/* Smulraden. Roten heter "Dropbox": snedstrecket är sant men säger
   ingenting, och den som står överst står i sin Dropbox. */
.fil__smulor{ display:flex; align-items:center; gap:.375rem; flex-wrap:wrap; min-width:0 }
.fil__smula{
  font-size:.875rem; color:var(--muted); background:none; border:0; padding:0;
  transition:color .2s;
}
button.fil__smula{ cursor:pointer }
button.fil__smula:hover{ color:var(--foreground); text-decoration:underline; text-underline-offset:3px }
.fil__smula--nu{ color:var(--foreground); font-weight:500 }
.fil__pil{ color:var(--subtle); font-size:.875rem }

.fil__sok input{
  font:inherit; font-size:.875rem; color:inherit; background:var(--background);
  border:1px solid var(--line); border-radius:var(--radius-control);
  padding:.4375rem .75rem; width:13rem; outline:none;
  transition:border-color .2s;
}
.fil__sok input:focus{ border-color:var(--accent) }
.fil__sok input::placeholder{ color:var(--subtle) }

.fil__not{ font-size:.8125rem; line-height:1.6; color:var(--muted) }
.fil__not--varning{ color:var(--accent) }
.fil__tom{ padding:2rem 0; font-size:.9375rem; color:var(--muted) }

.fil__rader{ display:flex; flex-direction:column; gap:.125rem }

.fil__rad{
  display:flex; align-items:center; gap:.75rem; width:100%; text-align:left;
  padding:.625rem .75rem; border-radius:var(--radius-control);
  background:none; border:0; color:inherit;
  transition:background-color .15s;
}
button.fil__rad{ cursor:pointer }
button.fil__rad:hover{ background:var(--tint) }

/* En fil agenten inte kan läsa är fortfarande en fil den SER, och ska
   stå kvar i listan. Men den svarar inte på ett klick, och då ska den
   inte se ut att göra det. */
.fil__rad--tyst{ color:var(--muted) }

.fil__ikon{ display:flex; flex:none; color:var(--subtle) }
.fil__ikon--katalog{ color:var(--accent) }

.fil__namn{
  flex:1 1 auto; min-width:0; font-size:.9375rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.fil__meta{ flex:none; font-size:.8125rem; color:var(--muted); font-variant-numeric:tabular-nums }
.fil__las{ flex:none; font-size:.75rem; color:var(--subtle) }

@media (max-width:37.5rem){
  .fil__sok input{ width:100% }
  .fil__sok{ flex:1 1 100% }
  .fil__las{ display:none }
}

/* Filen, som text. Bredare än en vanlig ruta — en csv med åtta kolumner
   som bryts på mitten är oläsbar på ett sätt den inte är i verkligheten. */
.fil__visa{ max-width:56rem; width:calc(100vw - 3rem) }
.fil__kropp{ margin:1rem 0 }
.fil__text{
  max-height:60vh; overflow:auto; margin:0;
  padding:1rem; border:1px solid var(--line); border-radius:var(--radius-card-sm);
  background:var(--code-bg); color:var(--code-fg);
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.8125rem; line-height:1.6;
  white-space:pre-wrap; overflow-wrap:anywhere;
}

/* =========================== publiceringar =========================
   Redigeraren och kanalerna. Formen är ett formulär och inte en
   förhandsvisning av inlägget: en attrapp av Instagram inne i Coppla
   är en bild av något som inte är sant än, och den som litar på den
   får en överraskning i den riktiga appen. Bilden visas i sitt format,
   texten i sitt fält, och hur det ser ut hos Meta får Meta visa. */

/* ------------------------------- kanalerna ------------------------- */

.soc-kanalkort{ display:grid; gap:.75rem }
.soc-konto{
  background:var(--background); border:1px solid var(--line);
  border-radius:var(--radius-card-sm); padding:1rem 1.25rem;
}
.soc-konto__rad{
  display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
  padding:.4375rem 0;
}
.soc-konto__k{ flex:none; width:6rem; font-size:.8125rem; color:var(--muted) }
.soc-konto__v{ flex:1 1 auto; min-width:0; font-size:.9375rem; font-weight:500 }
.soc-konto__v--av{ font-weight:400; color:var(--subtle) }
.soc-konto__not{ margin-top:.625rem; font-size:.8125rem; line-height:1.6; color:var(--muted) }

.soc-ratt{
  flex:none; font-size:.75rem; color:var(--subtle);
  border:1px solid var(--line); border-radius:var(--radius-pill);
  padding:.125rem .5rem;
}
.soc-ratt--ja{ color:var(--ok); border-color:var(--ok) }

/* ------------------------------ redigeraren ------------------------ */

.soc-red{ max-width:42rem; width:calc(100vw - 3rem) }
.soc-form{ display:flex; flex-direction:column; gap:1.25rem }
.soc-falt{ display:flex; flex-direction:column; gap:.625rem }
.soc-etikett{
  font-size:.75rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted);
}

.soc-kanaler{ display:flex; gap:.75rem; flex-wrap:wrap }
.soc-kanal{
  display:flex; align-items:center; gap:.5rem; cursor:pointer;
  border:1px solid var(--line); border-radius:var(--radius-control);
  padding:.5rem .875rem; font-size:.9375rem;
  transition:border-color .2s;
}
.soc-kanal:hover{ border-color:var(--subtle) }
/* En kanal kopplingen inte får publicera på är kvar men klickas inte i.
   Att dölja den hade gjort frånvaron till en gåta. */
.soc-kanal.is-last{ cursor:default; color:var(--muted) }
.soc-kanal.is-last:hover{ border-color:var(--line) }
.soc-kanal__not{ font-size:.75rem; color:var(--subtle) }

.soc-format{ display:flex; gap:.75rem; flex-wrap:wrap }
.soc-fmt{
  display:flex; flex-direction:column; align-items:center; gap:.375rem;
  cursor:pointer; padding:.75rem; min-width:6rem;
  border:1px solid var(--line); border-radius:var(--radius-control);
  transition:border-color .2s, background-color .2s;
}
.soc-fmt:hover{ border-color:var(--subtle) }
.soc-fmt:has(input:checked){ border-color:var(--accent); background:var(--tint) }
.soc-fmt input{ position:absolute; opacity:0; pointer-events:none }
/* Rutan HAR formatets kvot. Ett namn som "Stående 4:5" säger vad det
   heter; rutan säger vad det är. */
.soc-fmt__ruta{
  width:2.25rem; background:var(--surface-2);
  border-radius:.25rem; border:1px solid var(--line);
}
.soc-fmt__namn{ font-size:.8125rem; font-weight:500 }
.soc-fmt__not{ font-size:.6875rem; color:var(--subtle) }

.soc-bild{ display:flex; gap:1rem; align-items:flex-start; flex-wrap:wrap }
.soc-bild__ruta{
  flex:none; width:8rem; min-height:8rem;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--radius-card-sm);
}
.soc-bild__ruta img{ display:block; width:100%; height:auto }
.soc-bild__tom{ font-size:.8125rem; color:var(--subtle); text-align:center; padding:1rem }
.soc-bild__val{ flex:1 1 12rem; display:flex; flex-direction:column; gap:.625rem }
.soc-hjalp{ font-size:.8125rem; line-height:1.6; color:var(--muted) }

.soc-lank[hidden]{ display:none }

/* ------------------------------ korten ----------------------------- */

.tv-kort__bild{
  display:block; width:100%; height:auto; margin-bottom:.625rem;
  border-radius:var(--radius-control);
}
.tv-kort__taggar{ display:flex; gap:.375rem; flex-wrap:wrap; margin-top:.5rem }
.tv-tagg{
  font-size:.6875rem; font-weight:500; letter-spacing:.02em;
  border:1px solid var(--line); border-radius:var(--radius-pill);
  padding:.0625rem .4375rem; color:var(--muted);
}
.tv-tagg--facebook{ color:#0866ff; border-color:rgba(8,102,255,.35) }
.tv-tagg--instagram{ color:#c13584; border-color:rgba(193,53,132,.35) }
/* En publicering utan bild går inte att lägga ut. Det står på kortet och
   inte först vid klicket. */
.tv-tagg--saknas{ color:var(--accent); border-color:var(--accent) }
.tv-kort__fel{ margin-top:.5rem; font-size:.75rem; line-height:1.45; color:var(--accent); word-break:break-word }

button.tv-kort__lank{ background:none; border:0; padding:0; cursor:pointer }

/* ========================= projekt och medarbetare =================
   Väljaren i topbaren och rutan där bemanningen sköts. */

.d-proj{ position:relative; display:inline-flex }
.d-proj__knapp{
  display:flex; align-items:center; justify-content:center;
  width:1.5rem; height:1.5rem; margin-left:.125rem;
  border-radius:var(--radius-control); background:none; border:0;
  color:var(--subtle); cursor:pointer; transition:color .2s, background-color .2s;
}
.d-proj__knapp:hover{ color:var(--foreground); background:var(--tint) }
.d-proj__meny{
  position:absolute; top:calc(100% + .5rem); left:0; z-index:40;
  min-width:13rem; padding:.3125rem;
  background:var(--background); border:1px solid var(--line);
  border-radius:var(--radius-card-sm); box-shadow:var(--shadow-card);
}
.d-proj__meny[hidden]{ display:none }
.d-proj__val{
  display:block; width:100%; text-align:left;
  padding:.5rem .625rem; border-radius:var(--radius-control);
  background:none; border:0; font:inherit; font-size:.875rem; color:inherit;
  cursor:pointer; transition:background-color .15s;
}
.d-proj__val:hover{ background:var(--tint) }
.d-proj__val.is-pa{ font-weight:600 }

.proj-ruta{ max-width:40rem; width:calc(100vw - 3rem) }
.proj-namn{ display:flex; gap:.75rem; align-items:flex-end; margin-bottom:1.25rem }
.proj-namn .auth__field{ flex:1 1 auto }

.proj-mina{ display:flex; flex-direction:column; gap:.375rem; margin-bottom:.5rem }
.proj-mina__lista{ font-size:.875rem; line-height:1.6; color:var(--muted) }

.proj-lista{ display:flex; flex-direction:column; gap:.375rem; margin-bottom:1.25rem }
.proj-rad{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  flex-wrap:wrap;
  padding:.75rem 1rem; background:var(--background);
  border:1px solid var(--line); border-radius:var(--radius-card-sm);
}
.proj-rad__vem{ display:flex; flex-direction:column; gap:.125rem; min-width:0 }
.proj-rad__epost{ font-size:.9375rem; font-weight:500; word-break:break-word }
.proj-rad__epost em{ font-style:normal; color:var(--subtle); font-weight:400 }
.proj-rad__roll{ font-size:.8125rem; color:var(--muted) }
.proj-rad__gor{ display:flex; gap:.375rem; flex:none }
/* Ägaren går inte att ändra här, och raden ska se ut som den beter sig. */
.proj-rad__last{ flex:none; font-size:.8125rem; color:var(--subtle) }

.proj-ny{ display:flex; gap:.75rem; align-items:flex-end }
.proj-ny .auth__field{ flex:1 1 auto }

.proj-appar{
  display:grid; gap:.375rem;
  grid-template-columns:repeat(auto-fill, minmax(11rem, 1fr));
}
.proj-app{
  display:flex; align-items:center; gap:.5rem; cursor:pointer;
  padding:.4375rem .625rem; font-size:.875rem;
  border:1px solid var(--line); border-radius:var(--radius-control);
  transition:border-color .2s;
}
.proj-app:hover{ border-color:var(--subtle) }
/* Rollen bestämmer, inte kryssen. Släckt och inte dolt: den som undrar vad
   en administratör når ska se listan, inte gissa. */
#a-appval.is-av{ opacity:.5 }
#a-appval.is-av .proj-app{ cursor:default }
#a-appval.is-av .proj-app:hover{ border-color:var(--line) }

/* Koden i inloggningen. Glesa siffror läses av som siffror. */
.auth__kod{
  font-size:1.5rem !important; letter-spacing:.35em; text-align:center;
  font-variant-numeric:tabular-nums;
}
.auth__kod::placeholder{ letter-spacing:.35em; color:var(--subtle) }

/* ============================== laddaren ===========================
   En ring och en rad text. Ringen är en cirkel med en lucka som
   roterar — inte en punktrad, inte en stapel. En stapel lovar en
   procentsats vi inte har, och punkter som blinkar drar blicken till
   sig med jämna mellanrum. */

.ldr{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1rem; padding:2.5rem 1rem; text-align:center;
}
.ldr--liten{ padding:1.25rem 1rem; gap:.75rem }

.ldr__ring{
  width:2rem; height:2rem; border-radius:50%;
  /* Tre fjärdedelar i linjefärgen och en i accenten: luckan syns som
     rörelse i stället för som ett hopp. */
  border:2px solid var(--line);
  border-top-color:var(--accent);
  animation:ldr-snurr .85s linear infinite;
}
.ldr--liten .ldr__ring{ width:1.25rem; height:1.25rem; border-width:1.5px }

@keyframes ldr-snurr{ to{ transform:rotate(360deg) } }

/* Texten skimrar. Ett ljus sveper genom bokstäverna i stället för att
   hela raden tonar upp och ned — samma sak som säger "det pågår" utan
   att texten någonsin blir oläslig. */
.ldr__text{
  font-size:.9375rem; font-weight:500; letter-spacing:-.01em;
  background:linear-gradient(90deg,
    var(--muted) 0%, var(--muted) 35%,
    var(--foreground) 50%,
    var(--muted) 65%, var(--muted) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  animation:ldr-skimmer 2.1s ease-in-out infinite;
  transition:opacity .22s ease, transform .22s ease;
}
.ldr__text.is-ut{ opacity:0; transform:translateY(4px) }

@keyframes ldr-skimmer{
  0%   { background-position:120% 0 }
  100% { background-position:-20% 0 }
}

/* Rörelse är en upplysning här, inte utsmyckning — men den som bett om
   mindre rörelse ska få mindre. Ringen snurrar långsammare och texten
   står stilla i full kontrast. */
@media (prefers-reduced-motion:reduce){
  .ldr__ring{ animation-duration:2.4s }
  .ldr__text{
    animation:none; background:none; color:var(--foreground);
    -webkit-text-fill-color:currentColor;
  }
}

/* ======================== agentens rättigheter ===================== */

.ratt__lead{ margin-bottom:1.25rem }
/* EN LISTA, INTE NIO KORT. Varje rad låg i en egen ruta med kant, botten och
   radie — och nio rutor under varandra läses som nio saker att öppna, inte
   som en lista att gå igenom. Raderna hör ihop: det är samma fråga ställd om
   och om igen. En hårfin linje räcker för att skilja dem åt.

   Ingen linje över den första och ingen under den sista: en list som ramar in
   sig själv är en ruta igen. */
.ratt{ display:flex; flex-direction:column; margin-bottom:1.5rem }
.ratt__rad{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  flex-wrap:wrap;
  padding:.875rem 0;
  border-top:1px solid var(--line);
}
.ratt__rad:first-child{ border-top:0 }
.ratt__vem{ display:flex; flex-direction:column; gap:.125rem; min-width:0 }
.ratt__namn{ font-size:.9375rem; font-weight:500 }
.ratt__antal{ font-size:.8125rem; color:var(--muted) }

.ratt__val{ display:flex; gap:.375rem; flex:none; flex-wrap:wrap }
.ratt__lage{
  display:flex; align-items:center; gap:.4375rem; cursor:pointer;
  padding:.375rem .75rem; font-size:.8125rem;
  border:1px solid var(--line); border-radius:var(--radius-pill);
  transition:border-color .2s, background-color .2s;
}
.ratt__lage:hover{ border-color:var(--subtle) }
.ratt__lage:has(input:checked){ border-color:var(--accent); background:var(--tint); font-weight:500 }
/* Ett läge utan verktyg bakom sig. Ritas men går inte att välja — att dölja
   det hade fått raderna att se olika ut utan att säga varför. */
.ratt__lage.is-dott{ opacity:.4; cursor:default }
.ratt__lage.is-dott:hover{ border-color:var(--line) }
.ratt__lage input{ margin:0 }

@media (max-width:37.5rem){
  .ratt__val{ flex:1 1 100% }
}

/* ------------------------------- Claude ---------------------------------
   Samma höjdmått som hemsidans ram: en chatt och en förhandsvisning är båda
   ytor man vill ha så stora som skärmen tillåter, och två appar som räknar
   höjd olika hoppar när man byter mellan dem. */
.a-cl{
  display:flex; flex-direction:column; gap:.75rem;
  height:min(calc(100dvh - 12rem), 56rem); min-height:26rem;
}

.a-cl__rulle{
  flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  display:flex; flex-direction:column; gap:1.25rem;
  padding:.25rem .25rem 1rem;
}

.a-cl__start{
  margin:auto; max-width:30rem; text-align:center;
  font-size:.875rem; line-height:1.6; color:var(--subtle);
}

/* Du till höger i en bubbla, Claude till vänster utan. Asymmetrin är
   avsiktlig: det egna är kort och avgränsat, svaret är långt och ska läsas
   som text på en sida — en pratbubbla runt fyrtio rader är en vägg. */
.a-cl__m{ display:flex; flex-direction:column; gap:.5rem; max-width:52rem }
.a-cl__m--du{
  align-self:flex-end; align-items:flex-end; max-width:min(85%, 40rem);
}
.a-cl__m--du .a-cl__text{
  padding:.625rem .875rem; border-radius:1rem 1rem .25rem 1rem;
  background:var(--surface-2, var(--surface)); border:1px solid var(--line);
}
.a-cl__m--ai{ align-self:stretch }

.a-cl__text{ font-size:.9375rem; line-height:1.65; overflow-wrap:anywhere }
.a-cl__text > :first-child{ margin-top:0 }
.a-cl__text h3, .a-cl__text h4, .a-cl__text h5, .a-cl__text h6{
  margin:1.25rem 0 .375rem; font-size:.9375rem; font-weight:600;
}
/* list-style uttryckligen: appens reset nollar punkterna överallt, och en
   punktlista utan punkter är bara indragna rader. */
.a-cl__text ul{ margin:.5rem 0; padding-left:1.25rem; list-style:disc }
.a-cl__text ol{ margin:.5rem 0; padding-left:1.5rem; list-style:decimal }
.a-cl__text li{ margin:.25rem 0 }
.a-cl__text p{ margin:.625rem 0 }
.a-cl__text > :last-child{ margin-bottom:0 }
.a-cl__text strong{ font-weight:600 }
.a-cl__text a{ text-decoration:underline; text-underline-offset:2px }
.a-cl__text hr{ margin:1rem 0; border:0; border-top:1px solid var(--line) }
.a-cl__text blockquote{
  margin:.625rem 0; padding:.125rem 0 .125rem .875rem;
  border-left:3px solid var(--line); color:var(--muted, inherit);
}
/* Tabellen rullar i sidled i sitt eget skal; chatten ska aldrig bli bredare
   än fönstret för att en faktura har ett långt kundnamn. */
.a-cl__tabell{
  margin:.75rem 0; overflow-x:auto;
  border:1px solid var(--line); border-radius:var(--radius-control, .5rem);
}
.a-cl__tabell table{ width:100%; border-collapse:collapse; font-size:.875rem; line-height:1.45 }
.a-cl__tabell th, .a-cl__tabell td{
  padding:.5rem .75rem; text-align:left; white-space:nowrap;
  border-bottom:1px solid var(--line); overflow-wrap:normal;
}
.a-cl__tabell th{ font-weight:600; background:var(--surface) }
.a-cl__tabell tbody tr:last-child td{ border-bottom:0 }
.a-cl__tabell td{ font-variant-numeric:tabular-nums }
.a-cl__text code{
  padding:.0625rem .25rem; border-radius:.25rem;
  background:var(--surface); font-size:.875em;
}
.a-cl__kod{
  margin:.625rem 0; padding:.75rem .875rem; overflow-x:auto;
  border:1px solid var(--line); border-radius:var(--radius-control);
  background:var(--surface); font-size:.8125rem; line-height:1.5;
}

/* Statusraden medan turen går. Ersätts av texten så fort den börjar komma. */
.a-cl__status{ font-size:.8125rem; color:var(--subtle) }

/* Verktygsanropen ligger på rad och bryter ned när de inte får plats. Tio
   anrop är tio piller, inte tio rader. */
.a-cl__vrad{ display:flex; flex-wrap:wrap; gap:.375rem; align-items:flex-start }

/* Ett verktygsanrop. Hopfällt, låg vikt — det är en fotnot till svaret och
   inte svaret. */
.a-cl__v{ flex:0 0 auto; max-width:100% }
.a-cl__v.is-oppen{ flex-basis:100% }
.a-cl__vnamn{
  display:inline-flex; align-items:center; gap:.375rem;
  padding:.25rem .5rem; border:1px solid var(--line);
  border-radius:999px; background:none; color:var(--muted);
  font:inherit; font-size:.75rem; cursor:pointer;
}
.a-cl__vnamn:hover{ color:var(--foreground); border-color:var(--muted) }
.a-cl__vnamn code{ font-size:.75rem }
.a-cl__v.is-fel .a-cl__vnamn{ color:var(--danger, #e5484d); border-color:currentColor }
.a-cl__v.is-vantar .a-cl__vnamn{ color:var(--accent); border-color:currentColor }
.a-cl__vdet{ margin-top:.375rem }
.a-cl__vdet pre{
  margin:.25rem 0; padding:.5rem .625rem; overflow-x:auto; max-height:18rem;
  border:1px solid var(--line); border-radius:var(--radius-control);
  background:var(--surface); font-size:.75rem; line-height:1.5;
}
.a-cl__vsvar{ color:var(--muted) }

/* Frågan innan något skrivs. Den ska gå att se utan att leta: en ram i
   accentfärg, och knapparna intill det de gäller. */
.a-cl__fraga{
  align-self:stretch; padding:.875rem 1rem;
  border:1px solid var(--accent); border-radius:1rem; background:var(--tint);
}
.a-cl__fragah{ font-size:.875rem; font-weight:600; margin-bottom:.625rem }
.a-cl__rad + .a-cl__rad{ margin-top:.75rem; padding-top:.75rem; border-top:1px solid var(--line) }
.a-cl__rad{ display:grid; grid-template-columns:1fr auto; gap:.5rem; align-items:center }
.a-cl__rad code{ font-size:.8125rem; word-break:break-all }
.a-cl__radakt{ display:flex; gap:.375rem }
.a-cl__rad pre{
  grid-column:1 / -1; margin:0; padding:.5rem .625rem; overflow-x:auto; max-height:12rem;
  border-radius:var(--radius-control); background:var(--background);
  font-size:.75rem; line-height:1.5;
}

/* Skrivrutan. Pilen ligger INUTI fältet, som i login — samma form två gånger
   i samma app ska se likadan ut. */
.a-cl__skriv{
  flex:none; position:relative; display:flex; align-items:flex-end;
  border:1px solid var(--line); border-radius:1.25rem;
  background:var(--background); padding:.5rem .5rem .5rem 1rem;
  transition:border-color .15s;
}
.a-cl__skriv:focus-within{ border-color:var(--accent) }
.a-cl__skriv textarea{
  flex:1; min-width:0; resize:none; border:0; outline:none; background:none;
  font:inherit; font-size:.9375rem; line-height:1.6; color:var(--foreground);
  max-height:15rem; padding:.375rem 0;
}
.a-cl__skriv textarea::placeholder{ color:var(--subtle) }
.a-cl__skicka{
  flex:none; display:grid; place-items:center; width:2rem; height:2rem;
  border:0; border-radius:999px; cursor:pointer;
  background:var(--foreground); color:var(--background);
}
.a-cl__skicka:hover{ opacity:.85 }
/* Medan turen går är fältet låst. Att kunna skriva ett andra meddelande in i
   en pågående tur ger Anthropic en meddelandelista de nekar. */
.a-cl__skriv.is-vantar{ opacity:.55; pointer-events:none }

.a-cl__tom{
  max-width:34rem; margin:3rem auto; text-align:center;
}
.a-cl__tom p{ font-size:.9375rem; line-height:1.6; color:var(--muted); margin-bottom:1.25rem }
.a-cl__tom .a-conn__acts{ justify-content:center }

@media (max-width:40rem){
  .a-cl{ height:calc(100dvh - 14rem) }
  .a-cl__rad{ grid-template-columns:1fr }
  .a-cl__radakt{ justify-content:flex-start }
}

/* Förbrukningen i toppraden. Dämpad — den ska gå att se, inte läsas. */
.a-cl__bruk{
  flex:none; font-size:.75rem; color:var(--subtle);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
@media (max-width:48rem){ .a-cl__bruk{ display:none } }

/* ----------------------------- Artefakter -------------------------------
   En lista och inte ett rutnät av kort. Det man väljer på är namnet, och tolv
   kort med samma grå platshållare hade gjort tolv olika texter till tolv
   likadana rutor. */
.a-art__antal{ font-size:.8125rem; color:var(--subtle) }

.a-art__lista{ display:flex; flex-direction:column; margin-top:.5rem }
.a-art__lista li + li{ border-top:1px solid var(--line) }

.a-art__rad{
  display:grid; width:100%; align-items:baseline; gap:.75rem;
  grid-template-columns:1fr 7rem 5rem 8rem;
  padding:.875rem .5rem; border:0; background:none; cursor:pointer;
  font:inherit; text-align:left; color:var(--foreground);
  border-radius:var(--radius-control);
  transition:background .12s;
}
.a-art__rad:hover{ background:var(--surface) }
.a-art__rad:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px }

.a-art__namn{ font-size:.9375rem; font-weight:500; overflow-wrap:anywhere }
.a-art__sort,
.a-art__storlek,
.a-art__nar{ font-size:.8125rem; color:var(--subtle); white-space:nowrap }
.a-art__storlek{ text-align:right; font-variant-numeric:tabular-nums }

.a-art__tomt{
  margin:3rem auto; max-width:32rem; text-align:center;
  font-size:.9375rem; line-height:1.6; color:var(--subtle);
}
.a-art__tomt code{ font-size:.875em }

/* Tillbakaknappen först i raden. Den som öppnat något ska aldrig behöva leta
   efter vägen ut. */
.a-art__tillbaka{
  flex:none; display:grid; place-items:center; width:2rem; height:2rem;
  border:1px solid var(--line); border-radius:999px;
  background:none; color:var(--foreground); cursor:pointer;
}
.a-art__tillbaka:hover{ background:var(--surface) }
.a-art__rubrik{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.a-art__meta{ font-size:.75rem; color:var(--subtle); white-space:nowrap }

/* Samma höjdmått som Webb och Claude. Tre appar som fyller skärmen ska inte
   räkna höjd på tre sätt — det syns som ett hopp när man byter mellan dem. */
.a-art__ram{
  width:100%; height:min(calc(100dvh - 12rem), 56rem); min-height:26rem;
  display:flex; flex-direction:column; overflow:hidden;
  border:1px solid var(--line); border-radius:1rem;
  background:var(--background); box-shadow:var(--shadow-card);
}
.a-art__vy{ flex:1; width:100%; border:0; display:block; background:#fff }

/* Text och markdown visas som de står. En läsvy och inte en rendering: det
   som är ett utkast ska gå att läsa ord för ord. */
.a-art__ram--text{ background:var(--surface) }
.a-art__text{
  flex:1; margin:0; padding:1.5rem; overflow:auto;
  white-space:pre-wrap; overflow-wrap:anywhere;
  font-size:.875rem; line-height:1.7;
}

@media (max-width:48rem){
  .a-art__rad{ grid-template-columns:1fr auto; gap:.25rem .75rem }
  .a-art__sort{ display:none }
  .a-art__storlek{ grid-row:2; grid-column:1; text-align:left }
  .a-art__nar{ grid-row:2; grid-column:2 }
  .a-art__meta{ display:none }
}