/* Kundläget (docs/kundlage.md): kundpanel (står still) · projektet · dialogen. Hela desktopytan; en knapp per sak.
   Samma färger och typsnitt som offertläget (Newsreader i rubriker, Inter i text). */
.kl {
  --kl-fg: #1d2420; --kl-fg2: #4e5751; --kl-mut: #6b736e; --kl-mut2: #8a918c; --kl-line: #e4e7e2; --kl-line2: #eef0ec;
  --kl-g: #1f6b4f; --kl-g2: #15543d; --kl-gbg: #e6f1ea; --kl-amb: #d08a00; --kl-ambbg: #fff4dc; --kl-ambfg: #8a5a00;
  --kl-blue: #2a6a90; --kl-bluebg: #e8f1f7; --kl-red: #a33a2c; --kl-redbg: #fbecea; --kl-redline: #efc9c3;
  --kl-paper: #f3f2ed; --kl-panel: #fbfbf8; --kl-card: #fff; --kl-serif: Newsreader, ui-serif, Georgia, serif;
  display: grid; grid-template-columns: 320px minmax(0, 1fr); min-height: 100dvh; background: var(--kl-paper);
  color: var(--kl-fg); font: 14.5px/1.45 Inter, system-ui, sans-serif;
}
.kl [hidden] { display: none !important; }
.kl .material-symbols-outlined { font-size: 18px; line-height: 1; }
.kl .tnum { font-variant-numeric: tabular-nums; }
.kl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.kl-fine { margin: 0; color: var(--kl-mut); font-size: 12.5px; }
.kl-grow { flex: 1; min-width: 0; }
.kl-sp { flex: 1; }

/* Knappar: ord, en storlek; färgen säger vad som händer */
.kl-btn { height: 40px; border-radius: 10px; border: 1px solid var(--kl-line); background: var(--kl-card); padding: 0 14px; font: 500 14px Inter, sans-serif; color: var(--kl-fg); display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; cursor: pointer; text-decoration: none; }
.kl-btn:hover { background: #f4f6f3; }
.kl-btn.p { background: var(--kl-g); border-color: var(--kl-g); color: #fff; }
.kl-btn.p:hover { background: var(--kl-g2); }
.kl-btn.big { height: 46px; font-size: 15px; padding: 0 20px; border-radius: 12px; }
.kl-btn.sm { height: 34px; font-size: 13px; padding: 0 11px; border-radius: 9px; }
.kl-btn.danger { color: var(--kl-red); border-color: var(--kl-redline); }
.kl-btn.danger:hover { background: var(--kl-redbg); }
.kl-btn.danger.solid { background: var(--kl-red); border-color: var(--kl-red); color: #fff; }
.kl-btn.quiet { border-color: transparent; background: transparent; color: var(--kl-mut); }
.kl-btn.quiet:hover { background: #eceee9; color: var(--kl-fg); }
.kl-btn:disabled { opacity: .45; cursor: default; }
.kl-lnk { border: 0; background: none; padding: 0; color: var(--kl-g); font: 500 12.5px Inter, sans-serif; cursor: pointer; }
.kl-add { border: 1.5px dashed #e4b85a; background: var(--kl-ambbg); color: var(--kl-ambfg); border-radius: 8px; padding: 1px 9px; font: 500 13px Inter, sans-serif; cursor: pointer; }

/* Kundpanelen */
.kl-panel { position: sticky; top: 0; height: 100dvh; background: var(--kl-panel); border-right: 1px solid var(--kl-line); display: flex; flex-direction: column; min-height: 0; }
.kl-ptop { padding: 18px 20px 16px; border-bottom: 1px solid var(--kl-line2); display: grid; gap: 12px; }
.kl-back { color: var(--kl-mut); font-size: 13.5px; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; justify-self: start; }
.kl-back:hover { color: var(--kl-fg); }
.kl-who { display: flex; gap: 12px; align-items: center; min-width: 0; }
.kl-av { width: 46px; height: 46px; border-radius: 50%; background: #12382b; color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 15px; flex: none; }
.kl-av.is-none { background: #fff; color: var(--kl-amb); border: 1.5px dashed var(--kl-amb); }
.kl-whot { min-width: 0; }
.kl-whot h1 { margin: 0; font: 500 24px/1.15 var(--kl-serif); overflow-wrap: anywhere; }
.kl-whot h1.is-missing { color: var(--kl-ambfg); }
.kl-whot small { color: var(--kl-mut); font-size: 12.5px; }
.kl-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; font-size: 13.5px; margin: 0; }
.kl-kv dt { color: var(--kl-mut); display: flex; align-items: center; gap: 6px; }
.kl-kv dt .material-symbols-outlined { font-size: 16px; color: var(--kl-mut2); }
.kl-kv dd { margin: 0; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kl-qa { display: flex; gap: 8px; flex-wrap: wrap; }
.kl-qa .kl-btn { flex: 1; }
.kl-plist { flex: 1; overflow-y: auto; padding: 10px 12px 24px; display: grid; gap: 2px; align-content: start; }
.kl-gh { margin: 12px 8px 6px; font: 600 11.5px Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--kl-mut); display: flex; align-items: center; gap: 8px; }
.kl-gh:first-child { margin-top: 4px; }
.kl-gh .n { letter-spacing: 0; background: var(--kl-line2); color: var(--kl-fg2); border-radius: 999px; padding: 0 7px; font-size: 11px; }
.kl-gh.is-mine .n { background: var(--kl-ambbg); color: var(--kl-ambfg); }
.kl-proj { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 3px 11px; border: 1px solid transparent; border-radius: 12px; padding: 10px 12px; text-decoration: none; color: inherit; position: relative; min-height: 48px; }
.kl-proj:hover { background: #f1f2ee; }
.kl-proj[aria-current="page"] { background: var(--kl-card); border-color: var(--kl-line); box-shadow: 0 1px 2px rgba(18, 56, 43, .06); }
.kl-proj[aria-current="page"]::before { content: ''; position: absolute; left: -12px; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--kl-g); }
.kl-proj.is-pending { opacity: .72; }
.kl-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; }
.kl-proj b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kl-nx { grid-column: 2; font-size: 13px; color: var(--kl-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kl-nx.is-mine { color: var(--kl-ambfg); }
.kl-newp { margin-top: 8px; border: 1.5px dashed var(--kl-line); border-radius: 12px; padding: 11px 12px; color: var(--kl-fg2); display: flex; align-items: center; gap: 8px; text-decoration: none; font-size: 14px; }
.kl-newp:hover { border-color: #cfd6d0; color: var(--kl-fg); }

/* Projektet + dialogen */
.kl-stage { display: grid; grid-template-columns: minmax(0, 1fr) clamp(340px, 26vw, 440px); gap: 18px; padding: 20px clamp(16px, 2vw, 28px) 120px; align-items: start; min-width: 0; }
.kl-area { display: grid; gap: 16px; align-content: start; min-width: 0; }
.kl-stage.is-settle > * { animation: kl-settle .2s ease-out; }
@keyframes kl-settle { from { opacity: .72; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.kl-card, .kl-head, .kl-part { background: var(--kl-card); border: 1px solid var(--kl-line); border-radius: 16px; }
.kl-card { padding: 18px 20px; display: grid; gap: 12px; min-width: 0; }
.kl-ch { display: flex; align-items: baseline; gap: 12px; justify-content: space-between; flex-wrap: wrap; }
.kl-ch h3, .kl-empty-card h3 { margin: 0; font: 400 22px/1.15 var(--kl-serif); }
.kl-empty { margin: 0; color: var(--kl-mut); }
.kl-head { padding: 20px 22px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; }
.kl-crumb { color: var(--kl-mut); font-size: 13px; display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.kl-tag { color: var(--kc, var(--kl-g)); background: color-mix(in srgb, var(--kc, var(--kl-g)) 12%, #fff); border-radius: 7px; padding: 1px 8px; font-weight: 500; font-size: 12.5px; }
.kl-head h2 { margin: 0; font: 400 28px/1.15 var(--kl-serif); text-wrap: balance; overflow-wrap: anywhere; }
/* Namnet går att byta på plats: knappen och fältet har samma mått, så rubriken hoppar inte. */
.kl-name { font: inherit; color: inherit; text-align: left; background: none; border: 0; padding: 2px 6px; margin: -2px -6px; border-radius: 8px; cursor: text; text-wrap: balance; }
.kl-name:hover, .kl-name:focus-visible { background: var(--kl-gbg); outline: 0; }
.kl-name-in { display: block; width: 100%; box-sizing: content-box; font: inherit; color: inherit; padding: 2px 6px; margin: -2px -6px; border: 0; border-radius: 8px; background: #fff; box-shadow: 0 0 0 2px var(--kl-g); resize: none; field-sizing: content; overflow: hidden; outline: 0; }
.kl-site { display: flex; flex-wrap: wrap; gap: 4px 26px; margin: 8px 0 0; font-size: 13.5px; }
.kl-site div { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.kl-site dt { color: var(--kl-mut); }
.kl-site dd { margin: 0; overflow-wrap: anywhere; }
.kl-say { margin: 10px 0 0; color: var(--kl-fg2); font-size: 14.5px; }
.kl-say.is-warn { color: var(--kl-ambfg); }
.kl-next { display: grid; gap: 6px; justify-items: end; text-align: right; }
.kl-amt { font: 400 32px/1 var(--kl-serif); white-space: nowrap; }
.kl-next small { color: var(--kl-mut); font-size: 12.5px; margin-bottom: 4px; }

/* Versionstabellen */
.kl-vt { border: 1px solid var(--kl-line); border-radius: 12px; position: relative; }
.kl-vt > .kl-vr.is-th { border-radius: 12px 12px 0 0; }
.kl-vr { display: grid; grid-template-columns: 66px minmax(100px, 1.1fr) repeat(3, minmax(0, 1fr)) minmax(96px, auto); gap: 0 14px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--kl-line2); }
.kl-vr.is-th { border-top: 0; background: #fafaf8; padding-block: 8px; font: 600 11.5px Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--kl-mut); }
.kl-vr.is-th .r { text-align: right; }
.kl-vr.is-draft { background: #fffdf6; }
.kl-vr.is-superseded .kl-vn, .kl-vr.is-superseded .kl-f, .kl-vr.is-superseded .kl-vsum { color: var(--kl-mut2); }
/* Makulerad: död som Ersatt, men statusordet röd så att den skiljer sig från "kunden sa nej" (UI-packen 2026-10-29). */
.kl-vr.is-voided .kl-vn, .kl-vr.is-voided .kl-f, .kl-vr.is-voided .kl-vsum { color: var(--kl-mut2); }
.kl-vr.is-voided .kl-vsum { text-decoration: line-through; }
.kl-vr.is-flash { animation: kl-flash 2.4s ease-out; }
@keyframes kl-flash { from { background: #e3f4ea; } to { background: transparent; } }
.kl-vn { font: 400 24px/1 var(--kl-serif); }
.kl-vn small { display: block; margin-top: 4px; font: 400 12px/1.2 Inter, sans-serif; color: var(--kl-mut); }
.kl-st { font-weight: 500; font-size: 13.5px; }
.kl-st.is-amb { color: var(--kl-ambfg); } .kl-st.is-blue { color: var(--kl-blue); } .kl-st.is-g { color: var(--kl-g); } .kl-st.is-grey { color: var(--kl-fg2); } .kl-st.is-red { color: var(--kl-red); }
.kl-f { font-size: 14px; min-width: 0; }
.kl-f small { display: block; color: var(--kl-mut); font-size: 12px; }
.kl-vsum { font: 400 19px/1 var(--kl-serif); text-align: right; white-space: nowrap; }
.kl-warn { grid-column: 2 / -1; display: flex; gap: 7px; align-items: center; color: var(--kl-ambfg); font-size: 13.5px; margin: 10px 0 0; }
.kl-vr.is-gone { display: none; }
.kl-cfoot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Arbetsplats och ROT */
.kl-fld { display: grid; gap: 2px; border: 1px solid var(--kl-line); border-radius: 11px; padding: 6px 11px 7px; background: #fff; min-width: 0; }
.kl-fld:focus-within { border-color: var(--kl-g); box-shadow: 0 0 0 3px var(--kl-gbg); }
.kl-fld > span { font-size: 12px; color: var(--kl-mut); display: flex; align-items: center; gap: 6px; }
.kl-fld.is-miss > span::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--kl-amb); }
.kl-fld input, .kl-fld textarea { border: 0; outline: 0; background: transparent; padding: 0; font: 14.5px Inter, sans-serif; color: var(--kl-fg); min-width: 0; resize: vertical; }
.kl-place { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.kl-col { display: grid; gap: 8px; align-content: start; }
.kl-pair { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; }
.kl-roth { display: flex; align-items: center; justify-content: space-between; font: 600 11.5px Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--kl-mut); min-height: 24px; }
.kl-miss { letter-spacing: 0; text-transform: none; background: var(--kl-ambbg); color: var(--kl-ambfg); border-radius: 999px; padding: 2px 9px; font-size: 12.5px; font-weight: 500; }
.kl-miss.is-ok { background: var(--kl-gbg); color: var(--kl-g); }
.kl-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: #eef0ec; border-radius: 11px; padding: 4px; gap: 4px; }
.kl-seg button { border: 0; background: transparent; border-radius: 8px; height: 34px; font: 14px Inter, sans-serif; color: var(--kl-fg2); cursor: pointer; }
.kl-seg button[aria-checked="true"] { background: #fff; color: var(--kl-fg); font-weight: 500; box-shadow: 0 1px 2px rgba(18, 56, 43, .1); }
.kl-rotf { display: grid; gap: 8px; }
.kl-col[data-housing="none"] .kl-pnrnote, .kl-col[data-off] .kl-pnrnote { display: none; }

/* Planering, Filer, Material */
.kl-parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.kl-part { padding: 16px 18px; display: grid; gap: 8px; align-content: start; }
.kl-pt { display: flex; align-items: center; gap: 10px; }
.kl-pic { width: 38px; height: 38px; border-radius: 11px; background: var(--kl-gbg); color: var(--kl-g); display: grid; place-items: center; flex: none; }
.kl-part h4 { margin: 0; font: 400 19px/1.1 var(--kl-serif); }
.kl-part p { margin: 0; color: var(--kl-fg2); font-size: 14px; }
.kl-part .kl-btn { justify-self: start; }

/* Dialogen: alltid synlig, följer med när man skrollar */
.kl-dialog { position: sticky; top: 16px; height: calc(100dvh - 120px); min-height: 420px; background: var(--kl-card); border: 1px solid var(--kl-line); border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; }
.kl-dlg-h { padding: 14px 16px 10px; border-bottom: 1px solid var(--kl-line2); display: grid; gap: 2px; }
.kl-dlg-h b { font: 400 20px/1.15 var(--kl-serif); }
.kl-dlg-h small { color: var(--kl-mut); font-size: 12.5px; }
.kl-dlg-t { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.kl-sys { align-self: center; text-align: center; color: var(--kl-mut); font-size: 12.5px; margin: 0; max-width: 92%; }
.kl-sys span { color: var(--kl-mut2); }
.kl-msg { max-width: 86%; display: grid; gap: 3px; }
.kl-mwho { font-size: 11.5px; color: var(--kl-mut); }
/* Händelserna i dialogen: lättare än bubblorna – en rad, ikon, tid sist. Bara signerad är grön, nej röd, fel gul. */
.kl-ev { align-self: center; display: flex; align-items: flex-start; gap: 6px; max-width: 92%; margin: 0; font-size: 12.5px; color: var(--kl-mut); overflow-wrap: anywhere; }
.kl-ev .material-symbols-outlined { font-size: 15px; line-height: 18px; flex: none; }
.kl-ev time { color: var(--kl-mut2); margin-left: 2px; }
.kl-ev.is-ok { color: var(--kl-g); }
.kl-ev.is-bad { color: #9a3a2e; }
.kl-ev.is-warn { color: #8a5a00; }
.kl-day { align-self: center; margin: 6px 0 0; font-size: 11px; letter-spacing: .06em; color: var(--kl-mut2); }
.kl-b { border-radius: 14px; padding: 9px 12px; font-size: 14px; overflow-wrap: anywhere; }
.kl-msg.is-cust { align-self: flex-start; }
.kl-msg.is-cust .kl-b { background: #f1f2ee; border-bottom-left-radius: 4px; }
.kl-msg.is-new .kl-b { box-shadow: 0 0 0 2px var(--kl-amb); }
.kl-msg.is-me { align-self: flex-end; justify-items: end; }
.kl-msg.is-me .kl-b { background: var(--kl-g); color: #fff; border-bottom-right-radius: 4px; }
.kl-msg.is-pending { opacity: .6; }
.kl-msg.is-later .kl-b { background: #fff; color: var(--kl-fg); border: 1.5px dashed #b9d4c4; }
.kl-dlg-f { border-top: 1px solid var(--kl-line2); padding: 10px 12px; display: grid; gap: 8px; }
.kl-dlg-f textarea { width: 100%; min-height: 60px; max-height: 30dvh; resize: vertical; border: 1px solid var(--kl-line); border-radius: 11px; padding: 9px 11px; background: #fbfcfa; font: 14px Inter, sans-serif; outline: 0; box-sizing: border-box; }
.kl-dlg-f textarea:focus { border-color: var(--kl-g); background: #fff; }
.kl-dlg-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kl-dlg-row small { color: var(--kl-mut); font-size: 12px; }
.kl-later { position: relative; }
.kl-later summary { list-style: none; }
.kl-later summary::-webkit-details-marker { display: none; }
.kl-later-menu { position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 6; width: 240px; background: var(--kl-card); border: 1px solid var(--kl-line); border-radius: 12px; box-shadow: 0 12px 30px rgba(18, 56, 43, .16); padding: 10px; display: grid; gap: 6px; }

/* Stor popup (Planering, Filer, Material, kund, ÄTA) */
.kl-pop { position: fixed; inset: 0; z-index: 60; background: rgba(13, 26, 21, .42); display: grid; place-items: center; padding: 24px; }
html.kl-pop-open .zimla-dock, html.kl-pop-open .zimla-help { visibility: hidden; }
.kl-pop-box { width: min(1180px, 100%); height: min(880px, 100%); background: var(--kl-paper); border-radius: 20px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .3); animation: kl-settle .2s ease-out; }
.kl-pop-box.is-small { width: min(760px, 100%); height: auto; max-height: 100%; }
.kl-pop-box.is-narrow { width: min(560px, 100%); height: auto; max-height: 100%; }
/* Popupen och toasten centreras i ytan bredvid Zimla-panelen, aldrig under den (app-shell-navigation.js sätter variabeln). */
.kl-pop { right: var(--zimla-ai-panel-inset, 0px); }
/* "Vem är kunden?": välj (fältet + listan direkt under) eller ny kund – två lägen i samma höjd, så dialogen aldrig hoppar. */
.kl-kund { min-height: 372px; display: flex; flex-direction: column; }
.kl-kund-pane { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; }
.kl-kund-pane[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .kl-kund-pane.is-in { animation: kl-kund-in .22s cubic-bezier(.215,.61,.355,1); } .kl-kund-pane.is-back { animation: kl-kund-back .22s cubic-bezier(.215,.61,.355,1); } }
@keyframes kl-kund-in { from { opacity: 0; transform: translateX(8px); } }
@keyframes kl-kund-back { from { opacity: 0; transform: translateX(-8px); } }
.kl-kund-q input { font-size: 16px; }
.kl-kopt-h { margin: 4px 2px -4px; font-size: 12px; color: var(--kl-mut); }
.kl-kopt-h[hidden] { display: none; }
.kl-kopts { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; min-height: 0; }
.kl-kopts[hidden] { display: none; }
.kl-kopt { display: flex; align-items: center; gap: 11px; min-height: 48px; padding: 6px 10px; border-radius: 10px; cursor: pointer; color: var(--kl-fg); }
.kl-kopt.is-active, .kl-kopt:hover { background: var(--kl-gbg); }
.kl-kopt .kb-av { width: 28px; height: 28px; flex: none; font-size: 11px; }
.kl-kopt .kb-av.is-new { border: 1px dashed var(--kl-line); background: #fff; color: var(--kl-g); }
.kl-kopt .kb-av .material-symbols-outlined { font-size: 16px; }
.kl-kopt-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.kl-kopt-n { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kl-kopt-m { font-size: 12.5px; color: var(--kl-mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kl-kopt-j, .kl-kopt-go { flex: none; font-size: 12.5px; color: var(--kl-mut); }
.kl-kopt-go { display: none; color: var(--kl-g); }
.kl-kopt.is-active .kl-kopt-go, .kl-kopt:hover .kl-kopt-go { display: inline; }
.kl-kopt.is-active .kl-kopt-j, .kl-kopt:hover .kl-kopt-j { display: none; }
.kl-kopt.is-new { margin-top: 4px; border-top: 1px solid var(--kl-line); border-radius: 0 0 10px 10px; position: sticky; bottom: 0; background: var(--kl-paper); }
.kl-kopt.is-new.is-active, .kl-kopt.is-new:hover { background: var(--kl-gbg); }
.kl-kopt-none { margin: 6px 10px; font-size: 13px; color: var(--kl-mut); }
.kl-kopt-skel { height: 48px; border-radius: 10px; background: linear-gradient(90deg, #eceee9, #f5f6f3, #eceee9); background-size: 200% 100%; }
@media (prefers-reduced-motion: no-preference) { .kl-kopt-skel { animation: skel-pulse 1.2s ease-in-out infinite; } }
.kl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kl-kund-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kl-kund .kl-fine.is-warn { color: #9a3a2e; }
.kl-kund .kl-aff { position: static; margin-top: auto; padding-top: 10px; }
.kl-pop-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; background: var(--kl-card); border-bottom: 1px solid var(--kl-line); }
.kl-pop-h small { color: var(--kl-mut); font-size: 12.5px; }
.kl-pop-h h2 { margin: 0; font: 400 24px/1.1 var(--kl-serif); }
.kl-pop-body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 20px 24px; }

.kl-toast { position: fixed; left: calc(50% + 160px - var(--zimla-ai-panel-inset, 0px) / 2); transform: translateX(-50%); bottom: 96px; z-index: 70; background: var(--kl-fg); color: #fff; border-radius: 12px; padding: 9px 10px 9px 15px; display: flex; gap: 12px; align-items: center; font-size: 14px; box-shadow: 0 12px 30px rgba(0, 0, 0, .2); max-width: calc(100% - 32px); animation: kl-fade .15s ease-out; }
.kl-toast button { border: 0; background: #fff; color: var(--kl-fg); border-radius: 8px; height: 30px; padding: 0 11px; font: 500 13px Inter, sans-serif; cursor: pointer; }
@keyframes kl-fade { from { opacity: 0; } to { opacity: 1; } }

/* Responsivt i desktop: projektytan är en container – korten anpassar sig efter sin egen bredd, inte fönstrets. */
.kl-area { container: klarea / inline-size; }
@container klarea (max-width: 760px) {
  .kl-vpill > button, .kl-vpill > a { padding: 0 9px; }
  .kl-head { padding: 16px 18px; gap: 14px; }
  .kl-head h2 { font-size: 24px; }
  .kl-amt { font-size: 26px; }
  .kl-card { padding: 14px 16px; gap: 10px; }
  .kl-ch h3 { font-size: 20px; }
  .kl-vr { grid-template-columns: 64px minmax(90px, 1fr) repeat(2, minmax(0, 1fr)) minmax(90px, auto); gap: 0 10px; padding: 10px 12px; }
  .kl-vr.is-th { letter-spacing: .03em; font-size: 11px; }
  .kl-vr > .x:nth-of-type(5), .kl-vr.is-th > .x:nth-child(5) { display: none; }  /* Giltig till går först */
  .kl-vn { font-size: 21px; }
  .kl-vsum { font-size: 17px; }
  .kl-place { gap: 12px; }
  .kl-btn { height: 36px; padding: 0 12px; font-size: 13.5px; }
  .kl-btn.big { height: 42px; font-size: 14.5px; padding: 0 16px; }
  .kl-fld { padding: 5px 10px 6px; }
  .kl-parts { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
  .kl-part { padding: 12px 14px; }
}
@container klarea (max-width: 600px) {
  .kl-head { grid-template-columns: minmax(0, 1fr); }
  .kl-next { justify-items: start; text-align: left; }
  .kl-place { grid-template-columns: minmax(0, 1fr); }
  .kl-vr { grid-template-columns: 60px minmax(0, 1fr) minmax(86px, auto); }
  .kl-vr .x { display: none; }
  /* Utkastets "Simon kan signera v1 tills v2 skickas." står i raden bredvid statusen, inte på en egen rad under. */
  .kl-vr:has(> .kl-warn) { grid-template-columns: 60px auto minmax(0, 1fr) minmax(86px, auto); }
  .kl-vr > .kl-warn { grid-row: 1; grid-column: 3; margin: 0; }
  .kl-vr:has(> .kl-warn) > .kl-vsum { grid-column: 4; }
}
/* Bostadsrättens tre fält: föreningen över hela bredden, org.nr och lägenhet sida vid sida. */
.kl-col { container: klcol / inline-size; }
@container klcol (min-width: 340px) {
  .kl-rotf[data-kl-rotset="brf"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kl-rotf[data-kl-rotset="brf"] .kl-fld:first-child { grid-column: 1 / -1; }
}

/* Trångt: sidans egen bredd avgör (kund-lage.js sätter .is-tight/.is-narrow med en ResizeObserver), så samma regel
   gäller ett smalt fönster och när Zimla AI är öppen bredvid. Smalt = dialogen blir ett ark bakom knappen "Dialog". */
.kl-dlgbtn, .kl-dlg-x, .kl-scrim { display: none; }
@media (min-width: 1024px) {
  .kl.is-tight { grid-template-columns: 272px minmax(0, 1fr); }
  .kl.is-tight .kl-stage { grid-template-columns: minmax(0, 1fr) clamp(300px, 25vw, 360px); gap: 14px; padding: 16px 18px 110px; }
  .kl.is-tight .kl-ptop { padding: 14px 16px 12px; gap: 10px; }
  .kl.is-tight .kl-av { width: 40px; height: 40px; font-size: 14px; }
  .kl.is-tight .kl-whot h1 { font-size: 21px; }
  .kl.is-tight .kl-plist { padding: 8px 10px 20px; }
  .kl.is-tight .kl-proj { padding: 8px 10px; min-height: 44px; }
  .kl.is-tight .kl-area { gap: 12px; }
  .kl.is-narrow { grid-template-columns: 244px minmax(0, 1fr); }
  .kl.is-narrow .kl-stage { grid-template-columns: minmax(0, 1fr); padding: 14px 16px 110px; }
  .kl.is-narrow .kl-ptop { padding: 12px 14px 10px; gap: 8px; }
  .kl.is-narrow .kl-whot small, .kl.is-narrow .kl-kv { font-size: 12.5px; }
  .kl.is-narrow .kl-fine { font-size: 12px; }
  .kl.is-narrow .kl-panel .kl-fld textarea { min-height: 22px; }
  .kl.is-narrow .kl-panel .kl-btn.sm { height: 32px; padding: 0 9px; }
  .kl.is-narrow .kl-dlgbtn { display: inline-flex; }
  /* Arket lägger sig vid sidans högra kant – till vänster om Zimla AI när den är öppen (--kl-right). */
  .kl.is-narrow .kl-dialog { position: fixed; top: 0; right: var(--kl-right, 0px); height: 100dvh; width: min(420px, 92vw); min-height: 0; border-radius: 0; border-width: 0 0 0 1px; z-index: 56;
               transform: translateX(102%); visibility: hidden; transition: transform .2s ease-out, visibility 0s linear .2s; box-shadow: -18px 0 40px rgba(13, 26, 21, .14); }
  html.kl-dlg-open .kl.is-narrow .kl-dialog { transform: none; visibility: visible; transition: transform .2s ease-out; }
  .kl.is-narrow .kl-stage.is-settle > .kl-dialog { animation: none; }
  html.kl-dlg-open .kl.is-narrow .kl-scrim { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(13, 26, 21, .28); }
  .kl.is-narrow .kl-dlg-x { display: inline-flex; position: absolute; top: 10px; right: 10px; }
  .kl.is-narrow .kl-dlg-h { padding-right: 96px; }
}
html.kl-dlg-open .zimla-dock, html.kl-dlg-open .zimla-help { visibility: hidden; }
/* Medan man skriver i Dialog täcker inte Zimla-orben skrivfältet (runda 12: orben låg över "Skriv till Anna…"). */
html:has(.kl-dlg-f textarea:focus) .zimla-dock, html:has(.kl-dlg-f textarea:focus) .zimla-help { visibility: hidden; }
.kl-dlgbtn { position: relative; }
.kl-dlgbtn .n { background: var(--kl-amb); color: #fff; border-radius: 999px; font-size: 11px; font-weight: 600; min-width: 18px; height: 18px; display: inline-grid; place-items: center; padding: 0 5px; }
@media (max-width: 1023px) {
  .kl { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .kl-stage { grid-template-columns: minmax(0, 1fr); }
  .kl-dialog { position: static; height: 560px; }
  .kl-panel { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--kl-line); }
  .kl-plist { max-height: none; overflow: visible; }
  .kl-plist:not(.is-open) .kl-proj:not([aria-current="page"]), .kl-plist:not(.is-open) .kl-gh, .kl-plist:not(.is-open) .kl-newp { display: none; }
  .kl-plist .kl-pall { display: flex; }
  .kl-stage { padding: 12px 16px 120px; }
  .kl-pop { padding: 0; }
  .kl-pop-box, .kl-pop-box.is-small, .kl-pop-box.is-narrow { border-radius: 0; height: 100%; width: 100%; }
  .kl-kund-two { grid-template-columns: minmax(0, 1fr); }
  .kl-kund { min-height: 0; flex: 1; }
  .kl-kund-q { position: sticky; top: 0; z-index: 1; }
  .kl-kopt { min-height: 52px; }
  .kl-kund .kl-aff { position: sticky; bottom: 0; padding-bottom: env(safe-area-inset-bottom); }
  .kl-kund .kl-aff .kl-btn { min-height: 44px; }
  .kl-toast { left: 16px; right: 16px; transform: none; bottom: calc(96px + env(safe-area-inset-bottom)); }
  .kl-btn { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .kl-dialog { transition: none; } }
.kl-pall { display: none; border: 0; background: none; color: var(--kl-g); font: 500 13.5px Inter, sans-serif; padding: 8px 12px; cursor: pointer; align-items: center; gap: 6px; }
@media (prefers-reduced-motion: reduce) { .kl-stage.is-settle > *, .kl-pop-box, .kl-vr.is-flash, .kl-toast { animation: none; } }

/* ÄTA-kortet: vilande överst (kryssrutor), skickade under; en samlad bekräftelse är en grupp */
.kl-rest { border: 1.5px dashed var(--kl-line); border-radius: 14px; padding: 12px; display: grid; gap: 10px; background: #fcfcfa; }
.kl-rest-h { display: flex; gap: 10px; align-items: flex-start; }
.kl-rest-h .material-symbols-outlined { color: var(--kl-mut2); font-size: 22px; }
.kl-rest-h b { font-weight: 500; display: block; }
.kl-rest-h small { color: var(--kl-mut); font-size: 13px; }
.kl-rest-f { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.kl-at { border: 1px solid var(--kl-line); border-radius: 12px; overflow: hidden; background: #fff; container: klat / inline-size; }
/* En rad per ÄTA (ägaren 2026-10-28: "tar mer plats än vad det behöver"): nr · rubrik med typ och tid · status · belopp ·
   åtgärder. Smal spalt (Zimla AI dockad): status och åtgärder på en andra rad under rubriken. Telefonen har .zma. */
.kl-ar { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto auto 11ch; gap: 0 12px; align-items: center; padding: 8px 14px; border-top: 1px solid var(--kl-line2); }
.kl-ar:first-child { border-top: 0; }
.kl-ar.is-rest { grid-template-columns: 70px minmax(0, 1fr) auto 11ch; }
.kl-aw { min-width: 0; }
.kl-aw b, .kl-atitle, .kl-aw .kl-meta { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kl-atitle { max-width: 100%; padding: 0; border: 0; background: none; font: 500 15px/1.35 Inter, sans-serif; color: inherit; text-align: left; cursor: pointer; }
.kl-atitle:hover { text-decoration: underline; text-underline-offset: 3px; }
.kl-acts { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.kl-acts .kl-ib { margin-left: 0; align-self: center; }
.kl-as .kl-st { white-space: nowrap; max-width: 18ch; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: middle; }
@media (pointer: coarse) { .kl-acts .kl-ib { width: 44px; height: 44px; } }
/* Smal spalt: beloppet står kvar till höger på första raden; status och Påminn bryts till en andra rad – döljs aldrig. */
@container klat (max-width: 560px) {
  .kl-ar { grid-template-columns: 62px minmax(0, 1fr) 11ch; align-items: start; }
  .kl-ar > .kl-aa { grid-column: 3; grid-row: 1; }
  .kl-ar > .kl-as { grid-column: 2; grid-row: 2; margin-top: 4px; }
  .kl-ar > .kl-acts { grid-column: 3; grid-row: 2; justify-content: flex-end; margin-top: 4px; }
  .kl-ar > .kl-acts:empty, .kl-ar > .kl-as:empty { display: none; }
  .kl-ar.is-rest { grid-template-columns: 62px minmax(0, 1fr) auto 11ch; align-items: center; }
  .kl-ar.is-rest > .kl-acts { grid-column: 3; grid-row: 1; margin-top: 0; }
  .kl-ar.is-rest > .kl-aa { grid-column: 4; }
  .kl-aw b, .kl-atitle, .kl-aw .kl-meta { white-space: normal; }
}
.kl-aw .kl-meta { color: var(--kl-mut2); }
.kl-ar.is-th { background: #fafaf8; padding-block: 8px; font: 600 11.5px Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--kl-mut); align-items: center; }
.kl-ar.is-th .r, .kl-aa { text-align: right; }
.kl-ar.is-wait { background: #fffdf6; }
.kl-an { font: 400 15px/1.3 var(--kl-serif); white-space: nowrap; display: flex; align-items: center; gap: 8px; }
.kl-pick { width: 18px; height: 18px; accent-color: var(--kl-g); margin: 0; }
.kl-aw b { font-weight: 500; display: block; }
.kl-aw small, .kl-as small { display: block; color: var(--kl-mut); font-size: 12.5px; }
.kl-ak { font-size: 13.5px; color: var(--kl-fg2); }
.kl-aa { font: 400 16px/1.3 var(--kl-serif); white-space: nowrap; }
.kl-aacts { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.kl-bg { border-top: 1px solid var(--kl-line2); }
.kl-bg.is-wait { background: #fffdf6; }
.kl-bgh { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto 11ch; gap: 4px 12px; align-items: center; padding: 10px 14px 4px; }
.kl-bgh .material-symbols-outlined { color: var(--kl-ambfg); font-size: 21px; }
.kl-bg.is-ok .kl-bgh .material-symbols-outlined { color: var(--kl-g); }
.kl-bgh b { font-weight: 500; display: block; }
.kl-bgh small { color: var(--kl-mut); font-size: 12.5px; }
.kl-ar.is-in { border-top: 0; padding-top: 4px; padding-bottom: 8px; background: transparent; }
.kl-ar.is-in .kl-an { padding-left: 24px; font-size: 15px; }
.kl-eco { display: grid; gap: 5px; margin: 0; font-size: 14px; }
.kl-eco div { display: flex; justify-content: space-between; gap: 12px; }
.kl-eco dt { color: var(--kl-fg2); }
.kl-eco dd { margin: 0; font-variant-numeric: tabular-nums; }
.kl-eco .is-tot { border-top: 1px solid var(--kl-line); padding-top: 5px; font-weight: 500; }
.kl-eco .is-tot dt { color: var(--kl-fg); }
.kl-eco .is-muted dt, .kl-eco .is-muted dd { color: var(--kl-mut); }

/* ÄTA-popupen */
.kl-af { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: 1fr auto; gap: 16px; min-height: 100%; }
.kl-afm { display: grid; gap: 14px; align-content: start; min-width: 0; }
.kl-step { background: var(--kl-card); border: 1px solid var(--kl-line); border-radius: 14px; padding: 16px; display: grid; gap: 10px; }
.kl-step h3 { margin: 0; font: 600 14.5px Inter, sans-serif; }
.kl-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.kl-choices button { text-align: left; border: 1.5px solid var(--kl-line); background: #fff; border-radius: 12px; padding: 12px; display: grid; gap: 3px; cursor: pointer; font: inherit; color: inherit; }
.kl-choices button .material-symbols-outlined { color: var(--kl-mut2); font-size: 21px; }
.kl-choices button b { font-weight: 500; }
.kl-choices button small { color: var(--kl-mut); font-size: 12.5px; }
.kl-choices button[aria-checked="true"] { border-color: var(--kl-g); box-shadow: 0 0 0 1.5px var(--kl-g) inset; background: #f8fcf9; }
.kl-choices button[aria-checked="true"] .material-symbols-outlined { color: var(--kl-g); }
.kl-rowtools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.kl-btn.zimla { color: var(--kl-g); border-color: #cfe1d6; background: #f5faf7; }
.kl-sugg { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.kl-sugg .kl-fine { width: 100%; }
.kl-chip { border: 1px solid var(--kl-line); background: #fff; border-radius: 999px; padding: 5px 11px; font: 13px Inter, sans-serif; cursor: pointer; color: var(--kl-fg); }
.kl-chip small { color: var(--kl-mut); margin-left: 4px; }
.kl-chip:hover { border-color: var(--kl-g); }
.kl-rt { overflow-x: auto; border: 1px solid var(--kl-line); border-radius: 11px; }
.kl-rt table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 620px; }
.kl-rt th { text-align: left; font: 600 12px Inter, sans-serif; color: var(--kl-mut); padding: 8px 10px; background: #fafaf8; border-bottom: 1px solid var(--kl-line2); }
.kl-rt td { padding: 4px 6px; border-bottom: 1px solid var(--kl-line2); }
.kl-rt tr:last-child td { border-bottom: 0; }
.kl-rt .num { text-align: right; white-space: nowrap; }
.kl-rt input, .kl-rt select { width: 100%; border: 1px solid transparent; border-radius: 8px; padding: 7px 8px; background: transparent; font: 14px Inter, sans-serif; color: var(--kl-fg); box-sizing: border-box; }
.kl-rt input:hover, .kl-rt select:hover { border-color: var(--kl-line); }
.kl-rt input:focus, .kl-rt select:focus { border-color: var(--kl-g); outline: 0; background: #fff; }
.kl-rt td.num input { text-align: right; width: 100px; }
.kl-rt tr.is-empty td { padding: 14px 12px; color: var(--kl-mut); }
.kl-seg.is-small { display: inline-grid; grid-auto-flow: column; grid-auto-columns: max-content; grid-template-columns: none; justify-self: start; }
.kl-seg.is-small button { padding: 0 12px; }
.kl-afp { display: grid; gap: 10px; align-content: start; }
.kl-afp h3 { margin: 0; font: 600 14.5px Inter, sans-serif; }
.kl-phone { background: #fff; border: 1px solid var(--kl-line); border-radius: 18px; padding: 14px; display: grid; gap: 7px; box-shadow: 0 6px 20px rgba(18, 56, 43, .06); }
.kl-phone small { color: var(--kl-mut); font-size: 12px; }
.kl-phone b { font: 400 18px/1.2 var(--kl-serif); }
.kl-phone p { margin: 0; font-size: 13.5px; color: var(--kl-fg2); white-space: pre-line; }
.kl-phone ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.kl-phone li { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px dashed var(--kl-line2); padding-bottom: 4px; }
.kl-pvt { display: grid; gap: 4px; font-size: 13.5px; }
.kl-pvt div { display: flex; justify-content: space-between; }
.kl-pvsign { background: var(--kl-g); color: #fff; text-align: center; border-radius: 11px; padding: 11px; font-weight: 500; }
.kl-pvno { text-align: center; color: var(--kl-mut); font-size: 13px; }
.kl-aff { grid-column: 1 / -1; position: sticky; bottom: -24px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 0 4px; background: var(--kl-paper); border-top: 1px solid var(--kl-line); }
.kl-send { display: grid; gap: 14px; }
.kl-blist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.kl-blist li { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; border-bottom: 1px solid var(--kl-line2); padding-bottom: 6px; }
.kl-blist b { font-weight: 500; margin-right: 6px; }
@media (max-width: 1100px) { .kl-af { grid-template-columns: minmax(0, 1fr); } .kl-choices { grid-template-columns: minmax(0, 1fr); } }

/* Offerttabellen: äldre versioner fälls ut; ⋯-menyn i kortets hörn (Öppna i Studio, Kunden tackade nej). */
.kl-chr { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; }
.kl-older { border-top: 1px solid var(--kl-line2); }
.kl-older > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 10px 16px; color: var(--kl-mut); font-size: 13.5px; }
.kl-older > summary::-webkit-details-marker { display: none; }
.kl-older > summary:hover { color: var(--kl-fg); background: #fafaf8; }
.kl-older > summary .material-symbols-outlined { transition: transform .15s; }
.kl-older[open] > summary .material-symbols-outlined { transform: rotate(180deg); }
.kl-older .kl-vr { background: #fbfbf9; }
.kl-older .kl-vn, .kl-older .kl-vsum { color: var(--kl-fg2); }
.kl-f small.is-warn { color: var(--kl-ambfg); }
.kl-more { position: relative; }
.kl-more > summary { list-style: none; width: 34px; padding: 0; }
.kl-more > summary::-webkit-details-marker { display: none; }
.kl-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 8; min-width: 240px; background: var(--kl-card); border: 1px solid var(--kl-line); border-radius: 12px; box-shadow: 0 14px 34px rgba(18, 56, 43, .16); padding: 6px; display: grid; }
.kl-more.is-up .kl-menu { top: auto; bottom: calc(100% + 6px); }
.kl-menu a, .kl-menu button { display: flex; align-items: center; gap: 8px; text-align: left; border: 0; background: none; border-radius: 8px; padding: 9px 10px; font: 14px Inter, sans-serif; color: var(--kl-fg); text-decoration: none; cursor: pointer; }
.kl-menu a:hover, .kl-menu button:hover { background: #f2f4f1; }
.kl-menu-h { margin: 6px 10px 2px; padding-top: 6px; border-top: 1px solid var(--kl-line2); font-size: 12px; color: var(--kl-mut); }
.kl-menu-h:first-child { border-top: 0; padding-top: 0; }
@media (prefers-reduced-motion: reduce) { .kl-older > summary .material-symbols-outlined { transition: none; } }

/* Personnummer i kundpanelen */
.kl-pnr dd { display: flex; align-items: center; justify-content: flex-end; gap: 8px; white-space: normal; overflow: visible; }
.kl-pnr dd.is-editing { grid-column: 1 / -1; }
.kl-pnr-ed { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; align-items: center; width: 100%; }
.kl-pnr-ed input { min-width: 0; height: 32px; border: 1px solid var(--kl-line); border-radius: 8px; padding: 0 8px; font: 13.5px Inter, sans-serif; }
.kl-pnr-ed input[data-kl-pnr-name] { grid-column: 1 / -1; }
.kl-pnr-ed input:focus { border-color: var(--kl-g); outline: 0; }
.kl-pnr-err { grid-column: 1 / -1; color: var(--kl-red); font-size: 12px; text-align: left; }
.kl-pnr-err:empty { display: none; }
.kl-addp { justify-self: start; }

/* Offerttabellen: raden är ren – klick markerar och visar åtgärderna i en mörk rad under (som fokus i offertläget). */
.kl-vt .kl-vr:not(.is-th) { cursor: pointer; transition: background .12s; }
.kl-vt .kl-vr:not(.is-th):hover { background: #fafbf8; }
.kl-vt .kl-vr:not(.is-th):focus-visible { outline: 2px solid var(--kl-g); outline-offset: -2px; }
.kl-vt .kl-vr.is-sel { background: #fbfdfb; box-shadow: 0 0 0 1.5px var(--kl-g) inset; border-radius: 10px; position: relative; z-index: 1; }
.kl-vpill { position: absolute; right: 12px; z-index: 6; display: flex; align-items: center; gap: 2px; background: #1d2420; color: #eef2ef; border-radius: 999px; padding: 4px; box-shadow: 0 12px 30px rgba(13, 26, 21, .28); max-width: calc(100% - 24px); animation: kl-fade .12s ease-out; }
.kl-vpill > button, .kl-vpill > a, .kl-vbtns > button, .kl-vbtns > a { height: 34px; border: 0; background: transparent; color: inherit; border-radius: 999px; padding: 0 12px; display: inline-flex; align-items: center; gap: 7px; font: 500 13.5px Inter, sans-serif; text-decoration: none; cursor: pointer; white-space: nowrap; }
.kl-vpill > button:hover, .kl-vpill > a:hover, .kl-vbtns > button:hover, .kl-vbtns > a:hover { background: rgba(255, 255, 255, .1); }
.kl-vpill > button:focus-visible, .kl-vpill > a:focus-visible, .kl-vbtns > button:focus-visible, .kl-vbtns > a:focus-visible { outline: 2px solid #8fd3ad; outline-offset: -2px; }
.kl-vpill .material-symbols-outlined { font-size: 17px; }
.kl-vpill .is-zimla .material-symbols-outlined, .kl-vpill.is-ask > .material-symbols-outlined { color: #6ee7a8; }
.kl-vpill .is-danger { color: #ffb4a8; }
.kl-vsep { width: 1px; height: 18px; background: rgba(255, 255, 255, .18); margin: 0 2px; }
.kl-vpill.is-ask { left: 12px; padding-left: 14px; gap: 8px; }
.kl-vpill.is-ask input { flex: 1; min-width: 0; height: 34px; border: 0; outline: 0; background: transparent; color: #fff; font: 14px Inter, sans-serif; }
.kl-vpill.is-ask input::placeholder { color: rgba(238, 242, 239, .6); }
.kl-vpill.is-ask [data-kl-va="send"] { background: #2fbf71; color: #0d1a15; }
.kl-vpill.is-confirm { padding-left: 14px; gap: 8px; }
.kl-vpill.is-confirm:has(.is-go) { left: 12px; border-radius: 18px; }  /* lång fråga: hela radens bredd */
.kl-vpill.is-confirm:has(.is-go) .kl-vq { flex: 1; max-width: none; padding-block: 6px; }
.kl-vpill.is-confirm .is-go { background: #2fbf71; color: #0d1a15; }
.kl-vr.is-pending { opacity: .72; }  /* godkänd, väntar ut Ångra */
.kl-vq { font-size: 13.5px; white-space: normal; max-width: 420px; }
/* Makulera: frågan på egen rad, skälet och knapparna under; på telefonen skälet för sig och knapparna sida vid sida.
   16 px i fältet så att iOS inte zoomar in; spärrens långa skäl får samma breda pill. */
.kl-vpill.is-confirm:has(.kl-vreason), .kl-vpill.is-confirm:has(.kl-vq.is-note) { left: 12px; border-radius: 18px; flex-wrap: wrap; row-gap: 8px; }
.kl-vpill.is-confirm:has(.kl-vreason) .kl-vq { flex: 1 1 100%; max-width: none; padding-block: 6px; }
/* Spärrad makulering: låset och skälet till vänster, Ny ÄTA och OK till höger på samma rad; smalt bryts knapparna under. */
.kl-vq.is-note { flex: 1 1 260px; max-width: none; display: flex; align-items: flex-start; gap: 8px; padding-block: 6px; color: rgba(255,255,255,.82); }
.kl-vq.is-note > .material-symbols-outlined { font-size: 18px; color: rgba(255,255,255,.55); margin-top: 1px; }
.kl-vq.is-note b { font-weight: 600; color: #fff; }
.kl-vbtns > a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.kl-vbtns .material-symbols-outlined { font-size: 18px; }
.kl-vreason { flex: 1 1 220px; min-width: 0; height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08); color: #fff; font: inherit; font-size: 16px; }
.kl-vreason::placeholder { color: rgba(255,255,255,.55); }
.kl-vreason:focus-visible { outline: 2px solid #8fd3ad; outline-offset: 1px; }
.kl-vbtns { display: flex; gap: 8px; margin-left: auto; }
.kl-vpill > button.is-muted { color: rgba(255,255,255,.55); }
html:has(.kl-vreason:focus) .zimla-dock, html:has(.kl-vreason:focus) .zimla-help { visibility: hidden; }
/* Dela (läslänken): vilka som fått den överst, mottagaren och namnet, knapparna; felet vid fältet. */
.kl-vshares { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px; }
.kl-vshare { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 4px 0 10px; border-radius: 999px;
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.78); font-size: 12.5px; }
.kl-vshare b { font-weight: 600; color: #fff; }
.kl-vshare.is-closed { padding-right: 10px; opacity: .6; }
.kl-vshare button { height: 24px; padding: 0 9px; border: 0; border-radius: 999px; background: rgba(255,255,255,.12); color: #fff;
  font: 500 12px Inter, sans-serif; cursor: pointer; }
.kl-vreason[data-kl-vshare-name] { flex: 0 1 170px; }
.kl-vreason[aria-invalid="true"] { border-color: #ff9b9b; }
.kl-verr { flex: 1 1 100%; color: #ffb4b4; font-size: 13px; }
.kl-verr:empty { display: none; }
@container klarea (max-width: 760px) {
  .kl-vreason, .kl-vreason[data-kl-vshare-name] { flex-basis: 100%; }
  .kl-vbtns { flex: 1 1 100%; } .kl-vbtns > button, .kl-vbtns > a { flex: 1; justify-content: center; }
}
@media (pointer: coarse) {
  .kl-vreason { height: 44px; }
  .kl-vpill > button, .kl-vpill > a, .kl-vbtns > button { min-height: 44px; }
  .kl-toast button { height: 44px; padding: 0 16px; }
}
.kl-vpill.is-confirm .is-danger { background: #a33a2c; color: #fff; }
@media (prefers-reduced-motion: reduce) { .kl-vpill { animation: none; } .kl-vt .kl-vr:not(.is-th) { transition: none; } }

.kl-vpill { overflow: hidden; }
.kl-vpill.is-icons > :not(.is-zimla):not(.is-keep) .kl-vl { display: none; }
.kl-vpill.is-icons > button, .kl-vpill.is-icons > a { padding: 0 10px; }
.kl-vpill.is-wrap { left: 12px; flex-wrap: wrap; border-radius: 18px; row-gap: 2px; }
.kl-vpill.is-wrap .kl-vsep { display: none; }

/* Smal kundpanel (.is-slim, sätts efter sidans bredd – t.ex. med Zimla AI öppen): dialogen syns alltid, i stället blir
   panelen en list med initialerna och en prick per projekt (namn och nästa steg som tooltip). Ett klick på initialerna
   fäller ut hela panelen ovanpå sidan (.is-peek). */
.kl-slimtoggle { display: none; border: 0; background: none; padding: 0; cursor: pointer; justify-self: center; }
/* Smal panel: e-post eller telefon saknas – en gul prick på initialerna (som mobilens zmc-ic.is-miss). */
.kl-slimtoggle .kl-av.is-miss { position: relative; }
.kl-slimtoggle .kl-av.is-miss::after { content: ""; position: absolute; top: 1px; right: 1px; width: 10px; height: 10px; border-radius: 50%; background: #e4b85a; box-shadow: 0 0 0 2px #fff; }
@media (min-width: 1024px) {
  .kl.is-slim { grid-template-columns: 64px minmax(0, 1fr); }
  .kl.is-slim .kl-panel { overflow: visible; z-index: 30; }
  .kl.is-slim:not(.is-peek) .kl-ptop { padding: 12px 8px; justify-items: center; }
  .kl.is-slim:not(.is-peek) .kl-ptop > :not(.kl-back):not(.kl-slimtoggle) { display: none; }
  .kl.is-slim:not(.is-peek) .kl-back { justify-self: center; }
  .kl.is-slim:not(.is-peek) .kl-pl, .kl.is-slim:not(.is-peek) .kl-gh, .kl.is-slim:not(.is-peek) .kl-pall { display: none; }
  .kl.is-slim:not(.is-peek) .kl-slimtoggle { display: block; }
  .kl.is-slim:not(.is-peek) .kl-plist { padding: 8px 6px; justify-items: center; gap: 6px; }
  .kl.is-slim:not(.is-peek) .kl-proj { grid-template-columns: 1fr; width: 44px; min-height: 44px; padding: 0; place-items: center; }
  .kl.is-slim:not(.is-peek) .kl-proj b, .kl.is-slim:not(.is-peek) .kl-nx { display: none; }
  .kl.is-slim:not(.is-peek) .kl-proj .kl-dot { width: 12px; height: 12px; margin: 0; }
  .kl.is-slim:not(.is-peek) .kl-proj[aria-current="page"]::before { left: -6px; }
  .kl.is-slim:not(.is-peek) .kl-newp { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .kl.is-slim.is-peek .kl-panel { width: 300px; box-shadow: 18px 0 40px rgba(13, 26, 21, .16); }
}

/* Kundpanelen: rent överst (namn, Ring, Mejla, Bra att veta); pennan fäller ner det som rör personen. */
.kl-ib { margin-left: auto; align-self: flex-start; width: 32px; height: 32px; border-radius: 9px; border: 1px solid transparent; background: transparent; color: var(--kl-mut); display: grid; place-items: center; cursor: pointer; flex: none; }
.kl-ib:hover, .kl-ib.is-on { background: #eef0ec; color: var(--kl-fg); }
.kl-ib .material-symbols-outlined { font-size: 18px; }
.kl-cedit { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .2s ease-out; }
.kl-cedit.is-open { grid-template-rows: 1fr; }
.kl-cedit.is-instant { transition: none; }
.kl-cedit-in { overflow: hidden; display: grid; gap: 10px; min-height: 0; }
.kl-cedit.is-open .kl-cedit-in { padding: 4px 0 6px; }
.kl-contact { display: grid; gap: 6px; }
.kl-contact .kl-fld.is-bad { border-color: var(--kl-red); }
.kl-err { color: var(--kl-red); font-size: 12px; }
.kl-note textarea { min-height: 22px; }
@media (prefers-reduced-motion: reduce) { .kl-cedit { transition: none; } }

/* Projektlistan är kundens: en rubrik ("Simons projekt 2") och grupperna som underrubriker. */
.kl-ptitle { display: flex; align-items: center; gap: 8px; margin: 4px 8px 4px; }
.kl-ptitle .material-symbols-outlined { color: var(--kl-mut2); font-size: 19px; }
.kl-ptitle h2 { margin: 0; font: 400 18px/1.2 var(--kl-serif); color: var(--kl-fg); }
.kl-ptitle .n { margin-left: auto; background: var(--kl-line2); color: var(--kl-fg2); border-radius: 999px; padding: 0 8px; font: 500 12px Inter, sans-serif; }
.kl-plist .kl-gh { margin: 10px 8px 4px; font-size: 10.5px; color: var(--kl-mut2); }
.kl-plist .kl-gh:first-of-type { margin-top: 8px; }
@media (min-width: 1024px) { .kl.is-slim:not(.is-peek) .kl-ptitle { display: none; } }
@media (max-width: 1023px) { .kl-plist:not(.is-open) .kl-ptitle { display: none; } }

/* ===== Kundsidan förenklad (Simon 2026-10-16, prototypen): panelen med projektkort och projektets meny, ett kort per
   projekt med huvud (att betala efter ROT, nästa steg, EN knapp, stegrad) och en del i taget. Bara datorn – telefonen
   har sina zmc-flikar som förut. ===== */
.kl-crows { margin: 0; display: grid; gap: 4px; font-size: 13.5px; }
.kl-crows div { min-width: 0; display: flex; justify-content: space-between; gap: 12px; }
.kl-crows dt { flex: none; display: flex; align-items: center; gap: 7px; white-space: nowrap; color: var(--kl-mut); }
.kl-crows dt .material-symbols-outlined { font-size: 16px; color: var(--kl-mut2); }
.kl-crows dd { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kl-crows .kl-add { line-height: 18px; padding: 0 8px; }
.kl-info { font-size: 15px !important; color: var(--kl-mut2); margin-left: 6px; vertical-align: -3px; cursor: help; }
.kl-pnew { margin-left: auto; }
.kl-ptitle .n { margin-left: 0; }
.kl-pcard { border-radius: 14px; border: 1px solid transparent; margin: 0 0 8px; background: transparent; }
.kl-pcard .kl-proj { grid-template-columns: 32px minmax(0, 1fr) auto 18px; align-items: center; gap: 0 10px; padding: 12px; min-height: 56px; background: var(--kl-card); border: 1px solid var(--kl-line); border-radius: 14px; }
.kl-pcard .kl-proj[aria-current="page"]::before { display: none; }
.kl-pcard.is-open { background: var(--kl-card); border-color: var(--kl-line); box-shadow: 0 2px 8px rgba(18, 56, 43, .06); }
.kl-pcard.is-open .kl-proj { border-color: transparent; border-bottom-color: var(--kl-line2); border-radius: 14px 14px 0 0; box-shadow: none; }
.kl-no { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font: 600 12px Inter, sans-serif; background: #eef0ec; color: var(--kl-fg2); }
.kl-pcard.is-mine .kl-no { background: #fbe9bf; color: #7a5200; }
.kl-pcard.is-open.is-mine .kl-no { background: var(--kl-amb); color: #fff; }
.kl-pt { min-width: 0; display: grid; gap: 1px; }
.kl-pt b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kl-pcard .kl-nx { grid-column: auto; }
.kl-pv { align-self: start; font-size: 13px; color: var(--kl-mut); white-space: nowrap; font-variant-numeric: tabular-nums; padding-top: 1px; }
.kl-pch { align-self: start; color: var(--kl-mut2); font-size: 18px !important; transition: transform .2s; }
.kl-pcard.is-open .kl-pch { transform: rotate(180deg); }
.kl-gdone > summary { list-style: none; cursor: pointer; }
.kl-gdone > summary::-webkit-details-marker { display: none; }
.kl-gdone > summary .material-symbols-outlined { font-size: 16px; }
.kl-menu2 { display: grid; padding: 4px 0 6px; }
.kl-mi { display: grid; grid-template-columns: 20px auto minmax(0, 1fr); align-items: center; gap: 10px; min-height: 38px; padding: 0 16px 0 18px; color: var(--kl-fg); text-decoration: none; font-size: 14px; }
.kl-mi .material-symbols-outlined { font-size: 18px; color: var(--kl-mut2); }
.kl-mi:hover { background: #f4f6f3; }
.kl-mi.is-on { background: #e8f2ec; color: var(--kl-g); font-weight: 600; }
.kl-mi.is-on .material-symbols-outlined { color: var(--kl-g); }
/* Etiketten står hel; detaljen ger vika med ellips när panelen är smal ("Offerter  v1 · skickad · v2 utkast"). */
.kl-mid { min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: right; font-size: 12.5px; color: var(--kl-mut); font-weight: 400; white-space: nowrap; }
.kl-mid.is-warn { color: var(--kl-ambfg); }
.kl-mid.is-new { color: var(--kl-ambfg); }
.kl-mid.is-new i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; vertical-align: middle; border-radius: 50%; background: var(--kl-amb); }
.kl-mid.is-mut { color: var(--kl-mut2); }

/* Projektets kort: huvudet och en del i taget under strecket – bara datorn; telefonen har sina kort och flikar. */
@media (min-width: 1024px) {
.kl-one { background: var(--kl-card); border: 1px solid var(--kl-line); border-radius: 20px; gap: 0; overflow: clip; box-shadow: 0 2px 10px rgba(18, 56, 43, .05); }
.kl-one > .kl-head { border: 0; border-radius: 0; padding: 30px 32px 26px; grid-template-columns: minmax(0, 1fr) auto; row-gap: 22px; }
.kl-one .kl-head h2 { font-size: 36px; }
.kl-one .kl-say { font-size: 15px; max-width: 560px; color: var(--kl-fg); }
.kl-one .kl-say.is-warn { color: var(--kl-fg); }
.kl-one .kl-next { align-self: start; gap: 4px; }
.kl-one .kl-amt { font-size: 44px; display: flex; align-items: baseline; gap: 6px; }
.kl-one .kl-amt small { font: 400 13.5px Inter, sans-serif; color: var(--kl-mut); margin: 0; }
.kl-gross { color: var(--kl-mut); font-size: 13.5px; margin-bottom: 12px !important; }
.kl-steps { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kl-steps li { position: relative; display: flex; gap: 8px; align-items: flex-start; min-width: 0; }
.kl-steps li:not(:last-child)::after { content: ''; position: absolute; top: 11px; left: 30px; right: 8px; height: 2px; background: var(--kl-line); }
.kl-steps li.is-done:not(:last-child)::after { background: var(--kl-g); }
.kl-stdot { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #cfd4cf; background: #fff; display: grid; place-items: center; position: relative; z-index: 1; }
.kl-steps li.is-done .kl-stdot { background: var(--kl-g); border-color: var(--kl-g); color: #fff; }
.kl-steps li.is-done .kl-stdot .material-symbols-outlined { font-size: 15px; }
.kl-steps li.is-now .kl-stdot { border-color: var(--kl-g); box-shadow: inset 0 0 0 4px #fff; background: var(--kl-g); }
.kl-stt { display: grid; position: relative; z-index: 1; background: var(--kl-card); padding-right: 8px; min-width: 0; }
.kl-stt b { font-weight: 500; font-size: 14px; }
.kl-steps li.is-todo .kl-stt b { color: var(--kl-mut); font-weight: 400; }
.kl-stt small { color: var(--kl-mut); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kl-secs { border-top: 1px solid var(--kl-line2); }
.kl-sec { padding: 28px 32px 32px; display: grid; gap: 16px; min-width: 0; }
.kl-sec .kl-card { border: 0; padding: 0; background: none; }
.kl-sec .kl-ch h3 { font-size: 26px; }
.kl-sec .kl-ch { align-items: center; justify-content: flex-start; }
.kl-sec .kl-ch .kl-chr { margin-left: auto; }
.kl-sec .kl-pic { width: 40px; height: 40px; border-radius: 10px; background: #f1f2ee; display: grid; place-items: center; color: var(--kl-fg2); }
.kl-line { margin: 0; color: var(--kl-fg2); font-size: 15px; }
.kl-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.kl-evlist { list-style: none; margin: 0; padding: 0; }
.kl-evlist li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--kl-line2); }
.kl-evlist li:first-child { border-top: 0; }
.kl-evi { width: 34px; height: 34px; border-radius: 10px; background: #f1f2ee; display: grid; place-items: center; color: var(--kl-fg2); }
.kl-evt { font-size: 15px; }
.kl-evd { color: var(--kl-mut); font-size: 13px; white-space: nowrap; }
.kl-evlist li.is-warn .kl-evt { color: var(--kl-ambfg); }
.kl-evlist li.is-bad .kl-evt { color: var(--kl-red); }
  .kl-one .kl-sec.kl-card { border: 0; border-radius: 0; background: none; padding: 28px 32px 32px; }
}
@media (min-width: 1024px) {
  .kl-stage:has(.kl-one) { grid-template-columns: minmax(0, 1fr); max-width: 1180px; }
  .kl-one [data-kl-secpanel]:not(.is-on) { display: none; }
  .kl-one .zmc-tabs { display: none; }
  .kl-one .kl-vr { grid-template-columns: 66px minmax(0, 1fr) minmax(96px, auto); }
  .kl-one .kl-vr .x { display: none; }
  /* Utkastets "Simon kan signera v1 tills v2 skickas." står i raden bredvid statusen, inte på en egen rad under. */
  .kl-one .kl-vr:has(> .kl-warn) { grid-template-columns: 66px auto minmax(0, 1fr) minmax(96px, auto); }
  .kl-one .kl-vr > .kl-warn { grid-row: 1; grid-column: 3; margin: 0; }
  .kl-one .kl-vr:has(> .kl-warn) > .kl-vsum { grid-column: 4; }
  /* Dialogen är en del bland de andra: aldrig ett ark i det här läget. */
  .kl.is-narrow .kl-one .kl-dialog, .kl-one .kl-dialog { position: static; transform: none; visibility: visible; width: auto; height: auto; min-height: 520px; border: 0; border-radius: 0; box-shadow: none; }
  .kl-one .kl-dialog .kl-dlg-x { display: none; }
  .kl-one .kl-dialog .kl-dlg-h { padding-right: 0; }
  /* Smal panel (Zimla AI dockad): menyn i panelen syns inte – den står då i kortet under huvudet. */
  .kl.is-slim:not(.is-peek) .kl-pcard { width: 44px; }
  .kl.is-slim:not(.is-peek) .kl-pcard .kl-proj { grid-template-columns: 1fr; padding: 6px; min-height: 44px; place-items: center; }
  .kl.is-slim:not(.is-peek) .kl-pcard :is(.kl-pt, .kl-pv, .kl-pch, .kl-pmenu) { display: none; }
}
@media (prefers-reduced-motion: no-preference) { .kl-one [data-kl-secpanel].is-on { animation: kl-settle .2s ease-out; } }
@media (prefers-reduced-motion: reduce) { .kl-pch { transition: none; } }
.kl-menu-in { display: none; }
@media (min-width: 1024px) {
  .kl.is-slim:not(.is-peek) .kl-menu-in { display: block; border-top: 1px solid var(--kl-line2); padding: 6px 20px; overflow-x: auto; }
  .kl.is-slim:not(.is-peek) .kl-menu-in .kl-menu2 { display: flex; gap: 2px; padding: 0; }
  .kl.is-slim:not(.is-peek) .kl-menu-in .kl-mi { grid-template-columns: auto auto; padding: 0 10px; border-radius: 9px; min-height: 36px; white-space: nowrap; }
  .kl.is-slim:not(.is-peek) .kl-menu-in .kl-mi .material-symbols-outlined { display: none; }
}
@media (min-width: 1024px) { .kl[class] .kl-stage:has(.kl-one) { grid-template-columns: minmax(0, 1fr); max-width: 1180px; } }
.kl-steps li.is-miss .kl-stdot { border-color: var(--kl-amb); border-style: dashed; }
.kl-steps li.is-miss .kl-stt small { color: var(--kl-ambfg); }
@media (max-width: 1023px) { .kl-secs { display: contents; } }  /* telefonen: delarna i kundlägets rutnät som förut */
.kl-zimla { color: var(--kl-g); border-color: #cfe3d7; background: #f1f8f3; }
.kl-zimla:hover { background: #e6f1ea; }

/* Planering och Filer direkt i fliken (2026-10-16): fragmenten som popupen hade. Kortet äger rubriken – ingen kicker,
   samma serif som de andra delarna. */
.kl-sec .kund-plan .kund-kick, .kl-sec .kund-files .kund-kick { display: none; }
.kl-sec .kund-plan .kund-sech h2, .kl-sec .kund-files .kund-sech h2 { margin: 0; font: 400 26px/1.15 var(--kl-serif); letter-spacing: 0; color: inherit; }
@media (max-width: 1023px) { .kl-sec .kund-plan .kund-sech h2, .kl-sec .kund-files .kund-sech h2 { font-size: 20px; } }

/* ÄTA-delen (ägaren 2026-10-16): rubrik med Ny ÄTA till höger, luft mellan delarna, ett lugnt tomläge. */
.kl-ata { display: grid; gap: 16px; }
.kl-ata .kl-eco { padding: 12px 14px; border: 1px solid var(--kl-line); border-radius: 12px; background: #fcfcfa; }
.kl-ata-empty { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border: 1.5px dashed var(--kl-line); border-radius: 14px; background: #fcfcfa; }
.kl-ata-empty-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: #e6f1ea; color: #1f6b4f; }
.kl-ata-empty-ic .material-symbols-outlined { font-size: 22px; }
.kl-ata-empty b { display: block; font-weight: 500; }
.kl-ata-empty p { margin: 4px 0 0; max-width: 62ch; color: var(--kl-mut); font-size: 14px; line-height: 1.5; }