/* Rödpennan – runda 3. Laddas efter stil.css.
   1) Små komponenter som gäller i alla storlekar.
   2) Skrivbordslayout från 960 px (M11): menyn blir en stående list till vänster, Översikt/Avtal
      ligger i en listkolumn och detalj/profil öppnas bredvid. Under 960 px ändras ingenting. */

/* ============ 1. komponenter (alla storlekar) ============ */
.hjalte .etikett-rad{display:flex;justify-content:space-between;align-items:center;gap:10px;position:relative}
.hjalte .etikett-rad .etikett{position:static}

/* elpriset kunde inte hämtas: inga påhittade värden (N7) */
.el-tomt{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;background:var(--ljus);border-radius:12px;padding:16px}
.el-tomt b{color:var(--black);font-size:15px}
.el-tomt span{color:var(--mjuk);font-size:13px}
.el-tomt .knapp{margin-top:10px}

/* inloggningskoden spärrad */
.kodsparr{display:flex;gap:12px;align-items:flex-start;background:var(--rod-ljus);color:#7A1424;border-radius:var(--r-s);padding:13px 14px;margin:0 0 14px;text-align:left;font-size:14px}
.kodsparr svg{width:20px;height:20px;flex:none;margin-top:1px;stroke:var(--rod);fill:none;stroke-width:2.2;stroke-linecap:round}
.kodsparr b{display:block;color:#7A1424;margin-bottom:2px}

/* ärenden: senaste statusändring och meddelande från rådgivaren */
.arende .senast{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--svag);margin-top:14px;padding-top:12px;border-top:1px solid var(--linje)}
.arende .meddelande{background:var(--mint);color:var(--gron);border-radius:var(--r-s);padding:10px 12px;margin:14px 0 0;font-size:13.5px}
.arende .meddelande b{display:block;font-size:12px;color:var(--gron2);margin-bottom:2px}
.arende.nyhet{box-shadow:0 0 0 2px var(--gron3)}

/* bekräftelsesidan: vilket konto länken gäller (M7) */
.konto-rad{background:var(--mint);color:var(--gron);border-radius:var(--r-s);padding:11px 13px;font-size:14px;margin:-8px auto 18px;max-width:40ch}

/* platshållaren i högerkolumnen och tangentbordstipset syns bara på bred skärm */
.tom-detalj{display:none}
kbd{font:600 11.5px/1 "Familjen Grotesk",system-ui,sans-serif;background:var(--yta);border:1px solid var(--linje);border-bottom-width:2px;border-radius:6px;padding:2px 6px;color:var(--text)}

/* ============ 2. skrivbord ≥ 960 px ============ */
@media (min-width:960px){
  :root{--rail:108px;--lista:clamp(360px,33vw,430px)}
  body{background:#E9EEEB}
  .app{max-width:1440px;box-shadow:0 0 0 1px rgba(16,38,30,.05)}

  /* menyn som stående list */
  .flikrad{left:12px;top:12px;bottom:12px;right:auto;width:84px;height:auto;flex-direction:column;gap:4px;padding:8px 6px;border-radius:24px;
    background:var(--yta);box-shadow:0 1px 2px rgba(16,38,30,.06),0 0 0 1px rgba(16,38,30,.04)}
  .flikrad.gomd{transform:translateX(-140px)}
  .flikrad button{flex:none;height:68px;border-radius:16px}
  .flikrad .glid{top:8px;bottom:auto;left:6px;right:auto;transition:top .45s var(--fjader),height .45s var(--fjader),left .45s var(--fjader),width .45s var(--fjader)}
  .flikrad .bricka{top:8px}
  .app:not(.utan-flikrad) .skarmar{left:var(--rail)}
  .offline{bottom:20px}

  /* inloggning, start och välkomst: centrerad kolumn */
  #s-start,#s-inlogg,#s-valkommen{left:calc(50% - 260px);right:calc(50% - 260px)}

  /* listkolumnen och detaljkolumnen */
  #s-oversikt,#s-avtal{right:auto;width:var(--lista);box-shadow:1px 0 0 var(--linje)}
  #s-detalj,#s-profil{left:var(--lista)}
  #detalj,#s-detalj .navbar .rad,#s-profil .navbar,#profil{max-width:720px;margin-left:auto;margin-right:auto;width:100%}
  #s-detalj .cta-zon{padding:12px 16px 20px;display:flex;gap:12px;align-items:center}
  #s-detalj .cta-zon .knapp{flex:1}
  .app.bred-tom .tom-detalj{display:flex;position:absolute;left:var(--lista);right:0;top:0;bottom:0;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;color:var(--mjuk);padding:40px;font-size:14.5px}
  .tom-detalj .cirkel{width:84px;height:84px;border-radius:50%;background:var(--mint);display:grid;place-items:center;margin-bottom:10px}
  .tom-detalj svg{width:36px;height:36px;stroke:var(--gron2);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .tom-detalj b{color:var(--black);font-size:19px}
  .tom-detalj span{max-width:34ch}
  .tom-detalj .tangent{font-size:12.5px;color:var(--svag);margin-top:14px}

  /* vald rad och hovring med mus */
  .rad-avtal.vald{background:var(--mint)}
  .rad-avtal.vald .chev{stroke:var(--gron2)}
  .atgard.vald{box-shadow:0 0 0 2px var(--gron3)}
  @media (hover:hover){
    .rad-avtal:not(.vald):hover{background:#F1F5F3}
    button.atgard:hover{box-shadow:0 1px 2px rgba(16,38,30,.04),0 6px 18px -10px rgba(16,38,30,.25)}
    .knapp:not(:disabled):not([aria-disabled=true]):hover{filter:brightness(1.08)}
  }

  /* Ärenden och Energi tar hela bredden med en centrerad innehållskolumn */
  #s-arenden .navbar,#s-energi .navbar,#s-arenden .innehall,#s-energi .innehall{padding-left:max(24px,calc((100% - 860px)/2));padding-right:max(24px,calc((100% - 860px)/2))}
  #arenden{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px;align-items:start}
  #arenden .arende{margin:0}
  #arenden>.liten-not,#arenden>.tomt,#arenden>.skelett{grid-column:1/-1}
  #s-energi .diagram{height:220px}

  /* bladen blir en centrerad dialog */
  .blad{left:50%;right:auto;top:50%;bottom:auto;width:min(540px,calc(100% - 48px));max-height:min(86vh,860px);border-radius:26px;opacity:0;
    transform:translate(-50%,-46%) scale(.98);transition:transform .4s var(--mjukt),opacity .25s ease,visibility 0s .4s}
  .blad.oppen{transform:translate(-50%,-50%);opacity:1;transition:transform .4s var(--mjukt),opacity .25s ease}
  .blad .handtag{display:none}
  .blad .blad-innehall{padding:26px 28px 28px}
}
@media (min-width:960px) and (prefers-reduced-motion:reduce){.blad,.blad.oppen{transform:translate(-50%,-50%)}}