/* ═══ 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); }

  /* ── Dokumenttolken: upptakten (som Hlpys "Listan läses in") och sorteringstavlan ── */
  & .ik-tolk { padding:24px 0 40px; cursor:default; }
  & .ik-tolk-fil { margin:0; font:400 14px/20px var(--h-font); color:var(--h-muted); opacity:0; translate:0 6px; transition:opacity 500ms var(--ease-out-soft) 120ms, translate 500ms var(--ease-out-soft) 120ms; }
  & .ik-tolk-rubrik { margin:4px 0 0; font:400 44px/1.1 var(--h-font) !important; letter-spacing:-.02em; color:var(--h-ink);
    opacity:0; translate:0 12px; scale:.955; filter:blur(10px); transition:opacity 720ms var(--ease-out-soft) 180ms, translate 720ms var(--ease-out-soft) 180ms, scale 720ms var(--ease-out-soft) 180ms, filter 720ms var(--ease-out-soft) 180ms; }
  & .ik-tolk-lede { margin:8px 0 0; font:400 14px/20px var(--h-font); color:var(--h-muted); opacity:0; transition:opacity 500ms var(--ease-out-soft) 380ms; }
  & .ik-tolk.in :is(.ik-tolk-fil,.ik-tolk-rubrik,.ik-tolk-lede) { opacity:1; translate:0 0; scale:1; filter:none; }
  & .ik-tolk-kropp { transition:opacity 460ms var(--ease-out-soft), translate 460ms var(--ease-out-soft), filter 460ms var(--ease-out-soft); }
  & .ik-tolk.gar :is(.ik-tolk-fil,.ik-tolk-rubrik,.ik-tolk-kropp) { opacity:0; translate:0 -12px; filter:blur(6px); transition-delay:0ms; transition-duration:460ms; }
  & .ik-tolk-steg { list-style:none; margin:32px 0 0; padding:0; max-width:576px; display:flex; flex-direction:column; gap:2px; }
  & .ik-tolk-steg li { display:flex; align-items:center; gap:12px; padding:6px 0; opacity:0; translate:0 8px; transition:opacity 420ms var(--ease-out-soft), translate 420ms var(--ease-out-soft); }
  & .ik-tolk-steg li.startad { opacity:1; translate:0 0; }
  & .ik-tolk-ikon { position:relative; width:20px; height:20px; flex:none; }
  & .ik-snurra { position:absolute; inset:2px; border-radius:50%; border:2px solid oklch(0.9 0 0); border-top-color:var(--ik-accent); animation:ik-snurr 800ms linear infinite; transition:opacity 200ms ease; }
  & .ik-bock { position:absolute; inset:0; display:grid; place-items:center; border-radius:50%; background:var(--ik-accent-bg); color:var(--ik-accent-text); opacity:0; scale:.5; transition:opacity 340ms cubic-bezier(.23,1,.32,1), scale 340ms cubic-bezier(.23,1,.32,1); }
  & .ik-bock svg { width:12px; height:12px; }
  & .ik-tolk-steg li.klar .ik-snurra { opacity:0; }
  & .ik-tolk-steg li.klar .ik-bock { opacity:1; scale:1; }
  & .ik-tolk-text { flex:1; font:400 14px/20px var(--h-font); color:var(--h-muted); transition:color 300ms ease; }
  & .ik-tolk-steg li.klar .ik-tolk-text { color:var(--h-ink); }
  & .ik-tolk-utfall { flex:none; font:400 14px/20px var(--h-font); color:var(--h-muted); font-variant-numeric:tabular-nums; opacity:0; translate:-6px 0; transition:opacity 380ms var(--ease-out-soft), translate 380ms var(--ease-out-soft); }
  & .ik-tolk-steg li.klar .ik-tolk-utfall { opacity:1; translate:0 0; }
  & .ik-tolk-summa { display:flex; align-items:center; gap:12px; margin-top:28px; opacity:0; translate:0 8px; transition:opacity 500ms var(--ease-out-soft), translate 500ms var(--ease-out-soft); }
  & .ik-tolk-summa > span:first-child { width:32px; height:1px; background:var(--zaai-shimmer); }
  & .ik-tolk-summa > span:last-child { font:400 14px/20px var(--h-font); }
  & .ik-tolk.summerad .ik-tolk-summa { opacity:1; translate:0 0; }

  /* ── Sorteringstavlan i ZAAI Quiet Interface (ChatGPT-designsystemet) ──
     Kort: vitt, 1px rgba(0,0,0,.09), radie 12, 14 inre luft, ingen skugga (kanban 10.9).
     Kolumner: tonad yta utan kant — inga kort i kort. Text: #202020 / #666 / #8e8e8e, vikter 400/500/600.
     Rörelse 120–240 ms, cubic-bezier(.2,0,0,1). */
  & .ik-tavla-yta {
    --qi-text:#202020; --qi-sek:#666666; --qi-damp:#8e8e8e;
    --qi-kant:rgba(0,0,0,.09); --qi-kant-hover:rgba(0,0,0,.135); --qi-kant-aktiv:rgba(0,0,0,.19); --qi-delare:rgba(0,0,0,.055);
    --qi-hover:rgba(0,0,0,.035); --qi-tonad:rgba(0,0,0,.025);
    --qi-accent:#7c5ce5; --qi-accent-soft:rgba(124,92,229,.09); --qi-accent-softer:rgba(124,92,229,.055); --qi-fokus:rgba(124,92,229,.30);
    --qi-kurva:cubic-bezier(.2,0,0,1);
    display:flex; flex-direction:column; gap:16px; animation:ik-tavla-in 240ms var(--qi-kurva);
    font-family:var(--h-font); color:var(--qi-text);
  }
  & .ik-tavla-yta > .ik-kb-kort { border:1px solid var(--qi-kant); border-radius:14px; }
  & .ik-tavla-yta .ik-kb-huvud { padding:16px 18px; border-bottom:1px solid var(--qi-delare); gap:6px 16px; }
  & .ik-tavla-yta .ik-kb-titel { font:600 15px/1.35 var(--h-font); color:var(--qi-text); }
  & .ik-tavla-yta .ik-kb-huvud > .ik-kb-rad { font:400 12px/1.35 var(--h-font); color:var(--qi-damp); margin:0; }
  & .ik-tavla-yta .ik-kb-antal { height:22px; padding:0 8px; background:rgba(0,0,0,.05); color:var(--qi-sek); font:500 12px/1 var(--h-font); }

  & .ik-tavla { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; padding:16px 18px 18px; align-items:stretch; }
  & .ik-zon { display:flex; flex-direction:column; min-width:0; border:0; border-radius:14px; background:var(--qi-tonad); box-shadow:inset 0 0 0 1px transparent;
    transition:background-color 160ms var(--qi-kurva), box-shadow 160ms var(--qi-kurva); }
  & .ik-zon.over { background:var(--qi-accent-softer); box-shadow:inset 0 0 0 1px rgba(124,92,229,.35); border-color:transparent; }
  & .ik-zon-huvud { display:flex; align-items:center; gap:8px; padding:12px 14px 0; border-bottom:0; }
  & .ik-zon-huvud h3 { margin:0; font:600 13px/1.35 var(--h-font); color:var(--qi-text); }
  & .ik-zon[data-zon="ignoreras"] .ik-zon-huvud .ik-kb-antal { background:rgba(0,0,0,.05); color:var(--qi-sek); }
  & .ik-zon-lede { margin:0; padding:6px 14px 0; font:400 12px/1.35 var(--h-font); color:var(--qi-damp); }
  & .ik-zon-kort { display:flex; flex-direction:column; gap:10px; padding:12px 10px 10px; flex:1; }
  & .ik-zon-tom { margin:0; padding:16px 0; text-align:center; font:400 12px/1.35 var(--h-font); color:var(--qi-damp); }

  & .ik-tkort { display:flex; flex-direction:column; gap:8px; padding:14px; background:#fff; border:1px solid var(--qi-kant); border-radius:12px; box-shadow:none; cursor:grab; touch-action:none; user-select:none;
    transition:border-color 120ms var(--qi-kurva); }
  & .ik-tkort:hover { border-color:var(--qi-kant-hover); }
  & .ik-tkort.dras { z-index:5; cursor:grabbing; border-color:var(--qi-kant-aktiv); box-shadow:0 2px 8px rgba(0,0,0,.05); }
  & .ik-tkort.tillbaka { transition:transform 240ms var(--qi-kurva); }
  & .ik-tkort.landat { animation:ik-qi-landat 240ms var(--qi-kurva); }
  & .ik-tkort-rubrik { display:flex; align-items:flex-start; gap:8px; font:600 15px/1.35 var(--h-font); color:var(--qi-text); overflow-wrap:anywhere; }
  & .ik-tkort-rubrik svg { width:16px; height:16px; flex:none; margin-top:2px; color:var(--qi-damp); stroke-width:1.75; }
  & .ik-tkort-aktion { field-sizing:content; width:100%; box-sizing:border-box; min-height:0; margin:-4px -6px; width:calc(100% + 12px); padding:4px 6px; resize:none; border:0; border-radius:8px; background:transparent; outline:none; cursor:text; user-select:text;
    font:400 13px/1.35 var(--h-font); color:var(--qi-sek); transition:background-color 120ms var(--qi-kurva), color 120ms var(--qi-kurva), box-shadow 120ms var(--qi-kurva); }
  & .ik-tkort-aktion:hover { background:var(--qi-hover); color:var(--qi-text); }
  & .ik-tkort-aktion:focus-visible { background:#fff; color:var(--qi-text); box-shadow:0 0 0 1px var(--qi-kant-aktiv), 0 0 0 4px var(--qi-fokus); outline:none; }
  & .ik-tkort-ruta { padding:10px 12px; border-radius:8px; background:var(--qi-hover); }
  & .ik-tkort-utdrag { margin:0; font:400 13px/1.55 var(--h-font); color:var(--qi-sek); white-space:pre-line; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  & .ik-tkort-utdrag.hel { display:block; max-height:240px; overflow-y:auto; overscroll-behavior:contain; user-select:text; color:var(--qi-text); }
  & .ik-tkort-fot { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:0; font:400 12px/1.35 var(--h-font); color:var(--qi-damp); font-variant-numeric:tabular-nums; }
  & .ik-tkort-visa { appearance:none; border:0; background:none; padding:0; cursor:pointer; font:500 12px/1.35 var(--h-font); color:var(--qi-sek); transition:color 120ms var(--qi-kurva); }
  & .ik-tkort-visa:hover { color:var(--qi-text); text-decoration:none; }
  & .ik-tkort-visa:focus-visible { outline:none; box-shadow:0 0 0 3px var(--qi-fokus); border-radius:4px; }
  & .ik-tkort-pilar { display:flex; gap:2px; flex:none; margin-right:-6px; }
  & .ik-tkort-pilar button { appearance:none; border:0; background:none; padding:0; display:grid; place-items:center; cursor:pointer; width:28px; height:28px; border-radius:8px; color:var(--qi-damp); transition:background-color 120ms var(--qi-kurva), color 120ms var(--qi-kurva); }
  & .ik-tkort-pilar button:hover:not(:disabled) { background:var(--qi-hover); color:var(--qi-text); }
  & .ik-tkort-pilar button:disabled { opacity:.35; }
  & .ik-tkort-pilar button:focus-visible { outline:none; box-shadow:0 0 0 3px var(--qi-fokus); }
  & .ik-tkort-pilar svg { width:16px; height:16px; stroke-width:1.75; }

  /* Knappraden: primär svart 38/10/14·500, sekundär med kant — samma höjd */
  & .ik-tavla-fot { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
  & .ik-tavla-fot .kv-knapp { height:38px; padding:0 14px; border-radius:10px; font:500 14px/1 var(--h-font); transition:background-color 120ms var(--qi-kurva), border-color 120ms var(--qi-kurva); }
  & .ik-tavla-fot .kv-knapp.bleck { background:#202020; color:#fff; }
  & .ik-tavla-fot .kv-knapp.bleck:hover:not(:disabled) { background:#303030; }
  & .ik-tavla-fot .kv-knapp.bleck:active:not(:disabled) { background:#111; transform:none; }
  & .ik-tavla-fot .kv-knapp.bleck:disabled { background:#e8e8e8; color:#a0a0a0; opacity:1; }
  & .ik-tavla-fot .kv-knapp:not(.bleck) { background:#fff; border:1px solid var(--qi-kant); color:var(--qi-text); }
  & .ik-tavla-fot .kv-knapp:not(.bleck):hover:not(:disabled) { background:var(--qi-hover); border-color:var(--qi-kant-hover); }
  & .ik-tavla-fot .ik-hjalp { margin-left:4px; max-width:70ch; font:400 12px/1.35 var(--h-font); color:var(--qi-damp); }
  & .ik-tavla-fot .kv-knapp:focus-visible { outline:none; box-shadow:0 0 0 3px var(--qi-fokus); }
  @media (max-width: 1180px) { & .ik-tavla { grid-template-columns:repeat(2, minmax(0,1fr)); } }

  /* ── 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; } }
@keyframes ik-snurr { to { rotate:360deg; } }
@keyframes ik-tavla-in { from { opacity:0; translate:0 8px; } }
@keyframes ik-landat { 0% { box-shadow:0 0 0 2px var(--ik-accent); } 100% { box-shadow:0 0 0 2px transparent; } }
@keyframes ik-qi-landat { from { border-color:rgba(124,92,229,.55); box-shadow:0 0 0 3px rgba(124,92,229,.12); } }

/* ═══ INKORGEN I ZAAI QUIET INTERFACE (ChatGPT-designsystemet) — all text och alla knappar ═══
   brand_assets/designsystem/ZAAI_DASHBOARD_DESIGN_SYSTEM.md, avsnitt 4 och 9.
   Text: Inter, bläck #202020 / förklaring #666 / dämpat #8e8e8e, vikterna 400/500/600, ingen negativ spärrning.
   Skala: sidtitel 28/600 · sektion 20/600 · korttitel 15/600 · brödtext 14 · etikett 13 · detalj 12.
   Knappar: primär svart 38/10/14·500, sekundär vit med kant, spöke utan kant, ikonknapp 34 radie 8.
   Fokus: 3 px lila ring. Rörelse 120 ms, cubic-bezier(.2,0,0,1). Lagret ligger sist och gäller bara Inkorgen. */
#portal-main-area .portal-view#view-inkorgen {
  --h-font:Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --h-ink:#202020; --h-muted:#666666; --s-titel:#202020;
  --qi-text:#202020; --qi-sek:#666666; --qi-damp:#8e8e8e; --qi-av:#b5b5b5;
  --qi-kant:rgba(0,0,0,.09); --qi-kant-hover:rgba(0,0,0,.135); --qi-kant-aktiv:rgba(0,0,0,.19);
  --qi-hover:rgba(0,0,0,.035); --qi-aktiv:rgba(0,0,0,.06);
  --qi-fara:#b44747; --qi-fokus:rgba(124,92,229,.30); --qi-kurva:cubic-bezier(.2,0,0,1);
  font-family:var(--h-font); color:var(--qi-text);

  & :is(h1,h2,h3,h4,p,span,li,dt,dd,td,th,label,small,a,button,input,textarea,select) { letter-spacing:0; }
  & :is(strong,b,h2,h3,h4,th,[class*="title"],[class*="titel"],[class*="rubrik"],[class*="namn"]) { font-weight:600; }
  & :is(label,th) { font-weight:500; }

  /* ── Text ── */
  & .ik-sidtitel { font:600 28px/1.2 var(--h-font); }
  & .ik-sidsub { font:400 14px/1.55 var(--h-font); color:var(--qi-sek); }
  & .ik-huvud-status { font:400 13px/1.35 var(--h-font); color:var(--qi-sek); }
  & :is(.kv-yta-title, .ik-start-head h2) { font:600 15px/1.35 var(--h-font); color:var(--qi-text); }
  & .ik-prub-titel { font:600 15px/1.35 var(--h-font) !important; color:var(--qi-text); }
  & .kv-yta-sub, & .ik-start-head p { font:400 12px/1.35 var(--h-font); color:var(--qi-damp); }
  & :is(.ik-konv-titel, .ik-guide-rubrik) { font:600 20px/1.3 var(--h-font); }
  & .ik-sek-head h2 { font:600 20px/1.3 var(--h-font) !important; letter-spacing:0; }
  & .ik-tolk-rubrik { font:600 32px/1.15 var(--h-font) !important; letter-spacing:0; }
  & :is(.ik-sektion-titel, .ik-inst-nav-titel, .ik-person-namn, .ik-erbjud-namn) { font:600 15px/1.35 var(--h-font); }
  & .ik-kategori-namn { font:600 15px/1.35 var(--h-font) !important; }
  & :is(.ik-ak-listtitel, .ik-logg-titel) { font:600 14px/1.35 var(--h-font); }
  & :is(.ik-tom, .ik-guide-yta > p, .ik-erbjud-text, .ik-tolk-text, .ik-tolk-utfall) { font:400 14px/1.55 var(--h-font); color:var(--qi-sek); }
  & :is(.ik-panel-head p, .ik-utfall-yta p, .ik-provrad, .ik-logg-vad, .ik-kategori-mening, .ik-tak-rad, .ik-rad-lank, .ik-inst-nav-rad) { font-size:13px; line-height:1.35; }
  & :is(.ik-panel-head p, .ik-provrad, .ik-logg-vad, .ik-kategori-mening, .ik-tak-rad) { color:var(--qi-sek); }
  & .ik-handelser li { font:400 13px/1.35 var(--h-font); color:var(--qi-sek); }
  & .ik-inst-nav-grupp { font:500 12px/1.35 var(--h-font); color:var(--qi-damp); }
  & .ik-fel { font:400 13px/1.35 var(--h-font); color:var(--qi-fara); }
  & .ik-problem p { color:var(--qi-fara); }
  & .ik-dampad { color:var(--qi-damp); }
  & .ik-inst :is(.ik-input, .ik-select, .ik-textarea) { font-size:14px; line-height:1.55; }
  & .ik-sokfalt svg { color:var(--qi-damp); }
  & ::placeholder { color:var(--qi-damp); }

  /* Etiketter och räknare: 22 hög, 12/500, heltrunda (9.5) */
  & :is(.ik-etikett-chip, .ik-pill) { height:22px; padding:0 8px; font:500 12px/1 var(--h-font); }
  & :is(.ik-etikett-chip:not([data-ton]), .ik-pill:not(.bla,.orange,.rod,.gron)) { background:rgba(0,0,0,.05); color:var(--qi-sek); }
  & .ik-etikett-chip[data-ton="orange"], & .ik-pill.orange { background:#fbf6e9; color:#8a6421; }
  & .ik-etikett-chip[data-ton="gron"], & .ik-pill.gron { background:#eef8f1; color:#2f7d4b; }
  & .ik-etikett-chip[data-ton="rod"], & .ik-pill.rod { background:#fcf0f0; color:var(--qi-fara); }
  & .ik-etikett-chip[data-ton="bla"], & .ik-pill.bla { background:#eef5f9; color:#3f6f91; }
  & .ik-chip { font:500 12px/1 var(--h-font); }
  & :is(.ik-flik .ik-raknare, .ik-ak-antal) { height:20px; padding:0 7px; font:500 12px/20px var(--h-font); }
  & .ik-flik .ik-raknare { background:rgba(0,0,0,.05); color:var(--qi-sek); }
  & :is(.ik-flik .ik-raknare.varm, .ik-ak-antal) { background:rgba(124,92,229,.09); color:#5b3fc4; }

  /* ── Flikar: understrukna, aktiv = 2 px bläck (9.4) ── */
  & .ik-flikar { border-bottom-color:rgba(0,0,0,.055); }
  & .ik-flik { padding:10px 2px; font:500 14px/20px var(--h-font); color:var(--qi-sek); transition:color 120ms var(--qi-kurva); }
  & .ik-flik:hover, & .ik-flik[aria-selected="true"] { color:var(--qi-text); }
  & .ik-flik-ind { background:var(--qi-text); }
  & .ik-linjeflik { font:500 14px/20px var(--h-font); color:var(--qi-sek); }
  & .ik-linjeflik:hover, & .ik-linjeflik[aria-selected="true"] { color:var(--qi-text); }
  & .ik-linjeflik::after { background:var(--qi-text); }

  /* ── Knappar (9.1) ── */
  & :is(.kv-knapp, .ik-kn) {
    height:38px; padding:0 14px; gap:6px; border-radius:10px; font:500 14px/1 var(--h-font); letter-spacing:0;
    transition:background-color 120ms var(--qi-kurva), border-color 120ms var(--qi-kurva), color 120ms var(--qi-kurva);
  }
  & :is(.kv-knapp, .ik-kn) svg { width:16px; height:16px; stroke-width:1.75; }
  & :is(.kv-knapp, .ik-kn):active:not(:disabled) { transform:none; }
  & :is(.kv-knapp, .ik-kn):focus-visible { outline:none; box-shadow:0 0 0 3px var(--qi-fokus); }
  & .kv-knapp.stor { height:38px; padding:0 14px; font-size:14px; }
  & .ik-kn.liten { height:32px; padding:0 10px; font-size:13px; border-radius:8px; }

  /* Sekundär: vit, 1 px kant */
  & :is(.kv-knapp:not(.bleck,.primar,.lank), .ik-kn.kontur, .ik-kn.fyll) {
    background:#fff; border:1px solid var(--qi-kant); border-radius:10px; color:var(--qi-text); box-shadow:none;
  }
  & :is(.kv-knapp:not(.bleck,.primar,.lank), .ik-kn.kontur, .ik-kn.fyll):hover:not(:disabled) { background:var(--qi-hover); border-color:var(--qi-kant-hover); }
  & :is(.kv-knapp:not(.bleck,.primar,.lank), .ik-kn.kontur, .ik-kn.fyll):active:not(:disabled) { background:var(--qi-aktiv); }
  & .ik-kn.kontur { padding:0 14px 0 12px; }

  /* Primär: svart. Lila skimret tas bort — en primärfärg per knapprad */
  & :is(.kv-knapp.bleck, .kv-knapp.primar, .ik-kn.bleck) { background:#202020; border:1px solid #202020; color:#fff; box-shadow:none; }
  & :is(.kv-knapp.bleck, .kv-knapp.primar, .ik-kn.bleck):hover:not(:disabled) { background:#303030; border-color:#303030; }
  & :is(.kv-knapp.bleck, .kv-knapp.primar, .ik-kn.bleck):active:not(:disabled) { background:#111; border-color:#111; }
  & :is(.kv-knapp, .ik-kn):is(.bleck,.primar):disabled { background:#e8e8e8; border-color:#e8e8e8; color:#a0a0a0; opacity:1; }
  & .kv-knapp.primar::after { content:none; }

  /* Spöke: ingen kant, tonad yta vid hovring */
  & :is(.ik-kn:not(.bleck,.kontur,.fyll), .kv-knapp.lank) { background:transparent; border:1px solid transparent; color:var(--qi-text); }
  & :is(.ik-kn:not(.bleck,.kontur,.fyll), .kv-knapp.lank):hover:not(:disabled) { background:var(--qi-hover); text-decoration:none; }
  & .kv-knapp.lank { padding:0 10px; }
  & :is(.kv-knapp, .ik-kn):not(.bleck,.primar):disabled { opacity:1; color:var(--qi-av); }
  & :is(.kv-knapp, .ik-kn).fara { color:var(--qi-fara); }
  & :is(.kv-knapp, .ik-kn).fara:hover:not(:disabled) { background:#fcf0f0; }

  /* Ikonknapp: 34 kvadrat, radie 8 */
  & .ik-ikonknapp { width:34px; height:34px; border-radius:8px; color:var(--qi-sek); transition:background-color 120ms var(--qi-kurva), color 120ms var(--qi-kurva); }
  & .ik-ikonknapp:hover { background:var(--qi-hover); color:var(--qi-fara); }
  & .ik-ikonknapp:focus-visible { outline:none; box-shadow:0 0 0 3px var(--qi-fokus); }

  /* Textknappar och länkknappar */
  & :is(.ik-lanknapp, .ik-rad-lank) { color:var(--qi-text); text-decoration-color:var(--qi-kant-aktiv); }
  & .ik-avancerat-knapp { font:500 14px/1.35 var(--h-font); color:var(--qi-text); }
  & #ik-sek-fler .ik-avancerat-knapp { font:600 15px/1.35 var(--h-font); }
  & :is(.ik-lanknapp, .ik-avancerat-knapp, .ik-kort-oppna, .ik-kb-kalla-rubrik, .ik-kb-index-namn):focus-visible { outline:none; box-shadow:0 0 0 3px var(--qi-fokus); border-radius:6px; }

  /* Val i rader: segment, steg och dagar — samma höjd och text som kontroller */
  & :is(.ik-steg, .ik-segment button, .ik-dag) { font:500 13px/1 var(--h-font); color:var(--qi-sek); }
  & :is(.ik-steg, .ik-segment button, .ik-dag):hover:not(:disabled) { color:var(--qi-text); }
  & :is(.ik-steg[aria-checked="true"], .ik-segment button[aria-checked="true"], .ik-segment button[aria-pressed="true"], .ik-dag[aria-pressed="true"]) { color:var(--qi-text); }
  & .ik-inst :is(.ik-steg, .ik-segment button, .ik-dag), & .ik-guide-lista .ik-steg { height:38px; padding:0 14px; border-radius:10px; font:500 14px/1 var(--h-font); box-shadow:inset 0 0 0 1px var(--qi-kant); }
  & :is(.ik-val) { font:400 14px/1.45 var(--h-font); color:var(--qi-text); border-color:var(--qi-kant); border-radius:10px; }
  & .ik-val small { font-size:12px; color:var(--qi-damp); }
  & .ik-val[aria-pressed="true"] { border-color:#202020; box-shadow:0 0 0 1px #202020; }
  & .ik-inst-nav-lank { border-radius:8px; }
  & .ik-inst-nav-lank:hover { background:var(--qi-hover); }
  & .ik-inst-nav-lank[aria-current="true"] .ik-inst-nav-namn { color:var(--qi-text); font-weight:500; }
  & .ik-switch[aria-checked="true"] { background:#202020; }
  & .ik-switch:focus-visible { box-shadow:0 0 0 3px var(--qi-fokus); }
  & .ik-gsteg-titel { font:500 14px/1.35 var(--h-font); }
  & .ik-gsteg-sub { font:400 12px/1.35 var(--h-font); color:var(--qi-damp); }
}