/* Ritbordet (Studio på datorn, designprototypen). Syns bara när <html> har zimla-board-on (Studio) eller
   zimla-board-prata (bara rubriken + dagens composer). Mobil påverkas inte. */
.zboard, .zb-head { display: none; }
[x-cloak] { display: none !important; }

@media (min-width: 1024px) {
  html.zimla-board-on, html.zimla-board-prata {
    --zb-ink: #1d2420; --zb-muted: #6b736e; --zb-line: #e3e5de; --zb-paper: #fbfaf6; --zb-green: #1f6b4f; --zb-dark: #1f5c45; --zb-soft: #e9f2ec;
    /* Ritningens höjd (prototypen: 410 px), lägre på låga skärmar – kortet ryms alltid. */
    --zb-mid-h: clamp(300px, calc(100vh - 470px), 410px);
  }
  /* Rubriken ersätter hälsningen; korten och förslagen under composern göms. */
  html:is(.zimla-board-on, .zimla-board-prata) .zb-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; width: min(1060px, 100%); margin: 0 auto 18px; text-align: left; }
  html:is(.zimla-board-on, .zimla-board-prata) .zs-intro > :not(.zb-head) { display: none !important; }
  html:is(.zimla-board-on, .zimla-board-prata) .zs-desk { display: none !important; }
  html:is(.zimla-board-on, .zimla-board-prata).zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip):not(.zimla-ai-start-workplace) .zimla-ai-panel:not(.zs-focus) .zs-top { width: min(1060px, 100%) !important; max-width: none !important; margin-inline: auto !important; padding: 0 !important; }
  html:is(.zimla-board-on, .zimla-board-prata) .zs-intro { width: 100% !important; max-width: none !important; }
  /* Samma ankare för textfältet i båda lägena; ritningen får växa nedåt utan att flytta composern. */
  html.zimla-ai-start:is(.zimla-board-on, .zimla-board-prata):not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip):not(.zimla-ai-start-workplace) .zimla-ai-panel:not(.zs-focus) { padding-top: max(20px, calc(47vh - 190px - var(--zb-up, 0px))) !important; }
  html.zimla-board-on.zb-shut .zb-meat { display: none; }
  html.zimla-board-on.zb-shut .zb-desc { border-bottom-color: transparent; }
  .zb-head-t p { margin: 0 0 6px; font-size: 14px; color: var(--zb-muted); }
  /* Rubrikerna i samma cell; den som visas tonar in (prototypens zswap: upp 8 px, oskärpan bort). */
  .zb-titles { display: grid; }
  .zb-title { grid-area: 1 / 1; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 16px; row-gap: 2px; }
  html.zb-mode-anim .zb-title { animation: zb-swap 0.45s cubic-bezier(.2,.8,.2,1); }
  .zb-title h1 { margin: 0; font-family: Newsreader, "Source Serif 4", Georgia, serif; font-size: 38px; font-weight: 400; line-height: 1.1; letter-spacing: -0.015em; color: var(--zb-ink); transform-origin: 0 0; }
  .zb-title small { overflow: hidden; max-width: 560px; font-size: 14.5px; white-space: nowrap; color: #4e5751; transition: opacity 0.15s ease, max-width 0.3s cubic-bezier(.215,.61,.355,1); } /* i takt med lyftet (300 ms) */
  /* Hopfällt står kortet och rubriken still medan man skriver; rubriken krymper när ritningen öppnas. */
  html.zimla-board-on.zb-lift:not(.zb-shut) .zb-t-studio small { max-width: 0; opacity: 0; }
  @keyframes zb-swap { from { opacity: 0; transform: translateY(8px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
  html.zimla-board-on .zb-t-prata, html.zimla-board-prata .zb-t-studio { display: none; }
  /* Reglaget: en vit tumme glider mellan två lika breda knappar; klicket syns direkt. */
  .zb-mode { position: relative; display: grid; flex: none; grid-template-columns: repeat(2, minmax(96px, 1fr)); padding: 3px; border-radius: 11px; background: rgba(236, 238, 233, 0.92); box-shadow: 0 0 0 1px rgba(20, 30, 25, 0.05); }
  .zb-mode::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 8px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); transition: transform 0.35s cubic-bezier(.3,.9,.3,1); }
  .zb-mode:has([data-zb-mode="prata"][aria-pressed="true"])::before { transform: translateX(100%); }
  .zb-mode button { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 13px; font-weight: 500; color: #5d6660; cursor: pointer; transition: color 0.25s ease; }
  .zb-mode button[aria-pressed="true"] { color: var(--zb-ink); }
  /* BETA i en liten grön ruta bredvid Studio. */
  .zb-beta { padding: 2px 5px; border-radius: 4px; background: var(--zb-green); font-size: 9px; font-weight: 700; letter-spacing: 0.08em; line-height: 1.2; text-transform: uppercase; color: #fff; }
  /* Bilagan som chip under texten (prototypen): typ, namn, ×. */
  .zb-desc-for { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .zb-file.is-kund { max-width: 260px; animation: none; }
  .zb-files { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px; padding: 0 16px 12px; } /* under knappraden, i linje med + */
  .zb-file { display: inline-flex; align-items: center; gap: 7px; max-width: 460px; padding: 3px 4px 3px 7px; border: 1px solid #e1e3de; border-radius: 9px; background: #fff; font-size: 12px; }
  .zb-file em { padding: 2px 5px; border-radius: 4px; background: #e6f0ea; font-size: 9.5px; font-style: normal; font-weight: 700; color: var(--zb-green); }
  .zb-file span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .zb-file small { flex: none; font-size: 11px; color: #8a918c; }
  .zb-file.is-plan em { background: var(--zb-green); color: #fff; }
  .zb-file.is-reading em, .zb-file.is-unread em { background: #fbf0d9; color: #8a5a00; }
  @media (prefers-reduced-motion: no-preference) { .zb-file.is-reading em { animation: zb-reading 1.1s ease-in-out infinite; } }
  @keyframes zb-reading { 50% { opacity: 0.45; } }
  .zb-file button { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: none; font: inherit; color: #6b736e; cursor: pointer; }
  .zb-file button:hover { background: #f1f4f0; color: var(--zb-ink); }
  .zb-file button:focus-visible { outline: 2px solid #1f6b4f; outline-offset: 1px; }
  @media (prefers-reduced-motion: no-preference) { .zb-file { animation: zb-bubble 0.3s cubic-bezier(.215,.61,.355,1); } }
  @keyframes zb-bubble { from { opacity: 0; transform: translateX(-6px) scale(.96); } }
  /* Studio: ritbordet i stället för composern. Prata: composern som förut, utan korten. */
  html:is(.zimla-board-on, .zimla-board-prata) .zimla-ai-panel form.zimla-ai-composer { display: none !important; }
  /* zimla-start.css göms allt under composern utom korten (!important) – ritbordet måste vinna över det. */
  html:is(.zimla-board-on, .zimla-board-prata).zimla-ai-start:not(.zimla-ai-start-working):not(.zimla-ai-start-chats):not(.zimla-ai-start-strip):not(.zimla-ai-start-workplace) .zimla-ai-panel > .zs-below > .zboard { display: block !important; width: min(1060px, 100%); margin: 0 auto; }
  html:is(.zimla-board-on, .zimla-board-prata) .zimla-ai-panel > .zs-below { width: 100% !important; }
  /* Prata är samma kort: skissen och På bordet viks ihop (grid-raden 1fr → 0fr), kryssen och färgmarkeringarna tonar
     bort och exempelfrågorna tonar in under. Det som viks klipps bara medan det rör sig – annars klipps kortets menyer. */
  .zb-fold { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.45s cubic-bezier(.2,.8,.2,1); }
  /* min-width: 0 – annars växer grid-cellen med en lång rad (På bordet en dag med mycket i agendan) ut ur kortet. */
  .zb-fold-in { min-height: 0; min-width: 0; transition: opacity 0.3s ease 0.08s, visibility 0s; }
  html.zimla-board-prata .zb-fold { grid-template-rows: 0fr; }
  html.zimla-board-prata .zb-fold-in { overflow: hidden; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0s linear 0.45s; }
  html.zb-mode-anim .zb-fold-in { overflow: hidden; }
  /* Beskrivningen (med markeringarna) och frågan byter plats i samma fält; det som kommer fram tonar in. */
  .zb-text > textarea.zb-talk, .zb-hl-talk, html.zimla-board-prata :is(.zb-text > textarea:not(.zb-talk), .zb-hl:not(.zb-hl-talk)) { display: none; }
  html.zimla-board-prata .zb-hl-talk { display: block; }
  html.zimla-board-prata .zb-text > textarea.zb-talk { display: block; }
  html.zb-mode-anim .zb-text > textarea { animation: zb-fade 0.25s ease; }
  @keyframes zb-fade { from { opacity: 0; } }
  .zb-desc { transition: border-color 0.3s ease; }
  html.zimla-board-prata .zb-desc { border-bottom-color: transparent; }
  .zb-desc-h > .zb-k { transition: color 0.2s ease; }
  .zb-desc:focus-within .zb-desc-h > .zb-k { color: var(--zb-green); }
  .zp-chips { display: none; }
  html.zimla-board-prata .zp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
  html.zb-mode-anim.zimla-board-prata .zp-chips { animation: zb-swap 0.45s cubic-bezier(.2,.8,.2,1) 0.05s backwards; }
  .zp-chips button { padding: 8px 14px; border: 1px solid rgba(29, 36, 32, 0.12); border-radius: 999px; background: rgba(255, 255, 255, 0.72); font: inherit; font-size: 12.5px; line-height: 1.2; white-space: nowrap; color: var(--zb-ink); cursor: pointer; backdrop-filter: blur(8px); transition: background-color 0.15s ease, border-color 0.15s ease; }
  .zp-chips button:hover { background: #fff; border-color: var(--zb-green); }
  /* Under composern i vila: Ritbordet och instruktionsfilmen sida vid sida (ägaren 2026-10-21), samma glaskort. Är filmen
     sedd eller dold tar Ritbordet hela raden. × döljer filmen. */
  .zs-more { display: none; }
  html.zimla-board-on:not(.zimla-board-prata) .zs-more { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 10px; margin-top: 16px; }
  .zs-film { position: relative; display: block; min-width: 0; }
  .zs-more[hidden], .zs-film[hidden] { display: none !important; }
  .zs-film__open { display: flex; align-items: center; gap: 16px; width: 100%; min-width: 0; padding: 8px 48px 8px 8px; border: 1px solid rgba(29, 36, 32, 0.12); border-radius: 16px; background: rgba(255, 255, 255, 0.72); font: inherit; text-align: left; color: var(--zb-ink); cursor: pointer; backdrop-filter: blur(8px); transition: background-color 0.15s ease, border-color 0.15s ease; }
  .zs-film__open:hover { background: #fff; border-color: var(--zb-green); }
  .zs-film__open:focus-visible, .zs-film__x:focus-visible { outline: 2px solid var(--zb-green); outline-offset: 2px; }
  .zs-film__thumb { position: relative; display: grid; flex: none; place-items: center; width: 144px; height: 90px; overflow: hidden; border-radius: 10px; background: var(--zb-soft); box-shadow: inset 0 0 0 1px rgba(29, 36, 32, 0.08); }
  .zs-film__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
  .zs-film__thumb .material-symbols-outlined { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; background: var(--zb-dark); color: #fff; font-size: 26px; box-shadow: 0 8px 20px -8px rgb(15 74 55 / 65%); transition: background-color 0.15s ease, transform 0.15s ease; }
  .zs-film__open:hover .zs-film__thumb .material-symbols-outlined { background: var(--zb-green); transform: scale(1.06); }
  .zs-film__c { display: grid; gap: 3px; min-width: 0; }
  .zs-film__k { font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #5b645e; }
  .zs-film__t { font-family: Newsreader, "Source Serif 4", Georgia, serif; font-size: 22px; font-weight: 400; line-height: 1.15; color: var(--zb-ink); }
  .zs-film__open small { overflow: hidden; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; color: #4e5751; }
  .zs-film__ch { overflow: hidden; margin-top: 4px; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; color: var(--zb-muted); }
  .zs-film__x { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 999px; background: none; color: var(--zb-muted); cursor: pointer; }
  .zs-film__x:hover { background: rgba(29, 36, 32, 0.06); color: var(--zb-ink); }
  .zs-film__x .material-symbols-outlined { font-size: 18px; }
  /* Ritbordets kort: rutnätet och en tom planskiss i stället för en bild, pilen i stället för ×. */
  .zs-rb { height: 100%; padding-right: 16px; }
  .zs-rb .zs-film__c { flex: 1; }
  .zs-rb__thumb { background-color: #f7f7f1; background-image: linear-gradient(rgba(47, 61, 54, 0.075) 1px, transparent 1px), linear-gradient(90deg, rgba(47, 61, 54, 0.075) 1px, transparent 1px); background-size: 12px 12px; background-position: -1px -1px; }
  .zs-rb__thumb .zb-ghost { width: 92px; height: 52px; margin: 0; border-color: #9aa39c; }
  .zs-rb__go { flex: none; color: var(--zb-muted); transition: color 0.15s ease, transform 0.15s ease; }
  .zs-rb:hover .zs-rb__go { color: var(--zb-green); transform: translateX(2px); }

  .zb-card { position: relative; border-radius: 22px; background: var(--zb-paper); box-shadow: 0 0 0 1px rgba(20, 30, 25, 0.07), 0 24px 60px -30px rgba(30, 45, 35, 0.35); color: var(--zb-ink); }
  .zb-k { font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #5b645e; }
  .zb-k small { margin-left: 8px; font-size: 11px; font-weight: 400; letter-spacing: 0; text-transform: none; color: #8a918c; }
  .zb-muted { margin: 6px 0; font-size: 13px; color: #8a918c; }
  /* Beskrivningen: markeringarna i ett lager bakom en vanlig textarea (markören flyttas aldrig). */
  .zb-desc { padding: 18px 24px 8px; border-bottom: 1px solid var(--zb-line); border-radius: 21px 21px 0 0; }
  .zb-desc-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
  .zb-text { position: relative; }
  /* Lugn text (Claude/Grok-känsla): 16/1,55, mjukt bläck, ingen rullist (spegeln står exakt under orden), toning nertill
     bara när det finns mer text. Fältet och spegeln har samma mått. */
  .zb-text textarea, .zb-hl { box-sizing: border-box; width: 100%; min-height: 34px; max-height: min(176px, 22vh); margin: 0; padding: 0 0 8px; border: 0; font: inherit; font-size: 16px; line-height: 1.55; letter-spacing: -0.005em; white-space: pre-wrap; overflow-wrap: break-word; }
  .zb-text textarea { position: relative; z-index: 1; display: block; resize: none; overflow-y: auto; scrollbar-width: none; background: transparent; color: #2b3530; caret-color: var(--zb-green); outline: 0; field-sizing: content; }
  .zb-text textarea::-webkit-scrollbar { display: none; }
  .zb-text textarea::selection { background: var(--zb-soft); }
  .zb-text.is-more { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent); }
  .zb-text textarea::placeholder { color: #858c87; }
  /* Rösten skriver i spegeln ovanpå en ännu tom ruta: platshållaren får inte synas under. */
  .zb-text.is-hearing textarea::placeholder { color: transparent; }
  .zb-hl { position: absolute; inset: 0; overflow: hidden; color: transparent; pointer-events: none; }
  /* Rösten som ännu inte är säker (Soniox gissning): grå efter texten, blir vanlig text när den bekräftas. */
  .zb-hl .zb-guess { color: #9aa19c; }
  .zb-hl mark { border-radius: 3px; color: transparent; background: none; box-shadow: inset 0 -3px 0 var(--mk); }
  .zb-hl mark.is-room { --mk: #b6e0c6; } .zb-hl mark.is-area { --mk: #c3d4ea; } .zb-hl mark.is-level { --mk: #f0d9a6; } .zb-hl mark.is-home { --mk: #dcd3ea; }

  /* Ritningen och förteckningen har en fast höjd (prototypen: 410 px) som krymper på låga skärmar – kortet ryms alltid. */
  .zb-mid { --zb-plan-h: var(--zb-mid-h); display: grid; grid-template-columns: minmax(0, 1fr) 304px; min-height: var(--zb-mid-h); transition: min-height 0.35s cubic-bezier(.2, .8, .2, 1); } /* växer med rumslistan: listan klipps aldrig */
  /* Förstorad ritning: ungefär halva höjden till, men kortet ryms alltid på skärmen. */
  .zb-mid.is-big { --zb-plan-h: clamp(340px, calc(100vh - 410px), 640px); min-height: var(--zb-plan-h); }
  .zb-plan-acts button { display: grid; place-items: center; width: 26px; padding: 0; }
  .zb-plan-acts .zb-fullbtn { display: inline-flex; align-items: center; gap: 5px; width: auto; padding: 0 8px 0 7px; font-size: 11.5px; font-weight: 500; }
  .zb-fullbtn .zb-beta { padding: 1px 4px; font-size: 8px; }
  /* Ritbordet [BETA] i helskärm: samma kort, hela fönstret, beskrivningen kompakt, Skapa offert längst ner. */
  html.zb-full { overflow: hidden; }
  html.zb-full .zimla-undo { top: 80px; bottom: auto; pointer-events: none; } /* UX varv 1: i helskärm under toppremsan – inte över composern och Visa förslag; */
  html.zb-full .zimla-undo button { pointer-events: auto; } /* texten släpper igenom klicket till planen under, bara Ångra tar det */
  html.zb-full :is(.zimla-desktop-sidebar, .zimla-global-topbar) { visibility: hidden; } /* täcks av helskärmen (och är inert) */
  .zb-card.is-full { position: fixed; z-index: 90; inset: 12px; display: flex; flex-direction: column; border-radius: 18px; box-shadow: 0 0 0 1px rgba(20, 30, 25, 0.1), 0 30px 80px -30px rgba(20, 30, 25, 0.5); }
  .zb-card.is-full > .zb-fold { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } /* mitten fyller: Skapa offert längst ner */
  .zb-card.is-full > .zb-fold > .zb-fold-in { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .zb-card.is-full .zb-mid { --zb-plan-h: 100%; flex: 1 1 auto; min-height: 0; height: auto; }
  .zb-card.is-full .zb-mid { grid-template-rows: minmax(0, 1fr); } /* UX varv 1: raden växte med högerkolumnen och sköt in den under composern */
  .zb-card.is-full .zb-side { overflow-y: auto; scrollbar-width: thin; }
  .zb-card.is-full .zb-side > .zb-block { position: sticky; bottom: 0; z-index: 2; background: var(--zb-paper, #fbfaf6); } /* Kund, Adress och Uppskattning syns alltid; listan rullar ovanför */
  .zb-card.is-full .zb-side:has(> .ze-panel:not(.is-facts)) > .zb-block { position: relative; } /* med ett val: inspektorns knappar först, rutan följer under */
  .zb-card.is-full .zb-sched { flex: 1 0 auto; } /* listan krymper inte under sitt innehåll (foten låg över ritningshuvudet); sidan rullar */
  /* Ritbordet BETA: inredning som föremål. Biblioteket till vänster, föremålen går att ta i (pekskärm: inget scroll-drag). */
  .zb-card.is-full .zb-planhost { left: 82px; touch-action: none; } /* ikonlisten (62 px) och luft */
  .zb-palette { position: absolute; z-index: 4; top: 10px; bottom: 10px; left: 10px; width: 150px; padding: 8px 6px; overflow-y: auto; scrollbar-width: thin; border: 1px solid #e3e5df; border-radius: 12px; background: rgba(251, 250, 246, 0.95); }
  .zb-palette > .zb-k { margin: 0 6px 6px; }
  .zb-pgroup { display: flex; flex-direction: column; margin-bottom: 6px; }
  .zb-pgroup small { padding: 4px 6px 2px; font-size: 10.5px; color: #8a918c; }
  .zb-pitem { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 2px 6px; border: 0; border-radius: 7px; background: none; font: inherit; font-size: 12px; font-weight: 400; color: var(--zb-ink); text-align: left; cursor: grab; touch-action: none; }
  .zb-pitem:hover { background: rgba(31, 107, 79, 0.06); }
  .zb-picon { display: grid; place-items: center; width: 26px; height: 26px; flex: none; }
  .zb-pnote { margin: 8px 6px 0; font-size: 10.5px; color: #8a918c; }
  .zb-fughost { position: fixed; z-index: 9500; left: 0; top: 0; display: flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid #d5dbd6; border-radius: 8px; background: #fff; box-shadow: 0 8px 22px -10px rgba(20, 30, 25, 0.4); font-size: 12px; pointer-events: none; }
  .zfu { cursor: grab; }
  .zfu-hit { fill: transparent; }
  .zfu-out { fill: none; stroke: var(--zb-green); stroke-width: 1.5; pointer-events: none; }
  .zfu.is-bad .zfu-out { stroke: #b4533c; stroke-dasharray: 4 3; }
  .zfu-dim { stroke: #1f6b4f; stroke-width: 0.8; stroke-dasharray: 3 2; pointer-events: none; }
  .zfu-m { font-size: 9.5px; font-weight: 500; fill: #1f6b4f; paint-order: stroke; stroke: #f7f7f1; stroke-width: 3px; pointer-events: none; }
  .zb-futool { position: absolute; z-index: 8; display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 10px; border: 1px solid #e1e3de; border-radius: 10px; background: #fff; box-shadow: 0 12px 28px -14px rgba(20, 30, 25, 0.45); transform: translate(-50%, calc(-100% - 8px)); white-space: nowrap; }
  .zb-futxt { display: flex; flex-direction: column; margin-right: 4px; line-height: 1.2; } .zb-futxt b { font-size: 12px; font-weight: 600; } .zb-futxt small { font-size: 10.5px; color: #6b736e; }
  .zb-futool button { display: grid; place-items: center; min-width: 32px; height: 32px; border: 0; border-radius: 7px; background: none; font: inherit; font-size: 15px; color: var(--zb-ink); cursor: pointer; }
  .zb-futool button:hover { background: rgba(31, 107, 79, 0.08); }
  .zb-futool .material-symbols-outlined { font-size: 18px; } .zb-fuw { display: flex; }
  /* Steg 1: det valda rummets invändiga mått (som .zdim, klickbara) och fältet vid måttet (samma kant som verktyget). */
  .zdq { cursor: text; } .zdq line { stroke: #7d877f; stroke-width: 0.8; } .zdq-hit { fill: transparent; }
  .zdq text { font-size: 10.5px; font-variant-numeric: tabular-nums; fill: #3f4842; paint-order: stroke; stroke: #fff; stroke-width: 4px; }
  .zdq:hover text { fill: #1f6b4f; text-decoration: underline; }
  .zb-dimbox { position: absolute; z-index: 9; display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 10px; border: 1px solid #e1e3de; border-radius: 10px; background: #fff; box-shadow: 0 12px 28px -14px rgba(20, 30, 25, 0.45); transform: translate(-50%, -50%); }
  .zb-dimk, .zb-dimu { color: #6b736e; font-size: 13px; }
  .zb-dimbox input { width: 64px; height: 32px; padding: 0 7px; border: 1px solid #1f6b4f; border-radius: 7px; font: inherit; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--zb-ink); box-shadow: 0 0 0 3px rgba(31, 107, 79, 0.12); outline: none; }
  .zb-dimbox button { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 7px; background: #1f6b4f; color: #fff; cursor: pointer; }
  .zb-dimbox button .material-symbols-outlined { font-size: 18px; }
  @media (pointer: coarse) { .zb-dimbox input, .zb-dimbox button { height: 44px; } .zb-dimbox button { width: 44px; } }
  .zb-card.is-full :is(.zb-text textarea, .zb-hl) { max-height: calc(3 * 1.55em + 8px); } /* tre hela rader */
  .zb-plan-acts .material-symbols-outlined { font-size: 15px; }
  .zb-plan-acts button:disabled { opacity: 0.4; cursor: default; }
  /* Planritningen (zimla-board-plan.js, prototypen): arkitektpapper med rutnät, väggar, dörrar, fönster och möbler.
     Perspektivet används av 3D-läget där väggarna reser sig. */
  .zb-plan { position: relative; display: grid; place-items: center; min-height: 0; overflow: hidden; border-right: 1px solid #e6e5dd; background-color: #f7f7f1; background-image: linear-gradient(rgba(47, 61, 54, 0.075) 1px, transparent 1px), linear-gradient(90deg, rgba(47, 61, 54, 0.075) 1px, transparent 1px), linear-gradient(rgba(47, 61, 54, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(47, 61, 54, 0.035) 1px, transparent 1px); background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px; background-position: -1px -1px; }
  .zb-plan-k { position: absolute; z-index: 3; top: 12px; left: 16px; font-size: 9.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #6b736e; }
  .zb-plan-tools { position: absolute; z-index: 8; top: 9px; right: 12px; display: flex; align-items: center; gap: 10px; }
  .zb-plan-tip { padding: 2px 7px; border-radius: 7px; background: rgba(251, 250, 246, 0.85); font-size: 11px; color: #6b736e; }
  .zb-plan-tip.is-drag { position: absolute; z-index: 3; right: 14px; bottom: 11px; padding: 3px 8px; border: 1px solid #e3e5df; border-radius: 8px; background: rgba(251, 250, 246, 0.9); color: #4e5751; }
  .zb-view { display: inline-flex; padding: 2px; border: 1px solid #dfe2dd; border-radius: 9px; background: rgba(255, 255, 255, 0.92); }
  .zb-view button { height: 24px; padding: 0 9px; border: 0; border-radius: 7px; background: none; font: inherit; font-size: 11.5px; font-weight: 600; color: #4e5751; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; }
  .zb-view button[aria-pressed="true"] { background: #1d2420; color: #fff; }
  /* Husets plan (flera plan): flikarna där planets etikett stod, samma reglage som 2D/3D. Pricken = jobbets rum
     finns på planet; ytan visas bara på planet som syns (verktygen till höger ska få plats). */
  .zb-floors { position: absolute; z-index: 8; top: 9px; left: 12px; max-width: calc(100% - 260px); overflow-x: auto; scrollbar-width: none; }
  .zb-floors button { display: inline-flex; align-items: center; gap: 5px; flex: none; white-space: nowrap; }
  .zb-floors small { font-size: 11px; font-weight: 500; opacity: 0.75; }
  .zb-fdot { width: 5px; height: 5px; border-radius: 50%; background: var(--zb-green); }
  .zb-floors button[aria-pressed="true"] .zb-fdot { background: #8fd1ae; }
  .zb-rows li.zb-fgroup:not(:first-child) { margin-top: 8px; }
  .zb-fhead { display: flex; align-items: baseline; gap: 8px; width: 100%; padding: 4px 8px 2px; border: 0; border-radius: 8px; background: none; font: inherit; text-align: left; cursor: pointer; }
  .zb-fhead small { margin-left: auto; font-size: 11px; color: #8a918c; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
  /* Lokal → lägenheter: summan i listans fot, två dämpade rader (bryts på smal skärm); avvikelsen bara bärnstensfärgad text. */
  .zb-usum { display: flex; flex-direction: column; gap: 1px; margin: 6px 0 0; padding: 7px 8px 2px; border-top: 1px solid #e6e8e3; font-size: 11.5px; color: #6f7671; font-variant-numeric: tabular-nums; }
  .zb-usum span:first-child { color: #3f4742; }
  .zb-usum em { font-style: normal; color: #a8660f; }
  .zb-fhead .zb-k { white-space: nowrap; } /* en rad per plan/lägenhet */
  .zb-fhead { min-height: 30px; align-items: center; } @media (pointer: coarse) { .zb-fhead { min-height: 40px; } }
  .zb-fchev { flex: none; align-self: center; width: 6px; height: 6px; margin-right: 2px; border-right: 1.5px solid #8a918c; border-bottom: 1.5px solid #8a918c; transform: rotate(45deg); transition: transform 0.18s ease; }
  .zb-fhead[aria-expanded="false"] .zb-fchev { transform: rotate(-45deg); }
  .zb-fhead[aria-pressed="true"] .zb-k { color: var(--zb-green); }
  .zb-fhead:hover { background: rgba(31, 107, 79, 0.06); }
  .zb-rows li.zb-fchips .zb-ctx { padding: 2px 8px 2px; }
  .zb-fheadrow { display: flex; align-items: baseline; gap: 6px; } .zb-fheadrow .zb-fhead { flex: 1; min-width: 0; }
  .zb-fswap { flex: none; height: 22px; padding: 0 8px; border: 0; border-radius: 7px; background: none; font: inherit; font-size: 11px; color: #6b736e; cursor: pointer; }
  .zb-fswap:hover, .zb-fswap[aria-expanded="true"] { background: rgba(31, 107, 79, 0.08); color: var(--zb-green); }
  .zb-floorpick { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 8px 6px; }
  @media (pointer: coarse) { .zb-fswap, .zb-floorpick button { min-height: 36px; } }
  @media (pointer: coarse) { .zb-floors button, .zb-fhead { min-height: 36px; } }
  .zb-scale { position: absolute; z-index: 3; left: 16px; bottom: 12px; display: flex; align-items: center; gap: 7px; font-size: 9.5px; letter-spacing: 0.06em; color: #6b736e; }
  .zb-scale i { display: flex; height: 5px; border: 1px solid #6b736e; }
  .zb-scale b { width: var(--seg); } .zb-scale b:nth-child(odd) { background: #6b736e; }
  /* 3D bara i 3D (och medan den vrids tillbaka): perspektiv och preserve-3d kostar och ritar fel i vissa lägen. */
  .zb-planhost { position: absolute; inset: 0; --rx: 50deg; --rz: -36deg; } /* fyller ytan; planlösningen väljs ur en fast referensruta (layoutBox) */
  .zb-planhost.is3d { touch-action: none; } /* dra vrider, sidan rullar inte */
  .zb-planhost:is(.is3d, .to2d) { perspective: 1700px; perspective-origin: 50% 42%; }
  .zstage { position: absolute; inset: 0; transition: transform 0.85s cubic-bezier(.3,.8,.2,1); }
  .zb-planhost:is(.is3d, .to2d) :is(.zstage, .z3) { transform-style: preserve-3d; }
  .zb-planhost:is(.is3d, .to2d) .zsvgw { transform: translateZ(0); } /* Firefox: utan eget 3D-lager ritas golvet (planen) inte i 3D */
  .zb-planhost.is3d .zstage { transform: rotateX(var(--rx)) rotateZ(var(--rz)) scale(.92); }
  .zb-planhost.is3d { cursor: grab; } .zb-planhost.zorbit { cursor: grabbing; }
  .zb-planhost.zorbit .zstage { transition: none; }
  .zsvgw { position: absolute; left: 0; top: 0; }
  .zsvg { display: block; overflow: visible; font-family: Inter, system-ui, sans-serif; }
  .z3 { position: absolute; inset: 0; pointer-events: none; }
  .z3w, .z3c { position: absolute; transform-origin: 0 0; transform: var(--t0); opacity: 0; backface-visibility: visible; transition: transform 0.75s cubic-bezier(.2,.9,.25,1), opacity 0.3s ease; }
  .is3d .z3w, .is3d .z3c { transform: var(--t1); opacity: 1; }
  .z3w.int { background: linear-gradient(180deg, #d9d7cd, #f4f3ee); } .z3w.ext { background: linear-gradient(180deg, #cfccc1, #efeee8); }
  .z3w.wy.int { background: linear-gradient(180deg, #cbc9bf, #e6e4dc); } .z3w.wy.ext { background: linear-gradient(180deg, #c2bfb4, #e2e0d8); }
  .z3w.rivs { border: 1.5px dashed rgba(168, 97, 63, 0.85); border-top-width: 2.5px; background: rgba(168, 97, 63, 0.08); box-sizing: border-box; } /* väggen som rivs */
  .z3w.glass { border-top: 1px solid rgba(110, 150, 170, 0.6); background: linear-gradient(180deg, rgba(170, 205, 222, 0.55), rgba(214, 234, 242, 0.35)); }
  .z3c { background: #2f3d36; }
  /* Inredningen i 3D (walls3d): lätta block i väggarnas toner med inredningens linjefärg på kanterna. */
  .z3f, .z3t { position: absolute; transform-origin: 0 0; transform: var(--t0); opacity: 0; backface-visibility: visible; transition: transform 0.4s cubic-bezier(.215,.61,.355,1), opacity 0.2s ease; box-sizing: border-box; }
  .is3d .z3f, .is3d .z3t { transform: var(--t1); opacity: 1; }
  .z3f { background: #e6e4dc; border: 1px solid #7d8781; } .z3f.is-d { background: #dcd9cf; }
  .z3t { background: #fffdf8; border: 1px solid #7d8781; } .z3t.is-d { background: #ece9e0; } .z3t.is-round { border-radius: 50%; }
  .z3t.is-cut { background: #2f3d36; border-color: #2f3d36; } /* kapad vid snittet, som väggarnas krön */
  .z3sym { display: block; overflow: hidden; pointer-events: none; } .z3t.is-none .z3sym { opacity: 0.6; } /* opacitet på svg-bladet, inte på 3D-gruppen */
  .z3t.is-hole { background: #b9bcb5; border-color: #8d948f; transition: none; } /* trapphålet: luft, inte snitt */
  /* Ingår ej: blekare täta toner (opacitet plattar ut 3D). */
  .z3f.is-none { background: #efede6; border-color: #b9bfb9; } .z3t.is-none { background: #faf9f5; border-color: #b9bfb9; }
  /* Tillbaka till 2D: blocken sjunker först, väggarna strax efter. */
  .zb-planhost:not(.is3d) :is(.z3f, .z3t) { transition-delay: 0ms !important; }
  .zb-planhost:not(.is3d) :is(.z3w, .z3c) { transition-delay: 120ms !important; }
  .zb-planhost.z3-now :is(.z3w, .z3c, .z3f, .z3t) { transition: none !important; } /* ombyggd i 3D: står direkt */
  .is3d :is(.zdim, .zdg, .zent) { opacity: 0; pointer-events: none; }
  .zdim { transition: opacity 0.3s ease; }
  .zr { cursor: pointer; } .zr:hover .zrf { filter: brightness(.975); } .is3d .zr { cursor: inherit; } .zlb { pointer-events: none; }
  .zw { stroke: #2b3a33; } .zw.zwp { stroke: #a3aba6; }
  .zwi { stroke: #e4e6e0; } .zwt { stroke: #6f7a73; } .zwt.zwp { stroke: #b9c0bb; } .zwj { stroke: #2b3a33; stroke-width: 0.9; } /* innervägg: ljus fyllning mellan konturerna; tunn: bara fylld */
  .zink { fill: none; stroke: #2b3a33; stroke-linecap: square; }
  .zwinf { fill: #fbfdfc; } .zwin { stroke: #56635b; stroke-width: 0.9; } .zwing { stroke: #8fb2c4; stroke-width: 1.2; }
  .zdl { stroke: #56635b; stroke-width: 1.1; } .zdl.zde { stroke: #2b3a33; stroke-width: 1.8; }
  .zda { fill: none; stroke: #98a29c; stroke-width: 0.8; stroke-dasharray: 2.5 2; }
  .zent { font-size: 8.5px; font-weight: 600; letter-spacing: 0.14em; fill: #6b736e; }
  /* Husets trappa: kontur som dörrbladen, steg som inredningens tunna linjer, gånglinje med prick och öppen pil. */
  .zst { pointer-events: none; } .zstr { fill: #fffdf8; stroke: #56635b; stroke-width: 1.1; } .zst.is-hole .zstr { fill: #f3f1ea; }
  .zstl { stroke: #9aa39d; stroke-width: 0.7; } .zstb { stroke: #56635b; stroke-width: 0.9; }
  .zstw { fill: none; stroke: #56635b; stroke-width: 0.8; stroke-linejoin: round; } .zstd { fill: #56635b; }
  .zstrl { stroke: #2b3a33; stroke-width: 1.6; stroke-linecap: square; }
  .zstt { paint-order: stroke; stroke: #f7f7f1; stroke-width: 3px; }
  .zriv { stroke: #a8613f; stroke-dasharray: 5 4; stroke-linecap: butt; pointer-events: none; } /* väggen som rivs */
  .zrivt { fill: #a8613f; paint-order: stroke; stroke: #f7f7f1; stroke-width: 3px; }
  .zfx { fill: #fffdf8; stroke: #7d8781; stroke-width: 0.9; } .zfxd { fill: #ece9e0; stroke: #7d8781; stroke-width: 0.9; }
  .zfxh { fill: none; stroke: #7d8781; stroke-width: 0.9; stroke-dasharray: 3 2; } .zel { fill: #fff; stroke: #2f3d36; stroke-width: 1; } /* väggmonterat, el */
  .zfxi { fill: #f3f1ea; stroke: #9aa39d; stroke-width: 0.7; } .zfl { stroke: #9aa39d; stroke-width: 0.7; } .zdot { fill: #56635b; }
  .zrug { fill: none; stroke: #bcc3bd; stroke-width: 0.8; stroke-dasharray: 3 2; }
  .zpen :is(.zfx, .zfxd) { stroke: #aab2ac; } .znone .zfxg { opacity: 0.5 !important; }
  .zlb text { paint-order: stroke; stroke-width: 3.2px; stroke-linejoin: round; pointer-events: none; }
  .zlt { font-size: 9.5px; font-weight: 600; letter-spacing: 0.12em; fill: #34443b; }
  .zla { font-family: Newsreader, "Source Serif 4", Georgia, serif; font-size: 15px; fill: #1d2420; } .zla.zlsm { font-size: 12px; }
  .zlt.zltsm { font-size: 8px; letter-spacing: 0.08em; } .zls { font-size: 10px; fill: #4e5751; }
  .zlg { fill: #98a09a !important; } .zsel { fill: none; stroke: #1f6b4f; stroke-width: 2; rx: 2; }
  .zdim line { stroke: #7d877f; stroke-width: 0.8; } .zdim text { font-size: 10.5px; fill: #4e5751; paint-order: stroke; stroke: #f7f7f1; stroke-width: 4px; }
  .zdg { cursor: col-resize; } .zdg.zdgh { cursor: row-resize; }
  /* Ett rum som flyttas: det streckade är rummet, det gröna platsen det byter med. */
  .zb-planhost.zmoving, .zb-planhost.zmoving * { cursor: grabbing !important; }
  .zmvf { fill: none; stroke: #1f6b4f; stroke-width: 1.5; stroke-dasharray: 5 4; pointer-events: none; }
  .zmvt { fill: rgba(31, 107, 79, 0.14); stroke: #1f6b4f; stroke-width: 2; pointer-events: none; }
  .zdh { stroke: transparent; stroke-width: 14; } .zdg:hover .zdh, .zdga .zdh { stroke: rgba(31, 107, 79, 0.14); }
  .zgrip { fill: #fff; stroke: #1f6b4f; stroke-width: 1.2; opacity: 0; transition: opacity 0.15s ease; } .zdg:hover .zgrip, .zdga .zgrip { opacity: 1; }
  @media (prefers-reduced-motion: reduce) { .zstage, .z3w, .z3c, .z3f, .z3t, .zb-mid { transition: none; } }
  .zb-plan-empty { display: grid; justify-items: center; gap: 6px; padding: 24px; text-align: center; }
  .zb-plan-empty b { font-family: Newsreader, Georgia, serif; font-size: 19px; font-weight: 400; }
  .zb-plan-empty small { font-size: 13px; color: #6b736e; }
  .zb-ghost { display: grid; grid-template-columns: 1.6fr 1fr; grid-template-rows: 1fr 1fr; width: 260px; height: 130px; margin-bottom: 12px; border: 1px dashed #b9c0ba; }
  .zb-ghost i { border: 1px dashed #c9cec9; }
  .zb-ghost i:first-child { grid-row: span 2; }

  /* Rumsförteckning + ritningshuvud: samma höjd som ritningen. Listan rullar själv; arbeten och "+ Rum" ligger
     fast under den, så att menyn aldrig hamnar inne i det som rullar. */
  .zb-side { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
  .zb-sched { display: flex; flex: 1; flex-direction: column; min-height: 0; padding: 10px 12px 6px; }
  .zb-sched header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
  .zb-sched header small { font-size: 11px; color: #8a918c; }
  .zb-scroll { position: relative; flex: 1 0 auto; margin: 0 -6px; padding: 0 6px 4px; } /* hela listan syns; rutnätet växer i stället för att rulla */
  .zb-rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; margin: 0; padding: 0; list-style: none; } /* raden växer inte förbi panelen */
  .zb-rows li { border-radius: 10px; transition: background-color 0.2s ease; }
  .zb-rows li.is-open { background: #eef5f0; }
  .zb-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: baseline; gap: 6px; width: 100%; padding: 5px 8px; border: 0; border-radius: 10px; background: none; font: inherit; text-align: left; color: inherit; cursor: pointer; }
  .zb-row:hover { background: rgba(31, 107, 79, 0.06); }
  .zb-no { font-size: 10.5px; color: #8a918c; font-variant-numeric: tabular-nums; }
  .zb-name { min-width: 0; font-size: 13px; font-weight: 500; overflow-wrap: anywhere; } /* bryts i stället för att klippas */
  .zb-name small { margin-left: 5px; font-size: 11.5px; font-weight: 400; color: #6b736e; }
  .zb-price { font-size: 11.5px; font-variant-numeric: tabular-nums; white-space: nowrap; color: #3d4540; }
  .zb-price.is-loading { width: 48px; height: 9px; border-radius: 5px; background: linear-gradient(90deg, #e7e9e4, #f3f4f1, #e7e9e4); background-size: 200% 100%; animation: zb-skel 1.2s linear infinite; }
  @keyframes zb-skel { to { background-position: -200% 0; } }
  .zb-price.is-failed { font-size: 11px; color: #a8651a; }
  /* Designerna utanför rummen (tak, uppfart …): samma rad som rummen, priset räknas i Studio, inget nummer. */
  .zb-price.is-studio { font-size: 11px; color: #8a918c; }
  .zb-drows .zb-no { visibility: hidden; }
  .zb-dnote { font-size: 11px; color: #8a918c; align-self: center; }
  /* Designscenerna (zimla-board-design.js): tomtgränsen streckprickad, pergola/dränering streckade, huset blekt. */
  .zd-grans { stroke-dasharray: 9 3 2 3; }
  .zd-dash { stroke-dasharray: 5 4; }
  .zd-hus { stroke: #b4bcb6; }
  /* Radens redigering öppnas på plats (drill: bara opacity/transform, raden tar sin plats direkt). */
  .zb-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 2px 8px 10px 36px; }
  @media (prefers-reduced-motion: no-preference) { .zb-edit { animation: zb-expand 0.3s cubic-bezier(.2,.8,.2,1); } }
  @keyframes zb-expand { from { opacity: 0; transform: translateY(-4px); } }
  .zb-levels { display: flex; flex-wrap: wrap; gap: 4px; width: 100%; }
  .zb-ident { display: flex; gap: 6px; width: 100%; } /* namn och rumstyp på en rad */
  .zb-ident :is(input, select) { height: 28px; min-width: 0; border: 1px solid #dfe2dc; border-radius: 8px; background: #fff; font: inherit; font-size: 13px; font-weight: 400; color: var(--zb-ink); padding: 0 8px; }
  .zb-ident input { flex: 1; } .zb-ident select { flex: 0 0 auto; max-width: 46%; }
  .zb-ident :is(input, select):focus-visible { outline: 2px solid #1f6b4f; outline-offset: 1px; }
  .zb-levels button, .zb-step { height: 28px; border: 1px solid #dfe2dd; border-radius: 8px; background: #fff; font: inherit; font-size: 12px; font-weight: 500; color: var(--zb-ink); cursor: pointer; }
  .zb-levels button { padding: 0 9px; }
  .zb-levels button[aria-pressed="true"] { border-color: var(--zb-green); background: var(--zb-green); color: #fff; }
  .zb-step { display: inline-flex; align-items: center; padding: 0; cursor: default; }
  .zb-step button { width: 28px; height: 26px; border: 0; background: none; font: inherit; font-size: 15px; cursor: pointer; }
  .zb-step input { width: 36px; padding: 1px 0; border: 0; border-bottom: 1px dashed #c9cfc9; background: none; font: inherit; font-size: 12.5px; text-align: right; outline: 0; }
  .zb-step em { margin-left: 3px; font-size: 12px; font-style: normal; color: #6b736e; }
  .zb-del { margin-left: auto; padding: 4px 6px; border: 0; border-radius: 6px; background: none; font: inherit; font-size: 12px; color: #b3261e; cursor: pointer; }
  .zb-del:hover { background: #fdecec; }
  .zb-ctx { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 0; padding: 6px 2px 2px; font-size: 11.5px; color: #8a918c; }
  .zb-ctx button { height: 22px; padding: 0 8px; border: 1px dashed #c9cfc9; border-radius: 999px; background: none; font: inherit; font-size: 11.5px; color: #4e5751; cursor: pointer; }
  .zb-ctx button:hover { border-color: var(--zb-green); color: var(--zb-green); }
  .zb-addrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 6px; }
  /* "Skapa rummen i projektet" (med bifogade filer): samma lugna strömbrytare som lagerpanelen, raden är klickytan. */
  .zb-roomsw { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #eef0ec; font-size: 12px; color: #4e5751; cursor: pointer; min-width: 0; }
  .zb-roomsw input { margin: 1px 0 0; flex: none; width: 16px; height: 16px; border-radius: 4px; }
  .zb-roomsw > span { display: grid; gap: 1px; min-width: 0; }
  .zb-roomsw small { font-size: 11px; color: #8a918c; }
  @media (pointer: coarse) { .zb-roomsw { min-height: 44px; align-items: center; } }
  /* Rummen är underlag: summan står kvar dämpad – den lovar inget belopp till projektet. */
  .zb-est.is-under b, .zb-est.is-under .zb-est-s > span:first-child { color: #8a918c; }
  .zb-addwrap { position: relative; }
  .zb-add { height: 24px; padding: 0 9px; border: 1px dashed #b9c3bb; border-radius: 999px; background: none; font: inherit; font-size: 11.5px; font-weight: 500; color: var(--zb-green); cursor: pointer; }

  /* Menyerna (prototypen): vita, öppnas uppåt ovanför sin knapp och ligger över allt i kortet. Långa listor rullar
     i menyn, aldrig i kortet. Stängs med klick utanför eller Esc. */
  .zb-menu { position: absolute; z-index: 40; bottom: calc(100% + 6px); left: 0; display: flex; flex-direction: column; min-width: 220px; max-height: min(360px, 60vh); padding: 6px; overflow-y: auto; border: 1px solid #e1e3de; border-radius: 12px; background: #fff; box-shadow: 0 18px 40px -14px rgba(20, 30, 25, 0.4); overscroll-behavior: contain; }
  @media (prefers-reduced-motion: no-preference) { .zb-menu { animation: zb-menu 0.18s ease-out; } }
  @keyframes zb-menu { from { opacity: 0; transform: translateY(6px); } }
  .zb-menu.is-right { left: auto; right: 0; }
  .zb-menu > small { padding: 4px 10px 2px; font-size: 11px; color: #8a918c; }
  .zb-menu button { flex: none; display: block; padding: 8px 10px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 13px; text-align: left; color: var(--zb-ink); cursor: pointer; }
  .zb-menu button:hover, .zb-menu button:focus-visible { background: #f1f5f2; outline: 0; }
  .zb-menu button b { display: block; font-weight: 500; }
  .zb-menu button small { display: block; font-size: 11.5px; color: #8a918c; }
  .zb-menu button[aria-checked="true"] b { color: var(--zb-green); }
  /* Rumstyperna i två spalter: menyn ryms ovanför knappen. */
  /* Rumstyperna i två spalter, förankrad i knappens högra kant: menyn lägger sig över ritningen, aldrig utanför skärmen. */
  .zb-menu-rooms { display: grid; grid-template-columns: 1fr 1fr; min-width: 260px; left: auto; right: 0; }
  .zb-menu-rooms > small { grid-column: 1 / -1; }

  /* Ritningshuvudet (namnrutan): Zimla Studio · A-01 · Utkast · datum, kund | adress och uppskattningen med ROT. */
  .zb-block { position: relative; border-top: 1.5px solid #34443b; font-size: 12px; }
  .zb-block header { display: flex; align-items: center; gap: 8px; padding: 5px 12px; border-bottom: 1px solid #dcdfd9; }
  .zb-block header b, .zb-block header small { font-size: 9.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
  .zb-block header b { flex: 1; color: var(--zb-ink); }
  .zb-block header small { color: #6b736e; }
  .zb-mark { display: grid; grid-template-columns: repeat(2, 5px); gap: 2px; }
  .zb-mark i { width: 5px; height: 5px; border-radius: 999px; background: #1d2420; }
  .zb-mark i:nth-child(2), .zb-mark i:nth-child(4) { background: #2fbf71; }
  .zb-two { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid #dcdfd9; }
  .zb-two > :first-child { border-right: 1px solid #dcdfd9; }
  .zb-cell-f { display: grid; gap: 1px; padding: 5px 12px 6px; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 500; text-align: left; color: var(--zb-ink); }
  .zb-cell-f .zb-k { font-size: 9.5px; color: #6b736e; }
  .zb-est { padding: 6px 12px 8px; border-bottom-right-radius: 0; transition: background-color 0.3s ease; }
  .zb-est.is-on { background: #eef5f0; }
  .zb-est-h { display: flex; align-items: center; justify-content: space-between; }
  .zb-est-h .zb-k { font-size: 9.5px; color: #6b736e; }
  .zb-est-h small { font-size: 10.5px; color: #8a918c; }
  .zb-est-v { display: flex; align-items: center; gap: 8px; min-height: 28px; }
  .zb-est b { font-family: "Source Serif 4", Newsreader, Georgia, serif; font-size: 23px; font-weight: 400; line-height: 1.15; white-space: nowrap; color: #14402f; font-variant-numeric: tabular-nums; }
  .zb-delta { padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; animation: zb-delta 2.6s ease forwards; }
  .zb-delta.is-up { background: #fbf0d9; color: #8a5a00; } .zb-delta.is-down { background: #e3f1e8; color: var(--zb-green); }
  @keyframes zb-delta { 0% { opacity: 0; transform: translateY(5px); } 12%, 78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-3px); } }
  .zb-est-s { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 1px; font-size: 11.5px; color: #4e5751; }
  .zb-est-s > i { font-style: normal; color: #b9c0ba; }
  .zb-rotwrap { position: relative; }
  .zb-rot { padding: 6px 2px; margin: -6px -2px; border: 0; background: none; font: inherit; font-size: 11.5px; font-weight: 500; color: var(--zb-ink); cursor: pointer; }
  .zb-rot.is-unset { color: #a8651a; }
  .zb-rot:hover { text-decoration: underline; }

  /* Underbrödet: verktygsraden (+, orben, ledtråden, Skapa offert) och På bordet. Som Claudes composer (ägaren 2026-10-21):
     utan ritning sitter knapparna i samma yta som texten; under ritningen en egen rad. */
  .zb-bun { border-radius: 0 0 21px 21px; }
  .zb-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px 10px; border-top: 1px solid var(--zb-line); background: #f7f6f1; }
  html.zimla-board-on.zb-shut .zb-bar, html.zimla-board-prata .zb-bar { border-top-color: transparent; background: none; }
  html.zimla-board-prata .zb-bar { border-radius: 0 0 21px 21px; }
  /* Rösten (ägaren 2026-10-21): Zimla-mikrofonen till höger, bredvid Skapa offert, i samma storlek som +. Håller man in blir
     den Zimla med hörlurar – figuren och lurarna skalas med zoom (ögonen är i rem), mikrofonen tonar ut. */
  .zb-orb { position: relative; flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--zb-ink); cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: background-color 0.15s ease; }
  .zb-orb > * { grid-area: 1 / 1; }
  .zb-orb:hover { background: rgba(29, 36, 32, 0.06); }
  .zb-orb:focus-visible { outline: 2px solid var(--zb-green); outline-offset: 2px; }
  .zb-mic { width: 26px; height: 26px; transition: opacity 0.14s ease, transform 0.22s cubic-bezier(.3, 1.5, .5, 1); }
  .zb-orb .zimla-dock-orb { zoom: 0.72; opacity: 0; transform: scale(0.6); transition: opacity 0.14s ease, transform 0.22s cubic-bezier(.3, 1.5, .5, 1); }
  .zb-orb:is(.is-held, .is-connecting, .is-listening, .is-finalizing) { background: none; }
  .zb-orb:is(.is-held, .is-connecting, .is-listening, .is-finalizing) .zb-mic { opacity: 0; transform: scale(0.6); }
  .zb-orb:is(.is-held, .is-connecting, .is-listening, .is-finalizing) .zimla-dock-orb { opacity: 1; transform: none; }
  /* Zimla i composern: ingen vit ring, kanten en aning mörkare. Blicken rör sig lite mer än på de mindre orberna. */
  .zb-orb .zimla-dock-orb { width: 56px; height: 56px; outline: 0; background: radial-gradient(circle at 50% 40%, #0a8462, #087858 60%, #06664b); box-shadow: 0 8px 20px -6px rgba(31, 107, 79, 0.55); }
  .zb-orb .zimla-dock-orb__gaze { transform: translate3d(calc(var(--zimla-gaze-x, 0px) * 1.5), calc(var(--zimla-gaze-y, 0px) * 1.5), 0); }
  .zb-orb .zimla-dock-orb__eye { transition: transform 0.18s cubic-bezier(.3, 1.6, .5, 1); }
  /* Hover: stannar upp och blir förvånad (bara med mus, annars fastnar ansiktet efter ett tryck). Att hålla in vinner. */
  @media (hover: hover) and (pointer: fine) {
    .zb-orb:not(.is-held):hover .zimla-dock-orb__gaze, .zb-orb:not(.is-held):hover .zimla-dock-orb__eyes { transform: none; }
    .zb-orb:not(.is-held):hover .zimla-dock-orb__eye { transform: translateY(-1px) scale(1.12, 1.28); }
  }
  /* Håll in: hörlurarna åker på (lurarna ersätter den tidigare uppskalningen, pulsen nedan är kvar). */
  .zb-phones { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; color: var(--zb-ink); opacity: 0; transform: translateY(-6px); transition: opacity 0.14s, transform 0.14s; pointer-events: none; }
  .zb-orb:is(.is-held, .is-listening) .zb-phones { opacity: 1; transform: none; transition: opacity 0.12s, transform 0.22s cubic-bezier(.3, 1.5, .5, 1); }
  .zb-orb.is-finalizing .zimla-dock-orb { opacity: 0.75; }
  .zb-hint { min-width: 0; margin: 0; font-size: 14.5px; color: #3d4540; }
  .zb-hint.is-ask::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 999px; background: #d08a00; vertical-align: 1px; }
  .zb-spacer { flex: 1; }
  /* Bifoga: ett + längst till vänster (Claudes composer); Skapa offert är ensam primär. Inputen döljs visuellt
     (inte display:none) så att den går att nå med tangentbordet; ringen sitter på etiketten. */
  .zb-attach { position: relative; display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; margin-left: -4px; border: 0; border-radius: 999px; background: none; color: #3d4540; cursor: pointer; transition: background-color 0.15s, color 0.15s; }
  .zb-attach .material-symbols-outlined { font-size: 24px; font-weight: 300; }
  .zb-attach:hover { background: rgba(29, 36, 32, 0.06); color: var(--zb-ink); }
  .zb-attach:focus-within { outline: 2px solid #1f6b4f; outline-offset: 2px; }
  .zb-attach input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
  /* Fil över kortet: en grön ring utanpå (box-shadow, inget layoutskift) och ljus ton bakom texten. */
  .zb-card { transition: box-shadow 0.15s ease; }
  .zb-card.is-drop { box-shadow: 0 0 0 2px var(--zb-green), 0 0 0 6px rgba(31, 107, 79, 0.12), 0 24px 60px -30px rgba(30, 45, 35, 0.35); }
  .zb-card.is-drop .zb-desc { background: var(--zb-soft); }
  @media (prefers-reduced-motion: reduce) { .zb-card { transition: none; } }
  @media (pointer: coarse) { .zb-attach, .zb-orb { width: 44px; height: 44px; } .zb-file button { width: 36px; height: 36px; } }
  /* Skapa offert (ägaren 2026-10-21: "mer lik deepseek, chatgpt, claude, grok"): en rund knapp med ordet och pilen uppåt i en
     ljus ring; grå med dämpad text tills det finns något att skapa. */
  .zb-build { flex: none; display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 5px 0 16px; border: 0; border-radius: 999px; background: var(--zb-dark); font: inherit; font-size: 14.5px; font-weight: 500; color: #fff; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; }
  .zb-build:not(:disabled):hover { background: #12382b; }
  .zb-build:focus-visible { outline: 2px solid var(--zb-green); outline-offset: 2px; }
  .zb-build:disabled { background: #e6e8e3; color: #8a918c; cursor: default; }
  .zb-build.is-built:disabled, .zb-build.is-building:disabled { background: var(--zb-dark); color: #fff; cursor: progress; }
  .zb-build:is(.is-built, .is-building):disabled .zb-barrow { background: rgba(255, 255, 255, 0.16); }
  .zb-build:not(:disabled):active { transform: scale(0.98); }
  /* Byggets förlopp i knappen: en fyllnad (scaleX, klippt mot radien), högst #2e7d5e så att den vita texten håller kontrasten. */
  .zb-build { position: relative; overflow: hidden; isolation: isolate; }
  .zb-bfill { position: absolute; inset: 0; z-index: -1; background: #2e7d5e; transform: scaleX(0); transform-origin: left center; transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; }
  .zb-barrow { position: relative; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); }
  .zb-barrow .material-symbols-outlined { font-size: 19px; }
  .zb-build:disabled .zb-barrow { background: rgba(29, 36, 32, 0.07); }
  .zb-barrow.is-ring { color: transparent; }
  .zb-barrow.is-ring::before { content: ''; position: absolute; inset: 0; margin: auto; width: 12px; height: 12px; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; border-radius: 50%; animation: zb-bring 0.9s linear infinite; }
  @keyframes zb-bring { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .zb-bfill { transition: none; } .zb-barrow.is-ring::before { animation: none; } }
  .zb-err { margin: 0; padding: 8px 18px; background: #fbeceb; font-size: 13.5px; color: #9a3a2e; }

  /* På bordet. */
  /* På bordet (ägaren 2026-10-26, väg 1): en tyst rad under kortet, inget fält i det. Lätt glas för läsbarhet mot
     bakgrunden; posterna krymper med … så raden aldrig bryts. Dold i Prata men behåller sin plats, så att kortet står still
     när man byter läge. Ingen fetstil. */
  .zb-desk { display: none; }
  html.zimla-board-on .zb-desk {
    display: flex; align-items: center; gap: 4px; min-width: 0; margin-top: 12px; padding: 4px 6px 4px 4px;
    border-radius: 14px; background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(8px); font-size: 13px; color: #4e5751;
    transition: opacity 0.2s ease;
  }
  html.zimla-board-prata .zb-desk { visibility: hidden; opacity: 0; }
  .zb-desk-item { display: inline-flex; align-items: center; gap: 8px; min-width: 0; min-height: 32px; padding: 0 10px; border: 0; border-radius: 10px; background: none; font: inherit; font-size: 13px; color: var(--zb-ink); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color 0.15s ease; }
  .zb-desk-item:hover { background: rgba(255, 255, 255, 0.7); }
  .zb-desk-item:focus-visible, .zb-desk-link:focus-visible, .zb-desk .zb-all:focus-visible { outline: 2px solid var(--zb-green); outline-offset: 1px; }
  .zb-desk-item > i { flex: none; width: 7px; height: 7px; border-radius: 999px; background: #8a918c; }
  .zb-desk-item > i.is-green { background: var(--zb-green); } .zb-desk-item > i.is-amber { background: #d08a1d; }
  .zb-desk-k { flex: none; color: #6b736e; font-variant-numeric: tabular-nums; }
  .zb-desk-t { min-width: 0; max-width: 34ch; overflow: hidden; text-overflow: ellipsis; }
  .zb-desk-t small { font-size: 13px; color: #6b736e; }
  .zb-desk-go { flex: none; font-weight: 500; color: #6b736e; transition: color 0.15s ease; }
  .zb-desk-item:hover .zb-desk-go, .zb-desk-item:focus-visible .zb-desk-go { color: var(--zb-green); }
  .zb-desk-link { display: inline-flex; align-items: center; gap: 2px; min-height: 32px; padding: 0 8px; border: 0; border-radius: 10px; background: none; font: inherit; font-size: 13px; color: #4e5751; white-space: nowrap; cursor: pointer; }
  .zb-desk-link:hover, .zb-desk-link[aria-expanded="true"] { color: var(--zb-ink); }
  .zb-desk-link .material-symbols-outlined { font-size: 18px; transition: transform 0.15s ease; }
  .zb-desk-link[aria-expanded="true"] .material-symbols-outlined { transform: rotate(180deg); }
  .zb-copy { position: relative; flex: none; }
  .zb-desk .zb-menu { top: calc(100% + 6px); bottom: auto; min-width: 300px; } /* raden står under kortet: menyn öppnas nedåt */
  .zb-all { display: inline-flex; flex: none; align-items: center; min-height: 32px; padding: 0 8px; font-size: 13px; font-weight: 500; color: var(--zb-green); text-decoration: none; white-space: nowrap; }
  @media (pointer: coarse) { .zb-desk-item, .zb-desk-link, .zb-desk .zb-all { min-height: 44px; } }  /* pekskärm ≥1024 px (iPad på tvären) */

  /* Följdfrågan på ritningen: en pratbubbla med svans mot rummet och en pulserande punkt. */
  .zb-callwrap { position: absolute; inset: 0; pointer-events: none; }
  .zb-callwrap > * { pointer-events: auto; }
  .zb-qdot { position: absolute; z-index: 6; width: 12px; height: 12px; margin: -6px 0 0 -6px; border: 2px solid #fff; border-radius: 999px; background: #d08a00; pointer-events: none; }
  @media (prefers-reduced-motion: no-preference) { .zb-qdot { animation: zb-qpulse 1.6s ease-in-out infinite; } .zb-call { animation: zb-callin 0.2s cubic-bezier(.215,.61,.355,1); } /* ingen studs */ }
  @keyframes zb-qpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(208, 138, 0, 0.5); } 50% { box-shadow: 0 0 0 6px rgba(208, 138, 0, 0); } }
  @keyframes zb-callin { from { opacity: 0; transform: scale(.94); } }
  .zb-call { position: absolute; z-index: 7; width: max-content; max-width: 420px; padding: 10px 10px 8px 12px; border: 1px solid #e1e3de; border-radius: 14px; background: #fff; box-shadow: 0 18px 38px -16px rgba(20, 30, 25, 0.5), 0 2px 6px rgba(20, 30, 25, 0.06); outline: 0; }
  .zb-call:focus-visible { box-shadow: 0 0 0 3px rgba(31, 107, 79, 0.25), 0 18px 38px -16px rgba(20, 30, 25, 0.5); }
  .zb-tail { position: absolute; width: 10px; height: 10px; background: #fff; transform: rotate(45deg); } .zb-call.is-none .zb-tail { display: none; } /* frågan gäller hela jobbet */
  .zb-call.is-left .zb-tail { top: var(--tail); left: -6px; margin-top: -5px; border-left: 1px solid #e1e3de; border-bottom: 1px solid #e1e3de; }
  .zb-call.is-right .zb-tail { top: var(--tail); right: -6px; margin-top: -5px; border-right: 1px solid #e1e3de; border-top: 1px solid #e1e3de; }
  .zb-call.is-down .zb-tail { left: var(--tail); bottom: -6px; margin-left: -5px; border-right: 1px solid #e1e3de; border-bottom: 1px solid #e1e3de; }
  .zb-call.is-up .zb-tail { left: var(--tail); top: -6px; margin-left: -5px; border-left: 1px solid #e1e3de; border-top: 1px solid #e1e3de; }
  .zb-call p { display: flex; align-items: baseline; gap: 8px; margin: 0 0 7px; }
  .zb-call p b { font-size: 13.5px; font-weight: 600; }
  .zb-call p small { font-size: 11px; color: #8a918c; }
  .zb-call-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; white-space: nowrap; } /* långa svar bryts inom kortet (call() mäter höjden) */
  .zb-opt { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px 0 5px; border: 1px solid #cfe0d4; border-radius: 999px; background: #f1f8f3; font: inherit; font-size: 12.5px; font-weight: 500; color: #14402f; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; }
  .zb-opt:hover { border-color: var(--zb-green); background: var(--zb-green); color: #fff; }
  .zb-opt kbd { display: inline-grid; place-items: center; min-width: 17px; height: 17px; border-radius: 5px; background: rgba(31, 107, 79, 0.12); font: inherit; font-size: 10.5px; font-weight: 700; }
  .zb-own { display: inline-flex; align-items: center; gap: 3px; height: 28px; padding: 0 4px 0 10px; border: 1px dashed #c9cfc9; border-radius: 999px; background: #fff; }
  .zb-own:focus-within { border-color: var(--zb-green); }
  .zb-own input { width: 38px; padding: 0; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 500; text-align: right; color: #14402f; outline: 0; }
  .zb-own.is-text input { width: 150px; text-align: left; }
  .zb-own em { font-size: 12px; font-style: normal; color: #6b736e; }
  .zb-own button { display: grid; place-items: center; width: 22px; height: 22px; margin-left: 2px; padding: 0; border: 0; border-radius: 999px; background: #c9cfca; font: inherit; font-size: 12px; color: #fff; cursor: pointer; }
  .zb-own:focus-within button { background: var(--zb-green); }
  .zb-skip { padding: 4px; border: 0; background: none; font: inherit; font-size: 12px; color: #6b736e; cursor: pointer; }
  .zb-skip:hover { color: var(--zb-ink); }
  .zb-call-hint { display: block; margin-top: 6px; font-size: 10.5px; color: #8a918c; }

  /* Hamburgaren (zimla-board.js burger): medan bitarna rör sig bär de kortets yta och kant själva. */
  .zb-card.zb-burger:not(.zb-burger-settle) { background: transparent; box-shadow: none; }
  .zb-card.zb-burger { transition: background-color 0.36s ease, box-shadow 0.36s ease; }
  .zb-burger :is(.zb-desc, .zb-meat, .zb-bun) { position: relative; background: var(--zb-paper); outline: 1px solid #e6e5dd; }
  .zb-burger :is(.zb-desc, .zb-bun) { z-index: 1; transition: box-shadow 0.36s ease; }
  .zb-burger .zb-desc { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 16px 26px -18px rgba(20, 40, 30, 0.42); }
  .zb-burger .zb-bun { box-shadow: 0 36px 80px -46px rgba(20, 40, 30, 0.6), 0 2px 8px rgba(20, 40, 30, 0.08), 0 -16px 26px -18px rgba(20, 40, 30, 0.3); }
  .zb-burger.zb-burger-settle :is(.zb-desc, .zb-bun) { box-shadow: none; }
  html.zb-burgering :is(.zb-fold, .zb-fold-in) { transition: none !important; }
}
/* Studiopanelens skal släpper igenom klick i vila (pointer-events: none) – rubriken och ritbordet tar emot dem. */
@media (min-width: 1024px) { html:is(.zimla-board-on, .zimla-board-prata) .zb-head, html:is(.zimla-board-on, .zimla-board-prata) .zboard { pointer-events: auto; } }

/* Prata-samtalet (designprototypen): en smal spalt mitt i arbetsytan på ett ljust tonat foto – rubrikrad med
   Tidigare samtal / Nytt samtal, frågan i en bubbla till höger, svaret som text bredvid Zimlas fyra prickar och en rund
   fråga-vidare-ruta. "Bygg det här i Studio" är ett förslag i svarets spalt, först när svaret är klart (zimla-board.js). */
.zp-top, .zp-build { display: none; }
@media (min-width: 1024px) {
  html.zimla-prata-chat .zimla-ai-panel { --zp-col: min(760px, calc(100vw - var(--zp-rail) - 96px)); --zp-rail: 74px; --zp-mid: calc(50% + var(--zp-rail) / 2); }
  html.zimla-ai-start.zimla-ai-start-chats.zimla-prata-chat:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) body aside.zimla-ai-panel > section.zs-below, html.zimla-ai-start.zimla-ai-start-chats.zimla-prata-chat:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) body aside.zimla-ai-panel > .zimla-ai-panel__header, html.zimla-ai-start.zimla-ai-start-chats.zimla-prata-chat:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) body aside.zimla-ai-panel .zimla-ai-composer__quick { display: none !important; }
  html.zimla-prata-chat:not(.zimla-prata-history) .zimla-ai-panel > .zs-rail { display: none !important; }
  html.zimla-prata-chat.zimla-prata-history .zimla-ai-panel > .zs-rail { position: fixed !important; z-index: 70; top: 64px !important; left: max(calc(var(--zp-rail) + 12px), calc(var(--zp-mid) - var(--zp-col) / 2 - 300px)) !important; width: 280px !important; max-height: calc(100vh - 110px); overflow: auto; border-radius: 16px; background: rgba(255, 255, 255, 0.96) !important; box-shadow: 0 20px 50px -20px rgba(20, 30, 25, 0.35); }
  html.zimla-prata-chat .zimla-ai-panel { background: transparent !important; box-shadow: none !important; border: 0 !important; backdrop-filter: none !important; }
  /* Fotot tonas ljust som i prototypen, bara bakom arbetsytan (inte menyn). */
  html.zimla-prata-chat .zimla-ai-panel::before { content: ""; position: fixed; z-index: 50; inset: 0 0 0 var(--zp-rail); background: linear-gradient(180deg, rgba(246, 249, 247, 0.78) 0%, rgba(246, 249, 247, 0.7) 60%, rgba(246, 249, 247, 0.55) 100%); pointer-events: none; }
  html.zimla-prata-chat .zp-top { position: fixed; z-index: 60; top: 18px; left: var(--zp-mid); display: flex; align-items: center; gap: 10px; width: var(--zp-col); transform: translateX(-50%); color: #1d2420; pointer-events: auto; }
  .zp-label { display: inline-flex; flex: none; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(230, 240, 234, 0.9); font-size: 12px; font-weight: 500; color: #1f6b4f; }
  .zp-title { flex: 1; min-width: 0; overflow: hidden; font-size: 13.5px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
  .zp-top .zb-spacer { display: none; }
  .zp-link { padding: 6px 8px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 12.5px; color: #4e5751; cursor: pointer; }
  .zp-link:hover, .zp-link[aria-expanded="true"] { background: rgba(255, 255, 255, 0.6); }
  .zp-link, .zp-new { flex: none; white-space: nowrap; }
  .zp-new { height: 32px; padding: 0 12px; border: 1px solid #d6dad5; border-radius: 9px; background: rgba(255, 255, 255, 0.75); font: inherit; font-size: 12.5px; font-weight: 500; color: #1d2420; cursor: pointer; }
  .zp-new:hover { border-color: #1f6b4f; }
  :is(.zp-link, .zp-new, .zp-build button):focus-visible { outline: 2px solid #1f6b4f; outline-offset: 2px; }
  /* Spalten börjar uppifrån och slutar ovanför fråga-vidare-rutan, hur hög den än blir. */
  html.zimla-prata-chat .zimla-ai-panel__body { position: fixed !important; z-index: 55; top: 62px !important; bottom: calc(52px + var(--zp-comp, 78px)) !important; left: var(--zp-mid) !important; width: var(--zp-col) !important; max-width: none !important; height: auto !important; transform: translateX(-50%); overflow-y: auto; justify-content: flex-start !important; padding: 0 !important; background: none !important; pointer-events: auto; }
  html.zimla-ai-start.zimla-ai-start-chats.zimla-prata-chat:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) body aside.zimla-ai-panel #zimla-ai-messages { display: flex !important; flex-direction: column; gap: 26px !important; max-width: none !important; margin: 0 !important; padding: 12px 0 28px !important; }
  html.zimla-ai-start.zimla-ai-start-chats.zimla-prata-chat:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) body aside.zimla-ai-panel .zimla-ai-message--user { position: relative; display: flex !important; justify-content: flex-end; }
  html.zimla-ai-start.zimla-ai-start-chats.zimla-prata-chat:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) body aside.zimla-ai-panel .zimla-ai-message--user .zimla-ai-message__stack { max-width: 78% !important; }
  html.zimla-ai-start.zimla-ai-start-chats.zimla-prata-chat:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) body aside.zimla-ai-panel .zimla-ai-message--user .zimla-ai-message__bubble { padding: 12px 16px !important; border: 0 !important; border-radius: 18px 18px 6px 18px !important; background: rgba(255, 255, 255, 0.92) !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important; font-size: 15px !important; line-height: 1.5 !important; color: #1d2420 !important; overflow-wrap: anywhere; }
  html.zimla-ai-start.zimla-ai-start-chats.zimla-prata-chat:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) body aside.zimla-ai-panel .zimla-ai-message--user :is(.zimla-ai-message__bubble p, .zimla-ai-message__bubble) { font-size: 15px !important; line-height: 1.5 !important; }
  html.zimla-ai-start.zimla-ai-start-chats.zimla-prata-chat:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) body aside.zimla-ai-panel .zimla-ai-message--user :is(.zimla-ai-message__avatar, .zimla-ai-message__meta) { display: none !important; }
  /* Kopiera/redigera finns kvar men syns först när man pekar på meddelandet. */
  html.zimla-ai-start.zimla-ai-start-chats.zimla-prata-chat:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) body aside.zimla-ai-panel .zimla-ai-message--user > .zimla-chat-message-actions { position: absolute; top: 4px; right: calc(78% + 6px); opacity: 0; transition: opacity .15s ease-out; }
  html.zimla-ai-start.zimla-ai-start-chats.zimla-prata-chat:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) body aside.zimla-ai-panel .zimla-chat-run > .zimla-chat-message-actions { grid-column: 2; opacity: 0; transition: opacity .15s ease-out; }
  html.zimla-ai-start.zimla-ai-start-chats.zimla-prata-chat:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) body aside.zimla-ai-panel :is(.zimla-ai-message--user, .zimla-chat-run):is(:hover, :focus-within) > .zimla-chat-message-actions { opacity: 1; }
  /* Svaret: fyra prickar, 14 px luft, texten – inget namn, ingen tid, inget kort. */
  html.zimla-ai-start.zimla-ai-start-chats.zimla-prata-chat:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) body aside.zimla-ai-panel .zimla-ai-message--assistant { grid-template-columns: 15px minmax(0, 1fr) !important; column-gap: 14px !important; }
  html.zimla-ai-start.zimla-ai-start-chats.zimla-prata-chat:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) body aside.zimla-ai-panel .zimla-ai-message--assistant > .zimla-ai-message__avatar { width: 15px !important; height: 15px !important; margin-top: 6px !important; border: 0 !important; background: none !important; box-shadow: none !important; }
  html.zimla-ai-start.zimla-ai-start-chats.zimla-prata-chat:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) body aside.zimla-ai-panel .zimla-ai-message--assistant .zimla-ai-message__meta { display: none !important; }
  html.zimla-ai-start.zimla-ai-start-chats.zimla-prata-chat:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) body aside.zimla-ai-panel .zimla-ai-message--assistant .zimla-ai-message__bubble { padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; color: #1d2420 !important; }
  html.zimla-ai-start.zimla-ai-start-chats.zimla-prata-chat:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) body aside.zimla-ai-panel .zimla-ai-message--assistant .zimla-chat-run__answer { background: none !important; }
  html.zimla-ai-start.zimla-ai-start-chats.zimla-prata-chat:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) body aside.zimla-ai-panel .zimla-ai-message--assistant .zimla-chat-run__answer :is(p, li) { font-size: 15px !important; line-height: 1.65 !important; color: #1d2420; }
  html.zimla-prata-chat .zimla-ai-panel form.zimla-ai-composer { position: fixed !important; z-index: 60; bottom: 42px !important; left: var(--zp-mid) !important; top: auto !important; display: block !important; width: var(--zp-col) !important; max-width: none !important; margin: 0 !important; padding: 0 !important; transform: translateX(-50%); pointer-events: auto; }
  html.zimla-prata-chat .zimla-ai-panel form.zimla-ai-composer::after { content: "Prata sparas inte som projekt. Enter skickar · Shift+Enter ny rad"; position: absolute; left: 0; right: 0; top: calc(100% + 8px); font-size: 11.5px; text-align: center; color: #8a918c; }
  html.zimla-ai-start.zimla-ai-start-chats.zimla-prata-chat:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) body aside.zimla-ai-panel form.zimla-ai-composer .zimla-ai-composer__box { padding: 8px 8px 8px 16px !important; border: 1px solid transparent !important; border-radius: 20px !important; background: rgba(250, 250, 247, 0.94) !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 18px 40px -30px rgba(20, 30, 25, 0.35) !important; }
  html.zimla-ai-start.zimla-ai-start-chats.zimla-prata-chat:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) body aside.zimla-ai-panel form.zimla-ai-composer textarea { font-size: 15px !important; line-height: 1.5 !important; color: #1d2420; }
  /* Bifoga som gem (prototypen) i stället för plus. */
  html.zimla-ai-start.zimla-ai-start-chats.zimla-prata-chat:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) body aside.zimla-ai-panel form.zimla-ai-composer .zimla-ai-composer__plus { display: none; }
  html.zimla-ai-start.zimla-ai-start-chats.zimla-prata-chat:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) body aside.zimla-ai-panel form.zimla-ai-composer .zimla-ai-attachments > summary { width: 34px; height: 34px; border-radius: 50%; color: #4e5751; }
  html.zimla-ai-start.zimla-ai-start-chats.zimla-prata-chat:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) body aside.zimla-ai-panel form.zimla-ai-composer .zimla-ai-attachments > summary::before { content: ""; width: 17px; height: 17px; background: currentColor; -webkit-mask: var(--zp-clip) center / contain no-repeat; mask: var(--zp-clip) center / contain no-repeat; }
  html.zimla-ai-start.zimla-ai-start-chats.zimla-prata-chat:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) body aside.zimla-ai-panel form.zimla-ai-composer .zimla-ai-attachments > summary:hover { background: #eef0ec; color: #1f6b4f; }
  html.zimla-prata-chat { --zp-clip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11.5l-8.2 8.2a5 5 0 0 1-7.1-7.1l8.5-8.5a3.3 3.3 0 0 1 4.7 4.7l-8.5 8.5a1.7 1.7 0 0 1-2.4-2.4l7.8-7.8'/%3E%3C/svg%3E"); }
  html.zimla-ai-start.zimla-ai-start-chats.zimla-prata-chat:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) body aside.zimla-ai-panel form.zimla-ai-composer [data-chat-runtime-submit] { background: #1f6b4f !important; color: #fff !important; }
  html.zimla-ai-start.zimla-ai-start-chats.zimla-prata-chat:not(.zimla-ai-start-working):not(.zimla-ai-start-work-enter):not(.zimla-ai-start-work-enter-prep) body aside.zimla-ai-panel form.zimla-ai-composer [data-chat-runtime-submit]:disabled, html.zimla-prata-chat form.zimla-ai-composer:has(#zimla-ai-command-input:placeholder-shown):not(:has([data-chat-attachment-selection]:not([hidden]))) [data-chat-runtime-submit] { background: #a3aba5 !important; opacity: 1 !important; }
  /* Förslaget i svarets spalt, 12 px under texten; tonar bara in när svaret blev klart nyss. */
  html.zimla-prata-chat .zp-build { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; }
  html.zimla-prata-chat .zp-build.is-fresh { animation: zp-fade .4s ease-out backwards; }
  .zp-build button { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 0; border-radius: 12px; background: #1f6b4f; font: inherit; font-size: 13.5px; font-weight: 500; color: #fff; cursor: pointer; }
  .zp-build button:hover { background: #15543d; }
  .zp-build small { font-size: 12.5px; color: #6b736e; }
  @media (pointer: coarse) { :is(.zp-link, .zp-new, .zp-build button) { min-height: 44px; } }
}
@keyframes zp-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { html.zimla-prata-chat .zp-build.is-fresh { animation: none; } }

@media (min-width: 1024px) {
  /* Arbeten från Ordboken som chips (tas bort med ×) och markeras i texten. */
  .zb-hl mark.is-work { --mk: #e7c9e9; }
  .zb-work { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 4px 0 9px; border: 1px solid #e1d6bd; border-radius: 999px; background: #fbf5e8; font-size: 11.5px; font-weight: 500; color: #6b4a00; }
  .zb-work button { width: 18px; height: 18px; padding: 0; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 12px; color: #8a6a2a; cursor: pointer; }
  /* Kund- och adressväljarna (samma meny, med sökfält). */
  .zb-pickwrap { position: relative; min-width: 0; }
  .zb-pick { width: 100%; cursor: pointer; }
  .zb-pick:hover { background: rgba(31, 107, 79, 0.05); }
  .zb-pick > span:last-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .zb-pick .is-add { color: var(--zb-green); }
  .zb-picker { width: 260px; }
  .zb-picker input { flex: none; margin: 4px 4px 6px; padding: 7px 10px; border: 1px solid #e3e6e1; border-radius: 8px; font: inherit; font-size: 13px; outline: 0; }
  .zb-picker input:focus { border-color: var(--zb-green); }
  /* Stämpeln när projektet skapats (över namnrutan). */
  .zb-stamp { position: absolute; z-index: 6; right: 14px; bottom: 8px; display: grid; justify-items: center; gap: 1px; padding: 6px 13px 5px; border: 2.5px solid var(--zb-green); border-radius: 7px; background: rgba(251, 250, 246, 0.94); box-shadow: 0 0 0 3px rgba(251, 250, 246, 0.9), inset 0 0 0 1px rgba(31, 107, 79, 0.35); color: var(--zb-green); transform: rotate(-7deg); pointer-events: none; }
  .zb-stamp b { font-size: 13px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; }
  .zb-stamp small { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
  /* Stämpeln slår i (160 ms, accelererar in i papperet, ingen överskjutning – rörelse-granskningen 2026-10-04). */
  @media (prefers-reduced-motion: no-preference) { .zb-stamp { animation: zb-stamp 0.16s cubic-bezier(.55,0,1,.45) both; } @keyframes zb-stamp { 0% { opacity: 0; transform: rotate(-7deg) scale(1.18); } 35% { opacity: 1; } } }
  .zb-hint.is-live { color: var(--zb-green); }
  .zb-orb.is-listening { animation: zb-listen 1.4s ease-in-out infinite; border-radius: 999px; }
  @keyframes zb-listen { 0%, 100% { box-shadow: 0 0 0 0 rgba(31, 107, 79, 0.28); } 50% { box-shadow: 0 0 0 10px rgba(31, 107, 79, 0); } }
}
/* Övergången ritbord → projekt: ett lager över allt bär bordets bitar (bara transform/opacity, zimla-board.js). */
.zb-flight { --zb-ink: #1d2420; --zb-muted: #6b736e; --zb-line: #e3e5de; --zb-paper: #fbfaf6; --zb-green: #1f6b4f; --zb-dark: #1f5c45; --zb-soft: #e9f2ec; position: fixed; inset: 0; z-index: 9000; cursor: pointer; }
.zb-flight * { pointer-events: none; }
.zb-flight > div { position: fixed; margin: 0; transform-origin: 0 0; will-change: transform, opacity; }
.zb-flight > .zb-fly-stage { transform-origin: 50% 40%; }
.zb-fly-bg { background: radial-gradient(60% 50% at 18% 20%, rgba(170, 205, 185, 0.35), transparent 70%), radial-gradient(40% 45% at 92% 30%, rgba(222, 170, 130, 0.28), transparent 70%), #ecebe5; }
.zb-fly-stage > * { margin: 0 !important; }
.zb-fly-stage > .zb-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; width: 100%; text-align: left; }
.zb-flight .zb-cell, .zb-flight .zb-cell *, .zb-fly-stage :not(.zb-stamp) { animation: none !important; transition: none !important; }
.zb-fly-in { position: absolute; inset: 0; }
.zb-fly-row .zb-fly-in { overflow: hidden; border-radius: 10px; background: #fbfaf6; } /* ett rum på ett annat plan flyger från sin rad */
.zb-fly-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.zb-fly-sh { position: absolute; inset: 0; box-shadow: 0 28px 44px -16px rgba(20, 40, 30, 0.5); opacity: 0; }
.zb-fly-sketch > svg { display: block; width: 100%; height: 100%; max-height: none; overflow: visible; }
.zb-fly-sketch .zb-cell.is-away > :not(rect:first-child) { display: none; }
.zb-fly-sketch .zb-cell.is-away > rect:first-child { fill: rgba(247, 247, 241, 0.6); stroke: rgba(47, 61, 54, 0.45); stroke-width: 1; stroke-dasharray: 4 3; }
.zb-fly-outline { fill: none; stroke: #1f2a24; stroke-width: 2.6; }
.zb-flight > .zb-fly-text { inset: auto; max-height: none; color: var(--zb-ink); }
.zb-flight .zb-fly-text mark { color: inherit; }
.zb-flight > .zb-fly-bubble { height: auto; min-height: 0; padding: 12px 18px; border-radius: 18px; background: #fff; box-shadow: 0 12px 32px -14px rgba(20, 30, 25, 0.45); }
.zb-fly-est { font-family: Newsreader, Georgia, serif; font-size: 24px; line-height: 1.15; color: #14402f; white-space: nowrap; }
/* Projektsidan under lagret: kort, total och huvudets bild väntar på sin bit (animationerna tar över i zimla-board.js). */
html.zb-arriving #rhub-list .rrow:not(.zb-in) { opacity: 0; }
html.zb-arriving:not(.zb-est-in) #phead-kr-sum, html.zb-arriving:not(.zb-thumb-in) .phead-pic__btn img { opacity: 0; }
/* Minska rörelse: lägesbytet sker direkt. */
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  html.zb-mode-anim :is(.zb-title, .zp-chips, .zb-text > textarea) { animation: none; }
  .zb-mode::before, .zb-mode button, .zb-fold, .zb-fold-in, .zb-desc, .zb-desc-h > .zb-k, .zb-title small { transition: none !important; }
  .zb-orb .zimla-dock-orb__eye, .zb-phones { transition: none !important; }
  .zb-orb.is-listening { animation: none; }
}

/* Under flygningen sätter sig inte sidan (6 px): rummen landar på sina kort, som står still medan de mäts. */
html.zb-arriving #zimla-page-content { opacity: 1; transform: none; transition: none; }

/* Skapa offert: rummet som byggs pulsar i skissen (regler per rum i <style data-zb-build>, zimla-board.js buildMotion). */
@keyframes zb-building { 0%, 100% { fill-opacity: 1; } 50% { fill-opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .zb-cell > .zrf { animation: none !important; } }

/* Byggordningen steg 1 (varv 2): väggarnas träffyta (24 px, 44 vid grov pekare), handtagen svagt synliga i helskärm,
   och väggen som flyttas när ett mått skrivs in. */
.zdh-hit { stroke: transparent; stroke-width: 24px; cursor: inherit; }
@media (pointer: coarse) { .zdh-hit { stroke-width: 44px; } }
.zb-card.is-full .zdg .zgrip { opacity: 0.4; }
.zb-card.is-full .zdg.zdga .zgrip { opacity: 1; }
.zhi { stroke: #1f6b4f; stroke-width: 6px; stroke-opacity: 0.55; stroke-linecap: round; pointer-events: none; }
.zdga .zdh { stroke: rgba(31, 107, 79, 0.45); } .zdga .zgrip { fill: #1f6b4f; }
.zb-planhost.is-panning { cursor: grab; }
.zb-zoom { position: absolute; right: 12px; bottom: 12px; z-index: 6; display: flex; align-items: center; border: 1px solid #e1e3de; border-radius: 9px; background: #fff; box-shadow: 0 6px 18px -12px rgba(20, 30, 25, 0.4); }
.zb-zoom button { min-width: 30px; height: 30px; border: 0; background: none; font: inherit; font-size: 13px; color: var(--zb-ink); cursor: pointer; }
.zb-zoom .zb-zoomv { min-width: 52px; font-size: 12px; color: #4b5650; font-variant-numeric: tabular-nums; }
.zb-zoom button:hover { background: rgba(31, 107, 79, 0.08); }
@media (pointer: coarse) { .zb-zoom button { height: 44px; min-width: 44px; } }
/* Steg 2: dörrarna – träffytan överst (44 px), vald dörr i accent, öppning streckad, ryms inte röd. */
.zdoor-hit { fill: transparent; cursor: pointer; }
.zdoor-hit:hover { fill: rgba(31, 107, 79, 0.08); }
.zdoor.is-sel :is(.zdl, .zda, .zdo) { stroke: #1f6b4f; stroke-width: 2; }
.zdoor.is-bad :is(.zdl, .zda, .zdo) { stroke: #c0392b; stroke-dasharray: 3 2; }
.zdo { stroke: #7d8781; stroke-width: 1; stroke-dasharray: 4 3; }
.zb-futool .zb-futxtb { display: inline-flex; align-items: center; gap: 4px; padding: 0 9px; font-size: 12.5px; } /* utan !important: x-show:s display:none ska vinna */
.zb-dkind .is-on { background: rgba(31, 107, 79, 0.12); color: #1f6b4f; }
@media (pointer: coarse) { .zb-futool button { min-width: 44px; height: 44px; } }
.zb-futool.is-below { transform: translate(-50%, 8px); }
/* Steg 2: fönstren – träffytan överst, valt fönster i accent, ryms inte röd. */
.zwin-hit { fill: transparent; cursor: pointer; } .zwin-hit:hover { fill: rgba(31, 107, 79, 0.08); }
.zwg.is-sel .zwin { stroke: #1f6b4f; stroke-width: 2; } .zwg.is-sel .zwinf { fill: #e3f1e8; }
.zwg.is-bad .zwin { stroke: #c0392b; stroke-dasharray: 3 2; }
.zext-hit { fill: transparent; cursor: pointer; } .zext-hit:hover, .zext-hit.is-sel { fill: rgba(31, 107, 79, 0.16); }
.zb-fug { display: inline-flex; align-items: center; gap: 1px; padding-left: 6px; border-left: 1px solid #eceee9; } .zb-fug small { margin-right: 2px; font-size: 10.5px; color: #6b736e; }
.zdqc.is-soft text { fill: #6b736e; }
.zb-ceil { position: absolute; top: 34px; left: 16px; z-index: 5; height: 24px; padding: 0 8px; border: 1px solid #e1e3de; border-radius: 7px; background: #fff; font: inherit; font-size: 11.5px; color: #3f4842; font-variant-numeric: tabular-nums; cursor: pointer; }
.zb-ceil:hover { border-color: #1f6b4f; color: #1f6b4f; }
.zb-dimbox input { font-size: 16px; } /* iOS zoomar inte */
@media (pointer: coarse) { .zb-ceil { height: 44px; } }
/* Steg 3: delningslinjen och grannarna att slå ihop med. */
.zsplit { stroke: #1f6b4f; stroke-width: 2; stroke-dasharray: 6 4; pointer-events: none; }
.zsplit-t { font-size: 12px; fill: #1f6b4f; paint-order: stroke; stroke: #fff; stroke-width: 4px; font-variant-numeric: tabular-nums; pointer-events: none; }
.zmerge { fill: rgba(31, 107, 79, 0.1); stroke: #1f6b4f; stroke-width: 1.5; stroke-dasharray: 5 3; pointer-events: none; }
.zb-futxtb.is-on { background: rgba(31, 107, 79, 0.12) !important; color: #1f6b4f; }
.zb-parttypes { gap: 4px; padding: 4px 6px 4px 10px; } .zb-parttypes small { font-size: 11px; color: #6b736e; margin-right: 4px; }
.zb-chip { height: 28px !important; min-width: 0 !important; padding: 0 10px !important; border: 1px solid #e1e3de !important; border-radius: 14px !important; font-size: 12.5px !important; }
.zb-chip.is-on { border-color: #1f6b4f !important; background: #e3f1e8 !important; color: #1f6b4f; }
@media (pointer: coarse) { .zb-chip { height: 44px !important; } }
.zb-card.is-full .zb-ceil { left: 184px; top: 14px; } /* helskärm: ritytan börjar efter paletten */
.zb-parttypes { flex-wrap: wrap; max-width: min(380px, 92%); white-space: normal; }
.zsplit-r { fill: rgba(31, 107, 79, 0.1); stroke: #1f6b4f; stroke-width: 1.5; stroke-dasharray: 6 4; pointer-events: none; } .zsplit-r.is-bad { fill: rgba(192, 57, 43, 0.08); stroke: #c0392b; }
/* Steg 4: rivs streckad utan fyllning (RIVS), nytt mörkt fyllt; legenden nere till vänster. */
.zwr { fill: none; stroke: #c0392b; stroke-width: 1.1; stroke-dasharray: 4 3; }
.zwr-t { font-size: 9.5px; letter-spacing: 0.06em; fill: #c0392b; font-weight: 600; paint-order: stroke; stroke: #f7f7f1; stroke-width: 3px; }
.zleg text { font-size: 10.5px; fill: #4e5751; } .zleg-b { fill: #e4e6e0; stroke: #2b3a33; stroke-width: 0.9; } .zleg-n { stroke: #2b3a33; stroke-width: 1.2; } .zleg-r { fill: none; stroke: #c0392b; stroke-width: 1.1; stroke-dasharray: 3 2; }
.zdoor.is-riv :is(.zdl, .zda, .zdo), .zwg.is-riv .zwin { stroke: #c0392b; stroke-dasharray: 3 2; }
.zwg.is-riv .zwinf { fill: none; }
.zfu-riv :is(rect, circle, ellipse, line) { stroke: #c0392b !important; stroke-dasharray: 3 2; fill: none !important; opacity: 0.85; }
.zseg-hit { fill: transparent; cursor: crosshair; } .zseg-hit:hover { fill: rgba(31, 107, 79, 0.18); }
@media (pointer: coarse) { .zseg-hit { stroke: transparent; stroke-width: 22px; } }
.zb-penbtn { height: 28px; margin-right: 8px; padding: 0 10px; border: 1px solid #e1e3de; border-radius: 8px; background: #fff; font: inherit; font-size: 12.5px; color: #3f4842; cursor: pointer; }
.zb-penbtn.is-on { border-color: #c0392b; color: #c0392b; background: #fdf3f1; }
.zb-penbar { left: 50%; top: auto; bottom: 18px; transform: translate(-50%, 0); } /* samma plats som placeringsraden (en rad för verktygen) */
@media (pointer: coarse) { .zb-penbtn { height: 44px; } }
.zb-stat button { min-width: 0 !important; padding: 0 7px; font-size: 11.5px !important; } .zb-stat { padding-left: 4px; border-left: 1px solid #eceee9; }
/* Steg 5: takhöjden och lägenhetens rad uppe till vänster (helskärm efter paletten). */
.zb-topl { position: absolute; top: 34px; left: 16px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: calc(100% - 32px); pointer-events: none; }
.zb-topl > * { pointer-events: auto; }
.zb-topl .zb-ceil { position: static; }
.zb-card.is-full .zb-topl { left: 86px; top: 14px; max-width: calc(100% - 100px); }
.zb-card.is-full .zb-plan.has-panel .zb-topl { left: 356px; max-width: calc(100% - 370px); }
@media (max-width: 1279px) { .zb-card.is-full .zb-plan.has-panel .zb-topl { left: 356px; } }
.zb-unitacts { display: inline-flex; align-items: center; gap: 4px; }
.zb-unitacts b { min-width: 3.2em; text-align: center; font-size: 12px; font-weight: 500; color: #2f3833; font-variant-numeric: tabular-nums; }
.zb-unitacts button { height: 24px; padding: 0 8px; border: 1px solid #e1e3de; border-radius: 7px; background: #fff; font: inherit; font-size: 11.5px; color: #3f4842; cursor: pointer; }
.zb-unitacts button.zb-unav { width: 24px; padding: 0; color: #6b736e; }
.zb-unitacts button:hover { border-color: #1f6b4f; color: #1f6b4f; }
.zb-unitacts button[aria-pressed="true"] { border-color: #1f6b4f; background: #e3f1e8; color: #1f6b4f; }
@media (pointer: coarse) { .zb-unitacts button { height: 44px; } .zb-unitacts button.zb-unav { width: 44px; } }
.zb-unitno { width: 4.4em; height: 24px; padding: 0 6px; border: 1px solid #e1e3de; border-radius: 7px; background: #fff; font: inherit; font-size: 11.5px; color: #3f4842; text-align: center; font-variant-numeric: tabular-nums; }
.zb-unitno:focus { outline: none; border-color: #1f6b4f; }
@media (pointer: coarse) { .zb-unitno { height: 44px; font-size: 16px; } }
/* Steg 5: kopiera rummet, till vänster om Ta bort (som drar sig åt höger). */
.zb-dup { margin-left: auto; padding: 4px 6px; border: 0; border-radius: 6px; background: none; font: inherit; font-size: 12px; color: #3f4842; cursor: pointer; }
.zb-dup:hover { color: #1f6b4f; }
.zb-dup + .zb-del { margin-left: 0; }
/* Valda rum skapas vid Bygg; övriga är bordets förslag (zimla-board.js isPicked). */
.zb-take { padding: 4px 8px; border: 1px solid #d5ddd7; border-radius: 6px; background: none; font: inherit; font-size: 12px; color: #3f4842; cursor: pointer; }
.zb-take[aria-pressed="true"] { border-color: #b9d3c3; background: #e3efe7; color: #1f6b4f; }
.zb-take + .zb-dup { margin-left: auto; }
.zb-scroll li.is-picked .zb-no { color: #1f6b4f; font-weight: 600; }
@media (pointer: coarse) { .zb-take { min-height: 44px; } }
@media (pointer: coarse) { .zb-dup, .zb-del { min-height: 44px; } }
/* Steg 6: norrpilen i ritningens hörn och väderstrecken utanför sidorna. */
.zb-northc { position: absolute; top: 46px; right: 14px; z-index: 6; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.zb-northbtn { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 32px; padding: 4px 4px 3px; border: 1px solid transparent; border-radius: 8px; background: none; font: inherit; color: #34443b; cursor: pointer; }
.zb-northbtn:hover, .zb-northbtn[aria-expanded="true"] { border-color: #e1e3de; background: #fff; }
.zb-northbtn svg { transition: transform 180ms cubic-bezier(0.215, 0.61, 0.355, 1); }
.zb-northbtn small { font-size: 10px; font-weight: 500; letter-spacing: 0.06em; color: #6b736e; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zb-northbtn.is-unset svg path { fill: none; stroke: #8a918c; stroke-width: 1.1; stroke-dasharray: 2 1.5; }
.zb-northbox { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px; max-width: 250px; padding: 6px; border: 1px solid #e1e3de; border-radius: 9px; background: #fff; box-shadow: 0 6px 18px -12px rgba(20, 30, 25, 0.4); }
.zb-northbox button { height: 26px; padding: 0 7px; border: 1px solid #e1e3de; border-radius: 7px; background: #fff; font: inherit; font-size: 11.5px; color: #3f4842; cursor: pointer; font-variant-numeric: tabular-nums; }
.zb-northbox button:hover { border-color: #1f6b4f; color: #1f6b4f; }
.zb-northbox input { width: 3.4em; height: 26px; padding: 0 5px; border: 1px solid #e1e3de; border-radius: 7px; font: inherit; font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.zb-northbox input:focus { outline: none; border-color: #1f6b4f; }
.zb-northbox em { margin-left: -2px; font-style: normal; color: #6b736e; }
.zb-northbox small { flex-basis: 100%; text-align: right; font-size: 11px; color: #8a918c; }
.zb-northbox .zb-northclear { border: 0; color: #6b736e; }
.zcomp text { font-size: 10px; font-weight: 500; letter-spacing: 0.06em; fill: #8a918c; }
@media (pointer: coarse) { .zb-northbtn { min-width: 44px; min-height: 44px; } .zb-northbox button, .zb-northbox input { height: 44px; } .zb-northbox input { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .zb-northbtn svg { transition: none; } }
/* Steg 7: tillgängligheten – godkänt tunt neutralt streckat, det som inte klarar kravet mörk bärnsten med text. */
.zb-accbtn { display: inline-flex; align-items: center; gap: 3px; }
.zb-accbtn .material-symbols-outlined { font-size: 16px; }
.zb-penbtn.zb-accbtn.is-on { border-color: #1f6b4f; background: #e3f1e8; color: #1f6b4f; }
.zacc-ok { fill: none; stroke: #9aa29d; stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.zacc-bad { fill: rgba(168, 102, 15, 0.06); stroke: #a8660f; stroke-width: 1.3; stroke-dasharray: 5 3; pointer-events: none; }
.zacc-t { font-size: 10.5px; font-weight: 500; fill: #8a520c; paint-order: stroke; stroke: #fff; stroke-width: 3px; font-variant-numeric: tabular-nums; pointer-events: none; }
/* Steg 8: sektionen A-A – eget lager över planen; snittade väggar och bjälklag fyllda, höjder dämpade när antagna. */
.zb-sect { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; background: #fbfbf8; }
.zb-sectbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 14px 6px; }
.zb-sectbar b { margin-right: 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #34443b; }
.zb-sectbar button { height: 28px; padding: 0 10px; border: 1px solid #e1e3de; border-radius: 8px; background: #fff; font: inherit; font-size: 12px; color: #3f4842; cursor: pointer; }
.zb-sectbar button:hover { border-color: #1f6b4f; color: #1f6b4f; }
.zb-sectbar small { flex-basis: 100%; font-size: 11px; color: #8a918c; }
.zb-sectsvg { flex: 1; min-height: 0; overflow: auto; }
.zsect-slab, .zsect-wall { fill: #2f3a34; }
.zsect-roof { fill: none; stroke: #2f3a34; stroke-width: 2.2; stroke-linejoin: round; }
.zsect-ceil { stroke: #8a918c; stroke-width: 1; stroke-dasharray: 4 3; }
.zsect-ground { stroke: #2f3a34; stroke-width: 1.4; }
.zsect-room { font-size: 10px; font-weight: 500; letter-spacing: 0.1em; fill: #4e5751; }
.zsect-h { font-size: 11px; fill: #2f3833; font-variant-numeric: tabular-nums; cursor: pointer; }
.zsect-h.is-soft { fill: #8a918c; }
.zsect-k path { fill: #2f3a34; } .zsect-k line { stroke: #2f3a34; stroke-width: 1; } .zsect-k text { font-size: 10.5px; fill: #2f3833; font-variant-numeric: tabular-nums; }
.zsect-k.is-soft text { fill: #8a918c; } .zsect-k.is-soft path { fill: #8a918c; }
.zsect-dim line { stroke: #6b736e; stroke-width: 0.9; } .zsect-dim text { font-size: 10.5px; fill: #4e5751; font-variant-numeric: tabular-nums; }
@media (pointer: coarse) { .zb-sectbar button { height: 44px; } }
@media (prefers-reduced-motion: reduce) { .zb-sect { transition: none !important; } }
.zsec-l { stroke: #34443b; stroke-width: 1.2; stroke-dasharray: 14 4 2 4; pointer-events: none; }
.zsec-hit { stroke: transparent; stroke-width: 22; cursor: grab; pointer-events: stroke; }
@media (pointer: coarse) { .zsec-hit { stroke-width: 44; } }
.zsec-arrow { fill: #34443b; pointer-events: none; }
.zsec-t { font-size: 12px; font-weight: 600; fill: #34443b; pointer-events: none; }
.zb-secttabs { flex: 0 0 auto; max-width: 100%; overflow-x: auto; }
.zb-sectopts { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.zb-sectbar label { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #4e5751; }
.zb-sectbar input { width: 4.5ch; height: 28px; padding: 0 5px; border: 1px solid #e1e3de; border-radius: 7px; font: inherit; font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.zb-sectbar .zb-sectmat input { width: 22ch; text-align: left; }
.zb-sectbar input:focus { outline: none; border-color: #1f6b4f; }
.zb-sectbar .zb-sectnorth { border-style: dashed; color: #6b736e; }
.zfac-wall { fill: #fff; stroke: #2f3a34; stroke-width: 1.6; }
.zfac-roof { fill: #fff; stroke: #2f3a34; stroke-width: 1.6; stroke-linejoin: round; }
.zfac-slab { stroke: #9aa29d; stroke-width: 0.8; stroke-dasharray: 5 4; }
.zfac-win, .zfac-door { fill: #f4f6f2; stroke: #2f3a34; stroke-width: 1; cursor: pointer; }
.zfac-win.is-rivs, .zfac-door.is-rivs { fill: none; stroke: #c0392b; stroke-dasharray: 4 3; }
.zfac-bar { stroke: #2f3a34; stroke-width: 0.7; pointer-events: none; }
@media (pointer: coarse) { .zb-sectbar input { height: 44px; font-size: 16px; } }
/* Steg 10: Bygglovshandlingen – knappen med räknare, rutan (dialog, max 44rem, helsida på mobil) och chipet vid Bygg. */
.zb-blbtn { display: inline-flex; align-items: center; gap: 4px; }
.zb-blbtn .material-symbols-outlined { font-size: 16px; }
.zb-blbtn small { margin-left: 2px; font-size: 11px; color: #6b736e; font-variant-numeric: tabular-nums; }
.zb-blchip { height: 30px; margin-right: 8px; padding: 0 10px; border: 1px dashed #1f6b4f; border-radius: 999px; background: none; font: inherit; font-size: 12px; color: #1f6b4f; cursor: pointer; }
.zb-bldlg-back { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(20, 28, 24, 0.32); }
.zb-bldlg { display: flex; flex-direction: column; gap: 10px; width: min(44rem, 100%); max-height: calc(100dvh - 32px); overflow: auto; padding: 18px 20px; border-radius: 14px; background: #fff; box-shadow: 0 24px 60px -24px rgba(20, 30, 25, 0.45); outline: none; }
.zb-bldlg header { display: flex; align-items: center; justify-content: space-between; }
.zb-bldlg h2 { margin: 0; font-size: 15px; font-weight: 600; color: #22302a; }
.zb-bldlg h3 { margin: 0 0 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #6b736e; }
.zb-bldlg-x { width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; font-size: 20px; color: #6b736e; cursor: pointer; }
.zb-blfields { display: flex; flex-direction: column; gap: 4px; }
.zb-blfields label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: #4e5751; }
.zb-blfields input { height: 34px; padding: 0 10px; border: 1px solid #e1e3de; border-radius: 8px; font: inherit; font-size: 13px; }
.zb-blfields input:focus { outline: none; border-color: #1f6b4f; }
.zb-blfields small, .zb-bldlg footer small { font-size: 11px; color: #8a918c; }
.zb-blerr { margin: 0; font-size: 12px; color: #a8660f; }
.zb-blchecks { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.zb-blchecks li { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 4px 0; border-bottom: 1px solid #f0f1ee; font-size: 12.5px; color: #2f3833; }
.zb-blchecks li > span:nth-child(2) { display: flex; flex: 1; flex-direction: column; }
.zb-blchecks li small { font-size: 11px; color: #8a918c; }
.zb-blchecks .material-symbols-outlined { font-size: 18px; }
.zb-blchecks .is-ok .material-symbols-outlined { color: #1f6b4f; }
.zb-blchecks .is-bad .material-symbols-outlined, .zb-blchecks .is-bad small { color: #a8660f; }
.zb-blchecks .is-self .material-symbols-outlined { color: #8a918c; }
.zb-blchecks button { height: 28px; padding: 0 10px; border: 1px solid #e1e3de; border-radius: 8px; background: #fff; font: inherit; font-size: 12px; color: #3f4842; cursor: pointer; }
.zb-blkom small { display: block; margin: -2px 0 4px; font-size: 11px; color: #8a918c; }
.zb-blfiles ul, .zb-blnot ul, .zb-blkom ul { margin: 0; padding: 0 0 0 16px; font-size: 12px; color: #4e5751; }
.zb-blfiles li { overflow: hidden; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.zb-bldlg footer { position: sticky; bottom: -18px; display: flex; flex-direction: column; gap: 2px; margin: 0 -20px -18px; padding: 10px 20px 14px; border-top: 1px solid #eceee9; background: #fff; }
.zb-blon { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #2f3833; }
.zb-dlg-in { animation: zbDlgIn 260ms cubic-bezier(0.215, 0.61, 0.355, 1); } .zb-dlg-out { animation: zbDlgIn 200ms reverse ease-in; }
@keyframes zbDlgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) { .zb-bldlg-back { padding: 0; } .zb-bldlg { width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; } .zb-blfields input { font-size: 16px; } }
@media (pointer: coarse) { .zb-blchecks button, .zb-blon { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .zb-dlg-in, .zb-dlg-out { animation: none; } }
/* Smarta menyn: saker i taket streckade (lampa, spot, brandvarnare, frånluft, tilluft). */
.zceil { fill: none; stroke: #4e5751; stroke-width: 0.9; stroke-dasharray: 2.5 2; }
.zly-el { --lc: #b06a00; } .zly-vvs { --lc: #2f6fb3; } .zly-vent { --lc: #23827d; } /* lagrets färg på skärmen (prototypen); exporten är svartvit */
.zsy { fill: #fff; stroke: var(--lc, #2f3d36); stroke-width: 1.4; stroke-linejoin: round; } .zsy.is-ceil { stroke-dasharray: 3 2; }
.zsy-l { stroke: var(--lc, #2f3d36); stroke-width: 1.2; stroke-linecap: round; } .zsy-f { fill: var(--lc, #2f3d36); stroke: none; }
.zsy-t { fill: var(--lc, #2f3d36); font-weight: 600; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.zly-vent :is(.zfxh, .zfl) { stroke: var(--lc); stroke-width: 1.2; }
/* Smarta menyn: ikonlisten (62 px) och panelen (264 px) till vänster på ritytan. Planen byter läge i ett steg när
   panelen öppnas (ingen animerad left); under 1280 px ligger panelen över planen i stället. */
.zb-rail { position: absolute; z-index: 7; top: 10px; bottom: 10px; left: 10px; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 62px; padding: 6px 4px; border: 1px solid #e3e5df; border-radius: 16px; background: rgba(251, 251, 248, 0.96); }
.zb-railbtn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: 54px; height: 50px; border: 0; border-radius: 10px; background: none; font: inherit; color: #4e5751; cursor: pointer; }
.zb-railbtn .material-symbols-outlined { font-size: 21px; font-variation-settings: 'wght' 300; }
.zb-railbtn small { font-size: 10px; letter-spacing: 0.01em; }
.zb-railbtn:hover { background: rgba(31, 107, 79, 0.06); }
.zb-railbtn[aria-expanded="true"] { background: #e6f1ea; color: #1f6b4f; }
.zb-railbtn[aria-expanded="true"]::before { content: ''; position: absolute; left: -4px; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--rail-c, #1f6b4f); }
.zb-railbtn.is-bygg { --rail-c: #1d3a2e; } .zb-railbtn.is-inr { --rail-c: #6b736e; } .zb-railbtn.is-el { --rail-c: #c27803; } .zb-railbtn.is-vvs { --rail-c: #2f6fb3; }
.zb-railbtn.is-forslag { margin-bottom: 6px; } .zb-railbtn.is-forslag::after { content: ''; position: absolute; bottom: -4px; left: 12px; right: 12px; height: 1px; background: #e6e8e3; }
.zb-railbadge { position: absolute; top: 3px; right: 5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #d08a00; font-size: 10px; font-style: normal; line-height: 16px; color: #fff; font-variant-numeric: tabular-nums; }
.zb-panelx { position: absolute; z-index: 6; top: 10px; bottom: 10px; left: 80px; display: flex; flex-direction: column; width: 264px; border: 1px solid #e3e5df; border-radius: 16px; background: #fff; box-shadow: 0 12px 30px -20px rgba(20, 30, 25, 0.35); }
.zb-panelx header { display: flex; align-items: center; gap: 8px; padding: 12px 12px 8px 14px; }
.zb-panelx header b { flex: 1; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #34443b; }
.zb-pdot { width: 7px; height: 7px; border-radius: 50%; background: #1f6b4f; } .zb-pdot.is-bygg { background: #1d3a2e; } .zb-pdot.is-inr { background: #6b736e; } .zb-pdot.is-el { background: #c27803; } .zb-pdot.is-vvs { background: #2f6fb3; } .zb-pdot.is-yt { background: #a0703a; } .zb-pdot.is-matt { background: #a3365a; }
.zb-pclose { width: 28px; height: 28px; border: 0; border-radius: 8px; background: none; font-size: 18px; color: #6b736e; cursor: pointer; }
.zb-pbody { flex: 1; min-height: 0; padding: 0 8px 24px; overflow-y: auto; scrollbar-width: thin; scroll-padding-bottom: 12px;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent); } /* UX varv 1: listan tonar ut mot foten – det finns mer att rulla fram */
.zb-panelx footer { display: flex; align-items: center; gap: 6px; padding: 8px 12px 10px; border-top: 1px solid #eef0ec; font-size: 11px; color: #8a918c; }
.zb-panelx footer .material-symbols-outlined { font-size: 15px; }
.zb-panelx .zb-pitem em { margin-left: auto; font-size: 10.5px; font-style: normal; color: #a3aca6; opacity: 0; } .zb-panelx .zb-pitem:hover em { opacity: 1; }
/* Raderna (prototypen): namnet med specen under, antal på ritningen eller "saknas" till höger. Långa namn får ellips. */
.zb-plbl { display: flex; flex: 1; min-width: 0; flex-direction: column; line-height: 1.25; } .zb-plbl > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zb-pgroup .zb-plbl small { padding: 0; overflow: hidden; font-size: 10.5px; color: #8a918c; text-overflow: ellipsis; white-space: nowrap; }
.zb-pgroup small.zb-pcnt { flex: none; min-width: 18px; padding: 0 2px; font-size: 11px; color: #8a918c; text-align: right; font-variant-numeric: tabular-nums; }
.zb-ptag { flex: none; padding: 1px 7px; border-radius: 999px; background: #fff3d6; font-size: 10px; font-style: normal; color: #8a5a00; }
.zb-pgroup small.zb-pfit { display: flex; align-items: center; gap: 4px; color: #1f6b4f; } .zb-pfit .material-symbols-outlined { font-size: 14px; }
.zb-recent { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 6px 4px; }
.zb-recent button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid #e8ebe6; border-radius: 9px; background: #fff; cursor: pointer; } .zb-recent button:hover { border-color: #cfe0d4; background: #f1f8f3; }
@media (pointer: coarse) { .zb-recent button { width: 44px; height: 44px; } }
.zb-card.is-full .zb-plan.has-panel .zb-planhost { left: 352px; }
@media (max-width: 1279px) { .zb-card.is-full .zb-plan.has-panel .zb-planhost { left: 82px; } } /* smalt: panelen ligger över planen */
.zb-panel-in { animation: zbPanelIn 220ms cubic-bezier(0.215, 0.61, 0.355, 1); } .zb-panel-out { animation: zbPanelIn 160ms reverse ease-in; }
@keyframes zbPanelIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
/* Förslag: Krav (gula kort med källa), Bör, Brukar också finnas (rader). Brickan och siffrorna räknar krav och bör. */
.zb-sug { display: flex; flex-direction: column; gap: 6px; padding: 2px 4px; }
.zb-sugk { margin: 0; font-size: 11px; color: #8a918c; } .zb-sugh { margin: -4px 0 0; font-family: 'Source Serif 4', Georgia, serif; font-size: 20px; color: #1d2420; }
.zb-sugtxt { margin: 0; font-size: 12px; line-height: 1.45; color: #4e5751; }
.zb-suglink { align-self: flex-start; padding: 0; border: 0; background: none; font: inherit; font-size: 12px; color: #1f6b4f; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.zb-sugroom { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 8px; border: 1px solid #eef0ec; border-radius: 10px; background: #fff; font: inherit; text-align: left; cursor: pointer; }
.zb-sugroom:hover { border-color: #cfe3d6; }
.zb-sugroom > span { display: flex; flex: 1; flex-direction: column; min-width: 0; } .zb-sugroom b { font-size: 12.5px; font-weight: 500; color: #1d2420; }
.zb-sugroom small { overflow: hidden; font-size: 11px; color: #8a918c; text-overflow: ellipsis; white-space: nowrap; }
.zb-sugroom i { flex: none; padding: 2px 7px; border-radius: 999px; font-size: 10.5px; font-style: normal; } .zb-sugroom i.is-miss { background: #fff4dc; color: #8a5a00; } .zb-sugroom i.is-ok { background: #e6f1ea; color: #1f6b4f; }
.zb-sugg { margin: 6px 0 2px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #8a918c; }
.zb-sugcard { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; padding: 8px; border: 1px solid #f3e4bd; border-radius: 12px; background: #fff9ea; }
.zb-sugtxt2 { display: flex; flex: 1; flex-direction: column; min-width: 0; } .zb-sugtxt2 b { font-size: 12.5px; font-weight: 500; color: #1d2420; } .zb-sugtxt2 small { font-size: 11px; color: #8a5a00; }
.zb-sugbtns { display: flex; gap: 4px; margin-left: 34px; }
.zb-sugbtns button, .zb-sugrow button { height: 26px; padding: 0 9px; border: 1px solid #e1e3de; border-radius: 8px; background: #fff; font: inherit; font-size: 11.5px; color: #3f4842; cursor: pointer; }
.zb-sugbtns button.is-main { border-color: #1f6b4f; background: #1f6b4f; color: #fff; }
.zb-sugall { min-height: 34px; margin-top: 4px; border: 1px solid #1f6b4f; border-radius: 10px; background: #fff; font: inherit; font-size: 12.5px; color: #1f6b4f; cursor: pointer; }
.zb-sugok { margin: 4px 0; padding: 8px 10px; border-radius: 10px; background: #e6f1ea; font-size: 12px; color: #1f6b4f; }
.zb-sugrow { display: flex; align-items: center; gap: 8px; min-height: 34px; font-size: 12.5px; color: #2f3833; } .zb-sugrow button { margin-left: auto; }
.zb-missn { display: inline-grid; place-items: center; min-width: 16px; height: 16px; margin-left: 4px; padding: 0 4px; border-radius: 8px; background: #d08a00; font-size: 10px; font-style: normal; color: #fff; vertical-align: 1px; }
.zb-hintlink { margin-left: 6px; padding: 0; border: 0; background: none; font: inherit; font-size: inherit; color: #1f6b4f; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
@media (pointer: coarse) { .zb-panelx .zb-pitem, .zb-sugroom, .zb-sugrow { min-height: 44px; } .zb-sugbtns button, .zb-sugrow button { height: 40px; } }
@media (prefers-reduced-motion: reduce) { .zb-panel-in, .zb-panel-out { animation: none; } }
.zb-card.is-full .zb-plan-k { display: none; } /* helskärm: ikonlisten ligger där; lägenhetens namn står i raden uppe */
/* Del 5: ytskikt – väggens ytskikt som linje innanför väggarna, materialrutorna i panelen, placeringsraden. */
.zfin-wall { fill: none; stroke: #a0703a; stroke-width: 1.5; }
.zfin-wall.is-kakel { stroke-width: 3; stroke-dasharray: 7 3; } .zfin-wall.is-malning { stroke-dasharray: 1 3; stroke-linecap: round; } /* prototypens vägglinjer */
.zfin-gap { fill: none; stroke: #a0703a; stroke-width: 1; stroke-dasharray: 4 3; pointer-events: none; } .zfin-gapt { font-size: 10px; fill: #8a5a2b; text-anchor: middle; pointer-events: none; }
.zb-finsw { width: 22px; height: 22px; flex: none; border: 1px solid #d8dcd5; border-radius: 5px; background: #fff; }
.zb-finsw.is-parkett { background: repeating-linear-gradient(0deg, #f2e6d2 0 5px, #dcc7a6 5px 6px); }
.zb-finsw.is-klinker { background-color: #eef0f1; background-image: linear-gradient(#c9cfd2 1px, transparent 1px), linear-gradient(90deg, #c9cfd2 1px, transparent 1px); background-size: 7px 7px; }
.zb-finsw.is-vatrumsmatta { background: radial-gradient(#9fb8cf 1px, transparent 1.5px) 0 0 / 5px 5px, #e3edf5; }
.zb-finsw.is-linoleum { background: #ebe6d9; }
.zb-finsw.is-kakel { background: #fff; border: 1.5px dashed #a0703a; } .zb-finsw.is-malning { background: #fff; border: 1.5px dotted #a0703a; }
.zb-finsw.is-rivgolv { background: repeating-linear-gradient(45deg, #fff 0 3px, rgba(184, 72, 58, 0.55) 3px 4.5px); } .zb-finsw.is-rivvagg { background: #fdf3f1; border: 1.5px dashed #b8483a; }
.zb-panelx .zb-pitem[aria-pressed="true"] { background: #e6f1ea; color: #1f6b4f; }
.zb-sugfin { display: flex; flex-wrap: wrap; gap: 4px; }
.zb-sugfin button { height: 26px; padding: 0 9px; border: 1px solid #e1e3de; border-radius: 999px; background: #fff; font: inherit; font-size: 11.5px; color: #3f4842; cursor: pointer; }
.zb-sugfin button[aria-pressed="true"] { border-color: #1f6b4f; background: #e6f1ea; color: #1f6b4f; }
.zb-placerow { position: absolute; z-index: 8; left: 50%; bottom: 18px; display: flex; align-items: center; gap: 10px; padding: 7px 8px 7px 14px; border-radius: 999px; background: #1d2420; font-size: 12px; color: #e8ece9; transform: translateX(-50%); box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.5); white-space: nowrap; }
.zb-placerow b { font-weight: 600; color: #fff; } .zb-placerow span { color: #b9c2bc; }
.zb-placerow button { height: 26px; padding: 0 12px; border: 0; border-radius: 999px; background: #2fbf71; font: inherit; font-size: 12px; font-weight: 600; color: #0f2a1d; cursor: pointer; }
.zb-placerow kbd { padding: 1px 5px; border: 1px solid #4e5751; border-radius: 4px; font: inherit; font-size: 10.5px; color: #b9c2bc; }
@media (pointer: coarse) { .zb-placerow button { height: 44px; } .zb-sugfin button { height: 40px; } }
.zb-finsw.is-pen\:nytt { background: repeating-linear-gradient(45deg, #fff 0 3px, #1d3a2e 3px 4px); border-color: #1d3a2e; }
.zb-finsw.is-pen\:bef { background: #fff; border-color: #6b736e; } .zb-finsw.is-pen\:rivs { background: #fff; border: 1.5px dashed #c0392b; }
/* Del 5: måttlinjer och anteckningar (lagret Mått, #a3365a). */
.zmk-dim line { stroke: #a3365a; stroke-width: 1.1; } .zmk-dim text { font-size: 11px; fill: #a3365a; paint-order: stroke; stroke: #fff; stroke-width: 3px; font-variant-numeric: tabular-nums; }
.zmk-dim .zmk-hit { stroke: transparent; stroke-width: 16; cursor: pointer; } .zmk-dim.is-sel line:not(.zmk-hit) { stroke-width: 2; }
.zmk-note circle { fill: #a3365a; stroke: #fff; stroke-width: 1.5; cursor: pointer; } .zmk-note text { font-size: 10px; font-weight: 600; fill: #fff; pointer-events: none; }
.zmk-note.is-sel circle { stroke: #1d2420; stroke-width: 2; } .zmk-start { fill: #a3365a; }
.zb-placerow.is-edit input { width: 260px; height: 28px; padding: 0 10px; border: 0; border-radius: 999px; font: inherit; font-size: 12px; }
.zb-placerow.is-edit .is-del { background: #3a2321; color: #ffb3a8; }
@media (pointer: coarse) { .zmk-dim .zmk-hit { stroke-width: 44; } .zb-placerow.is-edit input { height: 44px; font-size: 16px; } }
.zb-placerow.is-edit input { color: #1d2420; } .zb-placerow.is-edit input::placeholder { color: #8a918c; }
.zb-card.is-full .zb-plan.has-panel .zb-placerow, .zb-card.is-full .zb-plan.has-panel .zb-penbar { left: calc(50% + 172px); } /* mitt på ritytan bredvid panelen */
@media (max-width: 1279px) { .zb-card.is-full .zb-plan.has-panel .zb-placerow, .zb-card.is-full .zb-plan.has-panel .zb-penbar { left: calc(50% + 172px); } }
/* Del 6: sök, lager och nedtoning. Lagren styrs med klasser på ritytan (zly-* på föremål, ytskikt och mått). */
.zb-railsp { flex: 1; }
.zb-raildot { position: absolute; top: 6px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: #d08a00; }
.zb-psearch { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 6px; height: 34px; margin: 0 2px 8px; padding: 0 8px; border: 1px solid #e1e3de; border-radius: 10px; background: #fff; }
.zb-psearch .material-symbols-outlined { font-size: 17px; color: #8a918c; }
.zb-psearch input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; font: inherit; font-size: 12.5px; outline: none; }
.zb-psearch kbd { padding: 0 5px; border: 1px solid #e1e3de; border-radius: 4px; font: inherit; font-size: 10.5px; color: #8a918c; }
.zb-shit { display: flex; flex-direction: column; text-align: left; } .zb-shit small { font-size: 10.5px; color: #8a918c; }
.zb-panelx .zb-pitem.is-hi { background: #e6f1ea; }
.zb-laybox { position: absolute; z-index: 9; left: 80px; bottom: 10px; width: 250px; padding: 6px 10px 10px; border: 1px solid #e3e5df; border-radius: 14px; background: #fff; box-shadow: 0 12px 30px -20px rgba(20, 30, 25, 0.35); }
.zb-laybox.is-beside { left: 352px; }
.zb-laybox header { display: flex; align-items: center; justify-content: space-between; padding: 4px 0 6px; } .zb-laybox header b { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #34443b; }
.zb-layrow { display: flex; align-items: center; gap: 8px; min-height: 32px; font-size: 12.5px; color: #2f3833; }
.zb-layrow i { width: 12px; height: 12px; flex: none; border-radius: 3px; } .zb-layrow span { flex: 1; } .zb-layrow small { font-size: 11px; color: #8a918c; font-variant-numeric: tabular-nums; }
.zb-layrow button { width: 30px; height: 28px; border: 0; border-radius: 8px; background: none; color: #4e5751; cursor: pointer; } .zb-layrow button .material-symbols-outlined { font-size: 18px; }
.zb-layrow.is-off { color: #a3aca6; } .zb-layrow.is-off i { opacity: 0.35; }
.zb-layswitch input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: #1f6b4f; appearance: auto; -webkit-appearance: checkbox; } /* var 2×2 px (appearance: none utan mått) */
.zb-layswitch { min-height: 28px; display: flex; align-items: center; gap: 8px; margin-top: 6px; padding-top: 8px; border-top: 1px solid #eef0ec; font-size: 12px; color: #4e5751; }
.zb-planhost.lay-off-inr .zly-inr, .zb-planhost.lay-off-el .zly-el, .zb-planhost.lay-off-vvs .zly-vvs, .zb-planhost.lay-off-vent .zly-vent, .zb-planhost.lay-off-bygg .zly-bygg,
.zb-planhost.lay-off-yt .zly-yt, .zb-planhost.lay-off-matt .zly-matt,
.zb-planhost.lay-off-bygg .zdoor, .zb-planhost.lay-off-bygg .zdoor-hit, .zb-planhost.lay-off-bygg .zwin, .zb-planhost.lay-off-bygg .zwinf, .zb-planhost.lay-off-bygg .zwing, .zb-planhost.lay-off-bygg .zwin-hit { display: none; }
/* Kategorin som är öppen står i full kontrast, resten tonas ned (el, VVS och ventilation mindre än inredningen, så de
   små symbolerna inte försvinner). Byte av kategori tonar på 200 ms; utan rörelse direkt. */
.zb-planhost [class*="zly-"] { transition: opacity 200ms cubic-bezier(0.215, 0.61, 0.355, 1); }
.zb-planhost.lay-focus [class*="zly-"] { opacity: 0.28; }
.zb-planhost.lay-focus :is(.zly-el, .zly-vvs, .zly-vent, .zly-yt) { opacity: 0.45; }
.zb-planhost.lay-focus.lay-f-inr .zly-inr, .zb-planhost.lay-focus.lay-f-el .zly-el, .zb-planhost.lay-focus.lay-f-vvs .zly-vvs, .zb-planhost.lay-focus.lay-f-vent .zly-vent,
.zb-planhost.lay-focus.lay-f-bygg .zly-bygg, .zb-planhost.lay-focus.lay-f-matt .zly-matt, .zb-planhost.lay-focus.lay-f-yt .zly-yt { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .zb-planhost [class*="zly-"] { transition: none; } }
@media (pointer: coarse) { .zb-layrow { min-height: 44px; } .zb-layrow button { width: 44px; height: 44px; } .zb-psearch { height: 44px; } .zb-psearch input { font-size: 16px; } }