/* =========================================================
   COPPLA: appens ram.

   Topbar, innehållsyta och den tomma dashboarden. Bygger på
   style.css. Här finns avsiktligt lite: dashboarden är tom och
   ska vara lätt att bygga vidare i.
   ========================================================= */

.a-body{ background:var(--surface); min-height:100dvh }

/* Appens botten går svartare än ytorna i mörkt läge. --surface är nästan
   samma ton som korten, och då ligger de I bakgrunden i stället för att
   lyfta från den. Ljust läge rör vi inte: där gör en svart botten tvärtom.

   Samma två selektorer som i style.css — mediafrågan för systemets val,
   data-theme för knappen i topbaren, och :not([data-theme="light"]) så att
   ett eget ljust val vinner över en dator som står i mörkt. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .a-body{ background:#010101 }
}
:root[data-theme="dark"] .a-body{ background:#010101 }
.a-main{ min-height:100dvh; padding-bottom:4rem }
/* Inloggningen tar hela skärmen och har varken topbar eller bottenluft. */
.a-main--auth{ padding-bottom:0; background:var(--background) }

.a-shell{ width:100%; max-width:var(--container); margin-inline:auto; padding:2rem 1.25rem }
@media (min-width:640px){ .a-shell{ padding:2.5rem 2rem } }

/* ============================== topbar =============================
   Ingen list, ingen kant, ingen vit botten. Baren var en vit remsa med
   en linje under och två knappar till höger, och den remsan ritade en
   ram runt något som inte behövde ramas in: projektnamnet och kontot
   är inte ett verktygsfält, de är två märken i marginalen.

   Den sitter inte heller fast längre. En genomskinlig bar som ligger
   kvar överst får korten att glida under texten när man scrollar, och
   valet står mellan en vit remsa igen eller att låta baren rulla bort
   med resten. Den rullar bort. Innehållet är det som ska synas. */
.a-top{ background:transparent }

/* Hela bredden, alltid.
   Raden följde ett tag bredden på innehållet under: domänen i linje med
   första appen, kontoikonen med den sista. Det lät prydligt och såg trångt
   ut — två små saker mitt på en tom rad, med luft på båda sidor som inte
   hörde ihop med något. Ytterkanterna är där raden hör hemma: domänen
   längst till vänster, kontot längst till höger, och inget att linjera mot. */
.a-top__in{
  width:100%; max-width:none;
  display:flex; align-items:center; gap:1rem;
  padding:.875rem 1.25rem; min-height:3.75rem;
}
/* Raden går närmare kanten än sidans innehåll gör. Tillbaka-pilen är en
   pil TILLBAKA — den ska sitta i kanten man är på väg mot, inte i linje
   med en textspalt. */
@media (min-width:640px){ .a-top__in{ padding-inline:1.25rem } }
.a-top__brand{ display:inline-flex; align-items:center; gap:.5rem; margin-right:auto }

/* ============================== sidhuvud =========================== */
.a-page-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; margin-bottom:1.75rem;
}
.a-h1{ font-size:1.75rem; font-weight:600; letter-spacing:-.025em; line-height:1.15 }
.a-sub{ margin-top:.4rem; font-size:.9375rem; line-height:1.6; color:var(--muted) }

/* =============================== kort ============================== */
.a-card{
  background:var(--background); border-radius:var(--radius-card-sm);
  box-shadow:var(--shadow-card); padding:1.5rem;
}
.a-grid{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr)) }

/* Den streckade rutan säger "här kommer något", vilket ett tomt vitt kort
   inte gör: det ser ut som att något gått sönder. */
.a-empty{
  display:grid; place-items:center; text-align:center; gap:.5rem;
  padding:4rem 1.5rem; border:1px dashed var(--line);
  border-radius:var(--radius-card-sm); background:var(--background);
}
.a-empty h2{ font-size:1.125rem; font-weight:600; letter-spacing:-.01em }
.a-empty p{ max-width:38ch; font-size:.9375rem; line-height:1.6; color:var(--muted) }

.a-noscript{ max-width:34rem; margin:4rem auto; text-align:center }
.a-noscript h1{ font-size:1.5rem; font-weight:600; margin-bottom:.75rem }
.a-noscript p{ font-size:.9375rem; line-height:1.65; color:var(--muted) }

/* ============================== banner =============================
   Fel och kvitton. Ligger fast över innehållet, aldrig alert(). */
.a-banners{ position:fixed; z-index:60; top:1rem; left:50%; transform:translateX(-50%);
            width:min(30rem, calc(100vw - 2rem)) }
.a-banner{
  display:flex; align-items:center; gap:.75rem;
  padding:.75rem 1rem; border-radius:var(--radius-control);
  font-size:.875rem; line-height:1.5; color:#fff; background:var(--ink);
  box-shadow:0 10px 30px -12px rgba(17,17,16,.4);
  animation:a-banner-in .3s cubic-bezier(.16,1,.3,1) both;
}
.a-banner span{ flex:1 }
.a-banner--error{ background:#8e2f2f }
.a-banner--ok{ background:#2f6b4a }
.a-banner--info{ background:var(--ink); color:var(--on-ink) }
.a-banner__x{ flex:none; font-size:1rem; line-height:1; color:inherit; opacity:.7 }
.a-banner__x:hover{ opacity:1 }
@keyframes a-banner-in{ from{ opacity:0; transform:translateY(-8px) } to{ opacity:1; transform:none } }

/* ============================= skelett =============================
   Platshållare medan /api/auth.php?do=me svarar. Utan den blinkar
   inloggningsrutan till för den som redan är inloggad. */
.a-boot{ display:grid; place-items:center; min-height:100dvh }
.a-boot__spin{
  width:1.5rem; height:1.5rem; border-radius:50%;
  border:2px solid var(--line); border-top-color:var(--accent);
  animation:pill-spin .7s linear infinite;
}


/* ============================ kopplingar ===========================
   Ett kort per tjänst. Kortet finns även för det som INTE är anslutet:
   listan är en katalog över vad som går att koppla in, inte en lista
   över vad som råkar vara inkopplat. */
.a-page-head--sub{ margin-top:3rem }
.a-h2{ font-size:1.25rem; font-weight:600; letter-spacing:-.02em }

.a-conn{
  display:flex; flex-direction:column; gap:1rem;
  background:var(--background); border-radius:var(--radius-card-sm);
  box-shadow:var(--shadow-card); padding:1.5rem;
  /* Den anslutna får en accentkant till vänster. Färg ensam räcker inte som
     skillnad, så statusmärket bär samma besked i text. */
  border-left:3px solid transparent;
}
.a-conn.is-on{ border-left-color:var(--accent) }
.a-conn__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem }
.a-conn__name{ font-size:1.0625rem; font-weight:600; letter-spacing:-.01em }
.a-conn__blurb{ margin-top:.3rem; font-size:.875rem; line-height:1.55; color:var(--muted) }
.a-conn__tools{ font-size:.8125rem; color:var(--subtle) }
.a-conn__note{ font-size:.8125rem; line-height:1.6; color:var(--muted) }
/* Tomt urval betyder ALLT. Den omkastningen får inte se ut som en
   upplysning i grått bland andra upplysningar i grått. */
.a-conn__note--varning{ color:var(--foreground); font-weight:500 }
.a-conn__meta{
  display:flex; flex-wrap:wrap; gap:.25rem 1rem;
  font-size:.8125rem; color:var(--muted);
  padding-top:.25rem; border-top:1px solid var(--line);
}
.a-conn__acts{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:auto; padding-top:.25rem }

/* Statusmärket. Bär sitt besked i text, inte bara i färg. */
.a-pill{
  flex:none; border-radius:var(--radius-pill); padding:.25rem .625rem;
  font-size:.6875rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
}
.a-pill--ok{ background:var(--ok-bg); color:var(--ok) }
.a-pill--warn{ background:var(--warn-bg); color:var(--warn) }

/* ============================== knappar ============================ */
.a-btn{
  border:1px solid var(--line); border-radius:var(--radius-pill);
  padding:.5rem 1.125rem; font-size:.8125rem; font-weight:500;
  background:var(--background); color:var(--foreground);
  transition:background .2s, border-color .2s, color .2s;
}
.a-btn:hover{ background:var(--surface); border-color:var(--subtle) }
.a-btn--dark{ background:var(--ink); border-color:var(--ink); color:var(--on-ink) }
.a-btn--dark:hover{ background:var(--accent); border-color:var(--accent); color:var(--on-accent) }
.a-btn--sm{ padding:.3rem .75rem; font-size:.75rem }
/* Utan kant. För det som är att AVSTÅ eller att ta bort något man själv lagt
   till — en knapp med kant bredvid en mörk knapp läser som ett andra förslag,
   och det är sällan vad den är. */
.a-btn--tyst{ border-color:transparent; background:none }
.a-btn--tyst:hover{ background:var(--surface-2) }

/* Det som tar bort något. Diskret tills man rör den: en röd knapp som skriker
   hela tiden slutar man se, och då säger färgen ingenting när det gäller. */
.a-btn--fara{ color:var(--danger); border-color:var(--line) }
.a-btn--fara:hover{ background:var(--danger); border-color:var(--danger); color:#fff }

/* ============================ skrivspärren =========================
   Egen ruta med egen förklaring, och avsiktligt inte bland knapparna:
   ingen ska slå på skrivrätt när de menade att trycka på något annat. */
.a-switch{
  display:flex; align-items:flex-start; gap:.75rem; cursor:pointer;
  padding:.875rem 1rem; border-radius:var(--radius-control); background:var(--surface);
}
.a-switch input{ position:absolute; opacity:0; width:0; height:0 }
.a-switch__track{
  flex:none; margin-top:.125rem; width:2.25rem; height:1.3rem; border-radius:var(--radius-pill);
  background:var(--surface-2); transition:background .2s; position:relative;
}
.a-switch__dot{
  position:absolute; top:.175rem; left:.175rem; width:.95rem; height:.95rem;
  border-radius:50%; background:#fff; transition:transform .2s;
  box-shadow:0 1px 2px rgba(17,17,16,.25);
}
.a-switch input:checked + .a-switch__track{ background:var(--accent) }
.a-switch input:checked + .a-switch__track .a-switch__dot{ transform:translateX(.95rem) }
.a-switch input:focus-visible + .a-switch__track{ outline:2px solid var(--accent); outline-offset:2px }
.a-switch__text{ font-size:.8125rem; font-weight:500; line-height:1.4 }
.a-switch__text em{ display:block; margin-top:.2rem; font-style:normal; font-weight:400; color:var(--muted) }

/* ============================== nycklar ============================ */
.a-kv{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:baseline; font-size:.8125rem; margin-bottom:.5rem }
.a-kv > span{ min-width:4rem; color:var(--muted) }
code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.8125rem }

.a-code{
  margin:1rem 0; padding:.875rem 1rem; border-radius:var(--radius-control);
  background:var(--code-bg); color:var(--code-fg); overflow-x:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.75rem; line-height:1.6;
}
.a-code--key{ color:var(--code-fg); font-size:.8125rem; white-space:pre-wrap; word-break:break-all }

.a-keys{ display:flex; flex-direction:column; gap:.5rem; margin-top:1rem }
.a-keys li{
  display:flex; align-items:center; flex-wrap:wrap; gap:.5rem .875rem;
  padding-top:.75rem; border-top:1px solid var(--line); font-size:.8125rem;
}
.a-keys li > span:not(.a-keys__when){ font-weight:500 }
.a-keys__when{ margin-left:auto; color:var(--muted) }

/* ============================== modal ============================== */
.a-modal{
  margin:auto; width:min(30rem, calc(100vw - 2.5rem)); padding:2rem;
  border:1px solid var(--line); border-radius:var(--radius-card-sm);
  background:var(--background); color:var(--foreground);
  box-shadow:0 1px 2px rgba(17,17,17,.05), 0 30px 70px -30px rgba(17,17,17,.45);
}
.a-modal::backdrop{ background:rgba(10,10,10,.55); backdrop-filter:blur(4px) }
.a-modal h2{ font-size:1.25rem; font-weight:600; letter-spacing:-.02em }
.a-modal__lead{ margin-top:.5rem; font-size:.875rem; line-height:1.6; color:var(--muted) }

/* ============================= skelett ============================= */
.a-skel{
  height:13rem; border-radius:var(--radius-card-sm); background:var(--background);
  box-shadow:var(--shadow-card); position:relative; overflow:hidden;
}
.a-skel::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, var(--glans), transparent);
  animation:a-shimmer 1.4s ease-in-out infinite;
}
@keyframes a-shimmer{ from{ transform:translateX(-100%) } to{ transform:translateX(100%) } }

/* ============================ rättigheter ==========================
   Väljaren som står före consent-rundan. Varje rad är ett scope, och
   raden säger vad man får — inte vad det heter hos leverantören. */
.a-scopes{ display:flex; flex-direction:column; gap:.5rem; margin:1.25rem 0 }

.a-scope{
  display:flex; gap:.75rem; align-items:flex-start; cursor:pointer;
  padding:.875rem 1rem; border:1px solid var(--line); border-radius:var(--radius-control);
  transition:border-color .15s, background .15s;
}
.a-scope:hover{ border-color:var(--subtle) }
.a-scope:has(input:checked){ border-color:var(--accent); background:var(--tint) }
/* Obligatoriska går inte att kryssa ur. De ser valda ut men inte klickbara,
   så ingen letar efter varför inget händer. */
.a-scope.is-locked{ cursor:default; background:var(--surface); border-color:var(--line) }
.a-scope input{ position:absolute; opacity:0; width:0; height:0 }

.a-scope__box{
  flex:none; margin-top:.1rem; width:1.125rem; height:1.125rem;
  border:1.5px solid var(--subtle); border-radius:.3rem; background:var(--background);
  display:grid; place-items:center; transition:background .15s, border-color .15s;
}
.a-scope__box::after{
  content:''; width:.55rem; height:.3rem; border:solid var(--on-accent); border-width:0 0 2px 2px;
  transform:rotate(-45deg) scale(0); transition:transform .15s; margin-top:-.1rem;
}
.a-scope input:checked + .a-scope__box{ background:var(--accent); border-color:var(--accent) }
.a-scope input:checked + .a-scope__box::after{ transform:rotate(-45deg) scale(1) }
.a-scope.is-locked input:checked + .a-scope__box{ background:var(--subtle); border-color:var(--subtle) }
.a-scope input:focus-visible + .a-scope__box{ outline:2px solid var(--accent); outline-offset:2px }

.a-scope__text{ display:flex; flex-direction:column; gap:.2rem; font-size:.8125rem; line-height:1.45 }
.a-scope__text strong{ font-weight:600 }
.a-scope__text em{ font-style:normal; color:var(--muted) }
.a-scope__count{ font-size:.75rem; color:var(--subtle) }

.a-namefield{ margin-bottom:.75rem }
.a-namefield > span{ font-size:.6875rem }
.a-modal__fine{ font-size:.75rem; line-height:1.5; color:var(--muted); margin-bottom:1.25rem }
.a-btn:disabled{ opacity:.45; cursor:not-allowed }
.a-btn:disabled:hover{ background:var(--ink); border-color:var(--ink) }

/* Beviljade rättigheter på det anslutna kortet. Sanningen från leverantörens
   svar, inte en upprepning av vad vi bad om. */
.a-chips{ display:flex; flex-wrap:wrap; gap:.375rem }
.a-chip{
  display:inline-flex; align-items:baseline; gap:.375rem;
  border:1px solid var(--line); border-radius:var(--radius-pill);
  padding:.2rem .625rem; font-size:.6875rem; font-weight:500; color:var(--foreground);
}
.a-chip em{ font-style:normal; font-weight:400; color:var(--muted) }
/* Skrivande märks ut. En lista där allt ser likadant ut döljer just det man
   behöver kunna se snabbt. */
.a-chip--write{ border-color:var(--accent); background:var(--tint) }
.a-chip--write em{ color:var(--accent); font-weight:500 }

/* ---------------------------- läs / skriv --------------------------
   Sitter under sin rättighet och bara där ett skrivverktyg hänger. */
.a-scopewrap{ display:flex; flex-direction:column }
.a-scopewrap .a-scope{ border-bottom-left-radius:0; border-bottom-right-radius:0 }

.a-modes{
  display:flex; gap:.25rem; padding:.5rem .75rem;
  border:1px solid var(--line); border-top:0;
  border-radius:0 0 var(--radius-control) var(--radius-control);
  background:var(--surface); transition:opacity .15s;
}
.a-scope:has(input:checked) + .a-modes{ border-color:var(--accent) }
/* Rättigheten är urkryssad — läget betyder ingenting då. */
.a-modes.is-off{ opacity:.4; pointer-events:none }
.a-modes label{ flex:1 }
.a-modes input{ position:absolute; opacity:0; width:0; height:0 }
.a-modes span{
  display:block; text-align:center; cursor:pointer;
  padding:.3rem .5rem; border-radius:.5rem;
  font-size:.75rem; font-weight:500; color:var(--muted);
  transition:background .15s, color .15s;
}
.a-modes input:checked + span{ background:var(--background); color:var(--foreground);
                               box-shadow:0 1px 2px rgba(17,17,16,.08) }
.a-modes input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:1px }

/* Rutan som säger vilken spärr som faktiskt gäller. */
.a-note{
  padding:.75rem .875rem; border-radius:var(--radius-control);
  background:var(--surface); margin-bottom:1.25rem;
}
.a-note strong{ color:var(--foreground) }

/* ======================= många rättigheter ========================
   Trettio rutor i rad är en vägg, inte ett val. De som har verktyg
   står öppet; resten ligger hopfällt bakom en summary. */
.a-more{
  margin-top:.5rem; border:1px solid var(--line);
  border-radius:var(--radius-control); background:var(--surface);
}
.a-more > summary{
  display:flex; flex-direction:column; gap:.15rem; cursor:pointer;
  padding:.75rem .875rem; list-style:none; user-select:none;
}
.a-more > summary::-webkit-details-marker{ display:none }
.a-more > summary span{ font-size:.8125rem; font-weight:600 }
.a-more > summary span b{
  display:inline-block; margin-left:.25rem; padding:.05rem .4rem;
  border-radius:var(--radius-pill); background:var(--surface-2);
  font-size:.6875rem; font-weight:600;
}
.a-more > summary em{ font-style:normal; font-size:.75rem; line-height:1.45; color:var(--muted) }
.a-more > summary:hover span{ color:var(--accent) }
.a-more[open] > summary{ border-bottom:1px solid var(--line) }
.a-more .a-scopes{ margin:.75rem .75rem 0 }
.a-more [data-all]{ display:inline-block; margin:.25rem .875rem .875rem }

/* Den som rör räkenskaper, personuppgifter eller sådant som inte går att
   ångra ska inte se ut som resten. */
.a-risk{
  margin-left:.4rem; padding:.05rem .375rem; border-radius:var(--radius-pill);
  background:var(--warn-bg); color:var(--warn);
  font-style:normal; font-size:.625rem; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase; vertical-align:.08em;
}

/* Rutan får inte växa förbi skärmen när listan är lång. */
.a-modal{ max-height:calc(100dvh - 3rem); display:flex; flex-direction:column }
.a-modal > form{ overflow-y:auto; min-height:0 }

/* Flikmenyn låg här. Den är borta: allt bor på en sida nu, och en meny
   med tre poster var mest möbel — en rad över hela skärmen för tre ord. */

/* ============================ verksamhet =========================== */
.a-biz + .a-biz{ margin-top:1rem }
.a-biz__head{ display:flex; align-items:baseline; gap:.75rem; flex-wrap:wrap; margin-bottom:1rem }
.a-biz__label{ font-size:.8125rem; color:var(--muted) }
/* Avsnittsrubriken inne i en app. Ett steg upp, som allt annat som är
   en rubrik — den låg på samma storlek som brödtexten och läste sig
   därför som fetstil i ett stycke, inte som början på något nytt. */
.a-h3{ font-size:1.0625rem; font-weight:600; margin:1.5rem 0 .5rem }

/* Radlistor: kund/verktyg till vänster, detalj i mitten, tid till höger. */
.a-rows{ display:flex; flex-direction:column }
.a-rows li{
  display:flex; align-items:baseline; gap:.75rem; flex-wrap:wrap;
  padding:.625rem 0; border-top:1px solid var(--line); font-size:.8125rem;
}
.a-rows li:first-child{ border-top:0 }
.a-rows li > span:first-child{ font-weight:500 }
.a-rows__mid{ color:var(--muted) }
.a-rows__end{ margin-left:auto; color:var(--muted); white-space:nowrap }
.a-rows__tool{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.75rem }
.a-rows__tool.is-fail{ color:var(--danger) }


/* ============================== bolaget ============================
   Organisationsnumret och knappen på samma rad när det finns plats. */
.a-orgform{ display:flex; gap:.75rem; align-items:flex-end; flex-wrap:wrap; margin-top:1rem }
.a-orgform .auth__field{ flex:1 1 14rem; gap:.375rem }
.a-orgform .auth__field > span{ font-size:.6875rem }
.a-orgform .auth__field input{ padding:.7rem 1rem; font-size:.9375rem; letter-spacing:.02em }
.a-orgform .a-btn{ padding:.7rem 1.5rem }

/* Nyckel–värde-rader där värdet kan vara en hel mening. Utan den här bryter
   verksamhetsbeskrivningen ut ur kortet och hela sidan börjar scrolla i sidled. */
.a-rows--kv li{ align-items:flex-start; gap:1rem }
.a-rows--kv li > span:first-child{ flex:0 0 auto; min-width:7rem }
.a-rows--kv .a-rows__end{
  white-space:normal; text-align:right; overflow-wrap:anywhere;
  color:var(--foreground); min-width:0;
}

/* ===================== kopplingar: brickorna =====================
   Katalogvyn visar tre saker per tjänst: märket, namnet och statusen.
   Inget annat.

   Skälet är att de två uppgifterna krockade i samma kort. Ett galleri ska gå
   att överblicka — ögat hoppar mellan namn och status och letar efter en
   tjänst. Ett formulär ska gå att läsa noga — behörigheter, bolag, knappar.
   Lägger man båda i samma kort blir kolumnen hög och taggig, korten olika
   långa, och det man letar efter drunknar i det man just då inte bryr sig om.
   Detaljerna finns kvar, en klickning bort. */

/* Sökfältet låg här. Det är borta: kopplingarna står numera i den sektion
   de hör hemma i — Search Console bredvid webbadresserna, Fortnox under
   Affärssystem — och fyra kort fördelade på tre sektioner är redan
   sorterade. Ett sökfält över fyra saker är en låtsasfunktion. */
.a-grid--tiles{ grid-template-columns:repeat(auto-fill, minmax(13rem, 1fr)) }

.a-tile{
  display:flex; flex-direction:column; align-items:flex-start; gap:.875rem;
  width:100%; text-align:left; padding:1.25rem;
  background:var(--background); border:1px solid var(--line);
  border-radius:var(--radius-card-sm);
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.a-tile:hover{ border-color:var(--subtle); box-shadow:var(--shadow-card); transform:translateY(-1px) }
.a-tile.is-on{ border-color:var(--accent) }
.a-tile__name{ font-size:1rem; font-weight:600; letter-spacing:-.01em }

/* Namnet till vänster, läget till höger, båda längst ned.
   Förut låg de staplade och kortet var elva rem högt för att etiketten
   skulle hamna på samma höjd i alla kort — mest tom yta. Raden gör samma
   sak billigare: `auto`-marginalen ovanför håller den vid nederkanten, så
   korten radar upp sig även när "Facebook och Instagram" tar två rader där
   "Fortnox" tar en. */
.a-tile{ min-height:8rem }
.a-tile__rad{ display:flex; align-items:center; gap:.75rem; width:100%; margin-top:auto }
.a-tile__name{ min-width:0 }
.a-tile__rad .a-pill{ margin-left:auto; flex:none }

/* Märket i en ruta av fast storlek, oavsett hur leverantörens egen bild är
   beskuren. Utan den blir raden ojämn: Fortnox mark fyller kanten, Googles
   har luft runt sig. */
.a-tile__logo{ display:flex; align-items:center; height:2.25rem }
.a-tile__logo img{ width:2.25rem; height:2.25rem; object-fit:contain; border-radius:.5rem }
/* Meta: två märken som överlappar. Det andra får en ljus ram så kanten syns
   mot det första. */
.a-tile__logo.is-par img + img{
  margin-left:-.6rem; box-shadow:0 0 0 2px var(--background);
}
/* Vit platta under ett märke som saknar egen färg. Leverantörerna som har
   en — Fortnox gult, Dropbox blått — syns mot kortet som det är; ett märke
   i enbart svart hade försvunnit i mörkt läge. */
.a-tile__logo.is-platta img{ background:#fff; padding:.25rem }

.a-tile__logo--tom{
  width:2.25rem; justify-content:center; border-radius:.5rem;
  background:var(--surface); color:var(--muted); font-weight:600;
}

/* Rutan som öppnas när man klickar på en bricka. */
.a-modal__head{ display:flex; align-items:center; gap:.875rem; margin-bottom:1.25rem }
.a-modal__head .a-modal__lead{ margin-top:.125rem }
.a-modal__body{ overflow-y:auto; min-height:0; display:flex; flex-direction:column; gap:1rem }
.a-modal__foot{ padding-top:1.25rem }

/* Urvalet inom en anslutning: vilka egendomar som hör till projektet. */
.a-picks{ display:flex; flex-direction:column; gap:.25rem }
.a-pick{
  display:flex; align-items:center; gap:.625rem; cursor:pointer;
  padding:.625rem .75rem; border:1px solid var(--line);
  border-radius:var(--radius-control); transition:border-color .15s, background .15s;
}
.a-pick:hover{ border-color:var(--subtle) }
.a-pick:has(input:checked){ border-color:var(--accent); background:var(--tint) }
.a-pick input{ flex:none; accent-color:var(--accent); width:1rem; height:1rem }
.a-pick__namn{ font-size:.875rem; font-weight:500; word-break:break-all }
.a-pick__not{ margin-left:auto; flex:none; font-size:.75rem; color:var(--muted) }
/* Redan inlagd: rutan är ikryssad och låst. Dämpad, men kvar i listan —
   en rad som saknas läses som att brevlådan inte finns. */
.a-pick.is-tagen{ opacity:.55; cursor:default }
.a-pick.is-tagen:hover{ border-color:var(--line) }


/* ============================ kanalerna ============================ */
.a-kan{ display:flex; flex-direction:column; gap:.5rem }
.a-kan__rad{
  padding:.875rem 1rem; border:1px solid var(--line);
  border-radius:var(--radius-control); background:var(--background);
}
.a-kan__rad.is-lyft{
  z-index:30; pointer-events:none; transition:none; will-change:transform;
  box-shadow:0 8px 16px -6px rgba(17,17,16,.22), 0 20px 40px -18px rgba(17,17,16,.3);
  border-color:var(--subtle);
}
.a-kan.is-sorterar .a-kan__rad:hover{ border-color:var(--line) }
.a-kan__topp{ display:flex; align-items:center; gap:.625rem }
/* Greppet är det enda som startar en dragning, och därför det enda som
   inte får rulla sidan under fingret. */
.a-kan__grepp{ touch-action:none }
.a-kan__grepp{
  flex:none; display:grid; place-items:center; width:1.75rem; height:1.75rem;
  margin-left:-.375rem; border-radius:.375rem; color:var(--subtle); cursor:grab;
}
.a-kan__grepp:hover{ background:var(--surface); color:var(--foreground) }
.a-kan__grepp:active{ cursor:grabbing }
.a-kan__url{ font-size:.9375rem; font-weight:600; word-break:break-all }
.a-kan__url:hover{ color:var(--accent) }
.a-kan__akt{ display:flex; gap:.375rem; margin-left:auto; flex:none }
.a-btn--liten{ padding:.3125rem .75rem; font-size:.75rem }
.a-kan__adress{ margin-top:.125rem; padding-left:2.125rem; font-size:.75rem; color:var(--subtle); word-break:break-all }
.a-kan__syfte{ margin-top:.375rem; padding-left:2.125rem; font-size:.875rem; line-height:1.6; color:var(--muted) }
.a-kan__syfte.is-tom{ color:var(--subtle); font-style:italic }

.a-kanform textarea{
  width:100%; font:inherit; font-size:.9375rem; line-height:1.6; resize:vertical;
  padding:.75rem .875rem; color:var(--foreground); background:var(--background);
  border:1px solid var(--line); border-radius:var(--radius-control);
}
.a-kanform textarea:focus-visible{ outline:2px solid var(--accent); outline-offset:1px }

@media (max-width:32rem){
  .a-kan__akt{ width:100%; margin-left:0; padding-left:2.125rem }
  .a-kan__topp{ flex-wrap:wrap }
}

/* =================== Verksamhetsbeskrivningen ====================
   Åtta fritextfält. Motiveringen står bredvid rubriken och inte som en
   hjälptext under rutan: skälet att fylla i ska läsas INNAN man bestämmer
   sig för att hoppa över fältet. */
/* Luft ned till första fältet. Mätaren bar förut en uppräkning av allt som
   saknades och tog tre rader; nu är den en rad, och utan marginalen stod
   talet och klistrade i rubriken under. */
.a-matt{ display:flex; flex-direction:column; gap:.5rem; margin-bottom:1.75rem }
.a-matt__spar{ height:.375rem; border-radius:9999px; background:var(--surface-2); overflow:hidden }
.a-matt__fyll{ height:100%; border-radius:9999px; background:var(--accent); transition:width .3s }
.a-matt__text{ font-size:.8125rem; color:var(--muted) }
@media (prefers-reduced-motion:reduce){ .a-matt__fyll{ transition:none } }

.a-prof{ display:flex; flex-direction:column; gap:1.25rem }
.a-prof__falt{ display:flex; flex-direction:column; gap:.375rem }
.a-prof__falt label{ display:flex; flex-direction:column; gap:.125rem; cursor:pointer }
.a-prof__label{ font-size:.875rem; font-weight:600 }
.a-prof__why{ font-size:.75rem; line-height:1.5; color:var(--muted) }
.a-prof textarea{
  width:100%; font:inherit; font-size:.9375rem; line-height:1.6; resize:vertical;
  padding:.75rem .875rem; color:var(--foreground); background:var(--background);
  border:1px solid var(--line); border-radius:var(--radius-control);
}
.a-prof textarea::placeholder{ color:var(--subtle) }
.a-prof textarea:focus-visible{ outline:2px solid var(--accent); outline-offset:1px }
.a-prof__sparat{ align-self:center; font-size:.8125rem; color:var(--accent); font-weight:500 }

/* Radera konto: röd text, inte en röd knapp. En röd knapp bredvid "Logga ut"
   drar blicken hela tiden till det farligaste man kan göra. */

/* Flerstyckesfrågor: bekräftelsen för radera konto räknar upp vad som
   försvinner, och den uppräkningen behöver ett styckebrott. */
.a-modal__lead{ white-space:pre-line }

/* ========================= startprompten ===========================
   Texten står som den ska klistras in — ingen radbrytning bortstädad, ingen
   snygg beskärning. Det som visas MÅSTE vara exakt det som kopieras, annars
   är förhandsvisningen en lögn om vad knappen gör. */
.a-prompt{ margin-top:.75rem }
.a-prompt__h{ font-size:.9375rem; font-weight:600 }
.a-prompt__lead{ margin-top:.25rem; font-size:.8125rem; line-height:1.6; color:var(--muted) }
.a-prompt__text{
  margin-top:.75rem; white-space:pre-wrap; word-break:break-word;
  max-height:20rem; overflow-y:auto; overscroll-behavior:contain;
  line-height:1.6;
}
.a-prompt__kvitto{ align-self:center; font-size:.8125rem; color:var(--accent); font-weight:500 }


.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Delrubrik inom en sektion. Behövs bara där sektionen bär två sorters
   innehåll — annars upprepar den bara det man redan ser.

   Luften ovanför är rubrikens hela jobb: den står ALLTID efter något
   annat, och utan avstånd läses den som slutet på det som står över i
   stället för som början på det som kommer. Korten i översikterna sätter
   margin-top:0 själva — där sitter rubriken överst i sin egen ruta. */
.a-delrubrik{
  margin-top:2rem; font-size:.8125rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted);
}