/* ═══════════════════════════════════════════════════════════════════════════
   SYSTEMSKALET — formatmallen

   Ramen ska läsas som produkten och inte som en bild av den. Tre saker gör
   det: sidomenyn är mörk och ligger till vänster som i systemet, sidrubriken
   står i serif precis som på varje sida där inne, och arbetsytan är ljusare
   än menyn men mörkare än korten. Utan den sista skillnaden flyter kortet ut
   i sidan och det ser ut som markup på en hemsida.

   INGENTING HÄR ÄR TRYCKBART. Menyraderna är span och saknar hover av samma
   skäl: de ska se ut som produkten, inte lova något demot inte gör.
   ═══════════════════════════════════════════════════════════════════════ */

/* min-width:0 PÅ RAMEN SJÄLV. Den är ett flexbarn i demots yttre ruta, och ett
   flexbarn har min-width:auto: ramen växte med sitt bredaste innehåll i stället
   för att låta innehållet skrolla. CRM-demots tavla är 1326 px, och ramen blev
   1360 i ett fönster på 342 på en telefon. Sidan förskjöt sig inte, den yttre
   rutan klipper, men två tredjedelar av skärmen låg utanför kanten utan väg
   dit. Gäller varje demo som är bredare än sitt fönster. */
.sk{display:flex;min-height:0;min-width:0;flex:1;background:#eef2fa}

/* ── Sidomenyn ─────────────────────────────────────────────────────────── */
/* SMALARE OCH TÄTARE SEDAN DEN 5 SEPTEMBER 2026. Panelerna var 1044 px höga
   på en laptopskärm som har sjuhundra att ge, och skalet stod för en fjärdedel
   av det. Sidomenyn är en bild av produkten och inte något man läser i, så den
   tål att vara mindre; arbetsytan bredvid är det som ska rymmas. */
.sk-sido{display:none;flex:none;width:156px;flex-direction:column;
  padding:.6rem .5rem;background:#0c1a45;color:#dde5fa}
.sk-logo{display:flex;align-items:center;gap:.4rem;margin-bottom:.55rem}
.sk-logo b{font-size:.68rem;font-weight:650;line-height:1.22;color:#fff}
.sk-mark{flex:none;display:grid;place-items:center;width:22px;height:22px;
  border-radius:7px;background:rgba(122,169,255,.22);color:#bcd3ff}
.sk-sok{display:flex;align-items:center;gap:.3rem;margin-bottom:.55rem;
  padding:.26rem .4rem;border-radius:7px;background:rgba(255,255,255,.07);
  font-size:.58rem;color:rgba(221,229,250,.66)}
.sk-sok kbd{margin-left:auto;font:inherit;font-size:.56rem;color:rgba(221,229,250,.45)}
.sk-meny{display:flex;flex-direction:column;gap:.08rem}
.sk-rad{display:flex;align-items:center;gap:.35rem;padding:.27rem .4rem;
  border-radius:7px;font-size:.64rem;font-weight:600;color:rgba(221,229,250,.8)}
.sk-rad--oppen{background:rgba(122,169,255,.14);color:#fff}
.sk-rad-ik{flex:none;display:grid;place-items:center;color:rgba(188,211,255,.85)}
.sk-rad-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sk-rad-p{flex:none;color:rgba(221,229,250,.42)}
.sk-gren{display:flex;flex-direction:column;gap:.06rem;margin:.1rem 0 .25rem .95rem;
  padding-left:.5rem;border-left:1px solid rgba(255,255,255,.12)}
.sk-under{padding:.22rem .4rem;border-radius:6px;font-size:.62rem;
  color:rgba(221,229,250,.62)}
.sk-under.pa{background:rgba(122,169,255,.26);color:#fff;font-weight:650}
/* TRYCKBARA UNDERRADER, bara i navigeringsdemot. En knapp ärver inte typsnitt
   eller radbredd, därför font:inherit och display:block: utan dem hoppade
   raden ur menyn så fort den blev klickbar. */
.sk-under--kn{display:block;width:100%;text-align:left;cursor:pointer;
  font:inherit;font-size:.62rem;border:0;background:none;
  transition:background .18s var(--ease-solutra,ease),color .18s var(--ease-solutra,ease)}
.sk-under--kn:hover{background:rgba(122,169,255,.16);color:#fff}
.sk-under--kn:focus-visible{outline:2px solid #7aa9ff;outline-offset:1px}
/* Huvudraden som knapp. Samma mått som spanvarianten, annars hoppar menyn när
   en gren blir tryckbar och en annan inte är det. */
.sk-rad--kn{width:100%;cursor:pointer;font:inherit;font-size:.64rem;
  font-weight:600;text-align:left;border:0;
  transition:background .18s var(--ease-solutra,ease),color .18s var(--ease-solutra,ease)}
.sk-rad--kn:not(.sk-rad--oppen){background:none}
.sk-rad--kn:hover{background:rgba(122,169,255,.18);color:#fff}
.sk-rad--kn:focus-visible{outline:2px solid #7aa9ff;outline-offset:1px}
.sk-anv{display:flex;align-items:center;gap:.4rem;margin-top:auto;padding-top:.55rem;
  border-top:1px solid rgba(255,255,255,.1)}
.sk-av{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:rgba(122,169,255,.24);color:#dbe6ff;font-size:.6rem;font-weight:700}
.sk-anv b{display:block;font-size:.66rem;font-weight:650;color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sk-anv small{display:block;font-size:.58rem;color:rgba(221,229,250,.55);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sk-ut{margin-top:.45rem;font-size:.62rem;color:rgba(221,229,250,.5)}

/* ── Arbetsytan ────────────────────────────────────────────────────────── */
/* ANDRA HOPKRYMPNINGEN, 6 september 2026. Ramen tog fortfarande ett fönster
   i anspråk per demo. Rubriken och de två ytterpaddingarna är nedskruvade en
   gång till: det är den del av skalet som inte bär något innehåll. */
.sk-huvud{flex:1;min-width:0;display:flex;flex-direction:column}
/* Toppremsan ersätter sidomenyn på telefon: byrån och vägen dit, inget mer. */
.sk-remsa{display:flex;align-items:center;gap:.45rem;flex:none;
  padding:.42rem .7rem;background:#0c1a45;color:#dde5fa}
.sk-remsa b{font-size:.62rem;font-weight:600;color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sk-remsa em{margin-left:auto;flex:none;font-style:normal;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.55rem;
  letter-spacing:.06em;color:rgba(221,229,250,.7)}
.sk-mark--liten{width:18px;height:18px;border-radius:5px}

.sk-topp{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;
  justify-content:space-between;padding:clamp(.4rem,1vw,.55rem) clamp(.5rem,1.3vw,.7rem) 0}
.sk-titel{font-family:var(--display);font-size:clamp(1rem,1.7vw,1.16rem);
  font-weight:600;letter-spacing:-.01em;color:var(--text);margin:0}
/* Tipsraden säger rakt ut att skärmen går att trycka på, och tonas ned när
   besökaren rört något: en uppmaning som står kvar efteråt läser som en banner. */
.sk-tips{flex:none;font-size:.62rem;font-weight:700;padding:.22rem .6rem;
  border-radius:999px;background:rgba(42,85,200,.1);color:var(--g2);
  border:1px solid rgba(92,141,255,.4);transition:opacity .5s ease}
.sk-tips--tyst{opacity:.4}

/* ARBETSYTAN OCH KORTET FYLLER HÖJDEN. Utan display:flex slutade det vita
   kortet där texten tog slut, och under det låg fönstrets blågrå botten som
   ett tomrum mitt i programmet. Nu tar kortet resten. */
/* Samma skäl som på .sk ovan: kedjan måste vara låst hela vägen ned, annars
   tar nästa led över växandet. */
.sk-yta{flex:1;min-height:0;min-width:0;display:flex;flex-direction:column;
  padding:clamp(.4rem,1vw,.55rem) clamp(.5rem,1.3vw,.7rem)}
.sk-yta > *{flex:1}

@media(min-width:760px){
  .sk-sido{display:flex}
  .sk-remsa{display:none}
}