/* ═══ INKORGEN (automationsfabrikens inkorgssystem) + FLER AUTOMATIONER ═══════════════════════════
   Kundshowcasens språk (kv-*): vita ytor radie 24 på grå scen, grå rubriker, pillerknappar, tonade
   lägespiller, Inter, vikt aldrig över 500. Lila bara i de två primärknapparna (huvudets och Godkänn).
   Allt som fälls ut inuti en vit yta ligger på en tonad grå yta med radie 16 — aldrig vitt i vitt.
   Rörelse: bara efter kundens egen handling, tokens i stället för siffror, av under reduced motion.
   Byggs av hosting/inkorgen.js. ═════════════════════════════════════════════════════════════════════ */

/* ── Scenen: samma som de andra kundvyerna ── */
body:has(.portal-view.active:is(#view-inkorgen,#view-fler-automationer)) {
  background:var(--h-bg);
  & .portal-layout { background:var(--h-bg); }
  & .portal-aurora { opacity:0 !important; }
  & #portal-main-area { background:var(--h-bg) !important; border:none !important; border-radius:0 !important; box-shadow:none !important; }
  & #portal-main { padding:24px 24px 64px !important; }
  & .portal-topbar { padding:32px 24px 4px !important; align-items:center !important; gap:0 16px !important; background:none !important; border:0 !important; }
  & .portal-topbar h1, & .topbar-text h1 {
    grid-column:1 !important; grid-row:1 !important; font:400 32px/40px var(--h-font) !important; letter-spacing:-.01em !important;
    color:var(--h-ink) !important; -webkit-text-fill-color:currentColor !important; background:none !important; margin:0 !important;
  }
  & .portal-topbar p {
    grid-column:1 !important; grid-row:2 !important; font:400 14px/20px var(--h-font) !important; letter-spacing:0 !important;
    color:var(--h-muted) !important; -webkit-text-fill-color:currentColor !important; margin:4px 0 0 !important; max-width:80ch;
  }
  & .topbar-status { display:none !important; }
}
body:has(#view-inkorgen.active) {
  & .portal-topbar .topbar-text { display:none !important; }
  & .portal-topbar { padding:0 24px !important; min-height:0 !important; }
  & #portal-main { padding-top:40px !important; }
}

#portal-main-area .portal-view:is(#view-inkorgen,#view-fler-automationer) {
  --s-titel:oklch(0.69 0 0);
  --s-fyll:oklch(0.9612 0 0);
  --s-fyll-hover:oklch(0.935 0 0);
  --s-rod-bg:#fbeeed;   --s-rod:#9e423b;
  --s-bla-bg:#ebeffe;   --s-bla:#324bba;
  --s-gron-bg:#ecf4e4;  --s-gron:#3f6a26;
  --s-orange-bg:#fdf1e2; --s-orange:#96560f;
  --ik-yta-tonad:oklch(0.975 0 0);
  /* ZAAI:s shimmer som accent: flikstreck, valda rader, räknare, fokus */
  --zaai-shimmer:linear-gradient(120deg,#8b5cf6 0%,#c084fc 50%,#e879a8 100%);
  --ik-accent:#8b5cf6; --ik-accent-text:#6d3fd9; --ik-accent-bg:#f3eefe;
  --dur-exit:160ms; --dur-swap:140ms; --dur-kollaps:240ms; --dur-hall:600ms; --dur-kollaps-ut:180ms; --dur-tona-ut:120ms; --dur-tona-in-sen:60ms;
  max-width:none !important; margin:0 !important; font-family:var(--h-font); color:var(--h-ink);

  &.active { display:flex; flex-direction:column; gap:24px; }
  & > * { margin-top:0 !important; margin-bottom:0 !important; }
  & :is(strong,b,h2,h3,h4,th,[class*="title"],[class*="namn"],label) { font-weight:500; }
  & :is(th,label,[class*="pill"]) { text-transform:none !important; letter-spacing:0 !important; }

  /* ── Byggstenar (samma mått som kund-showcase) ── */
  & .kv-yta { background:#fff; border:1px solid var(--h-border); border-radius:24px; box-shadow:none; overflow:hidden; }
  & .kv-yta-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 24px 10px; }
  & .kv-yta-title { font:400 17px/24px var(--h-font); letter-spacing:-.01em; color:var(--s-titel); margin:0; }
  & .kv-yta-sub { font:400 12px/16px var(--h-font); color:var(--h-muted); margin:2px 0 0; }
  & .kv-knapp {
    display:inline-flex; align-items:center; justify-content:center; gap:6px; flex:none;
    height:32px; padding:0 14px; border-radius:999px; white-space:nowrap; cursor:pointer;
    background:var(--s-fyll); border:0; box-shadow:none; font:400 12.8px/1 var(--h-font); color:var(--h-ink); text-decoration:none;
    transition:background-color var(--dur-hover) ease, transform var(--dur-press) var(--ease-out), opacity var(--dur-hover) ease;
  }
  & .kv-knapp:hover:not(:disabled) { background:var(--s-fyll-hover); }
  & .kv-knapp:active:not(:disabled) { transform:scale(.97); }
  & .kv-knapp:disabled { opacity:.5; cursor:default; }
  & .kv-knapp svg { width:14px; height:14px; }
  & .kv-knapp.stor { height:38px; padding:0 20px; font-size:13px; }
  & .kv-knapp.lank { background:none; padding:0 4px; }
  & .kv-knapp.lank:hover:not(:disabled) { background:none; text-decoration:underline; text-underline-offset:3px; }
  & .kv-knapp.fara { color:var(--s-rod); }
  & .kv-knapp.primar {
    position:relative; overflow:hidden; isolation:isolate; color:#fff;
    background:linear-gradient(120deg, var(--zs-lila,#6B5391) 0%, var(--zs-lila-hi,#8a70b3) 100%);
  }
  & .kv-knapp.primar::after {
    content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:linear-gradient(105deg, transparent 30%, rgb(255 255 255 / .38) 50%, rgb(177 216 242 / .30) 58%, transparent 72%);
    transform:translateX(-110%);
  }
  & .kv-knapp.primar:hover:not(:disabled) { background:linear-gradient(120deg, #624a86 0%, var(--zs-lila,#6B5391) 100%); }
  & .kv-knapp.primar:hover:not(:disabled)::after { transform:translateX(110%); transition:transform var(--dur-skimmer,900ms) var(--ease-out-soft); }
  & .kv-knapp.bleck { background:var(--h-ink); color:#fff; }
  & .kv-knapp.bleck:hover:not(:disabled) { background:oklch(0.2645 0 0 / .88); }

  /* Lägespiller: tonade par, heltrunda. Grönt betyder bara "klart". */
  & .ik-pill {
    display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 9px; border-radius:999px;
    font:400 12px/1 var(--h-font); white-space:nowrap; background:var(--s-fyll); color:var(--h-ink);
  }
  & .ik-pill.bla { background:var(--s-bla-bg); color:var(--s-bla); }
  & .ik-pill.orange { background:var(--s-orange-bg); color:var(--s-orange); }
  & .ik-pill.rod { background:var(--s-rod-bg); color:var(--s-rod); }
  & .ik-pill.gron { background:var(--s-gron-bg); color:var(--s-gron); }
  & .ik-pill svg { width:12px; height:12px; }

  & .ik-mono { font-family:ui-monospace, "SF Mono", Menlo, monospace; font-size:12px; font-variant-numeric:tabular-nums; }
  & .ik-dampad { color:var(--h-muted); }
  & .ik-tom { margin:0; padding:20px 24px 24px; font:400 14px/20px var(--h-font); color:var(--h-muted); }
  & .ik-fel { margin:0; font:400 12.5px/18px var(--h-font); color:var(--s-rod); }

  /* ── Sidhuvudet: showcasens vyrubrik (32/40, grå rad under), åtgärderna till höger ── */
  & .ik-sidhuvud { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:12px 16px; }
  & .ik-sidtitel { margin:0; font:400 32px/40px var(--h-font); letter-spacing:-.01em; color:var(--h-ink); }
  & .ik-sidsub { margin:4px 0 0; font:400 14px/20px var(--h-font); color:var(--h-muted); font-variant-numeric:tabular-nums; }
  & .ik-sidknappar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
  & .ik-huvud-status { font:400 13px/18px var(--h-font); color:var(--h-muted); }
  & .ik-huvud-status:empty { display:none; }
  & .ik-sidhuvud .ik-problem { grid-column:1 / -1; padding:0; border:0; }
  & .ik-problem { display:flex; flex-direction:column; gap:6px; }
  & .ik-problem p { margin:0; display:flex; gap:8px; align-items:baseline; font:400 13px/18px var(--h-font); color:var(--s-rod); }

  /* Showcasens knappar: 32 hög, heltrund, 14/500. Bläck = huvudåtgärd, grått fält = sekundär,
     vit med kant och radie 8 = sidhuvudets verktyg, spöke = länkaktig. */
  & .ik-kn {
    display:inline-flex; align-items:center; justify-content:center; gap:6px; flex:none; height:32px; padding:0 10px;
    border-radius:999px; border:1px solid transparent; background:transparent; color:var(--h-ink); cursor:pointer;
    font:500 14px/20px var(--h-font); white-space:nowrap; text-decoration:none;
    transition:background-color var(--dur-hover) ease, transform var(--dur-press) var(--ease-out), opacity var(--dur-hover) ease;
  }
  & .ik-kn svg { width:16px; height:16px; flex:none; }
  & .ik-kn:active:not(:disabled) { transform:scale(.97); }
  & .ik-kn:disabled { opacity:.5; cursor:default; }
  & .ik-kn:focus-visible { outline:2px solid var(--h-ink); outline-offset:2px; }
  & .ik-kn.bleck { background:var(--h-ink); color:oklch(0.985 0 0); }
  & .ik-kn.bleck:hover:not(:disabled) { background:oklch(0.2645 0 0 / .9); }
  & .ik-kn.fyll { background:var(--s-fyll); }
  & .ik-kn.fyll:hover:not(:disabled) { background:var(--s-fyll-hover); }
  & .ik-kn.kontur { background:#fff; border-color:var(--h-border); border-radius:8px; padding:0 10px 0 8px; }
  & .ik-kn.kontur:hover:not(:disabled) { background:var(--s-fyll); }
  & .ik-kn.spok:hover:not(:disabled) { background:var(--s-fyll); }
  & .ik-kn.fara { color:var(--s-rod); }
  & .ik-kn.liten { height:28px; padding:0 8px; font-size:13px; }
  & .ik-kn.liten svg { width:14px; height:14px; }

  /* Showcasens etikett: tonad bakgrund, färgad text, 24 hög. */
  & .ik-etikett-chip {
    display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px; border-radius:999px; white-space:nowrap;
    font:400 12px/12px var(--h-font); background:var(--s-fyll); color:var(--h-muted);
  }
  & .ik-etikett-chip[data-ton="bla"] { background:var(--s-bla-bg); color:var(--s-bla); }
  & .ik-etikett-chip[data-ton="orange"] { background:var(--s-orange-bg); color:var(--s-orange); }
  & .ik-etikett-chip[data-ton="rod"] { background:var(--s-rod-bg); color:var(--s-rod); }
  & .ik-etikett-chip[data-ton="gron"] { background:var(--s-gron-bg); color:var(--s-gron); }
  & .ik-ring-chip {
    display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:999px; white-space:nowrap;
    font:400 12px/12px var(--h-font); color:var(--h-muted); box-shadow:inset 0 0 0 1px var(--h-border);
  }

  /* ── Flikarna: understrukna, indikatorn glider ── */
  & .ik-flikar {
    position:relative; display:flex; gap:24px; padding:0 24px; border-bottom:1px solid var(--h-border);
    overflow-x:auto; scrollbar-width:none;
  }
  & .ik-flik {
    appearance:none; background:none; border:0; padding:14px 0 12px; cursor:pointer; white-space:nowrap;
    font:400 14px/20px var(--h-font); color:var(--h-muted); display:inline-flex; align-items:center; gap:6px;
    transition:color var(--dur-hover) ease;
  }
  & .ik-flik:hover { color:var(--h-ink); }
  & .ik-flik[aria-selected="true"] { color:var(--h-ink); font-weight:500; }
  & .ik-flik .ik-raknare { min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--s-fyll); color:var(--h-ink); font:400 11px/18px var(--h-font); text-align:center; font-variant-numeric:tabular-nums; }
  & .ik-flik .ik-raknare.varm { background:var(--ik-accent-bg); color:var(--ik-accent-text); font-weight:500; }
  & .ik-flik-ind {
    position:absolute; left:0; bottom:-1px; height:2px; width:1px; background:var(--zaai-shimmer); border-radius:2px;
    transform-origin:left; transform:translateX(var(--x,0)) scaleX(var(--w,0)); pointer-events:none;
  }
  & .ik-flik-ind.redo { transition:transform var(--dur-ui) var(--ease-io); }
  & .ik-panel { min-height:120px; }
  & .ik-panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 24px 8px; }
  & .ik-panel-head p { margin:0; font:400 13px/18px var(--h-font); color:var(--h-muted); }

  /* ── Listor: hårlinje mellan rader, aldrig över och under; scroll inuti ── */
  & .ik-lista { list-style:none; margin:0; padding:0; max-height:452px; overflow-y:auto; overscroll-behavior:contain; }
  & .ik-lista > li + li { border-top:1px solid var(--h-border); }

  & .ik-rad-lank { font:400 12.5px/18px var(--h-font); color:var(--h-ink); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--h-border); }
  & .ik-rad-lank:hover { text-decoration-color:currentColor; }
  & .ik-utfall { padding:0 24px 16px; }
  & .ik-utfall-yta { padding:14px; border-radius:16px; background:var(--ik-yta-tonad); border:1px solid var(--h-border); display:flex; flex-direction:column; gap:10px; }
  & .ik-utfall-yta p { margin:0; font:400 13px/19px var(--h-font); color:var(--h-ink); }
  & .ik-utfall-knappar { display:flex; gap:8px; justify-content:flex-end; align-items:center; }

  /* ── Att hantera: showcasens inkorg — 3 / 5 / 4 av tolv spalter, 24 emellan ── */
  & .ik-ak { display:grid; grid-template-columns:minmax(248px,3fr) minmax(0,5fr) minmax(280px,4fr); gap:24px; align-items:start; }
  & .ik-ak-mitt, & .ik-ak-hoger { display:flex; flex-direction:column; gap:24px; min-width:0; }
  & .ik-kort { display:flex; flex-direction:column; gap:12px; padding:20px; overflow:visible; }
  & .ik-kort > .ik-skelett { padding:0; }

  & .ik-ak-lista { display:flex; flex-direction:column; }
  & .ik-ak-listhuvud { display:flex; align-items:center; gap:8px; padding:16px 16px 0; }
  & .ik-ak-listtitel { margin:0; font:500 14px/20px var(--h-font); color:var(--h-ink); }
  & .ik-ak-antal { display:inline-flex; align-items:center; height:20px; padding:0 8px; border-radius:999px; background:var(--ik-accent-bg); color:var(--ik-accent-text); font-weight:500; font:400 12px/16px var(--h-font); font-variant-numeric:tabular-nums; }
  & .ik-ak-antal[hidden] { display:none; }
  & .ik-sokfalt { position:relative; display:block; margin:12px 16px 0; }
  & .ik-sokfalt svg { position:absolute; left:10px; top:50%; width:16px; height:16px; translate:0 -50%; color:var(--h-muted); pointer-events:none; }
  & .ik-sok {
    width:100%; box-sizing:border-box; height:32px; padding:4px 10px 4px 32px; border:1px solid var(--h-border); border-radius:12px;
    background:#fff; font:400 14px/20px var(--h-font); color:var(--h-ink); outline:none;
    transition:border-color var(--dur-hover) ease, box-shadow var(--dur-hover) ease;
  }
  & .ik-sok::placeholder { color:var(--h-muted); }
  & .ik-sok:focus-visible { border-color:var(--ik-accent); box-shadow:0 0 0 3px var(--ik-accent-bg); }
  & .ik-sok::-webkit-search-cancel-button { display:none; }

  /* Linjeflikar som showcasens "Prioriterat · Alla": 14/500, inaktiva i 60 % bläck, streck under den valda */
  & .ik-linjeflikar { display:flex; gap:4px; padding:11px 13px 0; }
  & .ik-linjeflik {
    position:relative; appearance:none; border:0; background:none; cursor:pointer; padding:2px 6px 8px;
    font:500 14px/20px var(--h-font); color:oklch(0.2645 0 0 / .6); transition:color var(--dur-hover) ease;
  }
  & .ik-linjeflik:hover { color:var(--h-ink); }
  & .ik-linjeflik[aria-selected="true"] { color:var(--h-ink); }
  & .ik-linjeflik::after {
    content:''; position:absolute; left:6px; right:6px; bottom:0; height:2px; border-radius:2px; background:var(--zaai-shimmer);
    transform:scaleX(0); transition:transform var(--dur-ui) var(--ease-out-soft);
  }
  & .ik-linjeflik[aria-selected="true"]::after { transform:scaleX(1); }
  & .ik-linjeflik:focus-visible { outline:2px solid var(--h-ink); outline-offset:-2px; border-radius:6px; }

  & .ik-ak-rader { display:flex; flex-direction:column; max-height:560px; overflow-y:auto; overscroll-behavior:contain; padding-bottom:4px; border-top:1px solid var(--h-border); }
  & .ik-ak-rader > * + * { border-top:1px solid var(--h-border); }
  & .ik-ak-tom { margin:0; padding:16px; font:400 14px/20px var(--h-font); color:var(--h-muted); }
  & .ik-mrad {
    display:flex; gap:12px; width:100%; padding:12px; text-align:left; cursor:pointer; background:none;
    border:0; border-left:2px solid transparent; color:var(--h-ink); font:400 14px/20px var(--h-font);
    transition:background-color var(--dur-hover) ease;
  }
  & .ik-mrad:hover { background:oklch(0.9612 0 0 / .6); }
  & .ik-mrad[aria-current="true"] { background:var(--s-fyll); border-image:var(--zaai-shimmer) 1; }
  & .ik-mrad:focus-visible { outline:2px solid var(--h-ink); outline-offset:-2px; }
  & .ik-avatar {
    display:inline-flex; align-items:center; justify-content:center; flex:none; width:32px; height:32px; margin-top:2px;
    border-radius:999px; background:var(--s-fyll); color:var(--h-muted); font:500 12px/16px var(--h-font);
  }
  & .ik-mrad[aria-current="true"] :is(.ik-avatar, .ik-etikett-chip:is([data-ton=""],:not([data-ton]))) { background:#fff; }
  & .ik-mrad-kropp { display:flex; flex-direction:column; min-width:0; flex:1; }
  & .ik-mrad-topp { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:0 8px; }
  & .ik-mrad-namn { font-weight:500; min-width:0; overflow-wrap:anywhere; }
  & .ik-mrad-tid { flex:none; font:400 12px/16px ui-monospace, "SF Mono", Menlo, monospace; color:var(--h-muted); font-variant-numeric:tabular-nums; }
  & .ik-mrad-amne { margin-top:2px; overflow-wrap:anywhere; }
  & .ik-mrad-sam { margin-top:2px; color:var(--h-muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  & .ik-mrad-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }

  /* Panelrubrik som showcasens: 17/24 grå, något till höger i 12 grått */
  & .ik-prub { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
  & .ik-prub-titel { margin:0; font:400 17px/24px var(--h-font) !important; letter-spacing:-.01em; color:var(--s-titel); }
  & .ik-prub-hoger { font:400 12px/16px var(--h-font); color:var(--h-muted); text-align:right; }

  & .ik-konv { gap:16px; }
  & .ik-konv-topp { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:28px; }
  & .ik-konv-titel { margin:0; font:500 20px/28px var(--h-font); letter-spacing:-.01em; color:var(--h-ink); overflow-wrap:anywhere; }
  & .ik-konv-sub { margin:4px 0 0; font:400 14px/20px var(--h-font); color:var(--h-muted); }
  & .ik-ruta { border:1px solid var(--h-border); border-radius:8px; padding:12px; }
  & .ik-ruta.streckad { border-style:dashed; }
  & .ik-ruta[data-ton="orange"] .ik-ruta-text { color:var(--s-orange); }
  & .ik-ruta-rub { margin:0; font:500 12px/16px var(--h-font); color:var(--h-muted); }
  & .ik-ruta-text { margin:4px 0 0; font:400 14px/24px var(--h-font); color:var(--h-ink); text-wrap:pretty; }
  & .ik-kort > .ik-ruta-text { margin:0; }
  & .ik-liten { margin:0; font:400 12px/16px var(--h-font); color:var(--h-muted); }
  & .ik-gra-ruta { border-radius:8px; background:var(--s-fyll); padding:16px; font:400 14px/24px var(--h-font); white-space:pre-line; max-height:360px; overflow-y:auto; overscroll-behavior:contain; }
  & .ik-svar .ik-textarea { min-height:200px; border-radius:8px; font-size:14px; line-height:24px; }
  & .ik-knapprad { display:flex; }
  & .ik-knapprad > span { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
  & .ik-knapprad > span[hidden] { display:none; }
  & .ik-svar .ik-fall { margin-top:-4px; }
  & .ik-svar .ik-utfall-yta { border-radius:8px; background:var(--s-fyll); border:0; padding:12px; }
  & .ik-svar-status { margin:0; min-height:0; font:400 13px/18px var(--h-font); color:var(--h-muted); }
  & .ik-svar-status:empty { display:none; }
  & .ik-svar-status[data-ton="gron"] { color:var(--s-gron); }
  & .ik-svar-status[data-ton="rod"] { color:var(--s-rod); }

  /* Nyckelrader som showcasens: etikett grå till vänster, värdet i bläck till höger */
  & .ik-nyckelrader { display:flex; flex-direction:column; }
  & .ik-nyckelrad { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:8px 0; font:400 14px/20px var(--h-font); }
  & .ik-nyckelrad + .ik-nyckelrad { border-top:1px solid var(--h-border); }
  & .ik-nyckelrad > span:first-child { color:var(--h-muted); flex:none; }
  & .ik-nyckelrad > span:last-child { text-align:right; min-width:0; overflow-wrap:anywhere; }
  & .ik-tal { font-variant-numeric:tabular-nums; }
  & .ik-ak-tomtext { margin:0; font:400 14px/20px var(--h-font); color:var(--h-muted); }

  @media (max-width: 1180px) {
    & .ik-ak { grid-template-columns:minmax(248px,2fr) minmax(0,3fr); }
    & .ik-ak-hoger { grid-column:1 / -1; display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); }
  }

  /* ── Fält ── */
  & .ik-falt { display:flex; flex-direction:column; gap:6px; }
  & .ik-falt > label, & .ik-etikett { font:500 13px/18px var(--h-font); color:var(--h-ink); }
  & .ik-hjalp { margin:0; font:400 12px/17px var(--h-font); color:var(--h-muted); max-width:52ch; }
  & :is(.ik-input,.ik-select,.ik-textarea) {
    width:100%; box-sizing:border-box; border:1px solid var(--h-border); background:#fff; color:var(--h-ink);
    font:400 13.5px/20px var(--h-font); border-radius:12px; outline:none;
    transition:border-color var(--dur-hover) ease, box-shadow var(--dur-hover) ease;
  }
  & :is(.ik-input,.ik-select) { height:38px; padding:0 12px; }
  & .ik-select { appearance:none; padding-right:32px; cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 12px center; }
  & .ik-textarea { padding:10px 12px; border-radius:16px; min-height:120px; resize:vertical; }
  & :is(.ik-input,.ik-select,.ik-textarea):focus-visible { border-color:var(--ik-accent); box-shadow:0 0 0 3px var(--ik-accent-bg); }
  & :is(.ik-input,.ik-select,.ik-textarea)[aria-invalid="true"] { border-color:var(--s-rod); }
  & .ik-input.kort { width:96px; }

  /* Strömbrytare 32×18, knopp 14 */
  & .ik-switch {
    position:relative; flex:none; width:32px; height:18px; border-radius:999px; border:0; padding:0; cursor:pointer;
    background:oklch(0.87 0 0); transition:background-color var(--dur-hover) ease;
  }
  & .ik-switch[aria-checked="true"] { background:var(--h-ink); }
  & .ik-switch .knopp {
    position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:999px; background:#fff;
    transition:translate var(--dur-hover) var(--ease-out), scale var(--dur-press) var(--ease-out); transform-origin:left;
  }
  & .ik-switch[aria-checked="true"] .knopp { translate:14px 0; transform-origin:right; }
  & .ik-switch:active .knopp { scale:1.12 1; }
  & .ik-switch:focus-visible { box-shadow:0 0 0 3px oklch(0.85 0 0); outline:none; }

  /* Lägesstegen: fyra pillersteg, bara tillåtna lägen går att välja, Skicka syns låst med skäl */
  & .ik-stege { display:inline-flex; gap:2px; padding:2px; border-radius:999px; background:var(--s-fyll); }
  & .ik-steg {
    appearance:none; border:0; background:none; height:28px; padding:0 12px; border-radius:999px; cursor:pointer;
    font:400 12.5px/1 var(--h-font); color:var(--h-muted); display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
    transition:background-color var(--dur-hover) ease, color var(--dur-hover) ease;
  }
  & .ik-steg:hover:not(:disabled):not([aria-checked="true"]) { color:var(--h-ink); }
  & .ik-steg[aria-checked="true"] { background:#fff; color:var(--h-ink); box-shadow:0 0 0 1px var(--h-border); }
  & .ik-steg:disabled { cursor:not-allowed; opacity:.55; }
  & .ik-steg svg { width:11px; height:11px; }

  /* ── Inställningar: etikett och hjälp till vänster, kontrollen till höger ── */
  & .ik-inst { position:relative; display:flex; flex-direction:column; gap:16px; padding-bottom:72px; }
  & .ik-sektion-yta .ik-sektion { padding-top:0; }
  & .ik-kategori .ik-steg { width:104px; justify-content:center; padding:0 6px; }
  & .ik-guide-lista .ik-kategori .ik-steg { width:96px; }
  & .ik-sektion { padding:8px 24px 16px; }
  & .ik-sektion + .ik-sektion { border-top:1px solid var(--h-border); }
  & .ik-sektion-titel { margin:14px 0 4px; font:500 15px/22px var(--h-font); color:var(--h-ink); }
  & .ik-sektion-sub { margin:0 0 8px; font:400 13px/18px var(--h-font); color:var(--h-muted); max-width:70ch; }
  & .ik-inst-rad { display:grid; grid-template-columns:minmax(220px, 45ch) minmax(0,1fr); gap:8px 32px; align-items:center; padding:12px 0; }
  & .ik-inst-rad + .ik-inst-rad { border-top:1px solid var(--h-border); }
  & .ik-inst-rad .ik-kontroll { display:flex; align-items:center; gap:10px; justify-content:flex-end; flex-wrap:wrap; }
  & .ik-inst-rad .ik-kontroll.vanster { justify-content:flex-start; }
  & .ik-inst-rad .ik-fel { grid-column:1 / -1; }
  & .ik-kategori { display:grid; grid-template-columns:32px minmax(160px, 1fr) auto; gap:12px 16px; align-items:center; padding:12px 0; }
  & .ik-kategori + .ik-kategori { border-top:1px solid var(--h-border); }
  & .ik-kategori-namn { font:500 14px/20px var(--h-font); color:var(--h-ink); }
  & .ik-kategori-mening { font:400 12.5px/18px var(--h-font); color:var(--h-muted); margin-top:2px; }
  & .ik-kategori.av .ik-kategori-namn { color:var(--h-muted); }
  & .ik-kategori .ik-fel { grid-column:2 / -1; }
  & .ik-tak-rad { margin:10px 0 0; display:flex; gap:8px; align-items:center; font:400 12.5px/18px var(--h-font); color:var(--h-muted); }
  & .ik-tak-rad svg { width:13px; height:13px; }
  & .ik-dagar { display:flex; gap:4px; flex-wrap:wrap; }
  & .ik-dag { appearance:none; border:1px solid var(--h-border); background:#fff; height:30px; min-width:44px; padding:0 10px; border-radius:999px; cursor:pointer; font:400 12.5px/1 var(--h-font); color:var(--h-muted); transition:background-color var(--dur-hover) ease, color var(--dur-hover) ease; }
  & .ik-dag[aria-pressed="true"] { background:var(--h-ink); border-color:var(--h-ink); color:#fff; }
  & .ik-chips { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
  & .ik-chip { display:inline-flex; align-items:center; gap:4px; height:26px; padding:0 4px 0 10px; border-radius:999px; background:var(--s-fyll); font:400 12.5px/1 var(--h-font); }
  & .ik-chip button { appearance:none; border:0; background:none; width:20px; height:20px; border-radius:999px; cursor:pointer; color:var(--h-muted); display:grid; place-items:center; }
  & .ik-chip button:hover { background:#fff; color:var(--h-ink); }
  & .ik-avancerat-knapp { appearance:none; border:0; background:none; padding:14px 0; cursor:pointer; display:inline-flex; align-items:center; gap:6px; font:400 13px/18px var(--h-font); color:var(--h-ink); }
  & .ik-avancerat-knapp svg { width:14px; height:14px; transition:rotate var(--dur-ui) var(--ease-out); }
  & .ik-avancerat-knapp[aria-expanded="true"] svg { rotate:180deg; }
  & .ik-avancerat-yta { padding:4px 16px; border-radius:16px; background:var(--ik-yta-tonad); border:1px solid var(--h-border); margin-bottom:8px; }

  /* Sparraden: klibbig längst ned, syns bara när formuläret är ändrat */
  & .ik-sparrad {
    position:sticky; bottom:16px; margin:0 16px; z-index:3;
    display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 10px 10px 18px;
    background:var(--h-ink); color:#fff; border-radius:999px; font:400 13px/18px var(--h-font);
    opacity:0; translate:0 12px; visibility:hidden;
    transition:opacity var(--dur-exit) var(--ease-out-soft), translate var(--dur-exit) var(--ease-out-soft), visibility 0s var(--dur-exit);
  }
  & .ik-sparrad.syns { opacity:1; translate:0 0; visibility:visible; transition-duration:var(--dur-ui); transition-timing-function:var(--ease-out); transition-delay:0s; }
  & .ik-sparrad .kv-knapp { background:#fff; color:var(--h-ink); }
  & .ik-sparrad .kv-knapp.lank { background:none; color:oklch(0.85 0 0); }
  & .ik-sparrad-fel { color:#ffc9c4; }

  /* ── Tabeller (Leads, torrkörningen) ── */
  & .ik-tabell-yta { max-height:452px; overflow:auto; overscroll-behavior:contain; }
  & .ik-tabell { width:100%; border-collapse:collapse; font:400 13px/18px var(--h-font); }
  & .ik-tabell th { position:sticky; top:0; background:#fff; z-index:1; text-align:left; padding:10px 12px; font:400 12px/16px var(--h-font); color:var(--h-muted); border-bottom:1px solid var(--h-border); white-space:nowrap; }
  & .ik-tabell td { padding:12px; border-bottom:1px solid var(--h-border); vertical-align:top; color:var(--h-ink); }
  & .ik-tabell tr:last-child td { border-bottom:0; }
  & .ik-tabell :is(th,td):first-child { padding-left:24px; }
  & .ik-tabell :is(th,td):last-child { padding-right:24px; }
  & .ik-tabell td.ik-num { text-align:right; font-variant-numeric:tabular-nums; }
  & .ik-tabell .ik-sammanf { color:var(--h-muted); max-width:52ch; }

  /* ── Logg ── */
  & .ik-logg-rad { display:grid; grid-template-columns:88px minmax(0,1fr) auto; gap:4px 16px; align-items:start; padding:12px 24px; cursor:pointer; }
  & .ik-logg-rad:hover { background:color-mix(in srgb, var(--s-fyll), #fff 40%); }
  & .ik-logg-tid { color:var(--h-muted); padding-top:1px; }
  & .ik-logg-titel { margin:0; font:500 13.5px/19px var(--h-font); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  & .ik-logg-vad { margin:2px 0 0; font:400 12.5px/18px var(--h-font); color:var(--h-muted); }
  & .ik-logg-handelser { grid-column:2 / -1; }
  & .ik-handelser { list-style:none; margin:8px 0 2px; padding:10px 14px; border-radius:16px; background:var(--ik-yta-tonad); border:1px solid var(--h-border); display:flex; flex-direction:column; gap:6px; }
  & .ik-handelser li { display:grid; grid-template-columns:44px 110px minmax(0,1fr); gap:10px; font:400 12.5px/18px var(--h-font); color:var(--h-muted); }
  & .ik-handelser li b { color:var(--h-ink); font-weight:500; }
  & .ik-handelser li.fel b { color:var(--s-rod); }

  /* ── Kunskapsbas: som Hlpys — Innehåll överst, sökning, ett kort per område, rader som fälls ut ── */
  & .ik-kb { display:flex; flex-direction:column; gap:24px; }
  & .ik-kb-kort { overflow:hidden; }
  & .ik-kb-huvud { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px; padding:14px 24px; border-bottom:1px solid var(--h-border); }
  & .ik-kb-titel { margin:0; font:500 14px/20px var(--h-font); color:var(--h-ink); }
  & .ik-kb-rad { margin:2px 0 0; font:400 12px/16px var(--h-font); color:var(--h-muted); }
  & .ik-kb-namnrad { display:flex; align-items:center; gap:8px; }
  & .ik-kb-ikon { display:inline-grid; place-items:center; flex:none; color:var(--ik-accent); }
  & .ik-kb-ikon svg { width:16px; height:16px; stroke-width:1.75; }
  & .ik-kb-antal { display:inline-flex; align-items:center; height:20px; padding:0 8px; border-radius:999px; background:var(--ik-accent-bg); color:var(--ik-accent-text); font:500 12px/1 var(--h-font); font-variant-numeric:tabular-nums; }

  & .ik-kb-index { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px 32px; padding:20px 24px; }
  & .ik-kb-index-omr { display:flex; flex-direction:column; gap:8px; min-width:0; }
  & .ik-kb-index-namn { appearance:none; border:0; background:none; padding:0; cursor:pointer; display:flex; align-items:center; gap:8px; text-align:left; font:500 14px/20px var(--h-font); color:var(--h-ink); transition:color var(--dur-hover) ease; }
  & .ik-kb-index-namn:hover { color:var(--h-muted); }
  & .ik-kb-index-omr > .ik-kb-rad { margin:0; }
  & .ik-kb-index-lista { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
  & .ik-kb-index-lista button { appearance:none; border:0; background:none; cursor:pointer; width:100%; display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:4px 8px; border-radius:8px; text-align:left; font:400 14px/20px var(--h-font); color:var(--h-ink); transition:background-color var(--dur-hover) ease; }
  & .ik-kb-index-lista button:hover { background:oklch(0.9612 0 0 / .6); }
  & .ik-kb-index-lista .ik-tal { flex:none; font-size:12px; color:var(--h-muted); }
  & .ik-kb-index-titel { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  & .ik-kb-index-tom { margin:0; padding:4px 8px; font:400 13px/20px var(--h-font); color:var(--h-muted); }

  & .ik-kb-sokkort { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:12px 24px; }
  & .ik-kb-sokfalt { flex:1; min-width:256px; margin:0; }
  & .ik-kb-sokkort > .ik-kb-rad { margin:0; }

  & .ik-kb-rader > * + * { border-top:1px solid var(--h-border); }
  & .ik-kb-kalla { position:relative; }
  & .ik-kb-kalla[hidden] { display:none; }
  & .ik-kb-kalla::before { content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--zaai-shimmer); opacity:0; transition:opacity var(--dur-ui) var(--ease-out-soft); }
  & .ik-kb-kalla.oppen::before { opacity:1; }
  & .ik-kb-kalla.inramad { animation:ik-kb-inram 1400ms var(--ease-out-soft); }
  & .ik-kb-kalla-rubrik { appearance:none; border:0; background:none; cursor:pointer; width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 24px; text-align:left; font:400 14px/20px var(--h-font); color:var(--h-ink); transition:background-color var(--dur-hover) ease; }
  & .ik-kb-kalla-rubrik:hover { background:oklch(0.9612 0 0 / .5); }
  & .ik-kb-kalla-rubrik:focus-visible { outline:2px solid var(--ik-accent); outline-offset:-2px; }
  & .ik-kb-kalla-vanster { display:flex; align-items:center; gap:8px; min-width:0; }
  & .ik-kb-kalla-titel { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  & .ik-kb-kalla-hoger { display:flex; align-items:center; gap:8px; flex:none; font:400 12px/16px var(--h-font); color:var(--h-muted); }
  & .ik-kb-kalla-hoger svg { width:16px; height:16px; stroke-width:1.5; transition:rotate var(--dur-ui) var(--ease-out); }
  & .ik-kb-kalla.oppen .ik-kb-kalla-hoger svg { rotate:180deg; }
  & .ik-kb-kalla-kropp { display:flex; flex-direction:column; gap:10px; padding:0 24px 16px; }
  & .ik-kb-kalla-kropp[hidden] { display:none; }
  & .ik-kb-svar { border-radius:8px; background:var(--s-fyll); padding:12px; }
  & .ik-kb-svar .ik-ruta-text { white-space:pre-wrap; }
  & .ik-kb-lank { color:var(--ik-accent-text); text-decoration:underline; text-decoration-color:color-mix(in oklch, var(--ik-accent) 35%, transparent); text-underline-offset:3px; overflow-wrap:anywhere; }
  & .ik-kb-kalla-atgarder { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
  & .ik-kb-traff-tom { margin:0; padding:12px 24px; font:400 13px/20px var(--h-font); color:var(--h-muted); }
  & .ik-kb-traff-tom[hidden] { display:none; }

  & .ik-kb-ny { display:flex; flex-direction:column; gap:10px; padding:16px 24px 20px; border-top:1px solid var(--h-border); }
  & .ik-kb-ny .ik-textarea { min-height:88px; border-radius:10px; }
  & .ik-kb-ny .ik-input { border-radius:10px; }
  & .ik-kb-ny-rad { display:flex; gap:8px; align-items:center; }
  & .ik-kb-ny-rad .ik-input { flex:1; min-width:0; }
  & .ik-kb-ny .ik-hjalp:empty { display:none; }
  & .ik-ny-kalla-fot { display:flex; gap:10px; align-items:center; }
  & .ik-fil { display:flex; align-items:center; justify-content:center; gap:10px; min-height:72px; border:1px dashed oklch(0.85 0 0); border-radius:14px; background:var(--ik-yta-tonad); color:var(--h-muted); font:400 13px/18px var(--h-font); cursor:pointer; text-align:center; padding:12px 16px; transition:border-color var(--dur-hover) ease, background-color var(--dur-hover) ease, color var(--dur-hover) ease; }
  & .ik-fil svg { width:18px; height:18px; flex:none; stroke-width:1.75; }
  & .ik-fil:hover, & .ik-fil.drar { color:var(--h-ink); border-color:var(--ik-accent); background:var(--ik-accent-bg); }
  & .ik-fil.vald { color:var(--h-ink); border-style:solid; }
  & .ik-fil:focus-within { outline:2px solid var(--ik-accent); outline-offset:2px; }
  & .ik-exempel { padding:12px 24px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 16px; }
  & .ik-exempel-fraga { margin:0; font:500 14px/20px var(--h-font); }
  & .ik-exempel-svar { margin:0; font:400 13px/19px var(--h-font); color:var(--h-muted); white-space:pre-wrap; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  & .ik-kb.inbaddad { gap:16px; }
  & .ik-kb.inbaddad .ik-kb-kort { border-radius:16px; }
  @media (max-width: 1180px) { & .ik-kb-index { grid-template-columns:repeat(2, minmax(0,1fr)); } }

  /* Segmentet används fortfarande av andra formulär */
  & .ik-segment { display:inline-flex; gap:2px; padding:2px; border-radius:999px; background:var(--s-fyll); margin-bottom:12px; }
  & .ik-segment button { appearance:none; border:0; background:none; height:28px; padding:0 14px; border-radius:999px; cursor:pointer; font:400 12.5px/1 var(--h-font); color:var(--h-muted); }
  & .ik-segment button[aria-pressed="true"] { background:#fff; color:var(--h-ink); box-shadow:0 0 0 1px var(--h-border); }

  /* ── Guidad start: stegen till vänster, stegets innehåll till höger ── */
  & .ik-start-head { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; padding:20px 24px 12px; }
  & .ik-start-head h2 { margin:0; font:400 17px/24px var(--h-font); letter-spacing:-.01em; color:var(--s-titel); }
  & .ik-start-head p { margin:2px 0 0; font:400 12px/16px var(--h-font); color:var(--h-muted); }
  & .ik-guide-kropp { display:grid; grid-template-columns:248px minmax(0,1fr); border-top:1px solid var(--h-border); }
  & .ik-guide-steg { list-style:none; margin:0; padding:12px; border-right:1px solid var(--h-border); display:flex; flex-direction:column; gap:2px; }
  & .ik-gsteg {
    appearance:none; width:100%; border:0; background:none; cursor:pointer; text-align:left;
    display:grid; grid-template-columns:24px minmax(0,1fr); gap:12px; align-items:start; padding:10px 12px; border-radius:12px;
    font-family:var(--h-font); color:var(--h-ink); transition:background-color var(--dur-hover) ease;
  }
  & .ik-gsteg:hover:not(:disabled) { background:var(--h-bg); }
  & .ik-gsteg[aria-current="step"] { background:var(--h-bg); }
  & .ik-gsteg:disabled { cursor:default; opacity:.55; }
  & .ik-gsteg-nr {
    width:24px; height:24px; border-radius:999px; display:grid; place-items:center; font:400 12px/1 var(--h-font); font-variant-numeric:tabular-nums;
    border:1px solid oklch(0.82 0 0); color:var(--h-muted); background:#fff; transition:background-color var(--dur-ui) ease, color var(--dur-ui) ease;
  }
  & .ik-gsteg[aria-current="step"] .ik-gsteg-nr { background:var(--h-ink); border-color:var(--h-ink); color:#fff; }
  & .ik-gsteg.klar .ik-gsteg-nr { background:var(--s-gron-bg); border-color:var(--s-gron-bg); color:var(--s-gron); }
  & .ik-gsteg-nr svg { width:12px; height:12px; }
  & .ik-gsteg-titel { display:block; font:400 14px/20px var(--h-font); }
  & .ik-gsteg[aria-current="step"] .ik-gsteg-titel { font-weight:500; }
  & .ik-gsteg-sub { display:block; font:400 12px/16px var(--h-font); color:var(--h-muted); margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  & .ik-guide-yta { padding:24px 32px; display:flex; flex-direction:column; gap:16px; min-width:0; }
  & .ik-guide-rubrik { margin:0; font:400 20px/28px var(--h-font); letter-spacing:-.01em; color:var(--h-ink); }
  & .ik-guide-yta > p { margin:0; font:400 14px/20px var(--h-font); color:var(--h-muted); max-width:64ch; text-wrap:pretty; }
  & .ik-guide-fot { display:flex; justify-content:space-between; align-items:center; padding-top:16px; border-top:1px solid var(--h-border); margin-top:4px; }
  & .ik-guide-lista { border:1px solid var(--h-border); border-radius:16px; padding:0 16px; overflow:hidden; }
  & .ik-guide-kb > .kv-yta { border:1px solid var(--h-border); border-radius:16px; }
  & .ik-fraga { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:16px 20px; border-radius:16px; background:var(--h-bg); }
  & .ik-sammanfattning { display:grid; grid-template-columns:160px minmax(0,1fr); margin:0; border-top:1px solid var(--h-border); }
  & .ik-sammanfattning :is(dt,dd) { margin:0; padding:10px 0; border-bottom:1px solid var(--h-border); font:400 14px/20px var(--h-font); }
  & .ik-sammanfattning dt { color:var(--h-muted); font-size:13px; }
  & .ik-val-lista { display:flex; flex-direction:column; gap:8px; max-width:560px; }
  & .ik-val { display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:12px; border:1px solid var(--h-border); background:#fff; cursor:pointer; text-align:left; font:400 13.5px/19px var(--h-font); color:var(--h-ink); appearance:none; transition:border-color var(--dur-hover) ease, background-color var(--dur-hover) ease; }
  & .ik-val:hover:not(:disabled) { background:var(--ik-yta-tonad); }
  & .ik-val:disabled { cursor:not-allowed; opacity:.6; }
  & .ik-val[aria-pressed="true"] { border-color:var(--h-ink); box-shadow:0 0 0 1px var(--h-ink); }
  & .ik-val small { display:block; color:var(--h-muted); font-size:12px; margin-top:2px; }
  & .ik-provrad { margin:0; font:400 13px/18px var(--h-font); color:var(--h-muted); }

  /* ── Fler automationer: en yta med rader, fast kolumn för svaret ── */
  & .ik-erbjud { display:grid; grid-template-columns:40px minmax(0,1fr) 196px; gap:16px; align-items:center; padding:18px 24px; }
  & .ik-katalog-ikon { width:40px; height:40px; border-radius:12px; background:var(--zs-rosa,#F7F0FA); display:grid; place-items:center; font-size:20px; }
  & .ik-erbjud-namn { margin:0; font:400 17px/24px var(--h-font); letter-spacing:-.01em; color:var(--h-ink); }
  & .ik-erbjud-text { margin:2px 0 0; font:400 14px/20px var(--h-font); color:var(--h-muted); max-width:64ch; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  & .ik-erbjud-fot { justify-self:end; min-height:32px; display:flex; align-items:center; }
  & .ik-katalog-tack { display:inline-flex; align-items:center; gap:6px; font:400 12.8px/32px var(--h-font); color:var(--s-gron); }

  /* ── Skelett medan data hämtas ── */
  & .ik-skelett { padding:14px 24px; display:flex; flex-direction:column; gap:14px; }
  & .ik-skelett i { display:block; height:12px; border-radius:6px; background:linear-gradient(90deg, var(--s-fyll), oklch(0.985 0 0), var(--s-fyll)); background-size:200% 100%; animation:ik-skimra 1.4s linear infinite; }
  & .ik-skelett i:nth-child(3n+2) { width:72%; }
  & .ik-skelett i:nth-child(3n) { width:48%; }

  @media (hover:hover) and (pointer:fine) {
    & .ik-rad:hover { --rad-ton:color-mix(in srgb, var(--s-fyll), #fff 30%); }
  }
}

/* ── Rörelseprimitiver (samma namn som husets mjukHojd/mjuktByte/raderIn) ── */
.ik-fall { display:grid; grid-template-rows:1fr; transition:grid-template-rows var(--dur-kollaps,240ms) var(--ease-out); }
.ik-fall > .ik-fall-inre { min-height:0; overflow:hidden; opacity:1; transition:opacity var(--dur-ui) var(--ease-out-soft) var(--dur-tona-in-sen,60ms); }
.ik-fall.stangd { grid-template-rows:0fr; transition-duration:var(--dur-kollaps-ut,180ms); }
.ik-fall.stangd > .ik-fall-inre { opacity:0; transition-delay:0ms; transition-duration:var(--dur-tona-ut,120ms); }
.ik-fall:not(.stangd).klar > .ik-fall-inre { overflow:visible; }
.ik-byt { transition:opacity var(--dur-swap,140ms) var(--ease-out-soft), filter var(--dur-swap,140ms) var(--ease-out-soft); }
.ik-byt.byter { opacity:0; filter:blur(2px); }
.ik-in { animation:ik-in var(--dur-enter) var(--ease-out) both; animation-delay:calc(var(--i,0) * var(--stag)); }
@keyframes ik-in { from { opacity:0; translate:0 6px; } }
@keyframes ik-tona { from { opacity:0; } }
@keyframes ik-bock { to { stroke-dashoffset:0; } }
@keyframes ik-skimra { from { background-position:200% 0; } to { background-position:0 0; } }
@keyframes zs-drift { from { background-position:0% 0; } to { background-position:200% 0; } }

/* Kortet i "Dina system" leder till vyn */
.sys-card[data-agent="inkorgssystemet"] { cursor:pointer; transition:opacity var(--dur-press) ease; }
.sys-card[data-agent="inkorgssystemet"]:active { opacity:.72; }

@media (prefers-reduced-motion: reduce) {
  :is(#view-inkorgen,#view-fler-automationer) { --dur-press:0ms; --dur-hover:120ms; --dur-ui:120ms; --dur-enter:120ms; --dur-exit:120ms; --dur-swap:120ms; --dur-kollaps:0ms; --dur-kollaps-ut:0ms; --dur-hall:300ms; --stag:0ms; }
  :is(#view-inkorgen,#view-fler-automationer) .ik-in { animation-name:ik-tona; }
  :is(#view-inkorgen,#view-fler-automationer) .ik-huvud::before { animation:none !important; }
  :is(#view-inkorgen,#view-fler-automationer) .ik-skelett i { animation:none; }
  :is(#view-inkorgen,#view-fler-automationer) .kv-knapp.primar::after { display:none; }
}

/* Menyns Inställningar ligger längst ner ovanför användaren, med en hårlinje över — som i showcasen */
.ik-meny-inst-yta { flex:none !important; overflow:visible !important; padding-top:8px !important; margin-top:auto; border-top:1px solid var(--h-border, oklch(0.9254 0.0017 67.8)); }
.ik-meny-inst-yta:not(:has(.sb-item:not([hidden]))) { display:none; }

/* ═══ INSTÄLLNINGAR — onboardingstil: stegmeny till vänster, luftig kolumn, kort per sort ═══════════════
   En vit yta med två kolumner. Menyn är en lodrät räls med prickar (bläck = där ni är, orange = något
   behöver er). Varje sorts mejl är ett tonat kort som fälls ut i streckade delar. Val görs med piller
   (bläckring = valt). Fält 44 höga, radie 8, etiketten ovanför. Vikt aldrig över 500. ═══════════════════ */
#portal-main-area .portal-view#view-inkorgen {
  & .ik-inst {
    display:grid; grid-template-columns:264px minmax(0,1fr); gap:0; padding:0;
    background:#fff; border:1px solid var(--h-border); border-radius:24px;
  }

  /* ── Menyn ── */
  & .ik-inst-nav { position:sticky; top:24px; align-self:start; padding:32px 20px 32px 24px; }
  & .ik-inst-nav-huvud { margin:0 0 24px 8px; }
  & .ik-inst-nav-titel { margin:0; font:500 15px/22px var(--h-font); color:var(--h-ink); }
  & .ik-inst-nav-sub { margin:2px 0 0; font:400 13px/19px var(--h-font); color:var(--h-muted); }
  & .ik-inst-nav-lista { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
  & .ik-inst-nav-lista > li { position:relative; }
  & .ik-inst-nav-lista > li:not(.ik-inst-nav-grupp)::before {
    content:''; position:absolute; left:17.5px; top:0; bottom:0; width:1px; background:var(--h-border);
  }
  & .ik-inst-nav-lista > li:not(.ik-inst-nav-grupp):first-child::before { top:17px; }
  & .ik-inst-nav-lista > li:not(.ik-inst-nav-grupp):has(+ .ik-inst-nav-grupp)::before,
  & .ik-inst-nav-lista > li:not(.ik-inst-nav-grupp):last-child::before { bottom:calc(100% - 17px); }
  & .ik-inst-nav-lista > .ik-inst-nav-grupp + li::before { top:17px; }
  & .ik-inst-nav-grupp { margin:20px 0 6px; padding-left:40px; font:400 12.5px/18px var(--h-font); color:var(--h-muted); }
  & .ik-inst-nav-lank {
    position:relative; display:grid; grid-template-columns:20px 1fr; gap:12px; width:100%; padding:8px; min-height:52px;
    border:0; border-radius:8px; background:none; text-align:left; cursor:pointer; color:var(--h-muted);
    transition:background-color var(--dur-hover) ease;
  }
  & .ik-inst-nav-lank:focus-visible { outline:2px solid var(--h-ink); outline-offset:-2px; }
  & .ik-inst-nav-prick {
    width:10px; height:10px; margin:5px 0 0 5px; border-radius:999px; background:#fff; box-shadow:inset 0 0 0 1.5px oklch(0.8 0 0);
    transition:background-color var(--dur-hover) var(--ease-out-soft), box-shadow var(--dur-hover) var(--ease-out-soft);
  }
  & .ik-inst-nav-namn { display:block; font:400 14px/20px var(--h-font); transition:color var(--dur-hover) var(--ease-out-soft); }
  & .ik-inst-nav-rad { display:block; margin-top:1px; font:400 12.5px/18px var(--h-font); color:var(--h-muted); }
  & .ik-inst-nav-lank[aria-current="true"] .ik-inst-nav-namn { color:var(--h-ink); font-weight:500; }
  & .ik-inst-nav-lank[aria-current="true"] .ik-inst-nav-prick { background:var(--h-ink); box-shadow:inset 0 0 0 1.5px var(--h-ink); }
  & .ik-inst-nav-lank.atgard .ik-inst-nav-prick { background:var(--s-orange); box-shadow:inset 0 0 0 1.5px var(--s-orange); }
  & .ik-inst-nav-lank.atgard .ik-inst-nav-rad { color:var(--s-orange); }

  /* ── Innehållskolumnen ── */
  & .ik-inst-innehall { border-left:1px dashed var(--h-border); padding:40px 56px 40px; min-width:0; }
  & .ik-inst-ram { max-width:720px; }
  & .ik-inst-sek { scroll-margin-top:24px; }
  & .ik-inst-sek + .ik-inst-sek { margin-top:64px; }
  & .ik-sek-head { margin-bottom:20px; }
  & .ik-sek-head h2 { margin:0; font:500 17px/24px var(--h-font) !important; color:var(--h-ink); letter-spacing:-.005em; text-wrap:balance; }
  & .ik-sek-head p { margin:4px 0 0; font:400 14px/20px var(--h-font); color:var(--h-muted); max-width:60ch; }
  & .ik-grupp-delare { display:flex; align-items:center; gap:16px; margin:72px 0 48px; font:400 13px/19px var(--h-font); color:var(--h-muted); white-space:nowrap; }
  & .ik-grupp-delare::before, & .ik-grupp-delare::after { content:''; flex:1; height:1px; background:var(--h-border); }

  /* ── Kort ── */
  & .ik-kortlista { display:flex; flex-direction:column; gap:12px; }
  /* :not(.kv-yta) — inkorgens egna vita kort (Att hantera) heter också ik-kort och ska inte få inställningskortens stil */
  & .ik-kort:not(.kv-yta) { display:flex; flex-direction:column; background:var(--ik-yta-tonad); border:1px solid var(--h-border); border-radius:12px; padding:0; gap:0;
    transition:background-color var(--dur-ui) var(--ease-out-soft), border-color var(--dur-ui) var(--ease-out-soft); }
  & .ik-kort.atgard:not(.kv-yta) { background:var(--s-orange-bg); border-color:color-mix(in oklch, var(--s-orange) 25%, var(--h-border)); }
  & .ik-kort-huvud { display:grid; grid-template-columns:40px minmax(0,1fr) auto; gap:16px; align-items:center; padding:16px 20px; min-height:72px; }
  & .ik-kort-ikon { width:40px; height:40px; display:grid; place-items:center; background:#fff; border:1px solid var(--h-border); border-radius:8px; color:var(--h-muted); }
  & .ik-kort-ikon svg { width:18px; height:18px; }
  & .ik-kort-text { min-width:0; }
  & .ik-kategori .ik-kort-text { cursor:pointer; }
  & .ik-kort-namnrad { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  & .ik-kategori-namn { font:500 15px/22px var(--h-font) !important; color:var(--h-ink); }
  & .ik-kort-sub { margin-top:2px; font:400 13px/19px var(--h-font); color:var(--h-muted); text-wrap:pretty; }
  & .ik-kategori-mening { font:inherit !important; color:inherit !important; margin:0 !important; }
  & .ik-kort-atgarder { display:flex; align-items:center; gap:12px; }
  & .ik-kort-oppna {
    width:32px; height:32px; display:grid; place-items:center; flex:none; cursor:pointer; color:var(--h-ink);
    background:#fff; border:1px solid var(--h-border); border-radius:8px;
    transition:background-color var(--dur-hover) ease, transform var(--dur-press) var(--ease-out);
  }
  & .ik-kort-oppna svg { width:16px; height:16px; transition:rotate var(--dur-ui) var(--ease-out); }
  & .ik-kort-oppna[aria-expanded="true"] svg { rotate:180deg; }
  & .ik-kort-oppna:active { transform:scale(.97); }
  & .ik-kort-oppna:focus-visible { outline:2px solid var(--h-ink); outline-offset:2px; }
  & .ik-fall-inre > .ik-kort-kropp, & .ik-kort > .ik-kort-kropp { border-top:1px dashed var(--h-border); }
  & .ik-kort-del { padding:20px; }
  & .ik-kort-del + .ik-kort-del { border-top:1px dashed var(--h-border); }
  & .ik-kort > .ik-fel { display:flex; gap:6px; align-items:baseline; padding:0 20px 14px 76px; margin:0; font:400 13px/19px var(--h-font); color:var(--s-orange); }
  & .ik-kort > .ik-fel::before { content:'!'; display:inline-grid; place-items:center; flex:none; width:15px; height:15px; border-radius:999px; box-shadow:inset 0 0 0 1.3px currentColor; font:500 10px/1 var(--h-font); translate:0 2px; }
  & .ik-kategori { display:flex; grid-template-columns:none; align-items:stretch; gap:0; padding:0; }
  & .ik-kategori + .ik-kategori { border-top:1px solid var(--h-border); }
  & .ik-kategori.av { background:#fff; }
  & .ik-kategori.av :is(.ik-kort-ikon, .ik-kort-text) { opacity:.55; }
  & .ik-kategori :is(.ik-kort-ikon, .ik-kort-text) { transition:opacity var(--dur-ui) var(--ease-out-soft); }
  & .ik-pill.av { background:none; box-shadow:inset 0 0 0 1px var(--h-border); color:var(--h-muted); }
  & .ik-tak-rad { margin:16px 0 0; }
  & .ik-guide-lista .ik-kategori .ik-kort-kropp { border-top:1px dashed var(--h-border); }

  /* ── Piller i stället för segment/stege ── */
  & .ik-inst :is(.ik-stege, .ik-segment, .ik-dagar), & .ik-guide-lista .ik-stege { display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:0; background:none; border-radius:0; }
  & .ik-inst :is(.ik-steg, .ik-segment button, .ik-dag), & .ik-guide-lista .ik-steg {
    width:auto; min-width:0; height:40px; padding:0 16px; border:0; border-radius:999px; background:#fff; cursor:pointer;
    box-shadow:inset 0 0 0 1px var(--h-border); font:400 14px/1 var(--h-font); color:var(--h-ink);
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    transition:background-color var(--dur-hover) var(--ease-out-soft), box-shadow var(--dur-hover) var(--ease-out-soft), color var(--dur-hover) var(--ease-out-soft), transform var(--dur-press) var(--ease-out);
  }
  & .ik-inst .ik-dag { min-width:56px; }
  & .ik-inst :is(.ik-steg[aria-checked="true"], .ik-segment button[aria-pressed="true"], .ik-dag[aria-pressed="true"]),
  & .ik-guide-lista .ik-steg[aria-checked="true"] { background:var(--ik-yta-tonad); box-shadow:inset 0 0 0 2px var(--h-ink); color:var(--h-ink); }
  & .ik-inst :is(.ik-steg, .ik-segment button, .ik-dag):active:not(:disabled) { transform:scale(.97); }
  & .ik-inst :is(.ik-steg, .ik-segment button, .ik-dag):focus-visible { outline:2px solid var(--h-ink); outline-offset:2px; }
  & .ik-inst .ik-steg:disabled { opacity:.5; cursor:not-allowed; }
  & .ik-inst .ik-steg svg { width:14px; height:14px; }
  @media (hover:hover) and (pointer:fine) {
    & .ik-inst :is(.ik-steg, .ik-segment button, .ik-dag):hover:not(:disabled):not([aria-checked="true"]):not([aria-pressed="true"]) { box-shadow:inset 0 0 0 1px oklch(0.2645 0 0 / .35); }
    & .ik-inst-nav-lank:hover { background:var(--s-fyll); }
    & .ik-kort-oppna:hover { background:var(--s-fyll); }
  }

  /* ── Fält: etiketten ovanför, streckat mellan ── */
  & .ik-falt-lista { display:flex; flex-direction:column; }
  & .ik-inst .ik-inst-rad { display:grid; grid-template-columns:1fr; gap:8px; padding:20px 0; align-items:start; }
  & .ik-inst .ik-inst-rad:first-child { padding-top:0; }
  & .ik-inst .ik-inst-rad + .ik-inst-rad { border-top:1px dashed var(--h-border); }
  & .ik-inst .ik-inst-rad.brytare { grid-template-columns:minmax(0,1fr) auto; align-items:center; }
  & .ik-inst .ik-inst-rad .ik-kontroll { justify-content:flex-start; gap:12px; }
  & .ik-inst .ik-inst-rad.brytare .ik-kontroll { justify-content:flex-end; }
  & .ik-inst .ik-etikett { display:block; font:500 14px/20px var(--h-font); color:var(--h-ink); }
  & .ik-inst .ik-hjalp { margin:2px 0 0; font:400 13px/19px var(--h-font); color:var(--h-muted); max-width:60ch; }
  & .ik-inst .ik-hjalp.ik-varning { color:var(--s-orange); }
  & .ik-inst :is(.ik-input, .ik-select) { height:44px; border-radius:8px; font:400 15px/22px var(--h-font); padding:0 14px; max-width:400px; }
  & .ik-inst .ik-select { min-width:240px !important; width:auto; padding-right:36px; background-position:right 14px center; }
  & .ik-inst .ik-input.kort { width:104px; }
  & .ik-inst .ik-textarea { border-radius:8px; min-height:120px; font:400 15px/24px var(--h-font); max-width:none; }
  & .ik-inst .ik-chips .ik-input { height:36px; width:240px; }
  & .ik-lanknapp { appearance:none; border:0; background:none; padding:0; font:inherit; color:var(--h-ink); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }

  /* Fler inställningar: hela rubriken är knappen */
  & #ik-sek-fler .ik-avancerat-knapp { display:flex; width:100%; justify-content:space-between; gap:10px; min-height:56px; padding:0 20px; font:500 15px/22px var(--h-font); }
  & #ik-sek-fler .ik-avancerat-knapp > span:first-child { flex:1; text-align:left; }
  & #ik-sek-fler .ik-avancerat-knapp svg { width:16px; height:16px; }

  /* ── Lådor (personer, historik) ── */
  & .ik-lada { background:#fff; border:1px solid var(--h-border); border-radius:12px; overflow:hidden; }
  & .ik-lada-lista { list-style:none; margin:0; padding:0; max-height:384px; overflow-y:auto; overscroll-behavior:contain; }
  & .ik-lada-lista > li + li { border-top:1px solid var(--h-border); }
  & .ik-lada-tom { margin:0; padding:16px; font:400 14px/20px var(--h-font); color:var(--h-muted); }
  & .ik-lada .ik-skelett { padding:16px; }
  & .ik-lada .ik-kalla { display:grid; grid-template-columns:minmax(0,1fr) auto !important; gap:12px; align-items:center; padding:10px 16px; min-height:56px; }
  & .ik-lada .ik-kalla-titel { margin:0; font:500 14px/20px var(--h-font); color:var(--h-ink); }
  & .ik-lada .ik-kalla-meta { margin:2px 0 0; font:400 13px/19px var(--h-font); color:var(--h-muted); }
  & .ik-lada .ik-kalla-meta .ik-mono { font-size:12px; }
  & .ik-person { display:grid; grid-template-columns:36px minmax(0,1fr) auto; gap:14px; align-items:center; padding:14px 16px; min-height:64px; }
  & .ik-avatar-ruta { width:36px; height:36px; display:grid; place-items:center; border-radius:8px; background:var(--s-fyll); font:500 13px/1 var(--h-font); color:var(--h-muted); }
  & .ik-person-namn { display:block; font:500 15px/22px var(--h-font); color:var(--h-ink); }
  & .ik-person-epost { display:block; font-size:13px; color:var(--h-muted); overflow-wrap:anywhere; }
  & .ik-ikonknapp { width:32px; height:32px; display:grid; place-items:center; border:0; border-radius:8px; background:none; color:var(--h-muted); cursor:pointer; }
  & .ik-ikonknapp:hover { background:var(--s-fyll); color:var(--s-rod); }
  & .ik-lagg-till { display:grid; grid-template-columns:1fr 1.2fr auto; gap:12px; align-items:end; margin-top:16px; }
  & .ik-lagg-till label, & .ik-kanal-falt label { display:flex; flex-direction:column; gap:6px; min-width:0; }
  & .ik-lagg-till .ik-input, & .ik-kanal-falt .ik-input { max-width:none; width:100%; }
  & .ik-lagg-till .kv-knapp, & .ik-kanal-falt .kv-knapp:not(.lank), & .ik-atgardsrad .kv-knapp { height:44px; padding:0 18px; font-size:14px; }
  & .ik-teams-val { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:12px; align-items:end; margin-top:12px; }
  & .ik-teams-val label { display:flex; flex-direction:column; gap:6px; min-width:0; }
  & .ik-teams-val .ik-select { min-width:0 !important; max-width:none; width:100%; }
  & .ik-teams-val .kv-knapp { height:44px; padding:0 18px; font-size:14px; }
  & [data-kanal] .ik-kort-atgarder .kv-knapp { height:36px; padding:0 14px; font-size:13.5px; }
  & .ik-kanal-status { padding:0 20px 14px; margin:0 !important; }
  & .ik-kanal-status:empty { display:none; }
  & .ik-atgardsrad { display:flex; align-items:center; gap:12px; margin-top:20px; padding-top:20px; border-top:1px dashed var(--h-border); }

  /* ── Sparraden: följer kolumnen ── */
  & .ik-inst .ik-sparrad { position:sticky; bottom:24px; margin:48px 0 0; min-height:56px; padding:8px 8px 8px 20px; }
  & .ik-inst .ik-sparrad .kv-knapp { height:40px; }

  @media (max-width: 1320px) {
    & .ik-inst { grid-template-columns:224px minmax(0,1fr); }
    & .ik-inst-innehall { padding:32px 40px 40px; }
  }
}

@keyframes ik-kb-inram { 0%,40% { background:var(--ik-accent-bg); } 100% { background:transparent; } }