/* Projektsidan: huvud + stepper, rumsraderna, rumsväljaren och mall-jämförelsen.
   Samma papper som listorna. Mobil: allt stackar, ark blir helskärm. */
:root { --pj-ink: #17211a; --pj-ink-2: #35493d; --pj-muted: #6b7a70; --pj-faint: #9fb3a6; --pj-line: #e3e8e2; --pj-line-2: #eef1ec; --pj-leaf: #3a8874; --pj-leaf-dark: #2f6f5c; --pj-ok-2: #e5f3ea; --pj-warn: #b7791f; --pj-warn-2: #fbf3e3; --pj-sent: #3b6fb0; --pj-sent-2: #e8f0fa; }
.project-shell { --pj-ink: #17211a; --pj-ink-2: #35493d; --pj-muted: #6b7a70; --pj-faint: #9fb3a6; --pj-line: #e3e8e2; --pj-line-2: #eef1ec; --pj-leaf: #3a8874; --pj-leaf-dark: #2f6f5c; --pj-ok-2: #e5f3ea; --pj-warn: #b7791f; --pj-warn-2: #fbf3e3; --pj-sent: #3b6fb0; --pj-sent-2: #e8f0fa; color: var(--pj-ink); padding: 1rem 1rem 7rem; }
.project-frame { max-width: 1180px; margin: 0 auto; display: grid; gap: 14px; }
.pcrumb-block { display: grid; gap: 2px; margin-bottom: -6px; }
.project-frame > * { min-width: 0; }
.pstepper, .rhub, .rhub-list, .roomcard { min-width: 0; }
@media (min-width: 1024px) { .project-shell { padding: 0; } }

/* ── Huvud ── */
.phead { border-radius: 18px; background: rgba(255, 255, 255, 0.82); border: 1px solid rgba(255, 255, 255, 0.85); box-shadow: 0 24px 60px -40px rgba(60, 40, 10, 0.5); }
.phead-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 16px 18px; }
.phead-pic { position: relative; }
.phead-pic__btn { display: block; width: 120px; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: #eef3e9; position: relative; }
.phead-pic__btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Pennan står alltid synlig: bilden (hus, lägenhet, annat) går att byta. */
.phead-pic__edit { position: absolute; right: 6px; bottom: 6px; width: 24px; height: 24px; border-radius: 999px; background: rgba(255, 255, 255, 0.94); color: var(--pj-ink); font-size: 14px !important; display: grid; place-items: center; box-shadow: 0 1px 3px rgba(23, 33, 26, 0.16); }
.phead-pic__btn:hover .phead-pic__edit, .phead-pic__btn:focus-visible .phead-pic__edit { background: #fff; }
.phead-pick { position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; width: 320px; padding: 12px; border-radius: 14px; background: #fff; border: 1px solid var(--pj-line); box-shadow: 0 30px 60px -30px rgba(20, 40, 30, 0.5); }
.phead-pick p { margin: 0 0 8px; font-size: 12.5px; color: var(--pj-muted); }
.phead-pick__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.phead-pick__grid button { display: grid; gap: 4px; padding: 5px; border-radius: 10px; border: 1px solid var(--pj-line-2); background: #fbfcfb; font-size: 12px; text-align: center; color: var(--pj-ink); width: 100%; }
.phead-pick__grid button img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 7px; }
.phead-pick__grid button:hover { border-color: #cfe3d8; background: #fff; }
.phead-pick__grid button.is-active { border-color: var(--pj-leaf); box-shadow: inset 0 0 0 1px var(--pj-leaf); background: var(--pj-ok-2); }
.phead-pick__none { margin-top: 8px; font-size: 12px; color: var(--pj-muted); }
.phead-pick__none:hover { color: var(--pj-ink); }
.phead-text { min-width: 0; }
.phead-kicker { display: flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #3a6e5c; }
.phead-chip { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 11px; letter-spacing: 0; text-transform: none; background: var(--pj-line-2); color: var(--pj-muted); }
.phead-chip.is-emerald { background: var(--pj-ok-2); color: var(--pj-leaf-dark); }
.phead-chip.is-sky { background: var(--pj-sent-2); color: var(--pj-sent); }
.phead-chip.is-amber { background: var(--pj-warn-2); color: var(--pj-warn); }
.phead h1 { margin: 4px 0 0; font-family: Outfit, Inter, ui-sans-serif, system-ui, sans-serif; font-size: 22px; font-weight: 500; letter-spacing: -0.01em; overflow-wrap: anywhere; }
/* Namn och kund ändras på plats i huvudet. */
.phead-name { margin: 0; }
.phead-name__btn { display: inline-flex; align-items: center; gap: 6px; padding: 0 4px; margin-left: -4px; border: 0; border-radius: 8px; background: none; font: inherit; color: inherit; cursor: text; text-align: left; }
.phead-name__btn .material-symbols-outlined { font-size: 16px; color: var(--pj-faint); opacity: 0; transition: opacity 120ms ease; }
.phead-name__btn:hover .material-symbols-outlined, .phead-name__btn:focus-visible .material-symbols-outlined { opacity: 1; }
.phead-name__btn:hover { background: rgba(23, 33, 26, 0.04); }
.phead-name input[name="name"] { margin: 4px 0 0; width: min(100%, 420px); padding: 2px 6px; border: 1px solid var(--pj-leaf); border-radius: 8px; font-family: Outfit, Inter, ui-sans-serif, system-ui, sans-serif; font-size: 22px; font-weight: 500; letter-spacing: -0.01em; background: #fff; }
.phead-sub { position: relative; margin: 4px 0 0; font-size: 12.5px; color: var(--pj-muted); }
.phead-sub__btn { padding: 0; border: 0; background: none; font: inherit; color: var(--pj-ink-2); cursor: pointer; border-bottom: 1px solid rgba(58, 136, 116, 0.4); }
.phead-sub__btn:hover { color: var(--pj-leaf-dark); border-bottom-color: var(--pj-leaf-dark); }
/* Kunden i huvudet: läsläge (ring, mejla, arbetsplats) och redigering i samma ruta. */
.phead-sub__btn.is-empty { display: inline-flex; align-items: center; gap: 4px; color: var(--pj-leaf-dark); border-bottom-style: dashed; }
.phead-sub__btn.is-empty .material-symbols-outlined { font-size: 16px; }
.phead-sub__warn { margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: #fbf1e1; color: #8a5413; font-size: 10.5px; vertical-align: 1px; }
.phead-sub__addr { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.phead-sub__addr:hover { color: var(--pj-ink); }
.phead-contact { width: 360px; display: block; padding: 0; overflow: hidden; }
.phead-contact-backdrop-motion { transition: opacity 180ms cubic-bezier(0.25, 1, 0.5, 1); }
.phead-contact-backdrop-from { opacity: 0; }
.phead-contact-backdrop-to { opacity: 1; }
.phead-contact__panel { display: grid; }
.phead-contact__head { display: flex; align-items: center; gap: 6px; padding: 12px 10px 8px 16px; }
.phead-contact__head strong { flex: 1; font-size: 13.5px; font-weight: 500; color: var(--pj-ink); }
.phead-contact__edit { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border: 1px solid var(--pj-line); border-radius: 8px; background: #fff; font: inherit; font-size: 12.5px; color: var(--pj-ink-2); cursor: pointer; }
.phead-contact__edit .material-symbols-outlined { font-size: 15px; }
.phead-contact__edit:hover { border-color: var(--pj-leaf); color: var(--pj-leaf-dark); }
.phead-contact__close { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--pj-muted); cursor: pointer; }
.phead-contact__close:hover { background: rgba(23, 33, 26, 0.06); color: var(--pj-ink); }
.phead-contact__close .material-symbols-outlined { font-size: 18px; }
.phead-contact__view { padding: 0 8px 8px; }
.phead-contact__name { display: flex; align-items: center; gap: 10px; margin: 0 8px 8px; font-size: 15px; color: var(--pj-ink); }
.phead-contact__name b { font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.phead-contact__av { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #e6efe9; color: var(--pj-leaf-dark); font-size: 13px; font-weight: 500; }
.phead-contact__rows { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.phead-contact__rows :is(a, button) { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 6px 8px; border: 0; border-radius: 10px; background: transparent; font: inherit; font-size: 13px; color: var(--pj-ink); text-align: left; text-decoration: none; cursor: pointer; }
.phead-contact__rows :is(a, button):hover { background: #f3f6f2; }
.phead-contact__rows .material-symbols-outlined { font-size: 18px; color: var(--pj-leaf-dark); }
.phead-contact__rows span:not(.material-symbols-outlined) { min-width: 0; overflow-wrap: anywhere; }
.phead-contact__rows em { display: block; font-style: normal; font-size: 11px; color: var(--pj-muted); }
.phead-contact__rows small { font-size: 11.5px; color: var(--pj-muted); }
.phead-contact__rows .is-missing { color: var(--pj-muted); }
.phead-contact__rows .is-missing .material-symbols-outlined { color: var(--pj-faint); }
.phead-contact__rows .is-warn { color: #8a5413; }
.phead-contact__rows .is-warn .material-symbols-outlined { color: #c98a2b; }
.phead-contact__form { display: grid; gap: 14px; padding: 0 16px 14px; }
.phead-contact__form fieldset { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.phead-contact__form legend { margin-bottom: 6px; padding: 0; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pj-muted); }
.phead-contact__form label { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); align-items: center; gap: 10px; font-size: 12.5px; color: var(--pj-muted); }
.phead-contact__field { display: grid; gap: 4px; min-width: 0; }
.phead-contact input { width: 100%; min-width: 0; height: 32px; padding: 0 10px; border: 1px solid var(--pj-line); border-radius: 8px; background: #fff; font: inherit; font-size: 13px; color: var(--pj-ink); }
.phead-contact input:focus { outline: none; border-color: var(--pj-leaf); box-shadow: 0 0 0 3px rgba(58, 136, 116, 0.12); }
.phead-contact input[aria-invalid="true"] { border-color: #c76860; }
.phead-contact__hint { margin: -3px 0 0 calc(4.75rem + 10px); font-size: 11.5px; line-height: 1.35; color: var(--pj-muted); }
/* Postnr och ort på en rad, med en gemensam etikett. */
.phead-contact__row { display: grid; grid-template-columns: 4.75rem 5.5rem minmax(0, 1fr); align-items: center; gap: 10px 8px; }
.phead-contact__row label { display: contents; }
.phead-contact__row label + label > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.phead-contact__acts { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.phead-contact__cancel { height: 32px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: 12.5px; color: var(--pj-muted); cursor: pointer; }
.phead-contact__cancel:hover { background: rgba(23, 33, 26, 0.05); color: var(--pj-ink); }
.phead-contact__err { font-size: 12px; line-height: 1.35; color: #b42318; }
.phead-contact__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 38px; padding: 8px 16px; border-top: 1px solid var(--pj-line-2); background: #f8faf8; font-size: 12px; color: var(--pj-muted); }
.phead-contact__foot form { display: inline; }
.phead-contact__foot button, .phead-contact__foot a { padding: 0; border: 0; background: none; font: inherit; color: var(--pj-leaf-dark); text-decoration: none; cursor: pointer; }
.phead-contact__foot a { display: inline-flex; align-items: center; gap: 2px; }
.phead-contact__foot a .material-symbols-outlined { font-size: 15px; }
.phead-contact__foot button:hover, .phead-contact__foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
.phead-sub a { color: var(--pj-ink-2); text-decoration: none; border-bottom: 1px solid rgba(58, 136, 116, 0.4); }
.phead-sub .phead-contact a { border-bottom: 0; color: inherit; }
.phead-sub .phead-contact__foot a { color: var(--pj-leaf-dark); }
/* Ansvarig i huvudet: liten avatar + namn, listan över kollegor bakom. */
.phead-who { position: relative; display: inline-flex; }
.phead-who__btn { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: inherit; color: var(--pj-ink-2); cursor: pointer; }
.phead-who__btn:hover .phead-who__name { text-decoration: underline; }
.phead-avatar { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; background: var(--pj-leaf-dark); color: #fff; font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em; flex: none; }
.phead-assign { width: 280px; display: grid; gap: 2px; }
.phead-assign form { display: contents; }
.phead-assign__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: 0; border-radius: 10px; background: transparent; font: inherit; text-align: left; color: var(--pj-ink); cursor: pointer; }
.phead-assign__row:hover { background: #f2f5ef; } .phead-assign__row.on { background: #eef3ea; }
.phead-assign__row .phead-avatar { width: 28px; height: 28px; font-size: 11px; }
.phead-assign__row b { display: block; font-weight: 500; font-size: 13px; } .phead-assign__row small { display: block; font-size: 11.5px; color: var(--pj-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phead-assign__row .material-symbols-outlined { font-size: 18px; color: var(--pj-leaf-dark); }
.phead-assign__note { padding: 6px 8px 2px; font-size: 11.5px; color: var(--pj-muted); }
.phead-sub .dot { margin: 0 6px; color: var(--pj-faint); }
.phead-kr { display: grid; justify-items: end; gap: 2px; text-align: right; }
.phead-kr > b { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.phead-kr > small { font-size: 11px; color: var(--pj-muted); }
.phead-btn { display: inline-flex; align-items: center; gap: 6px; height: 40px; margin-top: 8px; padding: 0 16px; border-radius: 10px; background: var(--pj-leaf-dark); color: #fff; font: inherit; font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.phead-btn:hover { background: #27604f; color: #fff; }
.phead-btn .material-symbols-outlined { font-size: 16px; }

/* ── Stepper ── */
.pstepper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; border-top: 1px solid var(--pj-line-2); }
.pstep { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 14px; color: var(--pj-ink); text-decoration: none; border-right: 1px solid var(--pj-line-2); position: relative; }
.pstep:last-child { border-right: 0; }
.pstep .pnum { width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; font-size: 12px; background: var(--pj-line-2); color: var(--pj-muted); flex: none; }
.pstep .pnum .material-symbols-outlined { font-size: 15px; }
.pstep.done .pnum { background: var(--pj-leaf-dark); color: #fff; }
.pstep.live .pnum { background: var(--pj-ok-2); color: var(--pj-leaf-dark); }
.pstep .ptext { display: grid; min-width: 0; }
.pstep .ptext b { font-size: 13px; font-weight: 500; }
.pstep .ptext small { font-size: 11px; color: var(--pj-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pstep:hover { background: rgba(255, 255, 255, 0.6); }
.pstep.on::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; background: var(--pj-ink); border-radius: 2px; }
.pstep.on .pnum { background: var(--pj-ink); color: #fff; }
.pstep.is-locked { font: inherit; background: transparent; border-left: 0; border-top: 0; border-bottom: 0; color: var(--pj-faint); cursor: default; }
.pstep.is-locked .pnum { background: transparent; border: 1px dashed var(--pj-line); color: var(--pj-faint); } .pstep.is-locked .pnum .material-symbols-outlined { font-size: 13px; }
.pstep.is-locked .ptext small { color: var(--pj-faint); }
.pstep.is-locked:hover { background: rgba(255, 255, 255, 0.35); }
.pstep.more { justify-content: center; padding: 0 12px; }
.pstep.more.on .material-symbols-outlined { color: var(--pj-ink); }
.mod-body { padding: 4px 18px 16px; }
.mod-empty { margin: 0; padding: 12px 6px 16px; font-size: 12.5px; color: var(--pj-muted); }
.kvl { margin: 0; padding: 0 18px 12px; }
.kvl div { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--pj-line-2); }
.kvl div:first-child { border-top: 0; }
.kvl dt { font-size: 12px; color: var(--pj-muted); }
.kvl dd { margin: 0; font-size: 13px; white-space: pre-line; overflow-wrap: anywhere; }
.row.is-danger .ri { background: #fbeceb; color: #b4453a; }
.row.is-danger strong { color: #b4453a; }
.row.is-muted strong, .row.is-muted small { color: var(--pj-muted); }
.row form { display: contents; }
.mod-head .kbtn + .kbtn { margin-left: 4px; }
@media (max-width: 720px) { .kvl div { grid-template-columns: 1fr; gap: 2px; } }
.pstep.more summary { list-style: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; color: var(--pj-muted); cursor: pointer; }
.pstep.more summary::-webkit-details-marker { display: none; }
.pstep.more summary:hover { background: var(--pj-line-2); color: var(--pj-ink); }
.pstep-menu { position: absolute; right: 8px; top: calc(100% - 4px); z-index: 30; width: 220px; padding: 6px; border-radius: 12px; background: #fff; border: 1px solid var(--pj-line); box-shadow: 0 24px 50px -24px rgba(20, 40, 30, 0.45); display: grid; }
.pstep-menu a { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 10px; border-radius: 8px; font-size: 13px; color: var(--pj-ink); text-decoration: none; }
.pstep-menu a:hover { background: var(--pj-line-2); }
.pstep-menu a .material-symbols-outlined { font-size: 18px; color: var(--pj-muted); }
.pstep-menu a.is-danger { color: #b91c1c; }

/* ── Rum-fliken ── */
.rhub { border-radius: 18px; background: rgba(255, 255, 255, 0.82); border: 1px solid rgba(255, 255, 255, 0.85); box-shadow: 0 24px 60px -40px rgba(60, 40, 10, 0.5); padding: 14px 18px 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.rhub-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 10px; background: var(--pj-leaf-dark); color: #fff; font: inherit; font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.rhub-btn:hover { background: #27604f; color: #fff; }
.rhub-btn:disabled { opacity: 0.5; cursor: default; }
.rhub-btn.is-ghost { background: #fff; color: var(--pj-ink); border: 1px solid var(--pj-line); }
.rhub-btn.is-ghost:hover { background: #eef5ec; border-color: #cfe3d8; }
.rhub-btn .material-symbols-outlined { font-size: 17px; }
.rhub-error { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--pj-warn-2); color: var(--pj-warn); font-size: 12.5px; }
.rhub-error .material-symbols-outlined { font-size: 18px; }
.rhub-area { padding: 10px 12px; border: 1px solid var(--pj-line); border-radius: 10px; font-size: .82rem; line-height: 1.45; font-weight: 400; overflow-wrap: anywhere; }
.rhub-area p { margin: 0 0 6px; }
.rhub-area p:last-child { margin-bottom: 0; }
.rhub-area-meta, .rhub-area details { color: var(--pj-muted); }
.rhub-area summary { cursor: pointer; min-height: 36px; display: list-item; align-content: center; }
.rhub-area details[open] summary { margin-bottom: 6px; }
.rhub-head { display: flex; align-items: flex-start; gap: 10px; }
.rhub-head > div { flex: 1; min-width: 0; }
.rhub-head .mod-icon { width: 34px; height: 34px; border-radius: 10px; background: #eef3e9; color: #3a6e5c; display: grid; place-items: center; font-size: 18px; margin-top: 4px; }
.rhub-kicker { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #3a6e5c; }
.rhub-head h2 { margin: 2px 0 0; font-family: Outfit, Inter, ui-sans-serif, system-ui, sans-serif; font-size: 18px; font-weight: 500; }
.rhub-head p { margin: 2px 0 0; font-size: 12.5px; color: var(--pj-muted); }
/* Rummen som kompakta kort: bild, namn, mått, mall, status – fyra i bredd i stället för en rad per rum. */
.rhub-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.roomcard { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 10px 10px 10px; border: 1px solid var(--pj-line); border-radius: 14px; background: #fff; }
.roomcard.is-missing { border-color: #f0dfc0; background: linear-gradient(180deg, #fffaf1, #fff 45%); }
.roomcard-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 9px; background: #eef3e9; }
.roomcard-x { position: absolute; top: 14px; right: 14px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.9); color: var(--pj-muted); opacity: 0; transition: opacity 120ms ease; }
.roomcard:hover .roomcard-x, .roomcard:focus-within .roomcard-x { opacity: 1; }
.roomcard-x:hover { color: #b91c1c; background: #fff; }
.roomcard-x .material-symbols-outlined { font-size: 16px; }
.roomcard-name { height: 30px; min-width: 0; margin: 2px -6px 0; padding: 0 6px; border: 1px solid transparent; border-radius: 7px; background: transparent; font: inherit; font-size: 14px; font-weight: 500; color: var(--pj-ink); }
.roomcard-name:hover { border-color: var(--pj-line); }
.roomcard-name:focus { outline: 0; border-color: var(--pj-leaf); box-shadow: 0 0 0 3px rgba(58, 136, 116, 0.15); }
/* Fälten läses som text ("51,9 m²") och blir fält först när man rör dem. */
.roomcard-fields { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: -2px -6px 0; }
.roomcard-fields label { display: inline-flex; align-items: baseline; gap: 3px; padding: 0 6px; border: 1px solid transparent; border-radius: 7px; }
.roomcard-fields label:hover { border-color: var(--pj-line); }
.roomcard-fields label:focus-within { border-color: var(--pj-leaf); box-shadow: 0 0 0 3px rgba(58, 136, 116, 0.15); background: #fff; }
.roomcard-fields input { width: 3.2em; height: 28px; padding: 0; border: 0; background: transparent; font: inherit; font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--pj-ink); text-align: right; }
.roomcard-fields input:focus { outline: 0; }
.roomcard-fields input::placeholder { color: var(--pj-faint); }
.roomcard-fields span { font-size: 11.5px; color: var(--pj-muted); white-space: nowrap; }
.roomcard.is-missing .roomcard-fields label:first-child { border-color: #f0dfc0; background: #fbf3e3; }
.roomcard-level { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 6px 0 8px; border: 1px solid var(--pj-line); border-radius: 8px; background: #fff; font: inherit; font-size: 12.5px; color: var(--pj-ink); white-space: nowrap; min-width: 0; }
.roomcard-level__label { overflow: hidden; text-overflow: ellipsis; }
.roomcard-level .material-symbols-outlined { font-size: 15px; color: var(--pj-muted); flex: none; }
.roomcard-level:hover { border-color: var(--pj-leaf); background: var(--pj-ok-2); }
.roomcard-level.is-static { border-style: dashed; color: var(--pj-muted); }
.roomcard-assumed { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; padding: 5px 8px; border-radius: 9px; background: #fbf5e6; font-size: 11.5px; color: #7a5a12; min-width: 0; }
.roomcard-assumed .material-symbols-outlined { font-size: 14px; color: #c9962b; flex: none; }
.roomcard-assumed > span:not(.material-symbols-outlined) { flex: 1; min-width: 0; line-height: 1.25; }
.roomcard-confirm { flex: none; height: 24px; padding: 0 9px; border-radius: 999px; border: 1px solid #e3cf9a; background: #fff; font: inherit; font-size: 11.5px; font-weight: 500; color: #7a5a12; cursor: pointer; }
.roomcard-confirm:hover { background: #fff8e8; border-color: #c9962b; }
.roomcard-state.is-assumed { color: var(--pj-ink); } .roomcard-state.is-assumed i { background: #c9962b; }
.roomcard-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin-top: 2px; min-width: 0; }
.roomcard-state { display: inline-flex; align-items: center; gap: 5px; min-width: 0; font-size: 12px; color: var(--pj-muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.roomcard-state i { width: 7px; height: 7px; border-radius: 50%; background: #d9e1d9; flex: none; }
.roomcard-state.is-ok { color: var(--pj-ink); } .roomcard-state.is-ok i { background: var(--pj-leaf); }
.roomcard-state.is-warn { color: var(--pj-warn); } .roomcard-state.is-warn i { background: var(--pj-warn); }
.roomcard-open { display: inline-flex; align-items: center; gap: 2px; height: 28px; padding: 0 8px; border-radius: 7px; border: 1px solid var(--pj-line); background: #fff; font-size: 12px; font-weight: 500; color: var(--pj-ink); text-decoration: none; white-space: nowrap; flex: none; }
.roomcard-open:hover { border-color: #cfe3d8; background: #eef5ec; }
.roomcard-open .material-symbols-outlined { font-size: 14px; }
/* Spökkort: rum som analysen hittat men inte sparat än. */
.roomcard.is-ghost { border-style: dashed; background: #fbfcfb; }
.roomcard.is-ghost.is-new { animation: roomcard-in 260ms ease-out both; }
@keyframes roomcard-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .roomcard.is-ghost.is-new { animation: none; } }
.roomcard.is-ghost .roomcard-img { opacity: 0.7; }
.roomcard-name.is-text { display: flex; align-items: center; }
.roomcard-ghostarea { font-size: 13.5px; color: var(--pj-ink); font-variant-numeric: tabular-nums; padding: 0 6px; line-height: 28px; }
.roomcard.is-ghost .roomcard-state i { background: var(--pj-leaf); animation: rhub-pulse 1.2s ease-in-out infinite; }
@keyframes rhub-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .roomcard.is-ghost .roomcard-state i { animation: none; } }
.rhub-empty { padding: 14px 6px; font-size: 13px; color: var(--pj-muted); }
.rhub-planhint { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; border: 1px dashed #cfe3d8; background: #f7faf6; }
.rhub-planhint > .material-symbols-outlined { font-size: 22px; color: var(--pj-leaf-dark); }
.rhub-planhint b { display: block; font-size: 13px; font-weight: 500; }
.rhub-planhint small { display: block; color: var(--pj-muted); font-size: 12px; }
.rhub-planhint.is-attachment { border-style: solid; background: #fff; }
.rhub-planthumb { width: 56px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; border: 1px solid var(--pj-line); background: #fff; }
.rhub-planhint .rhub-kicker { display: block; }
.rhub-planacts { display: inline-flex; gap: 6px; }
.rhub-planacts .rhub-btn { text-decoration: none; }

/* ── Lägg till rum ── */
.rpick-veil, .mall-veil { position: fixed; inset: 0 var(--zimla-ai-panel-inset, 0px) 0 0; z-index: 60; display: grid; place-items: center; padding: 20px; background: rgba(20, 40, 30, 0.28); backdrop-filter: blur(3px); }
.rpick { width: min(760px, 100%); max-height: calc(100dvh - 40px); display: flex; flex-direction: column; background: #fff; border-radius: 18px; box-shadow: 0 30px 80px -30px rgba(20, 40, 30, 0.5); overflow: hidden; }
.rpick-h, .mall-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 18px 18px 12px; }
.rpick-h h2, .mall-h h2 { margin: 0; font-family: Outfit, Inter, ui-sans-serif, system-ui, sans-serif; font-size: 20px; font-weight: 500; }
.rpick-h p, .mall-h p { margin: 2px 0 0; font-size: 12.5px; color: var(--pj-muted); }
.rpick-x, .mall-x { width: 36px; height: 36px; border-radius: 999px; background: var(--pj-line-2); display: grid; place-items: center; color: var(--pj-muted); flex: none; }
.rpick-body { flex: 1; min-height: 0; overflow: auto; padding: 0 18px 8px; display: grid; gap: 10px; align-content: start; }
.rpick-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.rpick-card { position: relative; display: grid; gap: 6px; padding: 6px; border-radius: 12px; border: 1px solid var(--pj-line-2); background: #fbfcfb; text-align: center; font-size: 12px; font-weight: 500; color: var(--pj-ink); }
.rpick-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.rpick-card i { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border-radius: 999px; background: var(--pj-ink); color: #fff; display: grid; place-items: center; font-size: 16px; opacity: 0.55; }
.rpick-card:hover { border-color: #cfe3d8; background: #fff; }
.rpick-card:hover i { opacity: 1; }
.rpick-list { display: grid; gap: 6px; }
.rpick-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto auto 32px; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: #f7faf6; }
.rpick-row img { width: 44px; height: 33px; object-fit: cover; border-radius: 6px; }
.rpick-row input[type="text"], .rpick-row select { height: 36px; border: 1px solid var(--pj-line); border-radius: 8px; padding: 0 8px; font: inherit; font-size: 13px; background: #fff; min-width: 0; }
.rpick-row label { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--pj-muted); white-space: nowrap; }
.rpick-row label input { width: 64px; text-align: right; }
.rpick-empty { margin: 0; padding: 8px 4px; font-size: 12.5px; color: var(--pj-muted); }
.rpick-f, .mall-f { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px 16px; border-top: 1px solid var(--pj-line-2); font-size: 12px; color: var(--pj-muted); }

/* ── Mall-jämförelsen ── */
.mall { width: min(1100px, 100%); max-height: calc(100dvh - 40px); display: flex; flex-direction: column; background: #fff; border-radius: 18px; box-shadow: 0 30px 80px -30px rgba(20, 40, 30, 0.5); overflow: hidden; }
.mall-note { margin: 0; padding: 8px 18px 20px; font-size: 13px; color: var(--pj-muted); }
.mall-scroll { flex: 1; min-height: 0; overflow: auto; padding: 0 18px 12px; }
.mall-grid { display: grid; grid-template-columns: minmax(190px, 1.2fr) repeat(var(--mall-cols, 4), minmax(150px, 1fr)); min-width: 720px; }
.mall-head { position: sticky; top: 0; z-index: 2; background: #fff; padding: 10px 12px 12px; border-bottom: 1px solid var(--pj-line); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.mall-head.corner { justify-content: flex-end; color: var(--pj-muted); font-size: 12px; }
.mall-head > b { font-size: 16px; font-weight: 500; }
.mall-head.is-none > b { color: var(--pj-muted); }
.mall-head p { margin: 0; font-size: 12px; color: var(--pj-muted); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mall-head.is-cur { background: var(--pj-ok-2); border-radius: 12px 12px 0 0; }
.mall-head.is-now { background: #f7f8f7; border-radius: 12px 12px 0 0; }
.mall-sum b { display: block; font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums; }
.mall-sum small { color: var(--pj-muted); font-size: 11.5px; }
.mall-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: var(--pj-ok-2); color: var(--pj-leaf-dark); font-size: 11px; }
.mall-chip .material-symbols-outlined { font-size: 13px; }
.mall-chip.is-gray { background: var(--pj-line-2); color: var(--pj-muted); }
.mall-chip.is-warn { background: var(--pj-warn-2); color: var(--pj-warn); }
.mall-g { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; padding: 14px 12px 4px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #3a6e5c; }
.mall-g span { font-size: 11px; letter-spacing: 0; text-transform: none; color: var(--pj-faint); padding-left: 12px; font-variant-numeric: tabular-nums; }
.mall-m { padding: 9px 12px; border-top: 1px solid var(--pj-line-2); position: sticky; left: 0; background: #fff; }
.mall-m b { display: block; font-weight: 500; font-size: 13.5px; }
.mcell { display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 9px 12px; border-top: 1px solid var(--pj-line-2); border-left: 1px solid var(--pj-line-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.mcell b { font-weight: 500; } .mcell small { color: var(--pj-muted); font-size: 11.5px; } .mcell.off { color: var(--pj-faint); }
.mcell i { font-style: normal; font-size: 10.5px; padding: 1px 6px; border-radius: 999px; width: max-content; margin-top: 2px; }
.mcell.added { background: var(--pj-ok-2); } .mcell.added i { background: var(--pj-leaf); color: #fff; }
.mcell.changed { background: var(--pj-warn-2); } .mcell.changed i { background: var(--pj-warn); color: #fff; }
.mall-legend { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.mall-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; } .mall-legend i.added { background: var(--pj-leaf); } .mall-legend i.changed { background: var(--pj-warn); margin-left: 8px; }

/* ── Smal skärm ── */
@media (max-width: 1023px) {
  .phead-row { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 14px; }
  .phead-pic__btn { width: 72px; }
  /* Summan till vänster, nästa steg till höger – en rad i stället för två staplade. */
  .phead-kr { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "kr btn" "note btn"; justify-items: start; align-items: center; column-gap: 12px; text-align: left; }
  .phead-kr > b { grid-area: kr; } .phead-kr > small { grid-area: note; }
  .phead-kr > .phead-btn, .phead-kr > form { grid-area: btn; margin-top: 0; justify-self: end; }
  .phead-pick { width: min(320px, calc(100vw - 2rem)); }
  /* Stegen får plats på en rad utan att rulla: siffra/bock över en kort etikett, ingen undertext.
     Rullar det ändå (fler steg) syns ingen rullningslist – det är touch. */
  .pstepper { display: flex; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .pstepper::-webkit-scrollbar { display: none; }
  .pstep { flex: 1 1 auto; min-width: 0; min-height: 0; flex-direction: column; justify-content: center; gap: 3px; padding: 8px 4px 9px; border-right: 0; }
  .pstep .pnum { width: 22px; height: 22px; font-size: 11.5px; } .pstep .pnum .material-symbols-outlined { font-size: 14px; }
  .pstep .ptext { justify-items: center; max-width: 100%; }
  .pstep .ptext b { font-size: 11.5px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .pstep .ptext small { display: none; }
  .pstep.on::after { left: 8px; right: 8px; }
  .pstep.more { flex: 0 0 44px; padding: 0; }
  .pstepper.is-collapsed { flex-wrap: nowrap; padding: 4px 6px; }
  .pstepper.is-collapsed .pstep { flex-direction: row; min-height: 34px; padding: 4px 8px; }
  .pstep-menu { right: 0; }
  .rhub { padding: 12px; }
  .rhub-head { flex-direction: column; }
  .rhub-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .roomcard-x { opacity: 1; }
  .roomcard-name, .roomcard-level, .roomcard-open { height: 40px; }
  .rhub-planhint { grid-template-columns: auto minmax(0, 1fr); }
  .rhub-planacts { grid-column: 1 / -1; flex-wrap: wrap; }
  .rpick-veil, .mall-veil { padding: 0; }
  .rpick, .mall { width: 100%; height: 100dvh; max-height: none; border-radius: 0; }
  .rpick-grid { grid-template-columns: repeat(3, 1fr); }
  .rpick-row { grid-template-columns: 44px minmax(0, 1fr) 40px; }
  .rpick-row label, .rpick-row select { grid-column: 1 / -1; }
  .rpick-row input[type="text"], .rpick-row select { height: 44px; }
  .mall-f { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 720px) {
  .dock-motion { transition: opacity 180ms ease, transform 180ms cubic-bezier(0.25, 1, 0.5, 1); }
  html.zimla-contact-sheet-open .dock-motion { opacity: 0; transform: translateY(16px); pointer-events: none; }
  /* 44 px träffyta: understrykningen sitter på texten, inte på knappens kant (den korsade nästa rad). */
  .phead-sub__btn { display: inline-flex; align-items: center; min-height: 44px; margin: -8px 0; border-bottom: 0; text-decoration: underline; text-decoration-color: rgba(58, 136, 116, 0.4); text-underline-offset: 3px; }
  .phead-sub__btn.is-empty { text-decoration-style: dashed; }
  .phead-contact {
    position: fixed;
    inset: 0;
    z-index: 190;
    width: auto;
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(17, 33, 24, 0.32);
    box-shadow: none;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    touch-action: none;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }
  .phead-contact__panel {
    position: relative;
    width: 100%;
    max-width: 36rem;
    max-height: calc(100dvh - 12px);
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 18px 16px 0;
    border-radius: 20px 20px 0 0;
    background: #fbfcfb;
    box-shadow: 0 -18px 52px -28px rgba(17, 33, 24, 0.5);
    touch-action: auto;
  }
  .phead-contact__panel-motion { transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease-out; }
  .phead-contact__panel-motion--leave { transition-duration: 190ms; }
  .phead-contact__panel-from { opacity: 0; transform: translateY(28px); }
  .phead-contact__panel-to { opacity: 1; transform: translateY(0); }
  .phead-contact__head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    padding: 7px 0 5px;
  }
  .phead-contact__head::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: #d5ded6;
    transform: translateX(-50%);
  }
  .phead-contact__head > span { display: grid; gap: 1px; }
  .phead-contact__head strong { font-family: Outfit, Inter, ui-sans-serif, system-ui, sans-serif; font-size: 18px; font-weight: 500; color: var(--pj-ink); }
  .phead-contact__edit { height: 44px; padding: 0 14px; border-radius: 999px; }
  .phead-contact__view { padding: 0 0 8px; }
  .phead-contact__rows :is(a, button) { min-height: 52px; font-size: 15px; }
  .phead-contact__form { padding: 0 0 0; }
  .phead-contact__form label { grid-template-columns: minmax(0, 1fr); gap: 4px; font-size: 12px; }
  .phead-contact__hint { margin: -2px 0 0; }
  .phead-contact__row { grid-template-columns: minmax(7.5rem, 0.72fr) minmax(0, 1fr); }
  .phead-contact__row label { display: grid; }
  .phead-contact__row label + label > span { position: static; width: auto; height: auto; clip-path: none; }
  .phead-contact__foot { margin: 0 -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); font-size: 13px; }
  .phead-contact__cancel { height: 44px; }
  .phead-contact__close {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--pj-line);
    border-radius: 999px;
    background: #fff;
    color: var(--pj-ink-2);
  }
  .phead-contact__close .material-symbols-outlined { font-size: 20px; }
  .phead-contact input { width: 100%; height: 46px; padding: 0 12px; font-size: 16px; background: #fff; }
  .phead-contact__acts {
    position: sticky;
    bottom: 0;
    z-index: 1;
    min-height: 64px;
    margin: 4px -16px 0;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--pj-line-2);
    background: rgba(251, 252, 251, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .phead-contact .phead-contact__acts .rhub-btn.sm { min-width: 96px; height: 44px; }
}
@media (max-width: 360px) {
  .phead-contact__row { grid-template-columns: minmax(0, 1fr); }
  /* 320 px: stegens etiketter (Rum … Översikt) får plats hela i stället för att kortas. */
  .pstep { padding-left: 2px; padding-right: 2px; } .pstep.more { flex-basis: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .dock-motion,
  .phead-contact-backdrop-motion,
  .phead-contact__panel-motion { transition: none; }
}
/* Telefon: en nivå i taget, rummets mall först. Momentnamnen står stilla till vänster; nivåerna sveps med
   snäpp, och kanten av nästa/förra nivån syns så man vet att det finns mer åt båda hållen. */
/* Surfplatta: namnen fasta till vänster, två nivåer i bild, swipe nivå för nivå. */
@media (max-width: 900px) {
  .mall-scroll { --mall-name: 28cqw; --mall-col: 36cqw; container-type: inline-size; padding: 0 0 12px; scroll-snap-type: x mandatory; scroll-padding-left: 28%; overscroll-behavior-x: contain; }
  /* Kolumnerna i procent av scrollytan (cqw), inte av rutnätet – annars blir varje nivå bredare än skärmen. */
  .mall-grid { min-width: 0; width: max-content; grid-template-columns: var(--mall-name) repeat(var(--mall-cols, 4), var(--mall-col)); }
  .mall-head { scroll-snap-align: start; }
  .mall-head.corner { position: sticky; left: 0; z-index: 3; }
  .mall-m, .mall-g > b { position: sticky; left: 0; z-index: 1; background: #fff; }
  .mall-g > b { padding-left: 10px; }
}
/* Telefon: rummets nivå först, en nivå i bild med grannarna som skymtar på båda sidor. */
@media (max-width: 640px) {
  .mall-scroll { --mall-name: 38cqw; --mall-col: 48cqw; scroll-padding-left: 45%; }
  .mall-head { padding: 10px 10px 12px; }
  .mall-m { padding: 9px 10px; }
  .mall-m b { font-size: 13px; }
  .mcell { padding: 9px 10px; }
  .mall-head > b { font-size: 15px; }
  .mall-sum b { font-size: 16px; }
  .mall-h { padding: 14px 14px 10px; }
  .mall-f { padding: 10px 14px 14px; }
}

/* Jämförelsen räknar tre kalkyler – knappen visar att den jobbar. */
.roomcard-level.htmx-request { opacity: 0.6; cursor: progress; }
.roomcard-level.htmx-request .material-symbols-outlined:first-child { animation: rhub-spin 900ms linear infinite; }
@keyframes rhub-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .roomcard-level.htmx-request .material-symbols-outlined:first-child { animation: none; } }

/* ── Kalkyl-fliken (enkelt ark per rum) ── */
.ksheet-wrap { min-width: 0; }
.ktabs { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 0 12px; }
.ktab { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px 0 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(255, 255, 255, 0.85); color: var(--pj-ink); text-decoration: none; }
.ktab .material-symbols-outlined { font-size: 18px; color: var(--pj-muted); }
.ktab b { font-weight: 500; font-size: 13px; }
.ktab small { color: var(--pj-muted); font-size: 11.5px; }
.ktab i { width: 8px; height: 8px; border-radius: 50%; background: #d9e1d9; }
.ktab i.ok { background: var(--pj-leaf); }
.ktab i.warn { background: var(--pj-warn); }
.ktab.on { background: #fff; border-color: var(--pj-ink); box-shadow: inset 0 0 0 1px var(--pj-ink); }
.ktab.add { color: var(--pj-muted); border-style: dashed; background: transparent; }
.ksheet { background: #fff; border: 1px solid var(--pj-line); border-radius: 18px; padding: 6px 22px 14px; box-shadow: 0 24px 60px -40px rgba(60, 40, 10, 0.5); }
.kempty { padding: 18px; color: var(--pj-muted); font-size: 13px; }
.kicker { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: #8a9b83; }
.khead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 14px 0 10px; border-bottom: 1px solid var(--pj-line); }
.khead h2 { margin: 2px 0 0; font-family: Outfit, Inter, ui-sans-serif, system-ui, sans-serif; font-size: 22px; font-weight: 500; letter-spacing: -0.01em; }
.khead p { margin: 4px 0 0; color: var(--pj-muted); font-size: 12.5px; }
.ktotal { text-align: right; }
.ktotal b { display: block; font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.ktotal small { color: var(--pj-muted); font-size: 11.5px; }
.knote { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--pj-warn-2); border: 1px solid #f0dfb8; color: var(--pj-warn); font-size: 12.5px; }
.knote .material-symbols-outlined { font-size: 18px; }
.knote a { color: inherit; font-weight: 500; }
.kgroup { padding: 10px 0 4px; }
.kgroup header { display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: 12px; padding: 8px 0 6px; }
.kgroup header b { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #8a9b83; font-weight: 500; }
.kgroup header span { font-size: 12px; color: var(--pj-muted); font-variant-numeric: tabular-nums; }
.kgroup.is-empty header { opacity: 0.55; }
.kgroup.is-empty:hover header, .kgroup.is-empty:focus-within header { opacity: 1; }
.kadd { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--pj-leaf-dark); padding: 2px 6px; border-radius: 6px; text-decoration: none; }
.kadd .material-symbols-outlined { font-size: 16px; }
.kadd:hover, .kadd.on { background: #eef3e9; }
.kgroup.htmx-request .kadd { opacity: 0.5; }
.krow { display: grid; grid-template-columns: minmax(0, 1fr) 190px 90px 110px 28px; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--pj-line-2); }
.kqty { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; }
.kqty form { display: inline-flex; align-items: center; gap: 6px; }
.kqty input { width: 78px; height: 30px; border: 1px solid var(--pj-line); border-radius: 8px; padding: 0 8px; font: inherit; text-align: right; font-variant-numeric: tabular-nums; background: #fff; }
.kqty em { font-style: normal; font-size: 12px; color: var(--pj-muted); }
.ksel { height: 28px; border: 1px solid var(--pj-line); border-radius: 7px; font: inherit; font-size: 12px; background: #fbfcfb; padding: 0 6px; max-width: 200px; }
.kname form { display: inline-flex; }
.kname small.warn { color: var(--pj-warn); font-size: 11.5px; }
.kname { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.kname b { font-weight: 500; font-size: 13.5px; }
.kname small { color: var(--pj-muted); font-size: 12px; }
.kname a.warn { display: inline-flex; align-items: center; gap: 2px; color: var(--pj-warn); font-size: 11.5px; text-decoration: none; }
.kname a.warn .material-symbols-outlined { font-size: 14px; }
.kh, .kkr { text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; }
.kkr { font-weight: 500; }
.kx { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--pj-faint); }
.kx:hover { background: #fdf2f2; color: #b91c1c; }
.kx .material-symbols-outlined { font-size: 16px; }
.kpick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 0 10px; border-top: 1px dashed var(--pj-line); }
.kpick-m { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px 0 8px; border-radius: 999px; border: 1px solid var(--pj-line); background: #fff; font: inherit; font-size: 12.5px; color: var(--pj-ink); }
.kpick-m .material-symbols-outlined { font-size: 16px; color: var(--pj-leaf); }
.kpick-m small { color: var(--pj-muted); margin-left: 2px; }
.kpick-m:hover { border-color: var(--pj-leaf); background: var(--pj-ok-2); }
.kpick-m:disabled { opacity: 0.45; }
.kpick-none { font-size: 12.5px; color: var(--pj-muted); }
.kpick-more { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; font-size: 12px; color: var(--pj-leaf-dark); text-decoration: none; }
.kpick-more .material-symbols-outlined { font-size: 15px; }
.kpick-x { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--pj-faint); }
.kpick-x .material-symbols-outlined { font-size: 16px; }
.kpick-x:hover { background: var(--pj-line-2); color: var(--pj-ink); }
.kfoot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--pj-line); flex-wrap: wrap; }
.khint { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--pj-muted); max-width: 40rem; }
.khint .material-symbols-outlined { color: var(--pj-leaf); font-size: 18px; }
.kacts { display: flex; gap: 8px; }
/* Raden med Avancerad kalkyl/Skapa offert ligger uppe i huvudet – annars hamnar den under alla moment. */
.kfoot.is-top { margin-top: 0; padding: 10px 0; border-top: 0; border-bottom: 1px solid var(--pj-line-2); }
.kbtn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 10px; font: inherit; font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.kbtn .material-symbols-outlined { font-size: 16px; }
.kbtn.ghost { border: 1px solid var(--pj-line); background: #fff; color: var(--pj-ink); }
.kbtn.ghost:hover { border-color: #cfe3d8; background: #fbfcfb; }
.kbtn.primary { background: var(--pj-leaf-dark); color: #fff; }
.kbtn.primary:hover { background: #27604f; }
.kbtn.primary.is-off { opacity: 0.5; cursor: default; }
.kbtn.sm { height: 30px; padding: 0 10px; font-size: 12px; }
@media (max-width: 900px) {
  .ksheet { padding: 6px 14px 14px; }
  .krow { grid-template-columns: minmax(0, 1fr) auto auto; row-gap: 4px; }
  .krow .kh { display: none; }
  .krow .kqty { grid-column: 2; }
  .krow > form { grid-column: 3; }
  .krow .kkr { grid-column: 1 / -1; text-align: left; font-size: 12px; color: var(--pj-muted); }
  .khint { display: none; }
  .kx, .kpick-x { width: 44px; height: 44px; }
  .kpick-m { height: 40px; }
  .kbtn { height: 44px; }
}

/* ── Moduler (Offert, Planering, Pågående) – mockupens .mod/.row ── */
.pgrid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; min-width: 0; }
.pgrid > * { min-width: 0; }
.mod { background: #fff; border: 1px solid var(--pj-line); border-radius: 16px; box-shadow: 0 3px 12px rgba(40, 70, 40, 0.03); }
.span-12 { grid-column: span 12; } .span-7 { grid-column: span 7; } .span-5 { grid-column: span 5; } .span-6 { grid-column: span 6; }
@media (max-width: 1023px) { .span-7, .span-5, .span-6 { grid-column: span 12; } }
.mod-head { display: flex; align-items: flex-start; gap: 10px; padding: 16px 18px 12px; }
.mod-head.slim { padding-bottom: 6px; }
.mod-icon { font-size: 20px; color: #72906e; margin-top: 2px; }
.mod-heading { flex: 1; min-width: 0; }
.mod-heading h2 { margin: 2px 0 0; font-family: Outfit, Inter, ui-sans-serif, system-ui, sans-serif; font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
.mod-heading p { margin: 3px 0 0; font-size: 12.5px; color: var(--pj-muted); }
.mod-end { text-align: right; }
.mod-end b { display: block; font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.mod-end small { font-size: 11px; color: var(--pj-muted); }
.mod-foot { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 6px 18px 14px; flex-wrap: wrap; }
.mod-foot.is-start { justify-content: flex-start; }
.mod-note { font-size: 12px; color: var(--pj-warn); }
.rows { padding: 0 12px; }
.row { display: grid; grid-template-columns: 26px 1fr auto auto 16px; align-items: center; gap: 10px; width: 100%; min-height: 2.6rem; padding: 6px 6px; border-top: 1px solid var(--pj-line-2); text-align: left; border-radius: 6px; color: var(--pj-ink); text-decoration: none; font: inherit; background: none; }
.rows > .row:first-child { border-top: 0; }
.row:hover { background: #fbfcfb; }
.row .ri { width: 26px; height: 26px; border-radius: 8px; background: #f2f5ed; color: #72906e; display: grid; place-items: center; }
.row .ri .material-symbols-outlined { font-size: 16px; }
.row .rt { min-width: 0; }
.row .rt strong { display: block; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .rt small { display: block; font-size: 11px; color: var(--pj-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .amt { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--pj-ink-2); }
.row .next { font-size: 12px; color: var(--pj-leaf); white-space: nowrap; }
.row .chev { color: var(--pj-faint); font-size: 18px; }
.qsteps { display: flex; gap: 6px; padding: 0 18px 12px; }
.qsteps span { flex: 1; text-align: center; font-size: 11.5px; padding: 8px 6px; border-radius: 8px; background: var(--pj-line-2); color: var(--pj-muted); }
.qsteps span.done { background: var(--pj-ok-2); color: #2f6f5c; }
.qsteps span.now { background: var(--pj-ink); color: #fff; }
.qprice { margin: 6px 18px 4px; padding: 10px 12px 4px; border-radius: 12px; background: #fbfcfb; border: 1px solid var(--pj-line-2); }
.qprice-days { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; padding-bottom: 6px; border-bottom: 1px solid var(--pj-line-2); }
.qprice-days small { color: var(--pj-muted); font-weight: 400; font-size: 12px; }
.qprice-days b { min-width: 28px; text-align: center; font-weight: 500; font-variant-numeric: tabular-nums; }
.tot { display: grid; gap: 6px; padding: 6px 0 8px; font-size: 12.5px; }
.tot div { display: flex; justify-content: space-between; }
.tot em { font-style: normal; color: var(--pj-muted); font-size: 11px; }
.tot .big { font-size: 16px; font-weight: 500; padding-top: 6px; border-top: 1px solid var(--pj-line-2); }
.tot .big small { font-weight: 400; color: var(--pj-muted); font-size: 11px; margin-left: 4px; }
.qtotal { font-family: Outfit, Inter, sans-serif; font-size: 20px; color: var(--pj-leaf-dark); }
.qsec { padding: 10px 18px 12px; border-top: 1px solid var(--pj-line-2); }
.qsec h4 { margin: 0 0 8px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #8a9b83; font-weight: 500; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qsec h4 small { text-transform: none; letter-spacing: 0; font-size: 11.5px; color: var(--pj-muted); font-weight: 400; }
.qsec-tools { margin-left: auto; display: inline-flex; gap: 6px; text-transform: none; letter-spacing: 0; }
.qterms { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.qterms li { display: grid; grid-template-columns: 22px 1fr; align-items: start; gap: 8px; padding: 6px 8px; border-radius: 8px; background: #fbfcfb; font-size: 12px; color: var(--pj-ink-2); }
.qterms li span { width: 20px; height: 20px; border-radius: 999px; background: #eef3e9; color: #35604f; display: grid; place-items: center; font-size: 10.5px; font-weight: 500; }
.qterms li p { margin: 1px 0 0; line-height: 1.4; }
.qside .qsec:first-of-type { border-top: 0; }
.qside.is-compact { align-self: start; }
.qrecip { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 6px 8px; border-radius: 8px; background: #f7faf6; font-size: 12.5px; }
.qrecip b { font-weight: 500; }
.qrecip small { display: block; color: var(--pj-muted); font-size: 11px; }
.qmuted { font-size: 11.5px; color: var(--pj-muted); }
.qtoggles { display: grid; gap: 4px; }
.qtog { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 6px 0; font-size: 12.5px; }
.qtog b { font-weight: 500; }
.qtog small { display: block; color: var(--pj-muted); font-size: 11px; }
.sw { position: relative; width: 40px; height: 24px; border-radius: 999px; background: #d9e1d9; display: inline-block; }
.sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); transition: transform 160ms; }
.sw.on { background: var(--pj-leaf-dark); }
.sw.on::after { transform: translateX(16px); }
.qsend { padding-top: 12px; border-top: 1px solid var(--pj-line-2); justify-content: flex-start; }
.dayfacts { margin: 0; padding: 0 18px 6px; display: grid; }
.dayfacts div { display: grid; gap: 2px; padding: 8px 0; border-top: 1px solid var(--pj-line-2); font-size: 13px; }
.dayfacts div:first-child { border-top: 0; }
.dayfacts dt { font-size: 11px; color: var(--pj-muted); }
.dayfacts dd { margin: 0; font-weight: 500; }

/* ── Granska & skicka: samma brödsmulor som resten av projektet ── */
.quote-review-crumbs { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 12.5px; color: #17211a; flex-wrap: wrap; }
.quote-review-crumbs a { color: #24352b; opacity: 0.85; text-decoration: none; }
.quote-review-crumbs a:hover { opacity: 1; text-decoration: underline; }
.quote-review-crumbs .material-symbols-outlined { font-size: 16px; color: #2a4a3b; opacity: 0.5; }
.quote-review-crumbs [aria-current] { font-weight: 500; font-size: 13px; }
.quote-review-crumbs .quote-review-back { width: 30px; height: 30px; padding: 0; justify-content: center; opacity: 1; box-shadow: none; border-color: transparent; background: rgba(255, 255, 255, 0.6); margin-right: 2px; }
.quote-review-crumbs .quote-review-back .material-symbols-outlined { opacity: 1; color: #17211a; }
.qdelete { margin-left: auto; }
.qdelete__btn { display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 12px; color: var(--pj-faint); }
.qdelete__btn .material-symbols-outlined { font-size: 15px; }
.qdelete__btn:hover { color: #b91c1c; }
.pnote { margin: 0 18px 8px; padding: 10px 12px; border-radius: 10px; background: var(--pj-warn-2); border: 1px solid #f0dfb8; color: var(--pj-warn); font-size: 12.5px; }
.pfield { display: grid; grid-template-columns: 180px 120px auto auto; align-items: end; gap: 10px; padding: 6px 18px 16px; }
.pfield label { display: grid; gap: 4px; font-size: 11.5px; color: var(--pj-muted); }
.pfield input { height: 36px; border: 1px solid var(--pj-line); border-radius: 10px; padding: 0 10px; font: inherit; font-size: 13px; color: var(--pj-ink); background: #fff; }
.pchip { display: inline-flex; align-items: center; font-size: 11px; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.pchip.ok { background: var(--pj-ok-2); color: var(--pj-leaf-dark); }
.pchip.warn { background: var(--pj-warn-2); color: var(--pj-warn); }
@media (max-width: 640px) {
  .pfield { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pfield input { width: 100%; min-width: 0; height: 40px; }
  .pfield .pcal-nav { height: 40px; } .pfield .pcal-arrow { width: 40px; height: 40px; }
}
.kbtn[disabled] { opacity: 0.5; cursor: default; }

/* ── Kundsidan ── */
.profile { display: flex; align-items: center; gap: 16px; padding: 18px 18px 12px; flex-wrap: wrap; }
.profile .av { width: 56px; height: 56px; border-radius: 999px; background: #eef3e9; color: #35604f; display: grid; place-items: center; font-weight: 500; font-size: 18px; }
.profile-text { flex: 1; min-width: 0; }
.profile-text h1 { margin: 2px 0 0; font-family: Outfit, Inter, ui-sans-serif, system-ui, sans-serif; font-size: 22px; font-weight: 500; letter-spacing: -0.01em; }
.profile-text .sub { font-size: 12.5px; color: var(--pj-muted); }
.profile-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.kv { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 0 18px 16px; }
.kv div { padding: 10px 12px; border-radius: 10px; background: #fbfcfb; border: 1px solid var(--pj-line-2); display: grid; gap: 2px; }
.kv small { font-size: 11px; color: var(--pj-muted); }
.kv b { font-weight: 500; font-size: 13.5px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.notes { padding: 0 18px 12px; }
.notes textarea { width: 100%; min-height: 120px; border: 1px solid var(--pj-line); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 13px; resize: vertical; background: #fbfcfb; }
.timeline { display: grid; padding: 0 18px 14px; }
.tl { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 8px 0; border-top: 1px solid var(--pj-line-2); font-size: 13px; }
.tl:first-child { border-top: 0; }
.tl .dot { width: 8px; height: 8px; border-radius: 50%; background: #9fb3a6; margin-top: 6px; }
.tl small { display: block; font-size: 11.5px; color: var(--pj-muted); }
.tl .when { font-size: 11.5px; color: var(--pj-muted); white-space: nowrap; }
.pchip.sent { background: var(--pj-sent-2); color: var(--pj-sent); }
@media (max-width: 900px) { .kv { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Inställningar: navkort + innehållskort som mockupen ── */
[data-settings-nav] .sticky { background: #fff; border: 1px solid #e3e8e2; border-radius: 16px; padding: 8px; box-shadow: 0 3px 12px rgba(40, 70, 40, 0.03); }
.set-nav p { display: none; }
.set-nav > div { margin: 0; }
.set-nav > div + div { margin-top: 2px; }
.set-nav .mt-1\.5 { margin-top: 0; }
.set-nav__item { border-radius: 10px; font-weight: 400; font-size: 13px; color: #17211a; }
.set-nav__item.on { background: #17211a; color: #fff; }
.set-nav__item.on .material-symbols-outlined { color: #fff; }
[data-settings-content] fieldset, [data-settings-content] > section, [data-settings-content] > form > section, [data-settings-content] > div > section { border-radius: 16px !important; border-color: #e3e8e2 !important; box-shadow: 0 3px 12px rgba(40, 70, 40, 0.03); }

/* ── Offert-steget: skicka-panelens kontroller (mockupens qchips/qstep/qatt) ── */
.qrecips { display: grid; gap: 4px; margin-bottom: 6px; }
.qrecip button { color: var(--pj-faint); display: grid; place-items: center; }
.qrecip button .material-symbols-outlined { font-size: 16px; }
.qrecip button:hover { color: #b91c1c; }
.qadd { display: grid; grid-template-columns: 1fr 1.3fr auto; gap: 6px; }
.qadd input { height: 32px; border: 1px solid var(--pj-line); border-radius: 8px; padding: 0 8px; font: inherit; font-size: 12.5px; min-width: 0; }
.qadd .kbtn.sm { padding: 0 8px; }
.qchips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.qchip { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--pj-line); background: #fff; font: inherit; font-size: 12px; color: var(--pj-ink); }
.qchip.on { background: var(--pj-ink); border-color: var(--pj-ink); color: #fff; }
.qmsg { width: 100%; min-height: 84px; border: 1px solid var(--pj-line); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 12.5px; resize: vertical; background: #fbfcfb; }
.qtog { border: 0; padding: 6px 0; background: none; }
.sw { border: 0; padding: 0; cursor: pointer; }
.qtwo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.qsteps-list { display: grid; gap: 6px; font-size: 12.5px; }
.qsteps-list > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.qstep { display: inline-flex; align-items: center; border: 1px solid var(--pj-line); border-radius: 8px; background: #fff; }
.qstep form { display: contents; }
.qstep button { width: 26px; height: 26px; color: var(--pj-leaf-dark); font-size: 15px; background: none; border: 0; }
.qstep button:disabled { opacity: 0.35; }
.qstep b { min-width: 40px; text-align: center; font-size: 12.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
.qattach { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.qatt { position: relative; display: flex; align-items: center; gap: 6px; padding: 7px 9px; border-radius: 9px; border: 1px dashed var(--pj-line); background: #fff; font-size: 12px; text-align: left; color: var(--pj-ink-2); }
.qatt label { display: flex; align-items: center; gap: 6px; cursor: pointer; flex: 1; min-width: 0; }
.qatt .material-symbols-outlined { font-size: 16px; color: var(--pj-muted); }
.qatt small { display: block; color: var(--pj-muted); font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qatt:hover { border-color: #cfe3d8; background: #f7faf6; }
.qatt.on { border-style: solid; border-color: #cfe3d8; background: var(--pj-ok-2); }
.qatt.on .material-symbols-outlined { color: var(--pj-leaf); }
.qatt-x { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; color: var(--pj-faint); flex: none; }
.qatt-x .material-symbols-outlined { font-size: 15px; }
.qatt-x:hover { background: #fdf2f2; color: #b91c1c; }
.qterms li { grid-template-columns: 22px 1fr 24px; }
.qterms li form { display: contents; }
.qterm-add { display: grid; grid-template-columns: 1fr auto; gap: 6px; margin-top: 8px; align-items: start; }
.qterm-add textarea { border: 1px solid var(--pj-line); border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 12px; }
.qatt { flex-wrap: wrap; }
.qatt-files { flex-basis: 100%; list-style: none; margin: 0; padding: 0 0 0 22px; display: grid; gap: 1px; min-width: 0; }
.qatt-files li { display: flex; align-items: center; gap: 4px; min-width: 0; }
.qatt-files a, .qdocs a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--pj-ink-2); font-size: 11.5px; text-decoration: underline; text-decoration-color: var(--pj-line); text-underline-offset: 2px; }
.qatt-files a:hover, .qdocs a:hover { color: var(--pj-leaf-dark); text-decoration-color: currentColor; }
.qdocs { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 2px; }
.qdocs li { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 4px 2px; }
.qdocs li > .material-symbols-outlined { font-size: 16px; color: var(--pj-leaf); flex: none; }
.qdocs a { font-size: 12px; }
.qterms li.qterm { grid-template-columns: 22px 1fr auto; }
.qterm-tools { display: flex; gap: 2px; }
.qterm-tools form { display: contents; }
.qterm-tools .kx { width: 26px; height: 26px; }
.qterm-tools i { font-size: 15px; font-style: normal; }
.qterms li .qterm-edit { display: grid; gap: 6px; grid-column: 2 / -1; }
.qterms li .qterm-edit textarea { width: 100%; field-sizing: content; min-height: 4.5lh; max-height: 45vh; border: 1px solid var(--pj-line); border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 12.5px; line-height: 1.45; resize: vertical; }
.qterm-edit textarea:focus, .qselect:focus { outline: none; border-color: #9cc9b0; box-shadow: 0 0 0 3px #e6f3ea; }
.qcomment { display: grid; gap: 4px; }
.qcomment-sec { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--pj-line-2); }
.qcomment textarea { width: 100%; field-sizing: content; min-height: 3.5lh; max-height: 45vh; border: 1px solid var(--pj-line); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 12.5px; line-height: 1.5; color: var(--pj-ink-2); background: #fbfcfb; resize: vertical; }
.qcomment textarea:focus { outline: none; border-color: #9cc9b0; box-shadow: 0 0 0 3px #e6f3ea; background: #fff; }
.qcomment textarea::placeholder { color: var(--pj-faint); }
.qcomment-state { min-height: 1.2em; font-size: 11px; color: var(--pj-muted); }
.qcomment-text { font-size: 12.5px; line-height: 1.5; color: var(--pj-ink-2); } .qcomment-text p { margin: 0 0 6px; }
@media (pointer: coarse) { .qcomment textarea { font-size: 16px; } }
.qterm-edit > div { display: flex; justify-content: flex-end; gap: 6px; }
.kbtn.is-saved { color: var(--pj-leaf-dark); border-color: #b7d8c5; background: var(--pj-ok-2); }
.qselect { width: 100%; height: 34px; border: 1px solid var(--pj-line); border-radius: 8px; padding: 0 8px; background: #fff; font: inherit; font-size: 12.5px; color: var(--pj-ink); }
.qstart .qerr { display: block; margin: 6px 0 0; }
@media (max-width: 640px) { .qtwo { grid-template-columns: 1fr; } }
.qlink { font: inherit; color: var(--pj-leaf-dark); text-decoration: underline; background: none; border: 0; padding: 0; }

/* ── Inställningar: mockupens set-card / set-row ── */
.set-card { background: #fff; border: 1px solid var(--pj-line, #e3e8e2); border-radius: 16px; box-shadow: 0 3px 12px rgba(40, 70, 40, 0.03); }
.set-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 22px 10px; }
.set-card > header h2 { margin: 0; font-family: Outfit, Inter, ui-sans-serif, system-ui, sans-serif; font-size: 17px; font-weight: 500; }
.set-card > header p { margin: 3px 0 0; font-size: 12.5px; color: #6b7a70; }
.set-rows { display: grid; padding: 4px 22px 8px; }
.set-row { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(0, 2fr) auto; align-items: center; gap: 16px; padding: 12px 0; border-top: 1px solid #eef1ec; }
.set-row:first-child { border-top: 0; }
.set-row .lbl { font-size: 13px; color: #17211a; }
.set-row .lbl small { display: block; font-size: 11.5px; color: #6b7a70; }
.set-row input[type="text"], .set-row input[type="email"], .set-row input[type="tel"], .set-row input[type="password"] { height: 36px; border: 1px solid #e3e8e2; border-radius: 10px; padding: 0 10px; font: inherit; font-size: 13px; background: #fff; width: 100%; grid-column: 2 / -1; }
.set-row .sw { justify-self: end; }
.set-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 0 14px; }
.set-errors { margin: 4px 0 0; padding-left: 18px; font-size: 12px; color: #b91c1c; }
.mcell em { display: block; font-style: normal; font-size: 10.5px; color: var(--pj-muted); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Ritningsanalys på rumsfliken (mockupen): "Hittar rum… 3 av 5", stapel, rummen fylls på. */
/* Bild och spinner ligger utanför .rplan-live så pollningen inte återskapar dem (ingen flimmer). */
.rplan { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 12px 14px 12px; border-radius: 14px; border: 1px solid #e3e8e2; background: #fff; }
.rplan-live { display: grid; gap: 10px; min-width: 0; padding-right: 36px; }
.rplan-text h2 { margin: 2px 0 0; font-family: Outfit, Inter, ui-sans-serif, system-ui, sans-serif; font-size: 17px; font-weight: 500; }
.rplan-text p { margin: 2px 0 0; font-size: 12.5px; color: var(--pj-muted); }
.rplan-img { width: 84px; height: 60px; object-fit: cover; border-radius: 8px; }
.rplan-glyph { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #eef3e9; color: var(--pj-leaf-dark); }
.rplan-glyph .material-symbols-outlined { font-size: 22px; }
.rplan-glyph--zimla { background: transparent; }
.rplan-glyph--zimla .zimla-dock-orb {
  width: 36px;
  height: 36px;
  outline-width: 3px;
  outline-color: #edf6f0;
  box-shadow: 0 12px 22px -16px rgba(5, 99, 68, 0.72);
}
.rplan-glyph--zimla .zimla-dock-orb__gaze { width: 24px; height: 16px; }
.rplan-glyph--zimla .zimla-dock-orb__eyes { gap: 4px; }
.rplan-glyph--zimla .zimla-dock-orb__eye { width: 7px; height: 11px; }
.rplan-spin { position: absolute; top: 18px; right: 16px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #dfe6e1; border-top-color: var(--pj-leaf-dark); animation: rplan-spin 900ms linear infinite; }
@keyframes rplan-spin { to { transform: rotate(360deg); } }
.rplan-bar { height: 4px; border-radius: 999px; background: #eef1ec; overflow: hidden; }
.rplan-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #3a8874, #7fc2ad); transition: width 600ms ease; }
.rplan-rooms { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rplan-rooms li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px 5px 11px; border-radius: 999px; background: #f1f6f2; font-size: 12.5px; }
.rplan-rooms small { color: var(--pj-muted); }
.rplan-rooms .material-symbols-outlined { font-size: 18px; color: var(--pj-leaf-dark); }
.rplan-rooms li.is-running .material-symbols-outlined { animation: rplan-spin 900ms linear infinite; color: var(--pj-muted); }
.rplan.is-error { border-color: #f0d4c4; background: #fff8f4; }
.rplan.is-error h2 { color: #9a4a1e; }
@media (prefers-reduced-motion: reduce) {
  .rplan-spin,
  .rplan-rooms li.is-running .material-symbols-outlined { animation: none; }
  .rplan-glyph--zimla .zimla-dock-orb__gaze,
  .rplan-glyph--zimla .zimla-dock-orb__eyes { transition: none; }
}
/* Ta bort-knappen i Lägg till rum-väljaren. */
.roomrow-x { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--pj-faint); }
.roomrow-x:hover { background: #fdf2f2; color: #b91c1c; }
.roomrow-x .material-symbols-outlined { font-size: 17px; }

/* ── Rummen som lista (öppnas rad för rad) ───────────────────────────── */
.rlist { display: grid; }
/* Huvudet: ikon, rubrik + summa, verktyg till höger (som rumslistan i mockupen). */
.rlist-head { display: flex; align-items: center; gap: 12px; padding: 0 6px 12px; }
.rlist-head .mod-icon { width: 30px; height: 30px; border-radius: 9px; background: #eef3e9; color: #3a6e5c; display: grid; place-items: center; font-size: 17px; }
.rlist-title { flex: 1; min-width: 0; }
.rlist-title h2 { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pj-ink); }
.rlist-title p { margin: 2px 0 0; font-size: 12px; color: var(--pj-muted); }
.rlist-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.rhub-btn.sm { height: 32px; padding: 0 12px; font-size: 12.5px; border-radius: 9px; }
.rlist-sort { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--pj-muted); }
.rlist-sort select { height: 32px; padding: 0 28px 0 10px; border: 1px solid var(--pj-line); border-radius: 9px; background: #fff; font: inherit; font-size: 12.5px; color: var(--pj-ink); }
/* Raderna: en flat lista med hårlinjer, inte kort. */
.rrow { border-top: 1px solid var(--pj-line-2); background: transparent; }
.rrow:last-of-type { border-bottom: 1px solid var(--pj-line-2); }
.rrow.is-missing > .rrow-sum { background: linear-gradient(90deg, #fffaf1, transparent 60%); }
.rrow-sum { display: grid; grid-template-columns: 34px 64px minmax(0, 1fr) auto auto; align-items: center; gap: 16px; padding: 12px 8px; cursor: pointer; list-style: none; transition: background 120ms ease; }
.rrow-sum:hover { background: rgba(23, 33, 26, 0.025); }
.rrow-sum::-webkit-details-marker { display: none; }
.rrow-idx { display: inline-flex; align-items: center; gap: 2px; font-size: 11.5px; color: var(--pj-muted); font-variant-numeric: tabular-nums; }
.rrow-chev { font-size: 18px; color: var(--pj-faint); transition: transform 160ms ease; }
.rrow[open] > .rrow-sum .rrow-chev, .rgrp[open] > summary .rrow-chev { transform: rotate(90deg); }
.rrow-img { width: 64px; height: 48px; object-fit: cover; border-radius: 8px; background: #f6f8f6; display: block; }
/* Bilden byter rumstyp: samma väljare som byggnadstypen i huvudet. */
.rrow-pic { position: relative; display: block; }
.rrow-pic__btn { position: relative; display: block; padding: 0; border: 0; background: none; border-radius: 8px; cursor: pointer; }
.rrow-pic__edit { position: absolute; right: 3px; bottom: 3px; width: 18px; height: 18px; border-radius: 6px; background: rgba(255, 255, 255, 0.92); color: var(--pj-ink-2); font-size: 12px; display: grid; place-items: center; opacity: 0; transition: opacity 120ms ease; }
.rrow-pic__btn:hover .rrow-pic__edit, .rrow-pic__btn:focus-visible .rrow-pic__edit { opacity: 1; }
.rrow-pick { display: block; width: 360px; text-align: left; cursor: default; }
/* Skyddsnät: väljaren syns bara när knappen säger att den är öppen. Skulle Alpine inte hinna
   initiera raderna vid ett stort livebyte (tio rum från chatten) står de annars alla uppfällda. */
.rrow-pic:not(:has(> .rrow-pic__btn[aria-expanded="true"])) .rrow-pick { display: none !important; }
@media (max-width: 640px) { .rrow-pick { width: min(360px, calc(100vw - 5rem)); } }
.rrow-pick .phead-pick__grid { display: grid; }
.rrow-name { min-width: 0; }
.rrow-name strong { display: block; font-size: 13.5px; font-weight: 500; }
.rrow-rename { display: block; }
.rrow-rename__btn { display: inline-flex; align-items: center; gap: 4px; padding: 0 3px; margin-left: -3px; border: 0; border-radius: 6px; background: none; font: inherit; font-weight: inherit; color: inherit; cursor: text; text-align: left; }
.rrow-rename__btn .material-symbols-outlined { font-size: 14px; color: var(--pj-faint); opacity: 0; transition: opacity 120ms ease; }
.rrow-rename__btn:hover .material-symbols-outlined, .rrow-rename__btn:focus-visible .material-symbols-outlined { opacity: 1; }
.rrow-rename__btn:hover { background: rgba(23, 33, 26, 0.05); }
.rrow-rename input[name="name"] { width: min(100%, 260px); padding: 1px 6px; border: 1px solid var(--pj-leaf); border-radius: 7px; font: inherit; font-size: 13.5px; font-weight: 500; background: #fff; }
.rrow-name small { display: block; font-size: 11.5px; color: var(--pj-muted); }
.rrow-name .rrow-dim em { font-style: normal; color: #b0771a; }
.rrow-dim-approx { display: none; }
.rrow-name .rrow-dim { display: block; max-width: 100%; margin: 0; padding: 0; border: 0; background: none; font: inherit; font-size: 11.5px; color: var(--pj-muted); text-align: left; cursor: pointer; }
.rrow-dim-ico, .rrow-dim-n { display: none; }
.rcard-empty-dims { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.rmetrics { display: inline-flex; gap: 14px; text-align: right; }
.rmetrics > span { display: grid; gap: 1px; }
.rmetrics small { font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pj-faint); }
.rmetrics b { font-size: 12.5px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--pj-ink-2); white-space: nowrap; }
.rmetrics .is-total b { color: var(--pj-leaf-dark); }
/* Justerbara nyckeltal: värdet är en knapp som blir ett fält. */
.rmet { display: grid; gap: 1px; text-align: right; }
.rmet-btn { padding: 0 3px; margin-right: -3px; border: 0; border-radius: 5px; background: none; font: inherit; font-weight: inherit; color: inherit; cursor: text; }
.rmet-btn:hover { background: rgba(23, 33, 26, 0.06); box-shadow: inset 0 -1px 0 var(--pj-faint); }
.rmet form { display: inline; }
.rmet input { width: 72px; height: 22px; padding: 0 5px; border: 1px solid var(--pj-leaf); border-radius: 6px; font: inherit; font-size: 12.5px; text-align: right; font-variant-numeric: tabular-nums; background: #fff; }
.rmetrics.is-adjusted .is-total b { text-decoration: underline dotted var(--pj-faint); text-underline-offset: 3px; }
/* Chipen: en liten pill med punkt; bärnsten = frågor kvar, grön = klart. */
.rchip { display: inline-flex; align-items: center; gap: 6px; height: 24px; min-width: 64px; padding: 0 10px; border-radius: 999px; background: #fbf3df; font-size: 11.5px; font-weight: 500; color: #8a6414; white-space: nowrap; }
.rchip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #d9a03a; }
.rchip.is-done { background: #eaf3ee; color: var(--pj-leaf-dark); } .rchip.is-done::before { background: #3a8874; }
/* Förslag är frivilliga (rummet är redan räknat med mallens standardval): grönt, inte varningsgult. */
.rchip.is-offer { background: #e6f2ea; color: var(--pj-leaf-dark); } .rchip.is-offer::before { background: #3a8874; }
.rchip.is-ghost { background: #f2f5ed; color: var(--pj-muted); } .rchip.is-ghost::before { background: var(--pj-faint); }
.rchip.is-pending { justify-content: center; background: #f4f6f4; color: var(--pj-faint); } .rchip.is-pending::before { display: none; }
/* Kalkyl-fliken: raden öppnar rummets lätta guide i full bredd. */
.kg { border-top: 1px solid var(--pj-line-2); }
/* ── Kalkyl-fliken: tre paneler – rummen | rummets kort och arbetsgrupper | momenten i vald grupp ──
   Railen är sin egen radtyp (ikon · namn · moment · m² · summa · läge). Gruppraderna är knappar;
   vald grupp öppnar sidopanelen till höger med momentkort (kryss = i kalkylen). */
.project-frame:has(.kwide) { max-width: 1900px; }
/* Rum-fliken: korten tar hela bredden, 40 px från kanterna (sidomenyn till vänster). */
@media (min-width: 1024px) {
  #zimla-page-content:has(#rhub-list),
  html.zimla-room:not(.zimla-ai-start):not(.zimla-room-covered) #zimla-page-content:has(#rhub-list) { max-width: none; padding-left: 40px; padding-right: 40px; }
  .project-frame:has(#rhub-list) { max-width: none; }
  /* Fem kort per rad som växer med skärmen; fyra när det är trångt. */
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1200px) { .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.phead-back { display: none; } /* bara på telefon (brödsmulan har ← på bred skärm) */
.knext { display: none; } /* bara på smal ram (arbetsgrupperna i listen) */
.kws { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: start; transition: grid-template-columns 260ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.kws.has-side { grid-template-columns: 280px minmax(0, 1fr) minmax(360px, 440px); }
.krail { position: sticky; top: 12px; grid-row: 1 / span 3; align-self: start; display: grid; gap: 3px; padding: 10px; border-radius: 16px; background: #fff; border: 1px solid var(--pj-line-2); }
.krail-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px 10px; }
.krail-h > span { font-family: Outfit, Inter, ui-sans-serif, system-ui, sans-serif; font-size: 16px; font-weight: 500; }
.krail-add { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px 0 8px; border: 1px solid var(--pj-line); border-radius: 9px; background: #fff; font-size: 12.5px; color: var(--pj-ink-2); text-decoration: none; }
.krail-add:hover { border-color: #cfe3d8; background: #fbfcfb; } .krail-add .material-symbols-outlined { font-size: 16px; }
.krail-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-areas: "ico name kr" "ico sub chip"; align-items: center; gap: 1px 10px; padding: 8px 10px; border-radius: 12px; color: inherit; text-decoration: none; transition: background 120ms ease; }
.krail-row:hover { background: #f4f7f3; }
.krail-row.is-on { background: #eaf3ee; }
.krail-ico { grid-area: ico; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: var(--pj-ink-2); }
.krail-ico .material-symbols-outlined { font-size: 22px; }
.krail-row.is-on .krail-ico { color: var(--pj-leaf-dark); }
.krail-name { grid-area: name; font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.krail-row.is-on .krail-name { color: var(--pj-leaf-dark); }
.krail-kr { grid-area: kr; font-size: 13px; font-weight: 500; color: var(--pj-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.krail-sub { grid-area: sub; font-size: 11.5px; color: var(--pj-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.krail-row .rchip { grid-area: chip; justify-self: end; height: 18px; min-width: 0; padding: 0 7px; font-size: 10.5px; gap: 4px; }
.krail-row .rchip::before { width: 5px; height: 5px; }
.krail-sum { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-top: 6px; padding: 10px; border-radius: 12px; background: #f4f7f3; }
.krail-sum > .material-symbols-outlined { justify-self: center; color: var(--pj-leaf-dark); font-size: 22px; }
.krail-sum__t { display: grid; } .krail-sum__t b { font-size: 13px; font-weight: 500; } .krail-sum__t small { font-size: 11.5px; color: var(--pj-muted); }
.ksheet { min-width: 0; display: contents; }
/* Arket är display: contents – tona dess delar, inte arket. */
.ksheet > .ksh > * { transition: opacity 160ms ease; } .ksheet.htmx-request > .ksh > * { opacity: 0.55; }
.ksh { display: contents; }
.kws > .ksheet > .ksh > .ksh-h, .kws > .ksheet > .ksh > .kbody > .kgroups, .kws > .ksheet > .ksh > .kbody > .knote { grid-column: 2; }
.kws > .ksheet > .ksh > .kbody > .kside-col { display: none; grid-column: 3; grid-row: 1 / span 3; position: relative; min-height: 0; align-self: stretch; }
.kws.has-side > .ksheet > .ksh > .kbody > .kside-col { display: block; }
.kbody { display: contents; }
/* Kalkylguiden (Avancerads guide, inbäddad): mittspalten under rummets kort. Fliken har egen
   AI-docka, så guidens composer och "N valda"-raden bort. Grenprickarna ("inte genomgången") är
   neutrala – grönt betyder valt. "Krävs" syns bara på valda moment (där saknas något på riktigt)
   och behåller guidens varningsfärg. Luft i botten så dockan inte täcker sista raden. */
.kws > .ksheet > .ksh > .kguide-host { grid-column: 2; min-width: 0; display: grid; gap: 10px; align-content: start; padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.kguide-host > .kcustom { padding: 0; }
.kown[hidden] { display: none; }
.kown { display: grid; gap: 2px; padding: 10px 12px; border-radius: 16px; background: #fff; border: 1px solid var(--pj-line-2); }
.kown-h { padding: 2px 2px 6px; font-size: 12px; color: var(--pj-muted); }
.kown-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 6px 2px; border-top: 1px solid var(--pj-line-2); }
.kown-t { display: grid; min-width: 0; } .kown-t b { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kown-t small { font-size: 11.5px; color: var(--pj-muted); }
.kown-kr { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kguide-skel { min-height: 360px; align-content: start; padding: 18px; border-radius: 16px; background: #fff; border: 1px solid var(--pj-line-2); gap: 12px; }
.kguide-skel span { height: 44px; border-radius: 10px; } .kguide-skel span:first-child { height: 34px; width: 70%; }
.kguide { animation: rq-in 240ms cubic-bezier(0.22, 1, 0.36, 1) backwards; }
@media (prefers-reduced-motion: reduce) { .kguide { animation: none; } }
.kguide [data-calculation-workflow-panel] { margin: 0; border: 0; border-radius: 0; background: transparent; }
/* Grenchipsen visar en gren, brytaren "Alla grenar" visar alla – Filter-knappen gjorde samma sak som
   brytaren och bort; "Gren"-etiketten och prickarna ("inte genomgången") är brus. Sök ersätter Filter. */
.kguide .workflow-guide__filter-control,
.kguide .workflow-guide__subviews-label, .kguide .workflow-guide__subview-dot { display: none !important; }
.workflow-guide__embedded-search { display: inline-flex; align-items: center; gap: 6px; height: 32px; width: min(15rem, 40vw); padding: 0 10px; border: 1px solid var(--pj-line); border-radius: 999px; background: #fff; color: var(--pj-muted); }
.workflow-guide__embedded-search:focus-within { border-color: #9cc9b3; }
.workflow-guide__embedded-search .material-symbols-outlined { font-size: 17px; }
.workflow-guide__embedded-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 13px; color: var(--pj-ink); }
/* Alla grenar: korten på följd i en spalt (guidens två spalter lämnade tomrum bredvid korta kort).
   Kortens grid-column sätts inline av guiden, därav !important. */
.kguide [data-calculation-workflow-panel] .workflow-guide__branch-list.is-all { grid-template-columns: minmax(0, 1fr) !important; align-items: start !important; }
.kguide [data-calculation-workflow-panel] .workflow-guide__branch-list.is-all .workflow-guide__composed-card { grid-column: 1 !important; height: auto !important; }

.kguide .workflow-guide__moment-row { transition: box-shadow 200ms ease, background-color 200ms ease; }
/* "Att komplettera" pekar ut raden: samma bärnsten som listan, står kvar tills man rör raden. */
.kguide.kguide [data-calculation-workflow-panel][data-workflow-layout] .workflow-guide__composed[data-row-layout] .workflow-guide__moment-row.is-hit.is-hit, .kguide .workflow-guide__moment-row.is-hit { box-shadow: inset 3px 0 0 var(--pj-warn), 0 0 0 2px #f0ddb5 !important; background-color: #fffaf0 !important; border-radius: 10px; }
.kguide .workflow-composer, .kguide .workflow-guide__facts { display: none !important; }
/* Momentraden: alltid en rad – status, namn, rad två (det som saknas / valda värden / beskrivning),
   huvudmängden för valda moment och en chevron. Övriga fält fälls ut under raden, ett fält per rad
   med etiketten till vänster; en rad öppen i taget (guideEmbeddedOpenRow). */
.kguide .workflow-guide__moment-help, .kguide .workflow-guide__row-disclosure, .kguide [data-calculation-workflow-panel][data-workflow-layout] .workflow-guide__composed[data-row-layout] .workflow-guide__moment-row-summary { display: none !important; }
.kguide [data-calculation-workflow-panel][data-workflow-layout] .workflow-guide__composed[data-row-layout] .workflow-guide__moment-row .workflow-guide__moment-row-main { flex-wrap: wrap; row-gap: 8px; align-items: center; }
.kguide [data-calculation-workflow-panel][data-workflow-layout] .workflow-guide__composed[data-row-layout] .workflow-guide__moment-row .workflow-guide__moment-row-main > .workflow-guide__row-state { flex: 0 0 auto !important; align-self: center; order: 0; margin: 0 12px 0 0 !important; }
.kguide [data-calculation-workflow-panel][data-workflow-layout] .workflow-guide__composed[data-row-layout] .workflow-guide__moment-row .workflow-guide__row-identity { flex: 1 1 0; width: auto !important; max-width: none !important; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.kguide [data-calculation-workflow-panel][data-workflow-layout] .workflow-guide__composed[data-row-layout] .workflow-guide__moment-row .workflow-guide__row-heading { max-width: 100%; }
.kguide [data-calculation-workflow-panel][data-workflow-layout] .workflow-guide__composed[data-row-layout] .workflow-guide__moment-row.is-selected .workflow-guide__moment-row-label { font-weight: 500; }
.kguide .workflow-guide__embedded-summary { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; line-height: 1.35; color: var(--pj-muted); }
.kguide [data-calculation-workflow-panel][data-workflow-layout] .workflow-guide__composed[data-row-layout] .workflow-guide__moment-row.is-selected .workflow-guide__embedded-summary { color: var(--pj-ink-2); }
.kguide .workflow-guide__embedded-summary.is-warn { color: var(--pj-warn) !important; }
.kguide .workflow-guide__embedded-description { display: none; }
.kguide [data-calculation-workflow-panel][data-workflow-layout] .workflow-guide__composed[data-row-layout] .workflow-guide__moment-row.is-open .workflow-guide__embedded-description { display: block; font-size: 11.5px; line-height: 1.4; color: var(--pj-muted); }
.kguide .workflow-guide__embedded-toggle { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--pj-muted); cursor: pointer; }
.kguide .workflow-guide__embedded-toggle:hover { background: #eef3ef; color: var(--pj-ink); }
.kguide .workflow-guide__embedded-toggle .material-symbols-outlined { font-size: 20px; transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1); }
.kguide [data-calculation-workflow-panel][data-workflow-layout] .workflow-guide__composed[data-row-layout] .workflow-guide__moment-row.is-open .workflow-guide__embedded-toggle .material-symbols-outlined { transform: rotate(180deg); }
/* Stängd rad: inga fält – utom huvudmängden på ett valt moment (ändras utan att fälla ut). */
.kguide [data-calculation-workflow-panel][data-workflow-layout] .workflow-guide__composed[data-row-layout] .workflow-guide__moment-row:not(.is-open) [data-row-slot=quantity] { display: none !important; }
.kguide [data-calculation-workflow-panel][data-workflow-layout] .workflow-guide__composed[data-row-layout] .workflow-guide__moment-row.is-selected:not(.is-open) [data-row-slot=quantity]:has(.workflow-guide__inline-fields .workflow-guide__stepper, .workflow-guide__inline-fields .workflow-guide__room-measure-inline) { display: flex !important; flex: 0 0 auto; margin-left: auto; }
.kguide [data-calculation-workflow-panel][data-workflow-layout] .workflow-guide__composed[data-row-layout] .workflow-guide__moment-row.is-selected:not(.is-open) [data-row-slot=quantity] :is(.workflow-guide__moment-row-control:not(:has(.workflow-guide__inline-fields)), .workflow-guide__inline-measure:not(:has(.workflow-guide__stepper, .workflow-guide__room-measure-inline)), .workflow-guide__inline-measure:has(.workflow-guide__stepper, .workflow-guide__room-measure-inline) ~ .workflow-guide__inline-measure, .workflow-guide__field-label, .workflow-guide__field-heading, .workflow-guide__addon-choices, .workflow-guide__typical-hint, .workflow-guide__repeat-rows, .workflow-guide__repeat-add, .workflow-guide__repeat-sum, details) { display: none !important; }
.kguide [data-calculation-workflow-panel][data-workflow-layout] .workflow-guide__composed[data-row-layout] .workflow-guide__moment-row.is-open .workflow-guide__field-label::after { content: none !important; }
.kguide [data-calculation-workflow-panel][data-workflow-layout] .workflow-guide__composed[data-row-layout] .workflow-guide__moment-row.is-open:not(.is-selected):not(:has(.workflow-guide__inline-fields--count-stack)) .workflow-guide__moment-row-control > *, .kguide [data-calculation-workflow-panel][data-workflow-layout] .workflow-guide__composed[data-row-layout] .workflow-guide__moment-row.is-open:not(.is-selected):not(:has(.workflow-guide__inline-fields--count-stack)) .workflow-guide__inline-measure > * { grid-column: 1 / -1 !important; }
.kguide [data-calculation-workflow-panel][data-workflow-layout] .workflow-guide__composed[data-row-layout] .workflow-guide__moment-row.is-open .workflow-guide__teaser-choices { border: 0; padding: 0; background: transparent; box-shadow: none; }
/* Utfälld rad: fälten på egen rad under namnet, etikett till vänster. */
.kguide [data-calculation-workflow-panel][data-workflow-layout] .workflow-guide__composed[data-row-layout] .workflow-guide__moment-row.is-open [data-row-slot=quantity] { order: 5; flex: 1 1 100%; display: grid !important; gap: 10px; justify-content: stretch; padding: 2px 0 6px 34px; animation: rq-in 200ms cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.kguide [data-calculation-workflow-panel][data-workflow-layout] .workflow-guide__composed[data-row-layout] .workflow-guide__moment-row.is-open .workflow-guide__moment-row-control { display: grid; grid-template-columns: minmax(0, 120px) minmax(0, 1fr); gap: 8px 14px; align-items: center; justify-items: start; }
.kguide [data-calculation-workflow-panel][data-workflow-layout] .workflow-guide__composed[data-row-layout] .workflow-guide__moment-row.is-open .workflow-guide__moment-row-control > :is(.workflow-guide__inline-fields, .workflow-guide__field-panel, .workflow-guide__field-heading),
.kguide [data-calculation-workflow-panel][data-workflow-layout] .workflow-guide__composed[data-row-layout] .workflow-guide__moment-row.is-open .workflow-guide__inline-measure { display: contents; }
.kguide [data-calculation-workflow-panel][data-workflow-layout] .workflow-guide__composed[data-row-layout] .workflow-guide__moment-row.is-open .workflow-guide__moment-row-control :is(.workflow-guide__field-label, .workflow-guide__choice-mode) { grid-column: 1; font-size: 12px; color: var(--pj-muted); white-space: normal; }
.kguide [data-calculation-workflow-panel][data-workflow-layout] .workflow-guide__composed[data-row-layout] .workflow-guide__moment-row.is-open .workflow-guide__moment-row-control :is(.workflow-guide__choice-mode) { display: none; }
.kguide [data-calculation-workflow-panel][data-workflow-layout] .workflow-guide__composed[data-row-layout] .workflow-guide__moment-row.is-open .workflow-guide__moment-row-control > :not(.workflow-guide__field-heading):not(.workflow-guide__inline-fields):not(.workflow-guide__field-panel),
.kguide [data-calculation-workflow-panel][data-workflow-layout] .workflow-guide__composed[data-row-layout] .workflow-guide__moment-row.is-open .workflow-guide__inline-measure > :not(.workflow-guide__field-label) { grid-column: 2; }
.kguide [data-calculation-workflow-panel][data-workflow-layout] .workflow-guide__composed[data-row-layout] .workflow-guide__moment-row.is-open .workflow-guide__moment-row-control :is(.workflow-guide__teaser-choices, .workflow-guide__type-choices, .workflow-guide__wall-types, .workflow-guide__quick-values) { flex-wrap: wrap; }
.kguide [data-calculation-workflow-panel][data-workflow-layout] .workflow-guide__composed[data-row-layout] .workflow-guide__moment-row .workflow-guide__moment-row-actions { margin-left: auto; }
/* Ovald rad med flera antal (Kyl/frys, Ugn, Mikro …): samma namn | stegare-rutnät som den valda, utfällda raden. */
.kguide [data-calculation-workflow-panel][data-workflow-layout] .workflow-guide__composed[data-row-layout] .workflow-guide__moment-row[data-inline-idle="true"] .workflow-guide__moment-row-control:has(.workflow-guide__inline-fields--count-stack) { display: grid; grid-template-columns: minmax(0, 120px) minmax(0, 1fr); gap: 8px 14px; align-items: center; justify-items: start; }
.kguide [data-calculation-workflow-panel][data-workflow-layout] .workflow-guide__composed[data-row-layout] .workflow-guide__moment-row[data-inline-idle="true"] .workflow-guide__inline-fields--count-stack .workflow-guide__field-label { display: block; grid-column: 1; font-size: 12px; color: var(--pj-muted); white-space: normal; }
.kguide [data-calculation-workflow-panel][data-workflow-layout] .workflow-guide__composed[data-row-layout] .workflow-guide__moment-row.is-open .workflow-guide__moment-row-actions { order: 3; }
.kguide [data-calculation-workflow-panel][data-workflow-layout] .workflow-guide__composed[data-row-layout] .workflow-guide__moment-row.is-open { scroll-margin-bottom: 110px; }
@media (prefers-reduced-motion: reduce) {
  .kguide .workflow-guide__moment-row.is-open [data-row-slot=quantity] { animation: none; }
  .kguide .workflow-guide__embedded-toggle .material-symbols-outlined { transition: none; }
}
/* Avancerad visar desktop-guiden först från 1024 px (under det har den en egen mobilvy); fliken visar
   alltid desktop-guiden, så de regler som saknas under 1024 px och syns mest läggs här på alla bredder. */
.kguide .workflow-guide__branch-list.is-all .workflow-guide__inline-gren-head { display: none !important; }
.kguide .workflow-guide__group-total { flex: 0 0 auto; border-radius: 999px; background: #e4f1e9; padding: 0.13rem 0.4rem; color: #086846; font-size: 0.58rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kguide .workflow-guide__group-tabs, .kguide .workflow-guide__subviews { overscroll-behavior-x: contain; }
/* Arbetsgruppsflikarna står still: guiden flyttar den valda först (order: -1) och gör den större med
   ikon, så valet hoppade till vänster och grannarna flyttade sig. Här markeras den bara med tonen. */
.kguide [data-calculation-workflow-panel][data-workflow-layout] .workflow-guide__shared-toolbar .workflow-guide__group-tab.is-active { order: 0; min-height: 2rem; margin-right: 0; padding-inline: 0.55rem; font-size: 0.72rem; }
.kguide [data-calculation-workflow-panel][data-workflow-layout] .workflow-guide__group-tab.is-active .workflow-guide__group-icon { display: none; }
.kguide .workflow-guide__moment-row:not(.is-selected) .workflow-guide__field-warning { display: none !important; }
/* Valen (utförande, typ, snabbvärden) som Kalkyl-flikens piller (kchip): vit med tunn kant, grön vid
   hovring, valt = ljusgrön med grön kant. Gäller både den stängda raden och den utfällda. */
.kguide [data-calculation-workflow-panel][data-workflow-layout] .workflow-guide__composed[data-row-layout] .workflow-guide__moment-row :is(.workflow-guide__teaser-choices > button, .workflow-guide__type-choices button, .workflow-guide__segments button, .workflow-guide__wall-types button, .workflow-guide__quick-values > button, button.workflow-guide__choice) { display: inline-flex !important; align-items: center; height: 24px !important; min-height: 24px !important; padding: 0 9px !important; border: 1px solid var(--pj-line) !important; border-radius: 999px !important; background: #fff !important; box-shadow: none !important; font: inherit; font-size: 11.5px !important; font-weight: 400 !important; color: var(--pj-ink-2) !important; white-space: nowrap; cursor: pointer; transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease; }
.kguide [data-calculation-workflow-panel][data-workflow-layout] .workflow-guide__composed[data-row-layout] .workflow-guide__moment-row :is(.workflow-guide__teaser-choices > button, .workflow-guide__type-choices button, .workflow-guide__segments button, .workflow-guide__wall-types button, .workflow-guide__quick-values > button, button.workflow-guide__choice):hover { border-color: var(--pj-leaf) !important; color: var(--pj-leaf-dark) !important; }
.kguide [data-calculation-workflow-panel][data-workflow-layout] .workflow-guide__composed[data-row-layout] .workflow-guide__moment-row :is(.workflow-guide__teaser-choices > button, .workflow-guide__type-choices button, .workflow-guide__segments button, .workflow-guide__wall-types button, .workflow-guide__quick-values > button, button.workflow-guide__choice):is(.is-selected, [aria-pressed="true"], .is-instant-picked) { border-color: #cfe3d8 !important; background: #eaf3ee !important; color: var(--pj-leaf-dark) !important; font-weight: 500 !important; }
.kguide [data-calculation-workflow-panel][data-workflow-layout] .workflow-guide__composed[data-row-layout] .workflow-guide__moment-row :is(.workflow-guide__teaser-choices, .workflow-guide__type-choices, .workflow-guide__segments, .workflow-guide__wall-types, .workflow-guide__quick-values) { display: flex; flex-wrap: wrap; gap: 6px !important; border: 0 !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; }
/* Ett ovalt moment har inget valt utförande: standardvärdet får inte se intryckt ut. */
.kguide [data-calculation-workflow-panel][data-workflow-layout] .workflow-guide__composed[data-row-layout] .workflow-guide__moment-row:not(.is-selected):not(.is-instant-on) :is(.workflow-guide__teaser-choices > button, .workflow-guide__type-choices button, .workflow-guide__segments button, button.workflow-guide__choice):is(.is-selected, [aria-pressed="true"]):not(.is-instant-picked):not(:hover) { border-color: var(--pj-line) !important; background: #fff !important; color: var(--pj-ink-2) !important; font-weight: 400 !important; }
/* Rummets kort */
.ksh-h { display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; gap: 14px 20px; align-items: start; padding: 14px; border-radius: 16px; background: #fff; border: 1px solid var(--pj-line-2); animation: rq-in 240ms cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.ksh-img { width: 140px; height: 118px; object-fit: cover; border-radius: 12px; background: #f6f8f6; display: block; }
.ksh-t { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; align-content: start; }
.ksh-t h3 { margin: 0; font-family: Outfit, Inter, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ksh-t small { font-size: 14px; color: var(--pj-muted); }
.ksh-act { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.ksh-act .rchip { text-decoration: none; height: 28px; padding: 0 12px; font-size: 12.5px; } a.rchip:hover { filter: brightness(0.96); }
/* Mallen: egen knapp först i rummets åtgärdsrad (öppnar mallväljaren). Vit med ram – gröna piller betyder status. */
.ksh-lvl { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px 0 10px; border: 1px solid #cfdcd3; border-radius: 9px; font: inherit; font-size: 13.5px; color: var(--pj-ink); background: #fff; box-shadow: 0 1px 2px rgba(23, 33, 26, 0.06); cursor: pointer; }
.ksh-lvl b { font-weight: 500; } .ksh-lvl:hover { border-color: #a9cbb8; background: #fbfcfb; }
.ksh-lvl .material-symbols-outlined { font-size: 18px; color: var(--pj-muted); } .ksh-lvl .ksh-lvl__ico { color: var(--pj-leaf-dark); }
.ksh-lvl:focus-visible { outline: 2px solid var(--pj-leaf-dark); outline-offset: 2px; }
.ksh-undo { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--pj-ink-2); }
.ksh-undo button { border: 0; padding: 0; background: none; font: inherit; color: var(--pj-leaf-dark); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.ksh-undo.is-warn { color: var(--pj-warn); }
.ksh-h { container-type: inline-size; }
.ksh-stats { display: flex; gap: 0; align-self: start; }
/* Smal mittspalt (tre paneler på en 13–15-tumsskärm): nyckeltalen på egen rad under namnet i stället för ovanpå det. */
@container (max-width: 760px) {
  .ksh-h { grid-template-columns: 110px minmax(0, 1fr); }
  .ksh-img { width: 110px; height: 92px; }
  .ksh-t h3 { font-size: 22px; }
  .ksh-stats { grid-column: 1 / -1; justify-content: space-between; flex-wrap: wrap; row-gap: 6px; }
  .ksh-stats > span { padding: 0 10px; } .ksh-stats > span:first-child { padding-left: 0; } .ksh-stats b { font-size: 17px; }
}
.ksh-stats > span { display: grid; gap: 2px; padding: 0 16px; border-left: 1px solid var(--pj-line-2); }
.ksh-stats > span:first-child { border-left: 0; }
.ksh-stats small { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pj-muted); }
.ksh-stats b { font-family: Outfit, Inter, ui-sans-serif, system-ui, sans-serif; font-size: 20px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: -0.01em; }
.ksh-stats .is-total b { color: var(--pj-leaf-dark); }
/* Telefon: nyckeltalen två och två i stället för fyra som inte ryms på en rad. */
@container (max-width: 420px) {
  .ksh-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 8px; }
  .ksh-stats > span:nth-child(odd) { border-left: 0; padding-left: 0; }
}
/* Arbetsgrupperna */
.kgroups { display: grid; gap: 6px; padding: 14px; border-radius: 16px; background: #fff; border: 1px solid var(--pj-line-2); }
.kgroups-h { display: flex; align-items: baseline; gap: 12px; padding: 2px 4px 8px; }
.kgroups-h h4 { margin: 0; font-family: Outfit, Inter, ui-sans-serif, system-ui, sans-serif; font-size: 18px; font-weight: 500; }
.kgroups-h small { font-size: 12.5px; color: var(--pj-muted); }
.kg { display: grid; grid-template-columns: 22px 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 14px 8px 10px; border: 1px solid var(--pj-line-2); border-radius: 12px; background: #fff; text-align: left; font: inherit; color: inherit; cursor: pointer; transition: background 140ms ease, border-color 140ms ease, transform 140ms ease; }
.kg:hover { background: #f8faf8; border-color: var(--pj-line); }
.kg.is-on { background: #eaf3ee; border-color: #bcdccb; }
.kg .rrow-chev { color: var(--pj-faint); transition: transform 160ms ease; } .kg.is-on .rrow-chev { transform: rotate(90deg); color: var(--pj-leaf-dark); }
.kg .rgrp-icon { width: 44px; height: 44px; border-radius: 10px; background: #eef3ee; }
.kg .rgrp-icon .material-symbols-outlined { font-size: 22px; }
.kg.is-empty .rgrp-icon { opacity: 0.6; }
.kg-name { min-width: 0; } .kg-name strong { display: block; font-size: 16px; font-weight: 500; } .kg-name small { display: block; font-size: 12.5px; color: var(--pj-muted); margin-top: 1px; }
.kg-sum { font-size: 15px; color: var(--pj-muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .kg-sum b { font-weight: 500; color: var(--pj-leaf-dark); }
.kg-need { font-style: normal; color: var(--pj-warn); }
.kbody.is-busy .kgroups { opacity: 0.7; transition: opacity 160ms ease; }
/* Sidopanelen: momenten i vald grupp */
.kside { position: absolute; inset: 0; display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; border-radius: 16px; background: #fff; border: 1px solid var(--pj-line-2); overflow: hidden; }
.kside-enter { transition: opacity 220ms cubic-bezier(0.22, 1, 0.36, 1), transform 260ms cubic-bezier(0.22, 1, 0.36, 1); }
.kside-enter-start { opacity: 0; transform: translateX(14px); } .kside-enter-end { opacity: 1; transform: none; }
.kside-h { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 14px 10px; }
.kside-h .rgrp-icon { width: 44px; height: 44px; border-radius: 10px; background: #eef3ee; }
.kside-t h4 { margin: 0; font-family: Outfit, Inter, ui-sans-serif, system-ui, sans-serif; font-size: 20px; font-weight: 500; }
.kside-t small { display: block; font-size: 12.5px; color: var(--pj-muted); margin-top: 2px; }
.kside-x { width: 32px; height: 32px; border: 1px solid var(--pj-line); border-radius: 9px; background: #fff; display: grid; place-items: center; cursor: pointer; color: var(--pj-ink-2); }
.kside-x:hover { background: #f4f7f3; }
.kside-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 4px 14px 10px; }
.kside-search { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border: 1px solid var(--pj-line); border-radius: 10px; background: #fff; }
.kside-search .material-symbols-outlined { font-size: 18px; color: var(--pj-muted); }
.kside-search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 13px; color: var(--pj-ink); outline: 0; }
.kside-filter { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 12px; border: 1px solid var(--pj-line); border-radius: 10px; background: #fff; font: inherit; font-size: 12.5px; color: var(--pj-ink-2); cursor: pointer; }
.kside-filter.is-on { background: var(--pj-leaf-dark); border-color: var(--pj-leaf-dark); color: #fff; }
.kside-filter .material-symbols-outlined { font-size: 16px; }
.kside-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 16px 8px; font-size: 13px; font-weight: 500; }
.kside-all { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 400; color: var(--pj-muted); cursor: pointer; }
.kside-all input { width: 18px; height: 18px; accent-color: var(--pj-leaf-dark); }
.kside-list { display: grid; gap: 8px; align-content: start; padding: 2px 14px 14px; overflow: auto; } /* listan fyller panelens rad: utan align-content start sträcks få sökträffar ut över hela höjden */
.kside-f { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--pj-line-2); background: #fff; }
.kside-f__t { display: grid; } .kside-f__t b { font-size: 13.5px; font-weight: 500; } .kside-f__t small { font-size: 12px; color: var(--pj-muted); }
.kside-f__gap { color: var(--pj-warn); }
.kside-add { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 18px; border: 0; border-radius: 12px; background: var(--pj-leaf-dark); color: #fff; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.kside-add:hover { background: #27604f; } .kside-add:disabled { opacity: 0.5; cursor: default; }
/* Variantchips i korten */
.kchip { height: 24px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--pj-line); background: #fff; font: inherit; font-size: 11.5px; color: var(--pj-ink-2); cursor: pointer; white-space: nowrap; }
.kchip:hover { border-color: var(--pj-leaf); color: var(--pj-leaf-dark); }
.kchip.is-on { background: #eaf3ee; border-color: #cfe3d8; color: var(--pj-leaf-dark); font-weight: 500; cursor: default; }
/* Momentkortet */
.kcard { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; grid-template-areas: "check main price" "check tags qty" "check edit edit"; gap: 6px 12px; padding: 12px; border: 1px solid var(--pj-line-2); border-radius: 12px; background: #fff; transition: background 140ms ease, border-color 140ms ease; }
.kcard-check, .kcheck { grid-area: check; align-self: start; }
.kcard-price { grid-area: price; display: grid; justify-items: end; align-content: start; gap: 2px; }
.kcard-qty { grid-area: qty; display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; align-self: end; }
.kcard-tags { grid-area: tags; align-self: end; }
.kcard-tags i, .kcard-tags .kchip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.kcard-tags form { display: inline-flex; min-width: 0; max-width: 100%; }
.kside-leave { transition: opacity 160ms ease, transform 160ms ease; }
.kside-f-hidden { opacity: 0; transform: translateY(8px); } .kside-f-shown { opacity: 1; transform: none; }
.kcard.is-on { background: #f4f9f6; border-color: #d3e6da; }
.kcard.is-picked { border-color: #8fbfae; background: #f4f9f6; }
.kcard.is-pending { opacity: 0.6; }
.kcard-check { display: contents; }
.kcard-main { grid-area: main; }
.kcheck { width: 26px; height: 26px; margin-top: 1px; border-radius: 7px; border: 1.5px solid #cfdccf; background: #fff; display: grid; place-items: center; color: transparent; cursor: pointer; padding: 0; transition: background 120ms ease, border-color 120ms ease, color 120ms ease; }
.kcheck .material-symbols-outlined { font-size: 18px; }
.kcheck:hover { border-color: var(--pj-leaf); }
.kcheck.is-on { background: var(--pj-leaf-dark); border-color: var(--pj-leaf-dark); color: #fff; }
.kcheck.is-on:hover { background: #b4453a; border-color: #b4453a; }
.kcheck.is-picked { background: var(--pj-leaf); border-color: var(--pj-leaf); color: #fff; }
.kcheck.is-locked { cursor: default; opacity: 0.6; } .kcheck:disabled { opacity: 0.4; cursor: default; }
.kcard-main { min-width: 0; display: grid; gap: 4px; }
.kcard-name { font-size: 14.5px; font-weight: 500; }
.kcard-desc { font-size: 12.5px; color: var(--pj-muted); line-height: 1.35; } .kcard-desc.warn { color: var(--pj-warn); }
.kcard-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 2px; }
.kcard-tags i { font-style: normal; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: #f2f5ef; color: var(--pj-muted); }
.kcard-tags .kfact { font: inherit; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: transparent; border: 1px dashed var(--pj-line); color: var(--pj-muted); font-variant-numeric: tabular-nums; cursor: pointer; }
.kcard-tags .kfact:hover { border-color: var(--pj-leaf); color: var(--pj-leaf-dark); }
.kcard-tags .kfact.is-set { border-style: solid; border-color: #cfe6d6; background: #eef6f1; color: var(--pj-leaf-dark); }
/* Auto-växeln: en knapp – fylld när mängden följer rummet, tom när värdet är eget. */
.kauto { display: inline-flex; align-items: center; gap: 2px; margin-left: 8px; padding: 0 10px 0 6px; height: 26px; border: 1px solid var(--pj-line); border-radius: 999px; background: #fff; font: inherit; font-size: 11.5px; font-weight: 500; color: var(--pj-muted); cursor: pointer; transition: background 140ms ease, border-color 140ms ease, color 140ms ease, padding 140ms ease; }
.kauto .material-symbols-outlined { font-size: 14px; width: 0; overflow: hidden; transition: width 140ms ease; }
.kauto.is-on { background: var(--pj-leaf-dark); border-color: var(--pj-leaf-dark); color: #fff; } .kauto.is-on .material-symbols-outlined { width: 14px; }
.kauto:not(.is-on) { padding-left: 10px; } .kauto:not(.is-on):hover { border-color: var(--pj-leaf); color: var(--pj-leaf-dark); }
.kstep button:disabled, .kstep input:disabled { color: var(--pj-faint); background: #f7f8f6; cursor: default; }
.kcard-row { font-variant-numeric: tabular-nums; }
.kcard-tags form { display: inline; }
.kcard-h { font-size: 13px; color: var(--pj-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kcard-kr { font-size: 15px; font-weight: 500; color: var(--pj-leaf-dark); font-variant-numeric: tabular-nums; white-space: nowrap; }
a.kcard-kr.warn { color: var(--pj-warn); font-weight: 400; text-decoration: none; font-size: 13px; }
.kstep { display: inline-flex; align-items: center; gap: 0; }
.kstep-l { font-size: 11.5px; color: var(--pj-muted); margin-right: 6px; }
.kstep button:not(.kauto) { width: 30px; height: 30px; border: 1px solid var(--pj-line); background: #fff; font: inherit; font-size: 16px; color: var(--pj-ink-2); cursor: pointer; }
.kstep button:not(.kauto):first-of-type { border-radius: 8px 0 0 8px; } .kstep input[type=text] + button:not(.kauto) { border-radius: 0 8px 8px 0; }
.kstep button:not(.kauto):hover { background: #f4f7f3; }
.kstep input { width: 52px; height: 30px; border: 1px solid var(--pj-line); border-left: 0; border-right: 0; text-align: center; font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; }
.kstep em { font-style: normal; font-size: 11.5px; color: var(--pj-muted); margin-left: 6px; }
.kcard-more { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--pj-muted); cursor: pointer; }
.kcard-more:hover, .kcard:has(.kedit) .kcard-more { background: #e6f2ea; color: var(--pj-leaf-dark); } .kcard-more .material-symbols-outlined { font-size: 18px; }
/* "Att komplettera" i rummets kort: momentet + vad som saknas; klick öppnar gruppen och rullar dit. */
.ksh-todo { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 8px 10px; border-radius: 10px; background: #fff7e8; }
.ksh-todo__t { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; color: var(--pj-warn); margin-right: 2px; } .ksh-todo__t .material-symbols-outlined { font-size: 16px; }
.ksh-todo__i { display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%; padding: 4px 8px 4px 10px; border: 1px solid #f0ddb5; border-radius: 999px; background: #fff; font: inherit; font-size: 12.5px; color: var(--pj-ink); cursor: pointer; text-align: left; }
.ksh-todo__i b { font-weight: 500; } .ksh-todo__i small { font-size: 11.5px; color: var(--pj-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.ksh-todo__i .material-symbols-outlined { font-size: 14px; color: var(--pj-warn); align-self: center; } .ksh-todo__i:hover { border-color: var(--pj-warn); }
.ksh-todo__i.is-sys { cursor: default; } .ksh-todo__i.is-sys small { white-space: normal; max-width: none; }
.kcard.is-hit { box-shadow: 0 0 0 3px rgba(214, 152, 40, 0.35); transition: box-shadow 500ms ease; }
/* Öppet formulär tar över kortets egna fält (typ, antal); varianterna står kvar som chips. */
.kcard:has(.kedit) .kcard-tags > form:has(.ksel), .kcard:has(.kedit) .kcard-qty > :not(.kcard-more) { display: none; }
/* Redigeringsläge: kortet drar ihop sig – kryss, namn, pris och reglage på en rad, taggar och
   beskrivning viker undan – så fälten får plats. Storlekarna tonar (font-size/padding). */
.kcard { transition: background 140ms ease, border-color 140ms ease, padding 220ms ease, gap 220ms ease; }
.kcard-name, .kcard-kr, .kcard-h, .kcheck { transition: font-size 220ms ease, width 220ms ease, height 220ms ease, background 120ms ease, border-color 120ms ease, color 120ms ease; }
.kcard:has(.kedit) { grid-template-columns: 22px minmax(0, 1fr) auto 28px; grid-template-areas: "check main price qty" "check edit edit edit"; gap: 4px 10px; padding: 9px 12px 10px; }
.kcard:has(.kedit) .kcard-tags, .kcard:has(.kedit) .kcard-desc { display: none; }
.kcard:has(.kedit) .kcheck { width: 22px; height: 22px; margin-top: 0; } .kcard:has(.kedit) .kcheck .material-symbols-outlined { font-size: 15px; }
.kcard:has(.kedit) .kcard-main { align-self: center; }
.kcard:has(.kedit) .kcard-name { font-size: 13.5px; }
.kcard:has(.kedit) .kcard-price { display: flex; align-items: baseline; gap: 6px; align-self: center; }
.kcard:has(.kedit) .kcard-kr { font-size: 13px; } .kcard:has(.kedit) .kcard-h { font-size: 11.5px; }
.kcard:has(.kedit) .kcard-qty { align-self: center; }
.kcard:has(.kedit) .kedit { margin-top: 2px; }
/* Kortets inbyggda formulär */
.kedit { grid-area: edit; display: grid; gap: 8px; margin-top: 4px; padding: 10px 12px; border-radius: 10px; background: #f4f7f3; animation: rq-in 200ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.kedit-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 12.5px; color: var(--pj-ink-2); }
.kedit-row > span:first-child { font-weight: 500; }
.kedit-row .kedit-note { grid-column: 2; justify-self: end; margin-top: -4px; color: var(--pj-ink-3, #5f6d64); font-size: 11px; }
.kedit-row select { height: 30px; max-width: 220px; border: 1px solid var(--pj-line); border-radius: 8px; padding: 0 8px; font: inherit; font-size: 12.5px; background: #fff; }
.kedit-bool input { width: 18px; height: 18px; accent-color: var(--pj-leaf-dark); }
.kedit-ro { font-style: normal; color: var(--pj-muted); }
.kedit-group { display: grid; gap: 6px; padding-top: 4px; border-top: 1px solid #e3ebe3; }
.kedit-group__h { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; font-weight: 500; }
.kedit-add { display: inline-flex; align-items: center; gap: 2px; height: 26px; padding: 0 8px 0 4px; border: 1px dashed var(--pj-line); border-radius: 999px; background: transparent; font: inherit; font-size: 11.5px; color: var(--pj-muted); cursor: pointer; }
.kedit-add:hover { color: var(--pj-leaf-dark); border-color: var(--pj-leaf); } .kedit-add .material-symbols-outlined { font-size: 14px; }
.kedit-rrow { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; align-items: center; gap: 6px; font-size: 12.5px; }
.kedit-rrow b { font-weight: 500; }
.kedit-rrow select { min-width: 0; height: 30px; border: 1px solid var(--pj-line); border-radius: 8px; padding: 0 8px; font: inherit; font-size: 12.5px; background: #fff; }
.kedit-area { display: inline-flex; align-items: center; gap: 4px; }
.kedit-area input { width: 58px; height: 30px; border: 1px solid var(--pj-line); border-radius: 8px; padding: 0 6px; text-align: right; font: inherit; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.kedit-area em { font-style: normal; font-size: 11.5px; color: var(--pj-muted); }
.kedit-x { width: 26px; height: 26px; border: 0; border-radius: 7px; background: transparent; color: var(--pj-faint); display: grid; place-items: center; cursor: pointer; } .kedit-x:hover { color: #b4453a; background: #fdf2f2; } .kedit-x .material-symbols-outlined { font-size: 16px; }
.kedit-empty { margin: 0; font-size: 12.5px; color: var(--pj-muted); }
.kedit-f { display: flex; justify-content: flex-end; gap: 8px; padding-top: 2px; }
.kedit-cancel { height: 32px; padding: 0 12px; border: 1px solid var(--pj-line); border-radius: 9px; background: #fff; font: inherit; font-size: 12.5px; color: var(--pj-ink-2); cursor: pointer; }
.kedit-save { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 14px; border: 0; border-radius: 9px; background: var(--pj-leaf-dark); color: #fff; font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; }
.kedit-save:hover { background: #27604f; } .kedit-save .material-symbols-outlined { font-size: 16px; }
.kcard .ksel { height: 28px; border: 1px solid var(--pj-line); border-radius: 8px; padding: 0 8px; font: inherit; font-size: 12px; background: #fff; max-width: 200px; }
.qskel { padding: 14px 0 10px; }
/* Brytpunkter på ramens bredd (AI-panelen dockad smalnar ramen på bred skärm), som Offert-fliken. */
/* Smalare ram: panelen lägger sig under grupperna i mittspalten (position: fixed går inte –
   .project-shell är en container och blir då panelens referens). */
@container project-detail (max-width: 1240px) {
  .kws.has-side { grid-template-columns: 280px minmax(0, 1fr); }
  .kws.has-side > .ksheet > .ksh > .kbody > .kside-col { display: block; grid-column: 2; grid-row: auto; position: static; }
  .kws > .ksheet > .ksh > .kbody > .kside-col > .kside { position: static; max-height: min(72vh, 760px); }
}
.ktabs { display: none; }
/* Touch: inga rullningslister i kalkylens rullande ytor – fingret rullar. */
@media (pointer: coarse) { .kws, .kside-list, .krail, .pstepper { scrollbar-width: none; } .kws::-webkit-scrollbar, .kside-list::-webkit-scrollbar, .krail::-webkit-scrollbar { display: none; } }
/* 860, inte 900: på 1024 px äter desktopens sidomeny ramen till 894 px, medan 1000 px (utan meny) ger 952 och
   visar hela guiden – samma sida fick smalt läge på den bredare skärmen. */
@container project-detail (max-width: 860px) {
  /* Tre sidor i bredd att svepa mellan – Rum · Rummet · Moment – med en flikrad som följer svepet.
     Sidorna är exakt behållarens bredd (100 %) och snappar; gapet gör att grannsidan inte kikar fram. */
  /* Fäst under appens toppfält (sticky, 55 px på projektsidan) – vid top: 0 hamnade flikraden bakom det. */
  /* Rumsraden: ‹ rummet ▾ · pris › fast under appens toppfält (55 px). Rumslistan fälls ut under den. */
  /* En slät remsa i panelen (ingen egen ram, skugga eller radie), kant i kant och fast direkt under appens toppfält. */
  .ktabs.kbar { position: sticky; top: 55px; z-index: 6; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) 44px; gap: 6px; align-items: center; margin: -8px -8px 2px; padding: 8px; border: 0; border-radius: 17px 17px 0 0; background: #fff; box-shadow: none; }
  /* Panelen och remsan är samma vita yta (en bakgrund, inte två). */
  .rhub.kwrap { background: #fff; gap: 0; }
  .kbar-room { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: 6px; min-width: 0; height: 44px; padding: 0 8px 0 10px; border: 0; border-radius: 10px; background: #f4f7f3; font: inherit; text-align: left; color: var(--pj-ink); cursor: pointer; }
  .kbar-room b { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .kbar-room small { grid-row: 2; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--pj-leaf-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kbar-room small.is-warn { color: #b7791f; }
  .kbar-room > .material-symbols-outlined { grid-column: 2; grid-row: 1 / 3; font-size: 20px; color: var(--pj-muted); }
  .kbar-add { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 10px; background: #e6f2ea; color: var(--pj-leaf-dark); cursor: pointer; } .kbar-add .material-symbols-outlined { font-size: 22px; }
  .kbar-group { display: flex; align-items: center; gap: 6px; min-width: 0; height: 44px; padding: 0 8px 0 10px; border: 0; border-radius: 10px; background: #f4f7f3; font: inherit; color: var(--pj-ink); cursor: pointer; }
  .kbar-group > .material-symbols-outlined:first-child { font-size: 18px; color: var(--pj-leaf-dark); }
  .kbar-group b { min-width: 0; font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .kbar-group em { flex: none; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--pj-leaf-dark); color: #fff; font-style: normal; font-size: 11px; font-variant-numeric: tabular-nums; }
  .kbar-group > .material-symbols-outlined:last-child { margin-left: auto; font-size: 20px; color: var(--pj-muted); }
  .kbar-group[aria-busy="true"] { opacity: 0.55; }
  .kbar-list { grid-column: 1 / -1; display: grid; padding: 4px 0 2px; border-top: 1px solid var(--pj-line-2); margin-top: 2px; }
  /* Utfällningen räknas mot fönstret: toppfält (63) + listen + dockan (~96) får plats. */
  .kbar-rooms { display: grid; gap: 2px; max-height: calc(100dvh - 330px); overflow-y: auto; -webkit-overflow-scrolling: touch; } /* höjden sätts när listan öppnas (open()) */
  .kbar-item em.material-symbols-outlined { font-size: 18px; color: var(--pj-leaf-dark); }
  .kbar-in { transition: opacity 160ms cubic-bezier(0.215, 0.61, 0.355, 1), transform 160ms cubic-bezier(0.215, 0.61, 0.355, 1); } .kbar-out { transition: opacity 120ms ease, transform 120ms ease; } .kbar-from { opacity: 0; transform: translateY(-4px); }
  /* Koncept C: guidens meny (arbetsgrupper) och undermeny (grenar) bor i listen – grenarna i följd med
     en fastnande rubrik, raderna kant i kant, inget kort i kortet. */
  .kguide .workflow-guide__group-tabs, .kguide .workflow-guide__subviews { display: none !important; }
  .kguide .workflow-guide__composed { padding: 0 !important; background: transparent !important; }
  .kguide .workflow-guide__branch-list { gap: 0 !important; }
  .kguide .workflow-guide__composed-grid { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; }
  .kguide .workflow-guide__composed-card { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
  .kguide .workflow-guide__branch-list.is-all .workflow-guide__inline-gren-head { display: flex !important; position: sticky; top: 115px; z-index: 4; align-items: center; gap: 8px; min-height: 32px; margin: 0; padding: 4px 10px; background: #f4f7f3 !important; border-radius: 0 0 8px 8px; box-shadow: 0 -6px 0 #f4f7f3; font-size: 12.5px; color: var(--pj-ink-2); }
  .kguide .workflow-guide__composed-grid.is-single-section .workflow-guide__inline-group-head { display: none !important; }
  .kguide .workflow-guide__inline-group-head { padding: 8px 10px 2px !important; background: transparent !important; border: 0 !important; font-size: 12px; color: var(--pj-muted); }
  .kguide .workflow-guide__branch-section ~ .workflow-guide__branch-section { margin-top: 6px; }
  .knext { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 48px; margin: 10px 0 0; padding: 0 14px; border: 1px solid var(--pj-line-2); border-radius: 12px; background: #fff; font: inherit; font-size: 13.5px; color: var(--pj-ink-2); cursor: pointer; }
  .knext b { font-weight: 500; color: var(--pj-ink); } .knext .material-symbols-outlined { color: var(--pj-leaf-dark); }
  .kbar-acts { display: flex; gap: 8px; padding: 6px 10px 4px; } .kbar-acts > a { flex: 1; justify-content: center; height: 40px; }
  .kbar-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "ico name kr" "ico sub kr"; align-items: center; column-gap: 10px; min-height: 48px; padding: 6px 10px; border: 0; border-radius: 10px; background: transparent; font: inherit; text-align: left; color: var(--pj-ink); cursor: pointer; }
  .kbar-item.is-on { background: #eaf3ee; } .kbar-item > .material-symbols-outlined { grid-area: ico; font-size: 20px; color: var(--pj-ink-2); }
  .kbar-item b { grid-area: name; font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kbar-item small { grid-area: sub; font-size: 11.5px; color: var(--pj-muted); }
  .kbar-item em, .kbar-foot em { grid-area: kr; font-style: normal; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .kbar-foot { display: flex; align-items: center; gap: 10px; padding: 8px 10px 4px; font-size: 12.5px; color: var(--pj-muted); } .kbar-foot em { margin-left: auto; color: var(--pj-ink); } .kbar-foot .krail-add { height: 36px; }
  .kbar-foot { border-top: 1px solid var(--pj-line-2); margin-top: 4px; }
  /* En sida: railen är dold (rumsraden ersätter den) och inget i sidled – då kan guiden också fästa saker mot fönstret. */
  .kws, .kws.has-side { grid-template-columns: minmax(0, 1fr); gap: 0; overflow: visible; }
  .kws > .krail { display: none; }
  .kws > .ksheet > .ksh > .ksh-h, .kws > .ksheet > .ksh > .kbody > .knote, .kws > .ksheet > .ksh > .kbody > .kgroups, .kws > .ksheet > .ksh > .kguide-host { grid-column: 1; grid-row: auto; }
  .kws > .ksheet > .ksh > .kguide-host { margin-top: 0; }
  .kws > .ksheet > .ksh > .ksh-h { margin-bottom: 10px; }
  /* Rummets kort: namn, m² och det som saknas. Summan står i rumsraden, bilden och nyckeltalen tar bara plats. */
  .ksh-h, .ksh-h[class] { animation: none; grid-template-columns: minmax(0, 1fr) !important; padding: 12px 14px; }
  .ksh-h .ksh-img, .ksh-h .ksh-stats, .ksh-h .ksh-t > h3 { display: none; }
  .ksh-h:has(.ksh-todo) .ksh-act .rchip { display: none; }
  .ksh-h:not(:has(.ksh-todo)) { display: none; }
  .ksh-h .ksh-t { display: none; }
  .ksh-h:has(.ksh-todo) { padding: 10px 12px; }
  /* Momentrader: ovalda är en rad (namnet + knappen); beskrivningen står först när raden är vald eller öppen. */
  .kguide .workflow-guide__moment-row:not(.is-selected):not(.is-open) .workflow-guide__embedded-summary { display: none; }
  /* Grenchipsen: en rad som rullar i sidled, med tumstorlek. */
  .kguide .workflow-guide__subviews { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; scroll-padding-inline: 8px; }
  .kguide .workflow-guide__subviews::-webkit-scrollbar { display: none; }
  .kguide .workflow-guide__subviews > * { flex: none !important; }
  .kguide .workflow-guide__subview-pill, .kguide .workflow-guide__branches-toggle { min-height: 36px !important; }
  .kguide .workflow-guide__row-state { width: 36px !important; height: 36px !important; }
  .kguide [data-calculation-workflow-panel][data-workflow-layout] .workflow-guide__composed[data-row-layout] .workflow-guide__moment-row.is-open [data-row-slot=quantity] { padding-left: 0; }
  .kguide [data-calculation-workflow-panel][data-workflow-layout] .workflow-guide__composed[data-row-layout] .workflow-guide__moment-row.is-open .workflow-guide__moment-row-control { grid-template-columns: minmax(0, 1fr); }
  .kguide [data-calculation-workflow-panel][data-workflow-layout] .workflow-guide__composed[data-row-layout] .workflow-guide__moment-row.is-open .workflow-guide__moment-row-control :is(.workflow-guide__field-label),
  .kguide [data-calculation-workflow-panel][data-workflow-layout] .workflow-guide__composed[data-row-layout] .workflow-guide__moment-row.is-open .workflow-guide__moment-row-control > *, .kguide [data-calculation-workflow-panel][data-workflow-layout] .workflow-guide__composed[data-row-layout] .workflow-guide__moment-row.is-open .workflow-guide__inline-measure > * { grid-column: 1 !important; }
  .kguide .workflow-guide__embedded-toggle { width: 40px; height: 40px; }
  /* Smal: namnet får hela raden bredvid statusknappen; mängd och knappar på raden under. */
  .kguide [data-calculation-workflow-panel][data-workflow-layout] .workflow-guide__composed[data-row-layout] .workflow-guide__moment-row .workflow-guide__row-identity { flex: 1 1 calc(100% - 100px) !important; }
  /* Öppen rad: ⌃ och × står kvar på titelraden (titeln krymper i stället), valen följer direkt under. */
  .kguide [data-calculation-workflow-panel][data-workflow-layout] .workflow-guide__composed[data-row-layout] .workflow-guide__moment-row.is-open .workflow-guide__row-identity { flex: 1 1 0 !important; min-width: 0; }
  .kguide [data-calculation-workflow-panel][data-workflow-layout] .workflow-guide__composed[data-row-layout] .workflow-guide__moment-row.is-open [data-row-slot=action] { align-self: flex-start; }
  .kguide [data-calculation-workflow-panel][data-workflow-layout] .workflow-guide__composed[data-row-layout] .workflow-guide__moment-row .workflow-guide__row-heading { background: transparent !important; }
  .kguide [data-calculation-workflow-panel][data-workflow-layout] .workflow-guide__composed[data-row-layout] .workflow-guide__moment-row:not(.is-open) [data-row-slot=quantity] { margin-left: 44px !important; }
  .kguide :is(.workflow-guide__teaser-choices, .workflow-guide__choice, .workflow-guide__quick-values, .workflow-guide__type-choices) > button, .kguide .workflow-guide__choice { min-height: 36px; }
  .kguide .workflow-guide__stepper button { min-width: 40px; min-height: 40px; }
  .kguide .workflow-guide__stepper input { font-size: 16px; }
  .kside-enter-start { transform: none; }
  .kws.has-side > .ksheet > .ksh > .kbody > .kside-col { grid-column: 3; grid-row: 1 / span 3; scroll-snap-align: start; }
  .kws > .ksheet > .ksh > .kbody > .kside-col > .kside { max-height: calc(100dvh - 130px); }
  /* Mobilens docka (~90 px) ligger fast längst ner: panelens fot ska synas ovanför den. */
  @media (max-width: 1023px) { .kws > .ksheet > .ksh > .kbody > .kside-col > .kside { max-height: calc(100dvh - 236px - env(safe-area-inset-bottom)); } }
  .ksh-h { grid-template-columns: 84px minmax(0, 1fr); }
  .ksh-img { width: 84px; height: 72px; }
  .ksh-t h3 { font-size: 20px; }
  .ksh-stats { grid-column: 1 / -1; justify-content: space-between; }
  .ksh-stats > span { padding: 0 8px; } .ksh-stats b { font-size: 16px; }
  .kg { grid-template-columns: 18px 36px minmax(0, 1fr) auto; gap: 8px; padding: 10px; }
  .kg .rgrp-icon { width: 36px; height: 36px; }
  .kg-name strong { font-size: 14.5px; } .kg-sum { font-size: 13px; }
  .kgroups-h { flex-wrap: wrap; row-gap: 2px; }
  .kside-h { padding-top: max(14px, env(safe-area-inset-top)); }
  .kcard { grid-template-columns: 32px minmax(0, 1fr); grid-template-areas: "check main" "check price" "check tags" "check qty" "check edit"; gap: 4px 10px; }
  /* Tumme: krysset behåller 32 px även när kortet dragit ihop sig. */
  .kcard:has(.kedit) { grid-template-columns: 32px minmax(0, 1fr) 32px; grid-template-areas: "check main qty" "check price price" "check edit edit"; }
  .kcard:has(.kedit) .kcheck { width: 32px; height: 32px; } .kcard:has(.kedit) .kcheck .material-symbols-outlined { font-size: 18px; }
  .kcard:has(.kedit) .kcard-price { justify-content: flex-start; }
  .kside-x, .kcard-more { width: 40px; height: 40px; }
  .kedit-rrow { grid-template-columns: 48px minmax(0, 1fr); } .kedit-rrow .kedit-area { grid-column: 2; }
  /* Smal ram: etiketten över fältet så inte "Antal stommar att riva" bryts ord för ord. */
  .kedit-row:not(.kedit-bool) { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .kcard-price { justify-items: start; grid-auto-flow: column; gap: 10px; align-items: baseline; }
  .kcard-qty { justify-content: flex-start; flex-wrap: wrap; }
  .kcard-tags { align-self: start; }
  .kcheck { width: 32px; height: 32px; }
  /* Foten: texten på en rad, knappen fyller bredden (tumträff). */
  .kside-f { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .kside-f__t { grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 6px; }
  .kside-add { justify-content: center; }
}
/* Telefon: timmar och summa under gruppnamnet, så "4 valda av 16" inte bryts ord för ord. */
@container project-detail (max-width: 520px) {
  .kg { grid-template-columns: 18px 36px minmax(0, 1fr); row-gap: 2px; }
  .kg .rrow-chev, .kg .rgrp-icon { grid-row: span 2; }
  .kg-sum { grid-column: 3; } .kg-sum:empty { display: none; }
  .kgroups { padding: 10px; } .kg { padding: 10px 8px; }
  .ksh-todo__i { flex-wrap: wrap; border-radius: 12px; } .ksh-todo__i small { max-width: 100%; }
  .ksh-h { grid-template-columns: 56px minmax(0, 1fr); column-gap: 12px; }
  .ksh-img { width: 56px; height: 56px; border-radius: 10px; }
}
@media (prefers-reduced-motion: reduce) { .ksh { animation: none; } .kws, .kside-enter { transition: none; } }
.rhub-btn.is-off { opacity: 0.5; cursor: default; }
.rbody { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 18px; padding: 0 8px 16px 42px; }
.rbody-left, .rbody-right { display: grid; align-content: start; gap: 10px; min-width: 0; padding-top: 10px; }
.rkicker { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pj-muted); }
/* Måtten som första fråga: samma rad som de andra, fälten inline, L × B under. */
.rconfirm { grid-template-columns: 8px minmax(0, 1fr) auto; }
.rconfirm.is-plain .rq-dot { background: #3a8874; }
.rconfirm label { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--pj-muted); }
.rconfirm label > span:first-child { font-weight: 500; color: var(--pj-ink-2); }
.rconfirm input { width: 3.4em; height: 28px; border: 1px solid var(--pj-line); border-radius: 7px; padding: 0 6px; font: inherit; font-size: 12.5px; text-align: right; font-variant-numeric: tabular-nums; background: #fff; }
.rconfirm.is-assumed input { border-style: dashed; border-color: #e2c98f; background: #fffdf7; }
.rconfirm input:read-only { background: #f4f6f4; color: var(--pj-muted); }
.rseg { display: inline-flex; gap: 4px; }
.rseg button { height: 28px; padding: 0 11px; border: 1px solid var(--pj-line); border-radius: 8px; background: #fff; font: inherit; font-size: 12px; color: var(--pj-ink); cursor: pointer; white-space: nowrap; }
.rseg button:hover { border-color: #cfe3d8; background: #fbfcfb; }
.rseg button.is-on { background: var(--pj-leaf-dark); border-color: var(--pj-leaf-dark); color: #fff; }
.rmore { border: 1px solid var(--pj-line-2); border-radius: 10px; padding: 8px 10px; }
.rmore > summary { list-style: none; cursor: pointer; font-size: 12.5px; color: var(--pj-leaf-dark); }
.rmore > summary::-webkit-details-marker { display: none; }
/* Frågorna om rummet: en rad per fråga – statusprick, frågan, svaren. Antagen = Zimlas förval i gult tills det bekräftas. */
.rqs { display: grid; gap: 2px; }
.rqs .rkicker { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.rqs-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #fbf3df; color: #8a6414; font-size: 10.5px; letter-spacing: 0; }
.rq { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; min-height: 34px; padding: 3px 0; border-top: 0; margin: 0; }
/* Långa svar (t.ex. golvtyper) får hela bredden under frågan i stället för att trycka ihop den. */
.rq.is-wide { grid-template-columns: 8px minmax(0, 1fr); }
.rq.is-wide .rseg { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; }
.rq + .rq { border-top: 1px solid var(--pj-line-2); }
.rq-dot { width: 7px; height: 7px; border-radius: 999px; background: #d9a03a; }
.rq.is-assumed .rq-dot { background: transparent; box-shadow: inset 0 0 0 1.5px #d9a03a; }
.rq.is-answered .rq-dot { background: #3a8874; } .rq.is-uncertain .rq-dot { background: var(--pj-faint); }
.rq-prompt { font-size: 12.5px; color: var(--pj-ink); line-height: 1.25; }
.rq-prompt small { display: block; font-size: 11px; color: #8a6414; }
.rq.is-answered .rq-prompt small, .rq.is-uncertain .rq-prompt small { color: var(--pj-muted); }
.rq.is-assumed .rseg button.is-on { background: #fbf3df; border: 1px dashed #e2c98f; color: #8a6414; }
.rq.is-assumed .rseg button.is-on:hover { background: #f6ecc8; }
/* Skippa: en riktig knapp – förslaget hoppas över och standardvalet står kvar. */
.rq-unsure { display: inline-flex; align-items: center; gap: 2px; border: 1px solid #cfdccf !important; background: #fff !important; color: var(--pj-ink-2) !important; }
.rq-unsure .material-symbols-outlined { font-size: 16px; }
.rq-unsure:hover { border-color: var(--pj-leaf) !important; color: var(--pj-leaf-dark) !important; background: #f3f8f4 !important; }
.rseg.is-quiet button { height: 24px; padding: 0 8px; font-size: 11.5px; color: var(--pj-muted); }
.rseg.is-quiet button.is-on { background: #eaf3ee; border-color: #cfe3d8; color: var(--pj-leaf-dark); }
.rseg button:active { transform: scale(0.97); }
/* Trycket syns direkt: knappen står som vald medan svaret hämtas, den gamla valda släpper. */
.rseg button.htmx-request { background: var(--pj-leaf-dark); border-color: var(--pj-leaf-dark); color: #fff; }
.rseg:has(button.htmx-request) button.is-on:not(.htmx-request) { background: #fff; border-color: var(--pj-line); color: var(--pj-ink); }
.rmore .rq:first-of-type { border-top: 0; }
.rmore > summary { padding: 2px 0; }
.rdone { display: flex; align-items: center; gap: 8px; margin: 0; min-height: 34px; font-size: 12.5px; color: var(--pj-leaf-dark); animation: rq-in 220ms ease-out both; }
.rdone i { width: 7px; height: 7px; border-radius: 999px; background: #3a8874; } .rdone a { color: inherit; }
/* Rörelse: raden som besvaras lyfter ut innan bytet; chipen tickar. */
.rq.is-leaving { opacity: 0; transform: translateY(-4px); transition: opacity 160ms cubic-bezier(0.22, 1, 0.36, 1), transform 160ms cubic-bezier(0.22, 1, 0.36, 1); }
.rchip.is-tick { animation: rq-tick 220ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes rq-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes rq-tick { 0% { transform: translateY(3px); opacity: 0.6; } 60% { transform: scale(1.06); } 100% { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rq.is-leaving, .rdone, .rchip.is-tick { transition: none; animation: none; } }
/* Mobil: frågan på egen rad, svaren som två stora likvärdiga val, Osäker under. */
.rq-group { grid-column: 1 / -1; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pj-muted); }
.rq-prompt { font-size: 13px; } .rq-prompt small { display: block; font-size: 11px; color: var(--pj-muted); }
.rlinks { display: flex; align-items: center; gap: 6px; padding-top: 6px; border-top: 1px solid var(--pj-line-2); font-size: 12.5px; }
.rlinks a, .rlinks button { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 12.5px; color: var(--pj-ink-2); cursor: pointer; text-decoration: none; }
.rlinks a:hover, .rlinks button:hover { background: #f2f5ef; }
.rlinks .material-symbols-outlined { font-size: 16px; color: var(--pj-muted); }
.rlinks-main { font-weight: 500; padding-left: 0 !important; } /* färg och yta: Manuell kalkyl längre ned */
.rlinks-end { margin-left: auto; color: var(--pj-muted) !important; } .rlinks-end:hover { color: #b4453a !important; background: #fdf2f2 !important; }
.rgrp { border-top: 1px solid var(--pj-line-2); }
.rgrp > summary { display: grid; grid-template-columns: 20px 30px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 0; cursor: pointer; list-style: none; }
.rgrp > summary::-webkit-details-marker { display: none; }
.rgrp-icon { width: 30px; height: 30px; border-radius: 8px; background: #f2f5ed; color: #72906e; display: grid; place-items: center; } .rgrp-icon .material-symbols-outlined { font-size: 17px; }
.rgrp-name strong { display: block; font-size: 13px; font-weight: 500; } .rgrp-name small { display: block; font-size: 11px; color: var(--pj-muted); }
.rmoms { display: grid; padding: 0 0 8px 58px; }
.rmom { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; border-top: 1px solid var(--pj-line-2); transition: background 900ms ease; }
.rmom-name { font-size: 12.5px; } .rmom-name small { display: block; font-size: 11px; color: var(--pj-muted); }
.rmom .rmetrics b { font-size: 12px; }
.rmom.is-marked, .rrow.is-marked > .rrow-sum { background: var(--pj-ok-2); }
/* AI:n ändrade något på sidan: offertraden tonas grön en stund; utan pekad rad pulserar hela panelen mjukt. */
.qrow.is-marked { box-shadow: 0 0 0 2px var(--pj-leaf); transition: box-shadow 900ms ease; }
#project-detail-tab-panel.is-ai-touched > * { animation: zimla-ai-touched 1.2s ease-out both; }
@keyframes zimla-ai-touched { 0% { box-shadow: 0 0 0 0 rgba(58,136,116,0.0); } 20% { box-shadow: 0 0 0 4px rgba(58,136,116,0.28); } 100% { box-shadow: 0 0 0 0 rgba(58,136,116,0); } }
@media (prefers-reduced-motion: reduce) { #project-detail-tab-panel.is-ai-touched > * { animation: none; } }
.rrow > .rrow-sum { transition: background-color 900ms ease; }
/* Borttaget moment: spökrad som tonar bort (rgrp.is-gone = hela gruppen försvann). */
.rmom.is-gone { color: var(--pj-muted); text-decoration: line-through; background: #f3f1ea; animation: rmom-gone 2400ms ease forwards; pointer-events: none; }
.rgrp.is-gone { animation: rmom-gone 2400ms ease forwards; pointer-events: none; }
.rgrp.is-gone > summary .rgrp-name strong { text-decoration: line-through; color: var(--pj-muted); }
@keyframes rmom-gone { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rmom.is-gone, .rgrp.is-gone { animation-duration: 1ms; } }
.rempty { margin: 6px 0; font-size: 12.5px; color: var(--pj-muted); }
.rerror { margin: 0 0 8px; font-size: 12.5px; color: #b42318; }
.rrow.is-ghost { opacity: 0.75; } .rrow.is-ghost.is-new .rchip { animation: rhub-pulse 1.2s ease-in-out infinite; }
@media (max-width: 900px) {
  .rrow-sum { grid-template-columns: 24px 44px minmax(0, 1fr) auto; }
  .rrow-sum .rmetrics { display: none; }
  .rbody { grid-template-columns: 1fr; }
  .rgrp > summary .rmetrics, .rmom .rmetrics { gap: 8px; }
  .rmoms { padding-left: 0; }
}
/* Telefon: rummets läge (frågor/klart) under namnet så namn och mått får hela bredden. */
@media (max-width: 480px) {
  .rrow-sum { grid-template-columns: 24px 44px minmax(0, 1fr); gap: 4px 10px; }
  .rrow-sum > .rrow-idx, .rrow-sum > .rrow-pic, .rrow-sum > .rrow-img { grid-row: span 2; }
  .rrow-sum > .rchip { grid-column: 3; justify-self: start; }
}

/* ── Offert-steget som slutkläm: hela ytan, huvudet krymper, tre spalter ──
   .qfull sitter på #project-offer när det finns en offert. Ramen går från 1180
   till hela bredden och huvudet fälls ihop till en rad – direkt, utan tween:
   en bredd som animeras gör om layouten varje bildruta och känns seg (flikbyte
   är en drill). Bara innehållet glider in, kort. */
/* Offerten tar hela bredden i båda lägena – utkastet (tre spalter) och den skickade (rader + högerspalt) – så mindre hamnar under vecket. */
.project-frame:has(.qfull), .project-frame:has(#project-offer-list) { max-width: 1900px; }
.phead-row { transition: grid-template-columns 460ms cubic-bezier(0.2, 0.8, 0.2, 1), padding 460ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.phead-pic__btn { transition: width 460ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 260ms ease; }
.phead h1 { transition: font-size 460ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.phead-kicker, .phead-btn { transition: opacity 220ms ease, max-height 460ms cubic-bezier(0.2, 0.8, 0.2, 1), margin 460ms ease; max-height: 60px; overflow: hidden; }
.phead-sub { transition: margin 460ms ease; }
.phead-kr > b { transition: font-size 460ms cubic-bezier(0.2, 0.8, 0.2, 1); }
/* Huvudet byts OOB vid flikbyte: i .qfull står det direkt ihopfällt. */
.project-frame:has(.qfull) .phead-row { grid-template-columns: 0px minmax(0, 1fr) auto; gap: 0 12px; padding: 8px 18px; }
.project-frame:has(.qfull) .phead-pic__btn { width: 0; opacity: 0; pointer-events: none; }
.project-frame:has(.qfull) .phead h1 { font-size: 16px; margin: 0; }
.project-frame:has(.qfull) .phead-kicker, .project-frame:has(.qfull) .phead-btn { max-height: 0; opacity: 0; margin: 0; pointer-events: none; }
.project-frame:has(.qfull) .phead-sub { margin: 0; }
.project-frame:has(.qfull) .phead-kr > b { font-size: 16px; }
/* Ligger efter ihopfällningsreglerna (samma specificitet) så den vinner på smal skärm. */
@media (max-width: 1023px) {
  /* Offert-fliken: på smal skärm fälls huvudet inte ihop – det finns ingen bred editor att ge plats åt,
     och det hopfällda huvudet blev bara en naken textklump. Samma huvud som på övriga flikar. */
  .project-frame:has(.qfull) .phead-row { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 14px; animation: none; }
  .project-frame:has(.qfull) .phead-pic__btn { width: 72px; opacity: 1; pointer-events: auto; animation: none; }
  .project-frame:has(.qfull) .phead h1 { font-size: 22px; margin: 4px 0 0; animation: none; }
  .project-frame:has(.qfull) .phead-kicker, .project-frame:has(.qfull) .phead-btn { max-height: 60px; opacity: 1; pointer-events: auto; animation: none; }
  .project-frame:has(.qfull) .phead-btn { display: none; } /* "Öppna offert" pekar på fliken man redan står i */
  .project-frame:has(.qfull) .phead-sub { margin: 4px 0 0; }
  .project-frame:has(.qfull) .phead-kr > b { font-size: 20px; animation: none; }
  .project-frame:has(.qfull) .pstep { min-height: 0; }
}
.project-frame:has(.qfull) .pstep { min-height: 44px; }
/* Offertutkastet är en arbetsyta, inte tre likvärdiga kortstaplar. Dokumentet
   och beslutet att skicka ligger först; underlag och villkor hör ihop under
   dokumentet och får därför läsa över hela huvudkolumnens bredd. */
.qfull {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 370px);
  grid-template-areas:
    "quote send"
    "support send"
    "history history";
  gap: 14px;
  align-items: start;
}
.qfull > .qmain { grid-area: quote; }
.qfull > #qleft { grid-area: support; }
.qfull > #qright { grid-area: send; }
.qfull > .qcard-hist { grid-area: history; }

/* Huvuddokumentet: en tydlig topp, en lugn tabell och en totalsumma som avslut.
   Inga dubbla kortkanter inuti dokumentet. */
.qfull .qmain {
  overflow: hidden;
  border-color: #d9e2da;
  border-radius: 14px;
  box-shadow: 0 16px 42px -34px rgba(17, 45, 32, 0.46), 0 2px 8px rgba(17, 45, 32, 0.035);
}
.qfull .qmain > .mod-head {
  align-items: center;
  gap: 12px;
  min-height: 82px;
  padding: 17px 20px 15px;
  background: linear-gradient(180deg, #fff 0%, #fbfcfa 100%);
  border-bottom: 1px solid var(--pj-line-2);
}
.qfull .qmain > .mod-head .mod-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 0;
  border-radius: 10px;
  background: #edf5ef;
  color: var(--pj-leaf-dark);
}
.qfull .qmain > .mod-head .mod-heading h2 { font-size: 19px; }
.qfull .qmain > .mod-head .mod-heading p { max-width: 58ch; line-height: 1.45; }
.qfull .qmain > .mod-head .mod-end { padding-left: 18px; border-left: 1px solid var(--pj-line-2); }
.qfull .qmain > .mod-head .mod-end b { font-size: 19px; letter-spacing: -0.015em; }
.qfull .qmain .qsum { border-top: 0; }
.qfull .qmain .qprice {
  margin: 0;
  padding: 13px 20px 10px;
  border: 0;
  border-top: 1px solid #dfe7df;
  border-radius: 0;
  background: #f7faf7;
}
.qfull .qmain .qprice-days { min-height: 34px; padding-bottom: 9px; }
.qfull .qmain .tot { gap: 7px; padding-top: 10px; }
.qfull .qmain .tot .big { margin-top: 2px; padding-top: 10px; }

/* Offertunderlaget blir en sammanhållen sekundär yta. Offertval och bilagor
   ligger sida vid sida; villkoren får full bredd och blir läsbara rader. */
.qfull > #qleft {
  display: grid;
  grid-template-columns: minmax(250px, 0.8fr) minmax(320px, 1.2fr);
  grid-template-areas:
    "options attachments"
    "terms terms";
  gap: 12px;
}
.qfull #qleft .qcard-val { grid-area: options; }
.qfull #qleft .qcard-bilagor { grid-area: attachments; }
.qfull #qleft .qcard-villkor { grid-area: terms; }
.qfull #qleft > .mod {
  overflow: hidden;
  border-color: #dde5de;
  border-radius: 13px;
  box-shadow: 0 10px 28px -26px rgba(17, 45, 32, 0.38);
}
.qfull #qleft .qsec { padding: 14px 16px 15px; }
.qfull #qleft .qsec h4 {
  min-height: 27px;
  margin-bottom: 9px;
  color: var(--pj-ink);
  font-size: 13px;
  letter-spacing: -0.005em;
  text-transform: none;
}
.qfull #qleft .qsec h4 small { font-size: 11.5px; }
.qfull #qleft .qtoggles { gap: 0; }
.qfull #qleft .qtog { min-height: 45px; padding: 8px 0; border-top: 1px solid var(--pj-line-2); }
.qfull #qleft .qtog:first-child { border-top: 0; }
.qfull #qleft .qattach { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.qfull #qleft .qatt {
  min-height: 40px;
  padding: 8px 9px;
  border-style: solid;
  border-color: var(--pj-line-2);
  border-radius: 9px;
  background: #fbfcfb;
}
.qfull #qleft .qatt:hover { border-color: #bfd6c7; background: #f5f9f6; }
.qfull #qleft .qatt.on { border-color: #b7d8c5; background: #edf7f0; }
.qfull #qleft .qterms { gap: 0; counter-reset: quote-term; }
.qfull #qleft .qterms li {
  min-height: 44px;
  padding: 10px 2px;
  border-top: 1px solid var(--pj-line-2);
  border-radius: 0;
  background: transparent;
  font-size: 12.5px;
}
.qfull #qleft .qterms li:first-child { border-top: 0; }
.qfull #qleft .qterms li span { margin-top: 1px; background: #edf4ee; }
.qfull #qleft .qterms li p { line-height: 1.48; }

/* Skicka-panelen är kontrollrummet: alltid nära dokumentet, med tydliga
   avsnitt och en stadig avslutande handlingsrad. */
.qfull > #qright { position: sticky; top: 12px; }
:is(.qfull, .qside-draft) #qright .qside {
  overflow: hidden;
  border-color: #d5dfd6;
  border-radius: 14px;
  box-shadow: 0 18px 46px -34px rgba(17, 45, 32, 0.5), 0 2px 8px rgba(17, 45, 32, 0.04);
}
:is(.qfull, .qside-draft) #qright .qside > .mod-head {
  align-items: center;
  min-height: 66px;
  padding: 13px 16px 12px;
  background: #f7faf7;
  border-bottom: 1px solid var(--pj-line-2);
}
:is(.qfull, .qside-draft) #qright .qside > .mod-head .mod-icon {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  margin: 0;
  border-radius: 9px;
  background: #e5f2e9;
  color: var(--pj-leaf-dark);
}
:is(.qfull, .qside-draft) #qright .qside > .mod-head .mod-heading h2 { font-size: 17px; }
:is(.qfull, .qside-draft) #qright .qsec { padding: 12px 16px 13px; }
:is(.qfull, .qside-draft) #qright .qsec h4 {
  margin-bottom: 9px;
  color: #51645a;
  font-size: 11.5px;
  letter-spacing: 0.055em;
}
:is(.qfull, .qside-draft) #qright .qrecip { padding: 8px 9px; border: 1px solid #dce9df; background: #f6faf7; }

/* Samma lugna fältspråk i hela offertarbetsytan. Webbläsarens standardutseende
   ersätts utan att ändra elementens semantik eller tangentbordsbeteende. */
.qfull input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.qfull textarea,
.qfull select {
  width: 100%;
  min-width: 0;
  border: 1px solid #d9e2da;
  border-radius: 9px;
  outline: 0;
  background: #f8faf8;
  color: var(--pj-ink);
  box-shadow: inset 0 1px 0 rgba(23, 33, 26, 0.025);
  font: inherit;
  font-size: 12.5px;
  line-height: 1.4;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}
.qfull input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
  height: 36px;
  padding: 0 10px;
}
.qfull textarea { padding: 9px 10px; resize: vertical; }
.qfull input::placeholder, .qfull textarea::placeholder { color: #8d9991; opacity: 1; }
.qfull input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover,
.qfull textarea:hover,
.qfull select:hover { border-color: #c4d2c7; background: #fff; }
.qfull input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus-visible,
.qfull textarea:focus-visible,
.qfull select:focus-visible {
  border-color: #68a985;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(8, 122, 85, 0.12), inset 0 1px 0 rgba(23, 33, 26, 0.02);
}
.qfull input:disabled, .qfull textarea:disabled, .qfull select:disabled {
  border-color: #e4e9e5;
  background: #f1f4f2;
  color: #8b958e;
  cursor: not-allowed;
}
:is(.qfull, .qside-draft) .qadd { gap: 5px; }
:is(.qfull, .qside-draft) #qright .qadd input { height: 36px; }
:is(.qfull, .qside-draft) #qright .qadd-submit {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid #cddfd2;
  border-radius: 10px;
  padding: 0;
  background: #edf6ef;
  color: var(--pj-leaf-dark);
  box-shadow: 0 1px 2px rgba(17, 45, 32, 0.04);
  cursor: pointer;
  appearance: none;
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
:is(.qfull, .qside-draft) #qright .qadd-submit .material-symbols-outlined { font-size: 19px; font-weight: 400; }
:is(.qfull, .qside-draft) #qright .qadd-submit:hover { border-color: #9fc5ab; background: #e2f1e6; color: #075f43; }
:is(.qfull, .qside-draft) #qright .qadd-submit:active { transform: translateY(1px); box-shadow: none; }
:is(.qfull, .qside-draft) #qright .qadd-submit:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(8, 122, 85, 0.14); }
:is(.qfull, .qside-draft) #qright .qmsg { min-height: 96px; padding: 10px 11px; }
.qfull .qterm-add textarea { min-height: 62px; }
.qfull .quote-review-line-rename-form input { height: 30px; border-radius: 7px; font-size: 12px; }

/* Chips och stegare är också fält, inte omärkta browserknappar. */
:is(.qfull, .qside-draft) .qchip {
  min-height: 29px;
  border-color: #dbe3dc;
  background: #f8faf8;
  box-shadow: 0 1px 0 rgba(23, 33, 26, 0.025);
  cursor: pointer;
  appearance: none;
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease, transform 140ms ease;
}
:is(.qfull, .qside-draft) .qchip:hover { border-color: #b9cbbf; background: #f1f6f2; }
:is(.qfull, .qside-draft) .qchip:active { transform: translateY(1px); }
:is(.qfull, .qside-draft) .qchip:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(8, 122, 85, 0.13); }
:is(.qfull, .qside-draft) .qchip.on { border-color: #1d2c23; background: #1d2c23; color: #fff; box-shadow: none; }
:is(.qfull, .qside-draft) .qstep {
  overflow: hidden;
  border-color: #d9e2da;
  border-radius: 9px;
  background: #f8faf8;
  box-shadow: inset 0 1px 0 rgba(23, 33, 26, 0.025);
}
:is(.qfull, .qside-draft) .qstep button {
  height: 28px;
  background: transparent;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease;
}
:is(.qfull, .qside-draft) .qstep button:hover:not(:disabled) { background: #eaf4ed; color: #075d43; }
:is(.qfull, .qside-draft) .qstep button:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px rgba(8, 122, 85, 0.24); }
:is(.qfull, .qside-draft) .qstep b { min-width: 38px; }
:is(.qfull, .qside-draft) #qright .qsteps-list { gap: 8px; }
:is(.qfull, .qside-draft) #qright .qsend-sum { gap: 6px; padding-top: 13px; padding-bottom: 13px; background: #f8faf8; }
:is(.qfull, .qside-draft) #qright .qsend {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 8px;
  padding: 12px 16px 13px;
  background: #fff;
}
:is(.qfull, .qside-draft) #qright .qsend > .kbtn { width: 100%; justify-content: center; }
:is(.qfull, .qside-draft) #qright .qsend .qdelete { grid-column: 1 / -1; justify-self: end; margin: 1px 0 0; }
/* Vybyte i fliken (lista ↔ utkast): panelen tonas medan svaret hämtas, det nya intåget tonar in. */
#project-detail-tab-panel { transition: opacity 120ms ease; }
/* Tonas först om svaret dröjer (> 120 ms) – ett snabbt byte blinkar aldrig. */
#project-detail-tab-panel.htmx-request { opacity: 0.62; transition: opacity 200ms ease 120ms; pointer-events: none; }
/* Intåget ligger på rutnätet, inte spalterna: spalterna byts var för sig via HTMX och får inte spela om intåget då. */
.qfull { animation: qgrow 260ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.qfull > .span-12 { grid-column: 1 / -1; }
@keyframes qgrow { from { opacity: 0.6; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .qfull, .project-frame:has(.qfull) .phead-row, .project-frame:has(.qfull) .phead-pic__btn, .project-frame:has(.qfull) .phead h1, .project-frame:has(.qfull) .phead-kicker, .project-frame:has(.qfull) .phead-btn, .project-frame:has(.qfull) .phead-kr > b { animation: none; } .project-frame, .phead-row, .phead-pic__btn, .phead h1, .phead-kicker, .phead-sub, .phead-btn, .phead-kr > b { transition: none; } }
/* Mellanformat: dokumentet först, därefter skicka och underlag. */
@container project-detail (max-width: 980px) {
  .qfull {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "quote" "send" "support" "history";
  }
  .qfull > #qright { position: static; }
  .qfull > #qleft { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.qtabs { display: none; } .qslides-only { display: none !important; }
@container project-detail (max-width: 760px) {
  /* Bilagor och Offertval får hela sidan: förklaring per rad, luftigare rader, en tydlig väg vidare. */
  .qslides-only { display: block !important; }
  /* Samma huvud som Följ upp: versionsväljaren och beloppet på en rad, hjälptexten bort. */
  .qfull .qmain > .mod-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 0;
    padding: 8px 10px;
  }
  .qfull .qmain > .mod-head .mod-icon, .qfull .qmain > .mod-head .mod-heading > p { display: none; }
  .qfull .qmain > .mod-head .mod-heading h2 { font-size: 17px; }
  .qfull .qmain > .mod-head .mod-end {
    display: grid;
    justify-items: end;
    gap: 0;
    padding: 0;
    border: 0;
    text-align: right;
  }
  .qfull .qmain > .mod-head .mod-end b { font-size: 18px; white-space: nowrap; }
  .qintro { margin: 0 0 12px; font-size: 13px; line-height: 1.4; color: var(--pj-muted); }
  .qfull .qcol .qattach { grid-template-columns: 1fr; gap: 8px; }
  .qfull .qatt { padding: 10px 12px; border-radius: 12px; font-size: 13.5px; }
  .qfull .qatt label { gap: 12px; align-items: center; }
  .qfull .qatt label > .material-symbols-outlined:first-child { width: 38px; height: 38px; border-radius: 11px; background: #f2f5ef; display: grid; place-items: center; font-size: 20px; flex: none; }
  .qfull .qatt.on label > .material-symbols-outlined:first-child { background: var(--pj-ok-2); color: var(--pj-leaf-dark); }
  .qfull .qatt label > span:not(.material-symbols-outlined) { display: grid; gap: 2px; min-width: 0; flex: 1; }
  .qfull .qatt small { font-size: 12px; line-height: 1.35; white-space: normal; overflow: visible; }
  .qatt-cta { display: grid !important; place-items: center; width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--pj-line); font-size: 18px; color: var(--pj-leaf-dark); flex: none; }
  .qtog { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; padding: 10px 0; font-size: 13.5px; }
  .qtog small { font-size: 12px; margin-top: 1px; }
  .qtog-ico { display: grid !important; width: 38px; height: 38px; border-radius: 11px; background: #f2f5ef; place-items: center; font-size: 20px; color: var(--pj-ink-2); }
  .qval-cta { display: inline-flex !important; margin-top: 14px; }
  /* Utkastets kort som sidor i bredd – Offert · Villkor · Bilagor · Val · Skicka (· Historik) – i den
     ordning man arbetar: innehåll och pris, villkor, bilagor, vad kunden får se, sedan skicka.
     Varje sida rullar inuti; sidan själv rullar inte. */
  .qtabs { display: flex; gap: 4px; padding: 4px; margin: 0 0 10px; border-radius: 12px; background: #fff; border: 1px solid var(--pj-line-2); box-shadow: 0 8px 20px -16px rgba(23, 33, 26, 0.4); position: sticky; top: 63px; z-index: 6; }
  .qtabs button { flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 6px; border: 0; border-radius: 9px; background: transparent; font: inherit; font-size: 12.5px; font-weight: 500; color: var(--pj-muted); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background 140ms ease, color 140ms ease; }
  .qtabs button.is-on { background: #e6f2ea; color: var(--pj-leaf-dark); }
  .qfull { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 100%; gap: 0 16px; align-items: start; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
  .qfull { grid-template-areas: none; }
  .qfull > .qmain, .qfull > #qleft, .qfull > #qright, .qfull > .qcard-hist,
  .qfull #qleft .qcard-villkor, .qfull #qleft .qcard-bilagor,
  .qfull #qleft .qcard-val, .qfull #qright .qside { grid-area: auto; }
  .qfull::-webkit-scrollbar { display: none; }
  .qfull > #qleft { display: contents; }
  .qfull > #qright { display: contents; }
  /* Korten ligger i #qleft/#qright (display: contents) – därför efterkommande-selektorer, inte barn. */
  .qfull .qmain, .qfull .qcard-villkor, .qfull .qcard-bilagor, .qfull .qcard-val, .qfull .qside, .qfull .qcard-hist, .qfull .qcard-dialog { scroll-snap-align: start; grid-column: auto; max-height: calc(100dvh - 130px); overflow-y: auto; scrollbar-width: none; }
  /* Desktopkortets overflow: hidden får inte klippa mobilens skicka-knapp. */
  .qfull #qright .qside { overflow-y: auto; }
  .qfull .qmain { order: 1; } .qfull .qcard-villkor { order: 2; } .qfull .qcard-bilagor { order: 3; } .qfull .qcard-val { order: 4; } .qfull .qside { order: 5; } .qfull .qcard-hist, .qfull .qcard-dialog { order: 6; }
}
.qcol { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; align-content: start; }
.qcol .mod > .qsec:first-child { border-top: 0; padding-top: 14px; }
.qcol .qattach { grid-template-columns: 1fr 1fr; }
.qmain { min-width: 0; }
.qmain .qsteps { padding-bottom: 10px; }
.qerr { margin: 0 18px 8px; padding: 8px 10px; border-radius: 8px; background: #fdf2f2; color: #b42318; font-size: 12.5px; }
.qsend-sum { display: grid; gap: 4px; font-size: 12.5px; }
.qsend-sum div { display: flex; justify-content: space-between; }
.qsend-sum b { font-weight: 500; font-variant-numeric: tabular-nums; }
.qsend-sum div:last-child b { color: var(--pj-leaf-dark); }

/* Sammanställningen (samma partial som granskningssidan) i flikens densitet:
   Outfit istället för serif, inget dubbelt huvud, metrics som får plats i mittspalten. */
.qsum { border-top: 1px solid var(--pj-line-2); }
.qsum .quote-review-summary-workspace { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.qsum .quote-review-summary-head { min-height: 0; padding: 8px 18px; border-bottom: 1px solid var(--pj-line-2); background: transparent; }
.qsum .quote-review-title-icon { display: none; }
.qsum .quote-review-summary-actions { flex-wrap: wrap; } .qsum .quote-review-view-switch button { white-space: nowrap; }
.qsum .quote-review-title { font-family: Outfit, Inter, ui-sans-serif, system-ui, sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0; }
.qsum .quote-review-title small { font-family: inherit; font-style: normal; font-size: 11.5px; color: var(--pj-muted); }
.qsum .quote-review-group-list, .qsum .quote-review-room-list { background: transparent; }
.qsum .quote-review-group__summary, .qsum .quote-review-room__summary { min-height: 46px; padding: 6px 18px; gap: 12px; }
.qsum .quote-review-group__name, .qsum .quote-review-room__identity .quote-review-group__name { font-size: 13px; font-weight: 500; }
.qsum .quote-review-group__count { font-size: 11px; }
.qsum .quote-review-group__metrics { grid-template-columns: repeat(4, minmax(3.2rem, max-content)); gap: 10px; font-size: 12px; }
.qsum .quote-review-group__metrics.is-dirty { grid-template-columns: repeat(4, minmax(3.2rem, max-content)) auto; }
.qsum .quote-review-metric > span, .qsum .quote-review-metric__trigger > span { font-size: 9.5px; letter-spacing: 0.08em; }
.qsum .quote-review-metric.is-total > b { font-size: 12.5px; font-weight: 500; }
.qsum .quote-review-group__details, .qsum .quote-review-room__details { padding: 4px 18px 12px 46px; }
.qsum .quote-review-line-list li { font-size: 12.5px; }
.qsum .quote-review-empty { padding: 14px 18px; font-size: 12.5px; color: var(--pj-muted); }

/* Skicka: offerten lyfter och flyger iväg mot kunden (uppåt höger), sidospalterna dämpas, knappen visar Skickar…; sedan postas formuläret. */
#project-offer.is-sending .qmain { animation: qsend-fly 720ms cubic-bezier(0.55, 0, 0.3, 1) forwards; transform-origin: 50% 40%; pointer-events: none; }
#project-offer.is-sending #qleft, #project-offer.is-sending #qright { animation: qsend-dim 520ms ease forwards; pointer-events: none; }
#project-offer.is-sending .qsend-btn .material-symbols-outlined { animation: qsend-icon 520ms cubic-bezier(0.55, 0, 0.3, 1) forwards; }
@keyframes qsend-fly { 0% { transform: none; opacity: 1; } 28% { transform: translateY(10px) scale(0.985); opacity: 1; } 100% { transform: translate(36vw, -46vh) scale(0.62) rotate(5deg); opacity: 0; } }
@keyframes qsend-dim { to { opacity: 0.45; } }
@keyframes qsend-icon { 40% { transform: translate(-3px, 3px); } 100% { transform: translate(22px, -22px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #project-offer.is-sending .qmain, #project-offer.is-sending #qleft, #project-offer.is-sending #qright, #project-offer.is-sending .qsend-btn .material-symbols-outlined { animation: none; } }
.qrecip.is-pending { opacity: 0.55; }
/* ROT-avdrag: rubrik + switch; på = personer, avdraget och regeln. */
.qrot h4 { justify-content: space-between; margin-bottom: 0; }
.qrot-switch { display: contents; }
.qrot-body { display: none; padding-top: 10px; }
.qrot.is-on .qrot-body { display: grid; gap: 6px; }
.qrot-persons { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.qrot-amt { font-size: 15px; font-weight: 500; color: var(--pj-leaf-dark); font-variant-numeric: tabular-nums; }
.qrot-body small { font-size: 11.5px; color: var(--pj-muted); line-height: 1.4; }
/* Revisionsutkast: raden som säger vilken version som gäller. */
.qrev { display: flex; align-items: center; gap: 10px; margin: 0 18px 10px; padding: 8px 12px; border-radius: 10px; background: var(--pj-warn-2); color: #7a5a1a; font-size: 12.5px; }
.qrev .material-symbols-outlined { font-size: 18px; color: var(--pj-warn); }
.qrev b { font-weight: 500; }
.qrev form { margin-left: auto; }
.qrev .qlink { color: #7a5a1a; }
.qrevise { display: grid; gap: 6px; justify-items: start; }
/* Skelett medan en del av sidan hämtas: rader som skimrar, ingen text. */
.skel { display: grid; gap: 8px; padding: 8px 0 4px; }
.skel span { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, #eef1ec 0%, #f7f9f5 50%, #eef1ec 100%); background-size: 200% 100%; animation: skel-shimmer 1.2s ease-in-out infinite; }
@keyframes skel-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skel span { animation: none; } }
/* Planeringens kalender: tre månader, en ruta per dag; planens arbetsdagar gröna, idag markerad, startdagen mörk. */
.pcal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0 18px 18px; }
.pcal-month { border: 1px solid var(--pj-line-2); border-radius: 12px; padding: 10px 10px 12px; background: #fff; }
.pcal-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 8px; margin-bottom: 8px; }
.pcal-head b { white-space: nowrap; }
.pcal-head b { font-size: 13px; font-weight: 500; }
.pcal-head small { font-size: 11.5px; color: var(--pj-muted); font-variant-numeric: tabular-nums; }
.pcal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.pcal-grid > span:not(.pcal-day) { display: contents; } /* x-for-omslag (Planering): cellerna ligger direkt i rutnätet */
.pcal-day { width: 100%; }
.pcal-day { aspect-ratio: 1; border-radius: 6px; border: 0; background: #eef2ec; color: transparent; font: inherit; font-size: 10px; cursor: pointer; padding: 0; transition: background 160ms ease, color 160ms ease; }
.pcal-day.is-empty { background: transparent; cursor: default; }
.pcal-day.is-weekend { background: #f3f5f1; }
.pcal-day.is-past { opacity: 0.55; }
.pcal-day:hover { color: var(--pj-ink-2); background: #e2ebe4; }
.pcal-day.is-work { background: #cfe6d6; }
.pcal-day.is-work:hover { background: #bcdcc6; }
.pcal-day.is-today { box-shadow: inset 0 0 0 1.5px var(--pj-ink); }
.pcal-day.is-start { background: var(--pj-leaf-dark); color: #fff; }
.pcal-day:focus-visible { outline: 2px solid var(--pj-leaf); outline-offset: 1px; }
/* Bokat hos företaget: gul ton; grönt + gult (arbetsdag på bokad dag) = krock, tydligare gul. */
.pcal-day.is-busy { background: #f6ecc8; }
.pcal-day.is-busy:hover { background: #f0e1ad; }
.pcal-day.is-work.is-busy { background: #e9c96a; color: #5a4300; }
.pcal-day.is-start.is-busy { background: var(--pj-leaf-dark); color: #fff; box-shadow: inset 0 0 0 2px #e9c96a; }
.pcal-head small.is-clash { color: var(--pj-warn); }
.pcal-nav { display: inline-flex; align-items: center; gap: 4px; align-self: end; height: 36px; }
.pcal-arrow { width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--pj-line); background: #fff; color: var(--pj-ink-2); display: grid; place-items: center; cursor: pointer; }
.pcal-arrow:hover { background: #f7faf6; } .pcal-arrow .material-symbols-outlined { font-size: 18px; }
.pcal-nav .qlink, .pclear { font-size: 12px; color: var(--pj-muted); background: none; border: 0; cursor: pointer; font-family: inherit; text-decoration: underline; padding: 0 4px; }
.pclear { align-self: end; height: 36px; justify-self: end; }
@media (min-width: 641px) { .pfield { grid-template-columns: 180px 120px auto 1fr; } }
.pcal-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0 18px 16px; font-size: 11.5px; color: var(--pj-muted); }
.pcal-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.pcal-legend i.is-work { background: #cfe6d6; } .pcal-legend i.is-busy { background: #f6ecc8; } .pcal-legend i.is-clash { background: #e9c96a; } .pcal-legend i.is-start { background: var(--pj-leaf-dark); }
@media (max-width: 720px) { .pcal { grid-template-columns: 1fr; } }
/* Skickad/signerad: knapparna staplade i sidopanelen – en primär, sedan Kundens vy + PDF i rad, sedan Justera. */
.qacts { display: grid; gap: 8px; padding: 10px 18px 16px; border-top: 1px solid var(--pj-line-2); }
.qacts .kbtn { justify-content: center; }
.qacts > form > .kbtn, .qacts > a.kbtn { width: 100%; }
.qacts-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.qacts .qrevise { padding-top: 8px; border-top: 1px solid var(--pj-line-2); justify-items: stretch; }
.qacts .qrevise .kbtn { width: 100%; }
.qacts .qrevise small { text-align: center; }
.mod-heading .kicker .phead-chip { margin-left: 6px; vertical-align: middle; }
/* Dialog med kunden på Offert-fliken. */
.qmsgs { display: grid; gap: 8px; padding: 0 18px 10px; }
.qmsg-row { display: grid; gap: 2px; padding: 8px 12px; border-radius: 10px; background: #f7faf6; font-size: 12.5px; }
.qmsg-row.is-customer { background: var(--pj-ok-2); }
.qmsg-who { font-size: 11px; color: var(--pj-muted); } .qmsg-who small { margin-left: 6px; }
.qmsg-row p { margin: 0; line-height: 1.45; }
.qreply { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; padding: 4px 18px 16px; }
.qreply textarea { width: 100%; min-height: 44px; border: 1px solid var(--pj-line); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 12.5px; resize: vertical; }
.row.is-static:hover { background: transparent; }
/* Offert-fliken efter skick: versioner som rader som expanderas på plats. */
.qrows { padding: 0 12px 12px; display: grid; gap: 8px; }
.qrow { border: 1px solid var(--pj-line-2); border-radius: 12px; background: #fff; }
.qrow.is-current { border-color: var(--pj-line); }
.qrow > summary { list-style: none; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto 20px; align-items: center; gap: 12px; padding: 10px 12px; cursor: pointer; border-radius: 12px; }
.qrow > summary::-webkit-details-marker { display: none; }
.qrow > summary:hover { background: #fbfcfb; }
.qrow > summary .ri { width: 26px; height: 26px; border-radius: 8px; background: #f2f5ed; color: #72906e; display: grid; place-items: center; } .qrow > summary .ri .material-symbols-outlined { font-size: 16px; }
.qrow > summary .rt strong { display: block; font-size: 13px; font-weight: 500; } .qrow > summary .rt small { display: block; font-size: 11.5px; color: var(--pj-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qrow > summary .amt { font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--pj-leaf-dark); }
.qrow > summary .chev { color: var(--pj-faint); font-size: 20px; transition: transform 200ms ease; }
.qrow[open] > summary .chev { transform: rotate(180deg); }
.qrow[open] > summary { border-bottom: 1px solid var(--pj-line-2); border-radius: 12px 12px 0 0; }
.qrow-body { padding: 4px 0 0; }
/* Följ upp (skickad/besvarad/ersatt): huvud med versionsväljare och belopp, notis, innehåll | status. */
.qfollow { padding: 0; overflow: visible; }
.qf-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--pj-line-2); }
.qf-amt { display: grid; justify-items: end; } .qf-amt b { font-family: Outfit, Inter, ui-sans-serif, system-ui, sans-serif; font-size: 20px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; } .qf-amt small { font-size: 11px; color: var(--pj-muted); }
.qpick { position: relative; min-width: 0; }
.qpick-btn { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; padding: 4px 10px 4px 12px; border: 1px solid var(--pj-line); border-radius: 12px; background: #fff; font: inherit; color: var(--pj-ink); text-align: left; cursor: pointer; }
.qpick-btn:hover { border-color: #cfe3d8; }
.qpick-t { display: grid; min-width: 0; } .qpick-t small { font-size: 11px; color: var(--pj-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qpick-t b { font-family: Outfit, Inter, ui-sans-serif, system-ui, sans-serif; font-size: 17px; font-weight: 500; white-space: nowrap; }
.qpick-chev { color: var(--pj-muted); font-size: 20px; }
.qpick-list { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; display: grid; gap: 2px; width: min(420px, calc(100vw - 32px)); max-height: min(60vh, 460px); overflow-y: auto; padding: 6px; border-radius: 14px; background: #fff; border: 1px solid var(--pj-line); box-shadow: 0 24px 60px -30px rgba(23, 33, 26, 0.45); }
.qpick-group { padding: 8px 10px 2px; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pj-muted); border-top: 1px solid var(--pj-line-2); margin-top: 4px; }
.qpick-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name kr" "meta chip"; align-items: center; gap: 2px 10px; min-height: 48px; padding: 6px 10px; border-radius: 10px; color: var(--pj-ink); text-decoration: none; }
.qpick-item:hover { background: #f4f7f3; } .qpick-item.is-on { background: #eaf3ee; }
.qpick-item b { grid-area: name; font-weight: 500; font-size: 13.5px; } .qpick-item small { grid-area: meta; font-size: 11.5px; color: var(--pj-muted); }
.qpick-item .phead-chip { grid-area: chip; justify-self: end; } .qpick-item em { grid-area: kr; justify-self: end; font-style: normal; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; } .qpick-item em span { font-size: 10.5px; color: var(--pj-muted); }
.qf-note { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 0; padding: 10px 16px; border-bottom: 1px solid var(--pj-line-2); background: #f7faf6; font-size: 13px; color: var(--pj-ink-2); }
.qf-note .material-symbols-outlined { font-size: 18px; color: var(--pj-muted); } .qf-note a { color: var(--pj-leaf-dark); font-weight: 500; text-decoration: none; margin-left: auto; }
.qf-note.is-draft { background: #fbf3e3; } .qf-note.is-live { background: #e8f0fa; }
.qf-sec { border-top: 1px solid var(--pj-line-2); padding: 12px 16px; }
.qf-sec > summary { display: flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; font-weight: 500; color: var(--pj-ink-2); } .qf-sec > summary::-webkit-details-marker { display: none; }
.qf-sec > summary .material-symbols-outlined { font-size: 18px; color: var(--pj-faint); transition: transform 160ms ease; } .qf-sec[open] > summary .material-symbols-outlined { transform: rotate(90deg); }
.qf-sec small { font-weight: 400; color: var(--pj-muted); }
.qf-dialog h3 { margin: 0 0 8px; font-size: 14px; font-weight: 500; }
.qf-dialog .qreply { display: flex; align-items: flex-end; gap: 8px; margin-top: 10px; } .qf-dialog .qreply textarea { flex: 1; min-height: 44px; padding: 10px 12px; border: 1px solid var(--pj-line); border-radius: 12px; font: inherit; resize: vertical; }
.qf-timeline { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.qf-timeline li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: start; font-size: 13px; } .qf-timeline .material-symbols-outlined { font-size: 18px; color: var(--pj-leaf-dark); }
.qf-timeline li span:nth-child(2) { display: grid; } .qf-timeline b { font-weight: 500; } .qf-timeline time { font-size: 11.5px; color: var(--pj-muted); white-space: nowrap; }
.qresend__state { display: block; font-size: 11px; color: var(--pj-muted); } .qresend__state.is-failed, .qresend__state.is-delivery_unknown { color: #b0503f; }
.qfollow .qsb-side { padding: 12px 16px; }
/* Smal: var offerten står och vägen framåt först, innehållet under. */
@container project-detail (max-width: 900px) { .qfollow .qsb-side { order: -1; border-bottom: 1px solid var(--pj-line-2); } .qf-head { padding: 10px 12px; } .qf-note { padding: 10px 12px; } .qf-sec { padding: 12px; } }
.qf-older > summary { list-style: none; cursor: pointer; font-size: 12.5px; color: var(--pj-leaf-dark); margin-bottom: 6px; } .qf-older > summary::-webkit-details-marker { display: none; }
@media (prefers-reduced-motion: reduce) { .qf-sec > summary .material-symbols-outlined { transition: none; } .kbar-in, .kbar-out { transition: none; } }
.qsb { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 0; }
.qsb-main { min-width: 0; border-right: 1px solid var(--pj-line-2); padding-bottom: 8px; }
.qsb-main .qsum { border-top: 0; }
.qsb-side { min-width: 0; }
.qsb-side .dayfacts { padding-top: 0; }
.qsb-extras { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; margin-top: 8px; }
.qsb-extras .qsec { border-top: 1px solid var(--pj-line-2); }
@container project-detail (max-width: 900px) { .qsb { grid-template-columns: 1fr; } .qsb-main { border-right: 0; } .qsb-extras { grid-template-columns: 1fr; } }
/* Listan tar 60 % av bredden (dialog och aktivitet bredvid): kundens sida lägger sig under sammanställningen när raden är smal. */
#project-offer-list { align-items: start; }
.qlist { container: qlist / inline-size; }
/* Skickad version: tätare rader – kolumnrubrikerna (timmar, material …) bara på första raden, sedan bara siffror. */
.qsb.is-slim .quote-review-group__summary, .qsb.is-slim .quote-review-room__summary { min-height: 36px; padding: 2px 18px; }
.qsb.is-slim .quote-review-group:not(:first-child) .quote-review-metric > span, .qsb.is-slim .quote-review-room:not(:first-child) .quote-review-metric > span { display: none; }
.qsb.is-slim .quote-review-summary-head { padding: 4px 18px; }
.qlist > .mod-head.slim { padding-bottom: 6px; }
.qlist .qrows { gap: 6px; padding-bottom: 10px; }
.qlist .qrow:not(.is-current) > summary { padding: 6px 12px; }
.qlist .qmore > summary { padding: 7px 18px; }
.qsb.is-slim { grid-template-columns: 1fr; } .qsb.is-slim .qsb-main { border-right: 0; padding-bottom: 0; }
.qmore { border-top: 1px solid var(--pj-line-2); }
.qmore > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 9px 18px; font-size: 12px; color: var(--pj-ink-2); }
.qmore > summary::-webkit-details-marker { display: none; }
.qmore > summary small { color: var(--pj-muted); }
.qmore > summary .material-symbols-outlined { font-size: 18px; color: var(--pj-faint); transition: transform 200ms ease; }
.qmore[open] > summary .material-symbols-outlined { transform: rotate(180deg); }
.qmore > .qsb-extras { margin-top: 0; }
@container project-detail (min-width: 1500px) {
  .qlist, .qside2 { grid-column: span 6; }
  .qside2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
/* Statuskortet: rubrik, tre steg som en segmentmätare, summan, vägen framåt. Samma form i alla lägen. */
.qstatus .mod-head p a { color: inherit; text-decoration: underline; }
.qsteps { list-style: none; margin: 0; padding: 2px 18px 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.qsteps li { position: relative; padding-top: 12px; font-size: 12px; min-width: 0; }
.qsteps li::before { content: ''; position: absolute; left: 0; right: 0; top: 2px; height: 4px; border-radius: 2px; background: var(--pj-line); }
.qsteps li.done::before { background: var(--pj-leaf); }
.qsteps li.live::before { background: var(--pj-sent); }
.qsteps li.rose::before { background: #b4453a; }
.qsteps li b { display: block; font-weight: 500; color: var(--pj-ink); } .qsteps li small { color: var(--pj-muted); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qsteps li:not(.done):not(.live):not(.rose) b { color: var(--pj-muted); }
.qstatus .qprice { margin: 2px 18px 10px; padding: 10px 12px; }
.qprice-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 500; }
.qprice-top small { font-weight: 400; color: var(--pj-muted); font-size: 11px; margin-left: 4px; }
.qprice-top .qtotal { font-size: 22px; white-space: nowrap; }
.qprice-more > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 11.5px; color: var(--pj-muted); }
.qprice-more > summary::-webkit-details-marker { display: none; }
.qprice-more > summary .material-symbols-outlined { font-size: 16px; transition: transform 200ms ease; }
.qprice-more[open] > summary .material-symbols-outlined { transform: rotate(180deg); }
.qprice-more .tot { padding-top: 8px; margin-top: 6px; border-top: 1px solid var(--pj-line-2); }
.qstatus .qacts { padding-top: 10px; }
.qstatus .qacts .qrevise { padding-top: 2px; border-top: 0; }
.qstatus .qacts .qlink { display: inline-flex; align-items: center; gap: 4px; justify-self: center; font-size: 12px; color: var(--pj-muted); text-decoration: none; }
.qstatus .qacts .qlink:hover { color: var(--pj-ink); text-decoration: underline; }
.qstatus .qacts .qlink .material-symbols-outlined { font-size: 15px; }
.qstatus .qsim { grid-template-columns: auto 1fr; align-items: center; padding: 4px 8px; margin-top: 4px; }
.qstatus.is-ok .mod-icon { color: var(--pj-leaf); } .qstatus.is-rose .mod-icon { color: #b4453a; }
/* Aktivitet som en tyst tidslinje: en linje, punkter, text, tid. */
.qtl { list-style: none; margin: 0; padding: 0 18px 12px 22px; position: relative; }
.qtl::before { content: ''; position: absolute; left: 31px; top: 6px; bottom: 14px; width: 1px; background: var(--pj-line); }
.qtl li { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 5px 0; font-size: 12.5px; }
.qtl-dot { position: relative; width: 20px; height: 20px; border-radius: 999px; background: #fff; border: 1px solid var(--pj-line); display: grid; place-items: center; color: var(--pj-muted); }
.qtl-dot .material-symbols-outlined { font-size: 12px; }
.qtl li:first-child .qtl-dot { border-color: var(--pj-leaf); color: var(--pj-leaf); }
.qtl li strong { display: block; font-weight: 500; } .qtl li small { display: block; color: var(--pj-muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qtl li time { font-size: 11px; color: var(--pj-muted); white-space: nowrap; padding-top: 2px; font-variant-numeric: tabular-nums; }
.qtl li.rempty { display: block; color: var(--pj-muted); }
.qstat > .qsb-side { padding-bottom: 0; }
@container qlist (max-width: 960px) { .qsb { grid-template-columns: 1fr; } .qsb-main { border-right: 0; } .qsb-side { padding-top: 4px; border-top: 1px solid var(--pj-line-2); } }
/* Smal lista: chip och belopp på andra raden så versionsnamnet får hela bredden (samma form som ÄTA). */
@container qlist (max-width: 520px) {
  .qrow > summary { grid-template-columns: 26px minmax(0, 1fr) auto 20px; row-gap: 4px; }
  .qrow > summary .rt { grid-column: 2 / 4; }
  .qrow > summary .phead-chip { grid-column: 2; grid-row: 2; justify-self: start; }
  .qrow > summary .amt { grid-column: 3; grid-row: 2; }
  .qrow > summary .chev { grid-row: 1; grid-column: 4; }
}
.phead-chip.is-rose { background: #fbeceb; color: #b4453a; }
.qrow > summary .ri.is-rose { background: #fbeceb; color: #b4453a; }
.qlock { display: flex; gap: 8px; align-items: flex-start; margin: 0 18px 4px; padding: 8px 10px; border-radius: 8px; background: var(--pj-ok-2); color: var(--pj-leaf-dark); font-size: 12px; line-height: 1.4; }
.qlock .material-symbols-outlined { font-size: 16px; margin-top: 1px; }
.qlock a { color: inherit; font-weight: 500; }
/* Jobbet igång: steppern hopfälld – Pågående som aktiv flik, de fem stegen som små länkar bakom. */
.pstepper.is-collapsed { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px 10px; }
.pstepper.is-collapsed .pstep { min-height: 34px; padding: 4px 10px; border-right: 0; border-radius: 8px; gap: 7px; }
.pstepper.is-collapsed .pstep .pnum { display: none; }
.pstepper.is-collapsed .pstep .ptext small { display: none; }
.pstepper.is-collapsed .pstep .ptext b { font-size: 12.5px; color: var(--pj-muted); font-weight: 500; }
.pstepper.is-collapsed .pstep.on::after { display: none; }
.pstepper.is-collapsed .pstep.on .ptext b { color: var(--pj-ink); }
.pstepper.is-collapsed .pstep.on { background: var(--pj-line-2); }
.pstepper.is-collapsed .pstep.is-live { padding-left: 8px; margin-right: 6px; }
.pstepper.is-collapsed .pstep.is-live .pnum { display: grid; width: 22px; height: 22px; background: var(--pj-leaf-dark); color: #fff; }
.pstepper.is-collapsed .pstep.is-live .ptext b { color: var(--pj-ink); font-size: 13px; }
.pstepper.is-collapsed .pstep.is-live .ptext small { display: block; }
.pstepper.is-collapsed .pstep.is-live { min-height: 40px; }
.pstepper.is-collapsed .pstep.more { margin-left: auto; }
#project-oversikt { align-items: start; }
/* Översikt: läget överst – förloppet som en tunn stapel, fyra fakta bredvid. */
.ovs-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 12px 28px; align-items: center; padding: 14px 18px; }
.ovs-progress__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.ovs-progress__head b { font-family: Outfit, Inter, sans-serif; font-size: 16px; font-weight: 500; }
.ovs-progress__head small { color: var(--pj-muted); font-size: 12px; white-space: nowrap; }
.ovs-bar { height: 6px; border-radius: 3px; background: #eef2ec; overflow: hidden; }
.ovs-bar i { display: block; height: 100%; border-radius: 3px; background: var(--pj-leaf); transition: width 600ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.ovs-facts { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ovs-facts div { min-width: 0; padding-left: 12px; border-left: 1px solid var(--pj-line-2); }
.ovs-facts dt { font-size: 11px; color: var(--pj-muted); } .ovs-facts dd { margin: 2px 0 0; font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@container project-detail (max-width: 900px) { .ovs-top { grid-template-columns: 1fr; } .ovs-facts { grid-template-columns: 1fr 1fr; } }
.mod-tools { display: inline-flex; gap: 6px; align-items: center; margin-left: auto; }
/* Schema per dag: datumbrickan till vänster, passen som rader. */
.ovs-days { list-style: none; margin: 0; padding: 0 18px 12px; }
.ovs-days li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-top: 1px solid var(--pj-line-2); }
.ovs-days li:first-child { border-top: 0; }
.ovs-days li.rempty { display: block; }
.ovs-day { display: grid; place-items: center; align-content: center; width: 44px; height: 44px; border-radius: 10px; background: #f2f5ed; line-height: 1; }
.ovs-day b { font-family: Outfit, Inter, sans-serif; font-size: 17px; font-weight: 500; } .ovs-day small { font-size: 10px; color: var(--pj-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.ovs-days li:first-child .ovs-day { background: var(--pj-leaf-dark); color: #fff; } .ovs-days li:first-child .ovs-day small { color: rgba(255,255,255,0.75); }
.ovs-day__body { min-width: 0; display: grid; gap: 2px; }
.ovs-day__label { font-size: 11.5px; color: var(--pj-muted); }
.ovs-ev { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--pj-ink); text-decoration: none; padding: 3px 0; }
.ovs-ev:hover { color: var(--pj-leaf-dark); }
.ovs-ev .material-symbols-outlined { font-size: 15px; color: var(--pj-muted); } .ovs-ev small { color: var(--pj-muted); margin-left: auto; font-variant-numeric: tabular-nums; }
/* Kunden: senaste meddelandet i vila. */
/* Kundkortets tomläge följer kortets inre luft (18 px), inte kanten. */
.qdialog > .rempty { margin: 0 18px 16px; line-height: 1.5; }

/* ÄTA på Översikt: sök, rum, klart. */
.aq-note { margin: 0 18px 16px; line-height: 1.5; }
.aq-form { display: grid; gap: 8px; padding: 4px 18px 10px; animation: rq-in 200ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.aq-q { width: 100%; height: 40px; border: 1px solid var(--pj-line); border-radius: 10px; padding: 0 12px; font: inherit; font-size: 13px; background: #fff; }
.aq-q:focus { outline: 0; border-color: var(--pj-leaf); box-shadow: 0 0 0 3px var(--pj-ok-2); }
.aq-rooms { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.aq-chip input, .aq-hours input::-webkit-outer-spin-button { position: absolute; opacity: 0; width: 0; height: 0; }
.aq-chip { position: relative; }
.aq-chip span { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--pj-line); font-size: 12px; color: var(--pj-ink-2); cursor: pointer; }
.aq-chip input:checked + span { background: var(--pj-ok-2); border-color: transparent; color: var(--pj-leaf-dark); }
.aq-chip input:focus-visible + span { box-shadow: 0 0 0 3px var(--pj-ok-2); }
.aq-hours { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: 12px; color: var(--pj-muted); }
.aq-hours input { width: 64px; height: 28px; border: 1px solid var(--pj-line); border-radius: 8px; padding: 0 8px; font: inherit; font-size: 12.5px; text-align: right; }
.aq-err { margin: 0; font-size: 12.5px; color: #b4453a; }
.aq-hits { max-height: 40dvh; overflow: auto; margin: 0 -6px; }
.aq-hits > .rempty { margin: 6px 6px; }
.aq-hit { grid-template-columns: 26px 1fr 16px; cursor: pointer; }
.aq-hit--own .ri { background: var(--pj-warn-2); color: var(--pj-warn); }
.aq .row.is-new { animation: rq-in 320ms cubic-bezier(0.22, 1, 0.36, 1) both, aq-new 2.4s ease-out 320ms both; }
@keyframes aq-new { from { background: var(--pj-ok-2); } to { background: transparent; } }

/* ÄTA-fliken: samma kort, rader och knappar som Översikt/Offert. */
.ata .aq-form { padding-bottom: 14px; }
.ata .aq-note, .ata .rdone { margin: 0 18px 12px; }
.ata-bundle { padding-top: 0; }
.ata-bundle .rempty { margin: 0 auto 0 0; }
.qrow.is-new { animation: rq-in 320ms cubic-bezier(0.22, 1, 0.36, 1) both, aq-new 2.4s ease-out 320ms both; }
.ata-pick + .ri { display: none; }
.ata-pick span { width: 26px; height: 26px; padding: 0; border-radius: 8px; justify-content: center; color: transparent; }
.ata-pick input:checked + span { background: var(--pj-leaf-dark); border-color: transparent; color: #fff; }
.ata-pick span .material-symbols-outlined { font-size: 16px; }
.qrow > summary .amt.is-neg, .row .amt.is-neg { color: #b4453a; }
.qrow-body .kvl { padding-top: 4px; }
.qrow-body > .rows { padding: 0 6px; }
.arow > summary { list-style: none; }
.arow > summary::-webkit-details-marker { display: none; }
.arow > summary .chev { font-size: 16px; }
.arow[open] > summary { background: #fbfcfb; }
.arow[open] > summary .chev { color: var(--pj-leaf-dark); }
.aedit-wrap { padding: 2px 6px 10px; }
.aedit { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 10px; padding: 10px 12px; border-radius: 10px; background: #f4f7f3; animation: rq-in 200ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.aedit label { display: grid; gap: 4px; font-size: 11.5px; color: var(--pj-muted); }
.aedit .is-wide, .aedit-foot { grid-column: 1 / -1; }
.aedit-foot { display: flex; align-items: center; gap: 12px; }
.aedit-foot .qdelete__btn { margin-left: auto; }
.pinput { width: 100%; height: 36px; border: 1px solid var(--pj-line); border-radius: 10px; padding: 0 10px; font: inherit; font-size: 13px; color: var(--pj-ink); background: #fff; }
textarea.pinput { height: auto; min-height: 60px; padding: 8px 10px; resize: vertical; }
.pinput:focus { outline: 0; border-color: var(--pj-leaf); box-shadow: 0 0 0 3px var(--pj-ok-2); }
.ata-add { display: grid; gap: 8px; justify-items: start; padding: 8px 12px 0; }
.ata-add .aq-form { width: 100%; padding: 0; }
.ata-meta { margin: 8px 12px 0; }
.ata-meta > summary { list-style: none; display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--pj-muted); cursor: pointer; }
.ata-meta > summary::-webkit-details-marker { display: none; }
.ata-meta > summary .material-symbols-outlined { font-size: 18px; transition: transform 200ms ease; }
.ata-meta[open] > summary .material-symbols-outlined { transform: rotate(180deg); }
.ata-meta > summary small { font-size: 11px; color: var(--pj-faint); }
.ata-meta .aedit { margin-top: 8px; grid-template-columns: 1fr 1fr; }
.ata-meta .aedit textarea.pinput { min-height: 44px; }
.qrow-body .mod-foot { padding: 10px 12px 12px; }
.qrow-body .mod-foot .qdelete { margin-left: auto; }
@media (max-width: 640px) {
  .ata .mod-head { flex-wrap: wrap; }
  .ata .mod-tools { width: 100%; margin-left: 0; flex-wrap: wrap; }
  .ata .mod-end { text-align: left; }
  .ata .qrow > summary { grid-template-columns: 26px minmax(0, 1fr) auto 20px; row-gap: 4px; }
  .ata .qrow > summary .rt { grid-column: 2 / 4; }
  .ata .qrow > summary .phead-chip { grid-column: 2; grid-row: 2; justify-self: start; }
  .ata .qrow > summary .amt { grid-column: 3; grid-row: 2; }
  .ata .qrow > summary .chev { grid-row: 1; grid-column: 4; }
  .ata .row { grid-template-columns: 26px minmax(0, 1fr) auto 16px; row-gap: 2px; }
  .ata .row .rt { grid-column: 2 / 4; }
  .ata .row .pchip { grid-column: 2; grid-row: 2; justify-self: start; }
  .ata .row .amt { grid-column: 3; grid-row: 2; }
  .ata .row .chev { grid-row: 1; grid-column: 4; }
  .ata .row > span:empty { display: none; }
  .ata .aq-hours { margin-left: 0; }
  .qrow-body .mod-foot .kbtn { flex: 1 1 auto; justify-content: center; }
}
.ovs-last { margin: 0 18px 14px; padding: 10px 12px; border-radius: 10px; background: #f7faf6; font-size: 12.5px; display: grid; gap: 4px; }
.ovs-last p { margin: 0; line-height: 1.45; } .ovs-last .qlink { justify-self: start; font-size: 12px; color: var(--pj-muted); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; font-family: inherit; }
/* Avslut hopfällt. */
.ovs-close { border: 1px dashed var(--pj-line); border-radius: 12px; background: rgba(255,255,255,0.6); }
.ovs-close > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 10px 16px; font-size: 13px; }
.ovs-close > summary::-webkit-details-marker { display: none; }
.ovs-close > summary b { font-weight: 500; } .ovs-close > summary small { color: var(--pj-muted); }
.ovs-close > summary .material-symbols-outlined { color: var(--pj-faint); transition: transform 200ms ease; } .ovs-close[open] > summary .material-symbols-outlined { transform: rotate(180deg); }
.ovs-close > aside { padding: 0 16px 16px; }
.preopen { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--pj-muted); padding: 0 4px; } .preopen .material-symbols-outlined { font-size: 16px; }
.qsim { display: grid; gap: 6px; padding: 8px; border: 1px dashed var(--pj-line); border-radius: 10px; background: #fbfcfb; }
.qsim > small { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pj-faint); }
.qsim .kbtn.sm { height: auto; min-height: 32px; font-size: 12px; padding: 4px 8px; white-space: normal; text-align: left; }
.qstale { display: flex; gap: 8px; align-items: flex-start; margin: 0 18px 8px; padding: 8px 10px; border-radius: 8px; background: var(--pj-warn-2); color: #7a5a1a; font-size: 12px; line-height: 1.4; }
.qstale .material-symbols-outlined { font-size: 16px; color: var(--pj-warn); margin-top: 1px; }
/* Skickad offert som behöver förnyas: banderoll i Rum/Kalkyl och panel i Offert-fliken. */
.renew { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: var(--pj-warn-2); border: 1px solid #f0dfb8; color: #7a5a1a; font-size: 12.5px; }
.renew > .material-symbols-outlined { font-size: 20px; color: var(--pj-warn); }
.renew-text { flex: 1; min-width: 0; line-height: 1.4; } .renew-text b { font-weight: 500; color: var(--pj-ink); }
.renew .kbtn { flex: none; }
.qrenew { display: grid; gap: 8px; margin: 0 18px 10px; padding: 12px; border-radius: 12px; background: var(--pj-warn-2); border: 1px solid #f0dfb8; }
.qrenew b { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--pj-ink); }
.qrenew b .material-symbols-outlined { font-size: 18px; color: var(--pj-warn); }
.qrenew p { margin: 0; font-size: 12px; color: #7a5a1a; line-height: 1.45; }
.qrenew .kbtn { justify-content: center; }

.mall-skel { min-height: 260px; }
.mall-skel__rows { padding: 18px 22px; display: grid; gap: 12px; }
.mall-skel__rows span { display: block; height: 12px; border-radius: 6px; background: #eef2ec; animation: skel-pulse 1.2s ease-in-out infinite; }
@keyframes skel-pulse { 50% { opacity: 0.45; } }

/* ── Frågepanelen: en egen yta i raden, inte en lista som smälter in ─────────
   Ljus lövgrön botten med huvud (räknare + förloppsstapel), måtten som första
   och tyngsta frågan, sedan en fråga per rad med svaren som piller. Zimlas
   förslag = gult streckat piller med "förslag" tills det bekräftas. */
.rqpanel { padding: 0 14px 2px; border-radius: 14px; background: #f4f8f3; border: 1px solid #dfe9df; }
.rqpanel-h { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 10px; padding: 12px 0 10px; }
.rqpanel-t { display: inline-flex; align-items: center; gap: 6px; font-family: Outfit, Inter, ui-sans-serif, system-ui, sans-serif; font-size: 14px; font-weight: 500; color: var(--pj-ink); }
.rqpanel-t .material-symbols-outlined { font-size: 18px; color: var(--pj-leaf-dark); }
.rqpanel-n { font-size: 12px; color: var(--pj-muted); font-variant-numeric: tabular-nums; min-height: 1em; }
.rqpanel-bar { grid-column: 1 / -1; display: block; height: 3px; border-radius: 2px; background: #dfe9df; overflow: hidden; }
.rqpanel-bar b { display: block; height: 100%; border-radius: 2px; background: var(--pj-leaf); transition: width 500ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.rqpanel .rkicker { display: none; }
/* Zimla erbjuder förslagen i stället för att ställa frågor: kortet visas tills man tackar ja. */
.rqoffer { display: none; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 0 14px; border-top: 1px solid #e3ebe3; }
.rqpanel:not(.is-wanted):not(:has(> .rqpanel-h[data-done="1"])) > .rqoffer { display: grid; animation: rq-in 220ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.rqpanel:not(.is-wanted):not(.is-open) > .rq-host { display: none; }
.rqpanel:not(.is-wanted) > .rqpanel-h .rqpanel-bar { display: none; }
.rqoffer-ai .zimla-dock-orb { width: 38px; height: 38px; outline-width: 3px; outline-color: #edf6f0; box-shadow: 0 12px 22px -16px rgba(5, 99, 68, 0.72); }
.rqoffer-ai .zimla-dock-orb__gaze { width: 24px; height: 16px; }
.rqoffer-ai .zimla-dock-orb__eyes { gap: 4px; }
.rqoffer-ai .zimla-dock-orb__eye { width: 7px; height: 11px; }
.rqoffer-t { display: grid; gap: 2px; min-width: 0; }
.rqoffer-t b { font-size: 14px; font-weight: 500; color: var(--pj-ink); }
.rqoffer-t small { font-size: 12px; line-height: 1.4; color: var(--pj-muted); }
.rqoffer-yes { height: 34px; padding: 0 14px; border: 1px solid #cfdccf; border-radius: 999px; background: #fff; font: inherit; font-size: 12.5px; font-weight: 500; color: var(--pj-leaf-dark); white-space: nowrap; cursor: pointer; }
.rqoffer-yes:hover { border-color: var(--pj-leaf); background: #f3f8f4; }
@container project-detail (max-width: 520px) {
  .rqoffer { grid-template-columns: auto minmax(0, 1fr); }
  .rqoffer-yes { grid-column: 1 / -1; height: 44px; }
}
/* Allt besvarat och bekräftat: bara huvudraden står kvar (måtten och listan fälls ihop) – Öppna kalkyl och Byt nivå ligger utanför. */
.rqpanel:has(> .rqpanel-h[data-done="1"]):not(.is-open) > :not(.rqpanel-h) { display: none; }
.rqpanel:has(> .rqpanel-h[data-done="1"]) > .rqpanel-h { cursor: pointer; padding: 10px 0; }
.rqpanel:has(> .rqpanel-h[data-done="1"]):not(.is-open) > .rqpanel-h .rqpanel-bar { display: none; }
.rqpanel:has(> .rqpanel-h[data-done="1"]) > .rqpanel-h .rqpanel-n::after { content: ' · visa'; color: var(--pj-leaf-dark); }
.rqpanel:has(> .rqpanel-h[data-done="1"]).is-open > .rqpanel-h .rqpanel-n::after { content: ' · dölj'; }
.rqpanel .rq, .rqpanel .rconfirm { grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 10px; min-height: 0; padding: 11px 0; border-top: 1px solid #e3ebe3; }
/* Frågekortet: en fråga i taget. Kicker + Osäker på första raden, frågan stor, svaren som piller under. */
.rqpanel .rq-card { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 12px 0 14px; animation: rq-in 220ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.rq-kicker { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pj-muted); }
.rqpanel .rq-card .rq-unsure { grid-column: 2; grid-row: 1; margin: -4px 0; }
.rqpanel .rq-card .rq-prompt { grid-column: 1 / -1; font-size: 16px; line-height: 1.3; margin-top: 2px; }
.rqpanel .rq-card .rseg { grid-column: 1 / -1; justify-content: flex-start; margin-top: 6px; }
.rqpanel .rq-card .rseg button { height: 36px; padding: 0 16px; font-size: 13px; }
.rq-queue { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; padding: 0 0 10px; font-size: 12px; color: var(--pj-muted); }
.rq-queue > span { margin-right: 4px; }
.rq-queue button { padding: 2px 8px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-size: 12px; color: var(--pj-ink-2); cursor: pointer; text-align: left; }
.rq-queue button:hover { background: rgba(23, 33, 26, 0.05); color: var(--pj-ink); }
.rq-queue button::before { content: '·'; margin-right: 6px; color: var(--pj-faint); }
.rqpanel .rq-dot { display: none; }
.rqpanel .rq-prompt { font-size: 14px; font-weight: 500; color: var(--pj-ink); line-height: 1.3; }
.rqpanel .rq-prompt small { font-weight: 400; font-size: 11.5px; margin-top: 2px; }
.rqpanel .rseg { gap: 6px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.rqpanel .rq.is-wide .rseg { justify-content: flex-start; }
.rqpanel .rseg button { height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid #cfdccf; background: #fff; font-size: 12.5px; font-weight: 500; color: var(--pj-ink-2); transition: background 140ms ease, border-color 140ms ease, color 140ms ease; }
.rqpanel .rseg button:hover { border-color: var(--pj-leaf); color: var(--pj-leaf-dark); background: #fff; }
.rqpanel .rseg button.is-on { background: var(--pj-leaf-dark); border-color: var(--pj-leaf-dark); color: #fff; }
.rqpanel .rq.is-assumed .rseg button.is-on { background: #e9f3ee; border: 1px dashed #8fbfae; color: var(--pj-leaf-dark); }
.rqpanel .rq.is-assumed .rseg button.is-on:hover { background: #dcece4; border-color: var(--pj-leaf); }
.rqpanel .rseg button small { margin-left: 6px; font-size: 10.5px; font-weight: 400; color: var(--pj-leaf); }
.rqpanel .rq-unsure { height: 30px; padding: 0 8px 0 12px; border-radius: 999px; font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background 140ms ease, border-color 140ms ease, color 140ms ease; }
/* Måtten: en rad "Stämmer måtten? · ≈ 6,7 m²" med linjal-ikon och Stämmer. Ikonen fäller ut skissen under raden;
   klick utanför fäller ihop. Antaget = lätt grön remsa över panelens bredd. */
.rqpanel .rconfirm { grid-template-columns: minmax(0, 1fr) auto; border-top: 0; }
.rqpanel .rconfirm.is-assumed { margin: 0 -14px; padding-left: 14px; padding-right: 14px; background: #eef5f0; border-top: 1px solid #dfe9df; border-bottom: 1px solid #dfe9df; }
.rqpanel .rconfirm .rq-prompt { font-size: 13.5px; }
.rqpanel .rconfirm .rq-prompt small { display: inline; margin-left: 6px; font-size: 13px; font-weight: 400; color: var(--pj-muted); }
.rqpanel .rconfirm.is-assumed .rq-prompt small { color: var(--pj-leaf-dark); }
.rconfirm-act { display: inline-flex; align-items: center; gap: 6px; }
.rconfirm-ico { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 1px solid #cfdccf; border-radius: 999px; background: #fff; color: var(--pj-leaf-dark); cursor: pointer; transition: background 140ms ease, border-color 140ms ease; }
.rconfirm-ico .material-symbols-outlined { font-size: 18px; }
.rconfirm-ico:hover, .rconfirm-ico[aria-expanded="true"] { background: var(--pj-leaf-dark); border-color: var(--pj-leaf-dark); color: #fff; }
.rconfirm-ok { height: 32px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--pj-leaf-dark); background: var(--pj-leaf-dark); color: #fff; font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; }
.rconfirm-ok:hover { background: #27604f; }
/* Måtten som en planritning: längd på överkantens måttlinje, bredd på vänsterkantens, golvytan i mitten
   (L × B räknar den, annars skrivs den direkt). Rutan byter proportion med L/B utan animation. Under: takhöjd,
   stommar och mängder som saknas – etikett till vänster, fält till höger. Spara i full bredd sist. */
.rsketch { grid-column: 1 / -1; display: grid; gap: 14px; margin-top: 10px; animation: rq-in 200ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.rsketch-plan { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 10px; row-gap: 6px; }
.rsketch-cap { font-size: 11px; color: var(--pj-muted); }
.rsketch-field { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--pj-muted); }
.rsketch input { width: 3.4em; height: 28px; border: 1px solid var(--pj-line); border-radius: 8px; padding: 0 7px; font: inherit; font-size: 13px; color: var(--pj-ink); text-align: right; font-variant-numeric: tabular-nums; background: #fff; }
.rsketch input::placeholder { color: var(--pj-faint); }
.rsketch input:focus { outline: 0; border-color: var(--pj-leaf); box-shadow: 0 0 0 3px rgba(58, 136, 116, 0.15); }
.rconfirm.is-assumed .rsketch input { border-style: dashed; border-color: #8fbfae; }
.rsketch .rsketch-l { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: minmax(8px, 1fr) auto minmax(8px, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 6px; }
.rsketch-l > .rsketch-cap { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
.rsketch-l > .rsketch-field { grid-column: 2; grid-row: 2; }
.rsketch-l::before, .rsketch-l::after { content: ""; grid-row: 2; height: 7px; border: solid #c7d8cc; border-width: 0 0 1px; }
.rsketch-l::before { grid-column: 1; border-left-width: 1px; } .rsketch-l::after { grid-column: 3; border-right-width: 1px; }
.rsketch .rsketch-b { grid-column: 1; grid-row: 2; align-self: stretch; height: 100%; display: grid; grid-template-rows: minmax(8px, 1fr) auto auto minmax(8px, 1fr); justify-items: center; row-gap: 4px; }
.rsketch-b > .rsketch-cap { grid-row: 2; } .rsketch-b > .rsketch-field { grid-row: 3; }
.rsketch-b::before, .rsketch-b::after { content: ""; align-self: stretch; width: 7px; border: solid #c7d8cc; border-width: 0 1px 0 0; justify-self: center; }
.rsketch-b::before { grid-row: 1; border-top-width: 1px; } .rsketch-b::after { grid-row: 4; border-bottom-width: 1px; }
.rsketch-box { grid-column: 2; grid-row: 2; display: grid; place-items: center; width: 100%; min-height: 96px; max-height: 150px; border: 1px solid #c7d8cc; border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(23, 33, 26, 0.04); }
.rsketch .rsketch-area { display: grid; justify-items: center; gap: 2px; }
.rsketch-area .rsketch-field { font-size: 13px; color: var(--pj-ink-2); }
.rsketch .rsketch-area input { width: 3.8em; height: 36px; padding: 0 6px; border-color: #d5e3d8; font-size: 20px; font-weight: 500; text-align: right; letter-spacing: -0.01em; }
.rsketch .rsketch-area input:read-only { border-color: transparent; background: transparent; box-shadow: none; color: var(--pj-ink); }
.rsketch-hint { grid-column: 2; grid-row: 3; margin: 0; font-size: 11.5px; color: var(--pj-muted); text-align: center; }
.rsketch-hint button { padding: 0; border: 0; background: none; font: inherit; color: var(--pj-leaf-dark); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.rsketch-side { display: grid; gap: 4px; }
.rsketch-side:empty { display: none; }
.rsketch-side label { display: grid; grid-template-columns: minmax(0, 1fr) 4.2em 1.8em; align-items: center; gap: 8px; min-height: 34px; font-size: 13px; color: var(--pj-muted); }
.rsketch-side label > span:first-child { color: var(--pj-ink-2); line-height: 1.25; }
.rsketch-side label > span:first-child small { display: block; font-size: 11px; color: var(--pj-muted); }
.rsketch-side input { width: 100%; height: 30px; }
.rsketch-save { height: 36px; width: 100%; border: 0; border-radius: 999px; background: var(--pj-leaf-dark); color: #fff; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: background 140ms ease; }
.rsketch-save:hover { background: #27604f; } .rsketch-save:active { transform: translateY(1px); }
.rsketch-save:focus-visible { outline: 2px solid var(--pj-leaf); outline-offset: 2px; }
/* Utfällt formulär: Spara står längst ned, inte uppe i hörnet. */
.rconfirm.is-editing .rconfirm-ok { display: none; }
@media (pointer: coarse) {
  .rsketch input, .rsketch-side input { height: 40px; font-size: 16px; }
  .rsketch .rsketch-area input { height: 44px; font-size: 20px; }
  .rsketch-side label { min-height: 44px; }
  .rsketch-save { height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .rsketch { animation: none; } .rsketch-save:active { transform: none; } }
/* Besvarade och klart. */
.rqpanel .rmore { border: 0; border-top: 1px solid #e3ebe3; border-radius: 0; padding: 8px 0 6px; }
.rqpanel .rmore > summary { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--pj-leaf-dark); }
.rqpanel .rmore > summary::before { content: '\2713'; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 999px; background: #dbe8dc; font-size: 10px; }
.rqpanel .rmore .rq { padding: 7px 0; border-top: 0; }
.rqpanel .rmore .rq-prompt { font-size: 12.5px; font-weight: 400; color: var(--pj-ink-2); }
.rqpanel .rmore .rq-prompt small { display: none; }
.rqpanel .rseg.is-quiet button { height: 26px; padding: 0 10px; font-size: 11.5px; font-weight: 400; }
.rqpanel .rseg.is-quiet button.is-on { background: #eaf3ee; border-color: #cfe3d8; color: var(--pj-leaf-dark); }
.rqpanel .rdone { padding: 11px 0; border-top: 1px solid #e3ebe3; min-height: 0; font-size: 13px; font-weight: 500; }
.rqpanel .rdone i { width: 18px; height: 18px; display: inline-grid; place-items: center; background: var(--pj-leaf-dark); color: #fff; font-size: 11px; font-style: normal; }
.rqpanel .rdone i::after { content: '\2713'; }
.rqpanel .rempty { padding: 11px 0; margin: 0; border-top: 1px solid #e3ebe3; }
.rqpanel .skel { padding: 12px 0; }
.rqpanel .rerror { margin: 8px 0; }
.rlinks { border-top: 0; padding-top: 0; }
/* Mobil: frågan över svaren, svaren som breda piller i en rad (Ja · Nej · Osäker), långa svar
   ett per rad. Listhuvudet staplas: titel, sedan verktygen. Tumträff 40 px. */
@media (max-width: 900px) {
  .rqpanel { padding: 0 12px 2px; }
  .rqpanel .rq-card .rseg button { flex: 1 1 auto; min-height: 44px; height: auto; padding: 8px 12px; white-space: normal; line-height: 1.2; }
  .rqpanel .rq-card.is-wide .rseg button { flex-basis: 100%; }
  .rqpanel .rconfirm.is-assumed { margin: 0 -12px; padding-left: 12px; padding-right: 12px; }
  .rqpanel .rconfirm .rq-prompt small { display: block; margin: 1px 0 0; }
  .rconfirm-ico, .rconfirm-ok { height: 36px; } .rconfirm-ico { width: 36px; }
  .rqpanel .rseg.is-quiet button { flex: 0 0 auto; min-height: 0; padding: 0 10px; }
  /* Telefon: de tre valen på en rad som lätta knappar – Öppna kalkyl (grön), Byt nivå (ram), Ta bort (dämpad). */
  .rlinks { flex-wrap: nowrap; gap: 6px; padding-top: 8px; }
  .rlinks a, .rlinks button { min-height: 40px; height: 40px; padding: 0 12px !important; border-radius: 10px; border: 1px solid var(--pj-line); background: #fff; font-size: 12.5px; white-space: nowrap; }
  .rlinks-main { flex: 1 1 auto; justify-content: center; }
  .rlinks-end { flex: 0 0 auto; margin-left: 0; }
  .rlinks-lvl { display: none; }
  .rlinks a, .rlinks button { padding: 0 10px !important; }
}
@media (max-width: 640px) {
  /* Telefon: raden är bara ~270 px bred – ingen indragning under tumnageln, pilen på Öppna kalkyl bort. */
  .rbody { padding-left: 8px; }
  .rlinks-main .material-symbols-outlined { display: none; }
  /* Arbetsgrupper och moment: bara timmar och totalt får plats – material/arbete finns i kalkylen. */
  .rbody .rmetrics > :nth-child(2), .rbody .rmetrics > :nth-child(3) { display: none; }
  .rlist-head {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 8px 10px;
    padding-bottom: 8px;
  }
  .rlist-title { min-width: 0; }
  .rlist-title p { line-height: 1.35; }
  /* Rubriken får hela textbredden. Sortering och huvudåtgärd ligger tätt på en egen rad. */
  .rlist-tools {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-left: 0;
  }
  .rlist-long { display: none; }
  .rlist-tools [data-rlist-toggle-all] { display: none; }
  .rlist-sort { display: block; min-width: 0; font-size: 0; }
  .rlist-sort select { width: 100%; min-width: 0; height: 40px; font-size: 12.5px; }
  .rlist-tools .rhub-btn:not(.is-ghost) { height: 40px; margin-left: 0; }
}
@media (max-width: 360px) {
  .rlist-tools { grid-template-columns: minmax(0, 1fr); }
  .rlist-tools .rhub-btn:not(.is-ghost) { width: 100%; justify-content: center; }
}


/* ===== På plats: rumsgenomgången (Studio-flöde) ===== */
.ons { max-width: 720px; margin: 0 auto; padding: 0 0 40px; }
.ons .pcrumbs { margin-bottom: 10px; }
/* Appens rad (mobil): ersätter global topbar + brödsmulor när På plats öppnas från Hem. */
.ons-appbar { display: none; }
@media (max-width: 1023px) {
  .ons .pcrumbs { display: none; }
  .ons-appbar { position: sticky; top: 0; z-index: 7; display: flex; align-items: center; gap: 8px; height: 52px; margin: 0 -4px 8px; padding: 0 4px; background: rgba(247, 249, 246, 0.94); backdrop-filter: blur(12px); }
  .ons-appbar__home { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px 0 2px; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--pj-leaf-dark); text-decoration: none; }
  .ons-appbar__home .material-symbols-outlined { font-size: 22px; margin-right: -2px; }
  .ons-appbar__name { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 14px; font-weight: 500; color: #17211a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ons-appbar__name .material-symbols-outlined { font-size: 18px; color: var(--pj-leaf-dark); }
  .ons-tabs { top: 52px; }
  /* Påbörjade genomgångar först på mobil – annars trycker man rum och får ett utkast till. */
  .ons-start { display: grid; gap: 12px; }
  .ons-start .ons-drafts { order: -1; }
  .ons-start .ons-card + .ons-card { margin-top: 0; }
}
.ons-card { border-radius: 18px; background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(255, 255, 255, 0.85); box-shadow: 0 24px 60px -40px rgba(60, 40, 10, 0.5); padding: 16px; }
.ons-card + .ons-card { margin-top: 12px; }
.ons-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #3a6e5c; } .ons-kicker .material-symbols-outlined { font-size: 16px; }
.ons h1 { margin: 6px 0 4px; font-family: Outfit, Inter, ui-sans-serif, system-ui, sans-serif; font-weight: 500; font-size: 22px; letter-spacing: -0.01em; }
.ons p { margin: 0 0 12px; font-size: 14px; line-height: 1.45; color: var(--pj-ink-2); } .ons-muted { color: var(--pj-muted); font-size: 13px; }
.ons-h { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; font-size: 14px; font-weight: 500; } .ons-h small { font-weight: 400; font-size: 12px; color: var(--pj-muted); }
.ons-h + .ons-h, .ons-list + .ons-h, .ons-grid + .ons-h { margin-top: 16px; }
/* Rumstyperna som bilder: ett tryck = ett rum. */
.ons-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; } .ons-grid > form { display: contents; } /* 2 spalter på de minsta telefonerna, 3 från ~440 px, 5 på bred skärm */
@media (min-width: 440px) { .ons-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ons-tile { display: grid; grid-template-rows: auto auto; gap: 0; padding: 0; overflow: hidden; border: 1px solid var(--pj-line-2); border-radius: 12px; background: #fff; font: inherit; font-size: 13px; color: var(--pj-ink); cursor: pointer; text-align: center; transition: border-color 120ms ease, transform 120ms ease; }
.ons-tile img { display: block; width: 100%; aspect-ratio: 5 / 3; object-fit: cover; background: #eef3e9; }
.ons-tile span { padding: 6px 4px 7px; line-height: 1.2; }
.ons-tile:hover { border-color: var(--pj-leaf); } .ons-tile:active { transform: scale(0.98); } .ons-tile:disabled { opacity: 0.5; cursor: default; }
/* Rummen ni gått igenom: bild, namn, doft. */
.ons-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ons-list > li > * { display: grid; grid-template-columns: 52px minmax(0, 1fr) 20px; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 6px 10px 6px 6px; border: 1px solid var(--pj-line-2); border-radius: 12px; background: #fff; font: inherit; text-align: left; color: var(--pj-ink); text-decoration: none; cursor: pointer; }
.ons-list > li > *:hover { border-color: var(--pj-leaf); }
.ons-list img { width: 52px; height: 40px; object-fit: cover; border-radius: 8px; background: #eef3e9; }
.ons-list > li > * > span:not(.material-symbols-outlined) { min-width: 0; }
.ons-list b { font-weight: 500; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ons-list small { display: block; font-size: 12px; color: var(--pj-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ons-list .material-symbols-outlined { color: var(--pj-faint); }
.ons-drafts h3 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; font-size: 14px; font-weight: 500; } .ons-drafts h3 small { font-weight: 400; font-size: 12px; color: var(--pj-muted); }
/* Klar-delen på Rum-sidan. */
.ons-done { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--pj-line-2); }
.ons-cust { margin: 0 0 10px; border: 1px solid var(--pj-line-2); border-radius: 12px; background: #fff; }
.ons-cust summary { list-style: none; display: grid; grid-template-columns: 24px minmax(0, 1fr) 20px; align-items: center; gap: 8px; min-height: 44px; padding: 6px 10px; font-size: 13.5px; color: var(--pj-ink); cursor: pointer; }
.ons-cust summary::-webkit-details-marker { display: none; } .ons-cust summary small { color: var(--pj-muted); font-size: 12px; margin-left: 4px; }
.ons-cust summary .material-symbols-outlined { color: var(--pj-muted); font-size: 20px; } .ons-cust[open] .ons-cust__chev { transform: rotate(180deg); }
.ons-cust .ons-form { padding: 2px 10px 10px; }
.ons-form { display: grid; gap: 8px; position: relative; }
.ons-form label { display: grid; gap: 3px; font-size: 12px; color: var(--pj-muted); } .ons-form input { height: 42px; padding: 0 12px; border: 1px solid var(--pj-line); border-radius: 10px; font: inherit; font-size: 15px; background: #fff; min-width: 0; }
.ons-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ons-form .ons-savedslot { justify-self: end; min-height: 16px; }
.ons-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 1px solid var(--pj-leaf-dark); border-radius: 12px; background: var(--pj-leaf-dark); color: #fff; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none; box-sizing: border-box; }
.ons-btn.is-ghost { background: #fff; border-color: var(--pj-line); color: var(--pj-ink-2); } .ons-btn.is-ghost:hover { border-color: var(--pj-leaf); }
.ons-btn:disabled { opacity: 0.45; cursor: default; }
/* Generera: samma knapp som "Klar med rummet", med Zimlas fyra prickar som märke. */
.ons-done__nav { display: flex; justify-content: flex-end; margin-top: 12px; }
.ons-gen { gap: 9px; padding: 0 18px 0 14px; }
.ons-mark { display: inline-grid; grid-template-columns: 7px 7px; gap: 2px; }
.ons-mark i { width: 7px; height: 7px; border-radius: 999px; background: #fff; } .ons-mark i:nth-child(3) { background: #9fd3bd; } .ons-mark i:nth-child(4) { background: #d5efe2; }
/* Flikraden följer svepet; sidorna ligger i bredd. */
.ons-tabs { display: flex; gap: 4px; padding: 4px; margin: 0 0 10px; border-radius: 12px; background: #fff; border: 1px solid var(--pj-line-2); box-shadow: 0 8px 20px -16px rgba(23, 33, 26, 0.4); position: sticky; top: 63px; z-index: 6; overflow-x: auto; scrollbar-width: none; }
.ons-tabs::-webkit-scrollbar { display: none; }
.ons-tabs button { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; height: 40px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; font: inherit; font-size: 13px; font-weight: 500; color: var(--pj-muted); cursor: pointer; white-space: nowrap; }
.ons-tabs button .material-symbols-outlined { font-size: 16px; }
.ons-tabs button.is-on { background: #e6f2ea; color: var(--pj-leaf-dark); }
.ons-pages { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 0 16px; align-items: start; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.ons-pages::-webkit-scrollbar { display: none; }
.ons-page { scroll-snap-align: start; min-width: 0; }
/* Rummets sida. */
.ons-room__h { display: grid; grid-template-columns: 64px minmax(0, 1fr) 36px; gap: 10px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--pj-line-2); }
.ons-room__img { width: 64px; height: 48px; object-fit: cover; border-radius: 10px; background: #eef3e9; }
.ons-room__t { min-width: 0; } .ons-room__t small { display: block; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pj-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ons-name { display: flex; align-items: center; gap: 4px; }
.ons-name input { flex: 1 1 auto; min-width: 0; border: 0; border-bottom: 1px dashed var(--pj-line); padding: 0; background: transparent; font-family: Outfit, Inter, ui-sans-serif, system-ui, sans-serif; font-size: 19px; font-weight: 500; color: var(--pj-ink); }
.ons-name input:focus { outline: none; border-bottom-color: var(--pj-leaf); } .ons-name .material-symbols-outlined { font-size: 16px; color: var(--pj-faint); }
.ons-x { width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: var(--pj-faint); cursor: pointer; display: grid; place-items: center; } .ons-x:hover { background: #fdf2f2; color: #b91c1c; }
.ons-sec { padding: 14px 0 6px; } .ons-sec + .ons-sec { border-top: 1px solid var(--pj-line-2); }
.ons-sec h3 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; font-size: 14px; font-weight: 500; } .ons-sec h3 small { font-weight: 400; font-size: 12px; color: var(--pj-muted); }
.ons-saved { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; font-size: 11.5px; color: var(--pj-leaf-dark); } .ons-saved .material-symbols-outlined { font-size: 14px; }
.ons-err { margin-left: auto; font-size: 12px; color: #b91c1c; }
/* Foton: rutnät med knapparna som två rutor till. */
.ons-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px; }
.ons-photo { position: relative; margin: 0; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: #f2f5ef; display: grid; place-items: center; color: var(--pj-muted); }
.ons-photo img { width: 100%; height: 100%; object-fit: cover; }
.ons-photo > button { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border: 0; border-radius: 999px; background: rgba(23, 33, 26, 0.6); color: #fff; display: grid; place-items: center; cursor: pointer; } .ons-photo > button .material-symbols-outlined { font-size: 15px; }
.ons-photo--add { background: var(--pj-leaf-dark); color: #fff; } .ons-photo--add.is-ghost { background: #fff; color: var(--pj-ink-2); border: 1px dashed var(--pj-line); box-sizing: border-box; }
.ons-photo--add label { display: grid; place-items: center; gap: 2px; width: 100%; height: 100%; font-size: 12px; font-weight: 500; cursor: pointer; } .ons-photo--add .material-symbols-outlined { font-size: 24px; }
.ons-photo--add.htmx-request { opacity: 0.5; }
/* Kryss (val) och egna ord är två saker: kryssen är knappar med bock, orden ett eget fält. */
.ons-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ons-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 38px; padding: 0 12px 0 8px; border: 1px solid var(--pj-line); border-radius: 999px; background: #fff; font: inherit; font-size: 13px; color: var(--pj-ink-2); cursor: pointer; transition: background 120ms ease, border-color 120ms ease, color 120ms ease; }
.ons-chip .material-symbols-outlined { font-size: 16px; color: var(--pj-faint); }
.ons-chip.is-on { background: var(--pj-leaf-dark); border-color: var(--pj-leaf-dark); color: #fff; } .ons-chip.is-on .material-symbols-outlined { color: #fff; }
.ons-own { display: grid; gap: 4px; } .ons-own > span { font-size: 13px; font-weight: 500; } .ons-own > span small { font-weight: 400; font-size: 12px; color: var(--pj-muted); margin-left: 6px; }
.ons-note { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--pj-line); border-radius: 12px; font: inherit; font-size: 14px; line-height: 1.4; resize: vertical; background: #fbfcfa; }
.ons-note:focus { outline: none; border-color: var(--pj-leaf); background: #fff; }
/* Mått: längd × bredd = golvyta, enheten i fältet, antaget värde som platshållare. */
.ons-mform { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px; align-items: end; }
.ons-mform label { display: grid; gap: 3px; min-width: 0; font-size: 11.5px; color: var(--pj-muted); }
.ons-mf { position: relative; display: block; } .ons-mf input { width: 100%; box-sizing: border-box; height: 42px; padding: 0 30px 0 10px; border: 1px solid var(--pj-line); border-radius: 10px; font: inherit; font-size: 15px; font-variant-numeric: tabular-nums; background: #fff; }
.ons-mf input:focus { outline: none; border-color: var(--pj-leaf); } .ons-mf input::placeholder { color: var(--pj-faint); }
.ons-mf em { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 12px; color: var(--pj-muted); pointer-events: none; }
.ons-mx { padding-bottom: 12px; color: var(--pj-faint); font-size: 14px; }
.ons-mwide { grid-column: 1 / 3; } .ons-mwide + .ons-mwide { grid-column: 3 / 6; }
.ons-nav { display: flex; justify-content: space-between; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--pj-line-2); }
/* Genomgångsrutan: över sidan, rummen bockas av rad för rad innan projektet öppnas. */
@media (prefers-reduced-motion: no-preference) { .ons-go { animation: ons-go-in 240ms cubic-bezier(0.22, 1, 0.36, 1); } @keyframes ons-go-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } }
.ons-go { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(247, 249, 246, 0.86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ons-go__card { width: min(100%, 520px); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 22px 18px; border-radius: 18px; background: #fff; border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: 0 30px 80px -40px rgba(23, 33, 26, 0.5); }
.ons-go h2 { margin: 12px 0 2px; font-family: Outfit, Inter, ui-sans-serif, system-ui, sans-serif; font-weight: 500; font-size: 19px; }
.ons-go p { min-height: 20px; }
.ons-go__dots { display: inline-grid; grid-template-columns: 12px 12px; gap: 4px; }
.ons-go__dots i { width: 12px; height: 12px; border-radius: 999px; background: var(--pj-leaf-dark); animation: ons-dot 1.1s ease-in-out infinite; }
.ons-go__dots i:nth-child(2) { background: var(--pj-leaf); animation-delay: 0.15s; } .ons-go__dots i:nth-child(3) { background: #1c2a22; animation-delay: 0.3s; } .ons-go__dots i:nth-child(4) { background: var(--pj-leaf); animation-delay: 0.45s; }
@keyframes ons-dot { 0%, 100% { transform: scale(0.7); opacity: 0.55; } 50% { transform: scale(1); opacity: 1; } }
.ons-go__rooms { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.ons-go__rooms li { display: grid; grid-template-columns: 44px minmax(0, 1fr) 22px; gap: 10px; align-items: center; padding: 6px 8px 6px 6px; border: 1px solid var(--pj-line-2); border-radius: 12px; opacity: 0.55; transition: opacity 200ms ease, border-color 200ms ease; }
.ons-go__rooms li.is-now { opacity: 1; border-color: var(--pj-leaf); } .ons-go__rooms li.is-done { opacity: 1; }
.ons-go__rooms img { width: 44px; height: 34px; object-fit: cover; border-radius: 8px; background: #eef3e9; }
.ons-go__rooms b { display: block; font-weight: 500; font-size: 14px; }
.ons-go__rooms small { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.ons-go__rooms em { font-style: normal; font-size: 11.5px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--pj-line-2); color: var(--pj-faint); background: #fff; transition: background 160ms ease, color 160ms ease, border-color 160ms ease; }
.ons-go__rooms em.is-on { background: #e6f2ea; border-color: #cfe3d8; color: var(--pj-leaf-dark); }
.ons-go__rooms .material-symbols-outlined { font-size: 20px; color: var(--pj-faint); } .ons-go__rooms li.is-done .material-symbols-outlined { color: var(--pj-leaf-dark); }
.ons-go__rooms li.is-now .material-symbols-outlined { color: var(--pj-leaf); animation: ons-spin 1s linear infinite; }
@keyframes ons-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ons-go__dots i, .ons-go__rooms li.is-now .material-symbols-outlined { animation: none; } }
@media (max-width: 480px) { .ons-card { padding: 14px; } .ons-form__row { grid-template-columns: 1fr; } .ons-mf input { padding-right: 26px; font-size: 14px; } }
/* Bred skärm: en arbetsyta i stället för mobilens sidor. Rummen och "lägg till" står som spalt till
   vänster (sticky), det valda rummet – eller Klar-kortet – fyller höger. Flikraden behövs inte. */
@media (min-width: 1024px) {
  .ons { max-width: 1240px; }
  .ons-tabs { display: none; }
  .ons-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ons-start { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
  .ons-start .ons-card + .ons-card { margin-top: 0; }
  .ons-start__pick .ons-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .ons-start__pick .ons-tile span { font-size: 14px; padding: 8px 6px 9px; }
  .ons-pages { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 400px minmax(0, 1fr); gap: 16px; overflow: visible; scroll-snap-type: none; align-items: start; }
  #ons-page-rooms { display: contents; }
  .ons-rooms-main, .ons-done { border-radius: 18px; background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(255, 255, 255, 0.85); box-shadow: 0 24px 60px -40px rgba(60, 40, 10, 0.5); padding: 16px; }
  .ons-rooms-main { grid-column: 1; grid-row: 1; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; scrollbar-width: thin; }
  .ons-rooms-main .ons-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ons-done { grid-column: 2; grid-row: 1; margin-top: 0; border-top: 0; padding-top: 16px; }
  .ons.has-room .ons-done { display: none; }
  .ons-room { grid-column: 2; grid-row: 1; display: none; padding: 20px 22px; }
  .ons-room.is-active { display: block; }
  .ons-list > li > *.is-on { border-color: var(--pj-leaf); background: #f3f8f4; }
  .ons-room__h { grid-template-columns: 88px minmax(0, 1fr) 36px; }
  .ons-room__img { width: 88px; height: 62px; }
  .ons-photos { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .ons-mform { grid-template-columns: minmax(0, 150px) auto minmax(0, 150px) auto minmax(0, 150px) minmax(0, 150px) minmax(0, 150px); }
  .ons-mwide, .ons-mwide + .ons-mwide { grid-column: auto; }
  .ons-nav { justify-content: flex-end; } .ons-nav .is-ghost { display: none; }
  /* Startsidan: tre spalter bredvid "påbörjade", fem när listan saknas – aldrig en ensam ruta på sista raden. */
  .ons-start:not(:has(.ons-drafts)) { grid-template-columns: minmax(0, 1fr); }
  .ons-start:not(:has(.ons-drafts)) .ons-start__pick .ons-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ons-start:has(.ons-drafts) .ons-start__pick .ons-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Klar-kortet: genomgången rum för rum innan Generera. */
  .ons-review { display: grid; gap: 8px; list-style: none; margin: 4px 0 14px; padding: 0; }
  .ons-review li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px 12px 10px 10px; border: 1px solid var(--pj-line-2); border-radius: 12px; background: #fff; }
  .ons-review img { width: 64px; height: 46px; object-fit: cover; border-radius: 8px; background: #eef3e9; }
  .ons-review b { font-weight: 500; font-size: 14px; } .ons-review b + small { font-size: 12px; color: var(--pj-muted); margin-left: 6px; }
  .ons-review p { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 4px 0 0; font-size: 12.5px; color: var(--pj-ink-2); }
  .ons-review em { font-style: normal; padding: 1px 8px; border-radius: 999px; background: #e6f2ea; color: var(--pj-leaf-dark); font-size: 12px; }
  .ons-review span { flex-basis: 100%; }
  .ons-review .ons-link { font-size: 12.5px; text-decoration: none; color: var(--pj-muted); padding-top: 2px; } .ons-review .ons-link:hover { color: var(--pj-leaf-dark); }
}
@media (max-width: 1023px) { .ons-review { display: none; } }

/* ── Kundmöte ───────────────────────────────────────────────────────────
   Korten i den ordning man behöver dem hos kunden: vem mötet är med,
   inspelningen (stor knapp, klocka, Klar/Pausa), snabbtaggar, anteckningen
   och påbörjade möten. Steg 2–3 (rummen, Generera) tar inspelningens plats.
   Desktop: mötet till vänster, kund/rum/Generera till höger. */
.mtg-grid { display: grid; gap: 12px; align-items: start; }
.mtg-main, .mtg-aside { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; min-width: 0; }
.mtg .ons-card { padding: 16px; border-radius: 20px; background: rgba(255, 255, 255, 0.94); }
.mtg .ons-card + .ons-card { margin-top: 0; }
.mtg-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 10px; }
.mtg-card__head h3 { margin: 0; font-size: 16px; font-weight: 500; color: var(--pj-ink); }
.mtg-card__head small, .mtg-card__head a { font-size: 12.5px; color: var(--pj-muted); text-decoration: none; }
.mtg-card__head a { display: inline-flex; align-items: center; }
.mtg-card__head a .material-symbols-outlined { font-size: 18px; }

/* Kunden. */
.mtg-cust__row { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: center; }
.mtg-cust__avatar { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #eef2ee; color: var(--pj-ink-2); font-size: 26px; }
.mtg-cust__text { display: grid; gap: 2px; min-width: 0; }
.mtg-cust__text b { overflow: hidden; padding-right: 7.5rem; font-size: 16px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.mtg-cust__text small { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; color: var(--pj-muted); }
.mtg-cust__text small span:last-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mtg-cust__text small .material-symbols-outlined { flex: none; font-size: 17px; }
.mtg-cust__edit { position: absolute; top: -6px; right: 0; min-height: 32px; gap: 5px; padding: 0 11px; font-size: 13px; }
.mtg-cust__edit .material-symbols-outlined { font-size: 17px; }
.mtg-cust .ons-form { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--pj-line-2); }

/* Inspelningen. */
.mtg-rec { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 16px; align-items: center; }
.mtg-mic {
  --level: 0;
  --tone: 47, 111, 92;
  position: relative;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin: 20px 16px 20px 20px;
  border: 0;
  border-radius: 50%;
  background: rgb(var(--tone));
  color: #fff;
  cursor: pointer;
  box-shadow: 0 0 0 calc(14px + var(--level) * 6px) rgba(var(--tone), 0.14), 0 0 0 calc(28px + var(--level) * 10px) rgba(var(--tone), 0.07);
  transition: background 220ms ease, box-shadow 90ms linear;
  -webkit-tap-highlight-color: transparent;
}
.mtg-mic .material-symbols-outlined { position: relative; font-size: 40px; font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 48; }
.mtg-mic__ring { display: none; }
.mtg-mic:is([data-state="live"], [data-state="starting"], [data-state="reconnecting"]) { --tone: 196, 48, 38; }
.mtg-mic[data-state="reconnecting"] { opacity: 0.75; }
.mtg-mic:disabled { cursor: default; }
.mtg-rec__info { display: grid; gap: 4px; min-width: 0; }
.mtg-rec__kicker { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pj-leaf-dark); }
.mtg-rec__kicker i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.mtg.is-live .mtg-rec__kicker { color: #c43026; }
.mtg[data-phase="paused"] .mtg-rec__kicker { color: var(--pj-muted); }
.mtg-clock { font-size: 40px; font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--pj-ink); }
.mtg-rec__status { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--pj-ink-2); }
.mtg-rec__status .material-symbols-outlined { font-size: 22px; color: var(--pj-leaf-dark); }
.mtg-rec__lede { margin: 4px 0 0 !important; font-size: 13.5px !important; line-height: 1.45; color: var(--pj-muted) !important; }
.mtg-rec__actions { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: 10px; }
.mtg-rec__actions .ons-btn { justify-content: center; min-height: 52px; gap: 8px; border-radius: 14px; font-size: 15px; }
.mtg-rec__actions .material-symbols-outlined { font-size: 20px; font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24; }
.mtg-rec .mtg-err { grid-column: 1 / -1; margin: 0; }

/* Snabbtaggar. */
.mtg-tags__row { display: flex; gap: 8px; margin: 0 -16px; padding: 0 16px 2px; overflow-x: auto; scrollbar-width: none; }
.mtg-tags__row::-webkit-scrollbar { display: none; }
.mtg-tags__row .ons-chip { flex: none; gap: 8px; min-height: 42px; padding: 0 14px 0 12px; font-size: 14px; color: var(--pj-ink); }
.mtg-tags__row .ons-chip .material-symbols-outlined { font-size: 19px; color: var(--pj-ink-2); }

/* Anteckningen. */
.mtg-notes__saved { display: inline-flex; align-items: center; gap: 6px; }
.mtg-notes__saved i { width: 8px; height: 8px; border-radius: 50%; background: var(--pj-leaf); }
.mtg-notes__saved.is-unsaved, .mtg-notes__foot.is-unsaved { color: var(--pj-warn); }
.mtg-notes__saved.is-unsaved i { background: var(--pj-warn); }
.mtg-notes__retry { margin-left: 8px; padding: 2px 8px; border: 1px solid currentColor; border-radius: 999px; background: transparent; color: inherit; font: inherit; }
.mtg-text__area {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 170px;
  padding: 14px 16px;
  border: 1px solid var(--pj-line-2);
  border-radius: 14px;
  background: #fff;
  font: inherit;
  font-size: 16px;
  line-height: 1.55;
  resize: none;
  color: var(--pj-ink);
}
.mtg-text__area:focus { outline: none; border-color: var(--pj-leaf); box-shadow: 0 0 0 3px rgba(58, 136, 116, 0.14); }
.mtg-text__area:read-only { background: #fcfdfb; }
.mtg-text__live { margin: 6px 2px 0; font-size: 13px; font-style: italic; color: var(--pj-muted); }
.mtg-notes__foot { margin-top: 6px; font-size: 12px; text-align: right; color: var(--pj-muted); }

/* Rummen och Generera. */
.mtg-side__lede { margin: -4px 0 10px !important; font-size: 13px !important; color: var(--pj-muted) !important; }
.mtg-rooms { margin: 0 0 10px; }
.mtg-nav { justify-content: space-between; gap: 8px; }
.mtg-nav .ons-gen { flex: 1 1 auto; justify-content: center; min-height: 50px; }
.mtg-nav .ons-btn { min-height: 50px; }

/* Påbörjade möten. */
.mtg-drafts .ons-list a { border-radius: 14px; }
.mtg-draft__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: #e6f2ea; color: var(--pj-leaf-dark); font-size: 24px; font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }

/* Stegen och rubriken (telefon). */
.mtg-wiz { display: none; }
.mtg-head__title { display: none; }
@media (max-width: 1023px) {
  .mtg-head__title { display: grid; justify-items: center; gap: 1px; grid-column: 2; }
  .mtg-head__title b { font-size: 19px; font-weight: 600; color: var(--pj-ink); }
  .mtg-head__title small { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--pj-leaf-dark); }
  .mtg-head__title small .material-symbols-outlined { font-size: 16px; }
  .mtg.is-live .mtg-head__title small { color: #c43026; }

  .mtg-wiz { position: relative; display: flex; gap: 10px; margin: 0 0 12px; padding: 0; list-style: none; }
  .mtg-wiz::before { content: ""; position: absolute; top: 50%; right: 12%; left: 12%; height: 1px; background: var(--pj-line); }
  .mtg-wiz li { position: relative; flex: 1; min-width: 0; }
  .mtg-wiz button {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-height: 44px;
    padding: 0 8px 0 5px;
    border: 1px solid var(--pj-line-2);
    border-radius: 999px;
    background: #fff;
    color: var(--pj-ink-2);
    font: inherit;
    font-size: 13.5px;
    cursor: pointer;
  }
  .mtg-wiz button:disabled { opacity: 1; cursor: default; }
  .mtg-wiz span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .mtg-wiz i { display: grid; flex: none; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #eef2ee; color: var(--pj-ink-2); font-size: 13px; font-style: normal; }
  .mtg-wiz .is-now button { border-color: transparent; background: #6fa88e; color: #fff; }
  .mtg-wiz .is-now i { background: #2f6f5c; color: #fff; }
  .mtg-wiz .is-done i { background: #2f6f5c; color: #fff; font-size: 0; }
  .mtg-wiz .is-done i::after { content: "check"; font-family: "Material Symbols Outlined"; font-size: 17px; }

  /* Korten i mötets ordning; i steg 2–3 kommer rummen direkt efter kunden. */
  .mtg-grid { display: flex; flex-direction: column; }
  .mtg-main, .mtg-aside { display: contents; }
  .mtg-cust { order: 1; }
  .mtg-rec { order: 2; }
  .mtg-tags { order: 3; }
  .mtg-notes { order: 4; }
  .mtg-side { order: 5; }
  .mtg-drafts { order: 6; }
  .mtg.is-review .mtg-side { order: 2; }
  .mtg-grid > * , .mtg-main > *, .mtg-aside > * { width: 100%; box-sizing: border-box; }
}
@media (max-width: 380px) {
  .mtg-mic { width: 72px; height: 72px; margin: 18px; }
  .mtg-clock { font-size: 36px; }
  .mtg-wiz { gap: 8px; }
  .mtg-wiz button { gap: 6px; padding-right: 8px; font-size: 13px; }
  .mtg-wiz i { width: 26px; height: 26px; }
}
@media (min-width: 1024px) {
  .ons-start.mtg-grid, .mtg-grid { grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; }
  .mtg-aside { position: sticky; top: 16px; }
  .mtg-text__area { min-height: calc(100dvh - 30rem); }
}
@media (prefers-reduced-motion: reduce) {
  .mtg-mic { transition: none; }
}

/* Appens rubrik på telefon (Kundmöte, På plats): fri rad utan ruta – Hem till vänster, titeln i mitten. */
@media (max-width: 1023px) {
  .ons-appbar { position: static; display: grid; grid-template-columns: 1fr auto 1fr; height: auto; min-height: 52px; margin: 0 0 10px; padding: 4px 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .ons-appbar__home { grid-column: 1; justify-self: start; }
  .ons-appbar > .ons-appbar__name { grid-column: 2; justify-content: center; font-size: 17px; font-weight: 600; }
  .ons-tabs { top: 8px; }
}

/* ── På plats på telefon: en app i handen ───────────────────────────────
   Ingen dock (vyn sätter det), rummets knappar ligger fast längst ned så
   "Klar med rummet" alltid nås med tummen, fälten har 16 px så iOS inte
   zoomar vid tryck, och rumsvalet är tre i bredd så alla syns på en gång.
   När tangentbordet är uppe släpper foten och ligger sist i rummet i stället. */
@media (max-width: 1023px) {
  .ons-start__pick .ons-kicker { display: none; }
  .ons-start__pick h1 { margin-top: 0; font-size: 20px; }
  .ons .ons-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .ons .ons-tile { border-radius: 12px; font-size: 12.5px; }
  .ons .ons-tile img { aspect-ratio: 4 / 3; }
  .ons .ons-tile span { padding: 6px 4px 7px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

  .ons :is(.ons-mf input, .ons-note, .ons-form input, .ons-form select) { font-size: 16px; }
  .ons-chip { min-height: 40px; }

  .ons.has-room { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .ons-room.is-active .ons-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 30;
    margin: 0;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--pj-line-2);
    background: rgba(247, 249, 246, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .ons-room .ons-nav .ons-btn { min-height: 48px; }
  .ons-room .ons-nav .ons-btn:not(.is-ghost) { flex: 1; justify-content: center; }
  .ons:has(:is(input, textarea):focus) .ons-room.is-active .ons-nav { position: static; padding-inline: 0; border-top: 1px solid var(--pj-line-2); background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (max-width: 1023px) {
  .ons-done__nav .ons-gen { flex: 1; justify-content: center; min-height: 50px; }
}

/* Kundmöte: Zimlas analys av mötet i steg 2. */
.mtg-brief { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; background: #f3f8f5; font-size: 13.5px; color: var(--pj-ink-2); }
.mtg-brief .ons-go__dots { flex: none; transform: scale(0.6); transform-origin: left center; margin-right: -8px; }
.mtg-brief.is-done { display: grid; gap: 8px; }
.mtg-brief__sum { margin: 0 !important; font-size: 14px !important; line-height: 1.45; color: var(--pj-ink) !important; }
.mtg-brief__rooms { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mtg-brief__rooms li { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--pj-line-2); border-radius: 12px; background: #fff; }
.mtg-brief__rooms b { font-size: 13.5px; font-weight: 500; }
.mtg-brief__rooms span { font-size: 12.5px; line-height: 1.4; color: var(--pj-muted); }
.mtg-brief__room { display: flex; align-items: flex-start; gap: 10px; min-height: 28px; cursor: pointer; }
.mtg-brief__room input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--pj-leaf-dark); }
.mtg-brief__room > span { display: grid; gap: 2px; min-width: 0; }
.mtg-brief__rooms li.is-off b { color: var(--pj-muted); text-decoration: line-through; }
.mtg-brief__unclear { margin: 0 !important; font-size: 12.5px !important; color: #9a6a12 !important; }
.mtg-brief__unclear b { font-weight: 500; }

/* ── På plats (ny vy) ────────────────────────────────────────────────────
   Besöket överst (kund, hur många rum som är dokumenterade), rummen som
   rutor med "Lägg till rum" sist, ett rum i taget (foton, kryss, egna ord,
   mått) och en fast fot: Spara rum / Nästa rum. Sista rummet leder till
   översikten där kunden fylls i och projektet skapas. */
.onv .ons-card { border-radius: 22px; background: rgba(255, 255, 255, 0.95); }
.onv-head__title { display: none; }
.onv-menu { position: relative; justify-self: end; }
.onv-menu > summary { list-style: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.8); color: var(--pj-ink); cursor: pointer; }
.onv-menu > summary::-webkit-details-marker { display: none; }
.onv-menu__list { position: absolute; top: 50px; right: 0; z-index: 20; display: grid; min-width: 200px; padding: 6px; border: 1px solid var(--pj-line-2); border-radius: 14px; background: #fff; box-shadow: 0 16px 36px -18px rgba(23, 33, 26, 0.45); }
.onv-menu__list button { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; font: inherit; font-size: 14px; color: var(--pj-ink); text-align: left; cursor: pointer; }
.onv-menu__list button:hover { background: #f3f6f3; }
.onv-menu__list .material-symbols-outlined { font-size: 19px; color: var(--pj-leaf-dark); }

/* Besöket. */
.onv-sum {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 18px 40px -30px rgba(23, 33, 26, 0.45);
  font: inherit;
  text-align: left;
  color: var(--pj-ink);
  cursor: pointer;
}
.onv-sum.is-empty { cursor: default; grid-template-columns: 46px minmax(0, 1fr) auto; }
.onv-sum__icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: #eef2ee; color: #2f6f5c; font-size: 28px; font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24; }
.onv-sum__who { display: grid; gap: 2px; min-width: 0; }
.onv-sum__who b { overflow: hidden; font-size: 15.5px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.onv-sum__who small { overflow: hidden; font-size: 13px; color: var(--pj-muted); white-space: nowrap; text-overflow: ellipsis; }
.onv-sum__prog { display: grid; gap: 5px; width: 7.6rem; padding-left: 12px; border-left: 1px solid var(--pj-line-2); }
.onv-sum__prog b { font-size: 14px; font-weight: 500; }
.onv-sum__prog i { display: block; height: 5px; overflow: hidden; border-radius: 999px; background: #e3e9e4; }
.onv-sum__prog em { display: block; height: 100%; border-radius: inherit; background: #2f6f5c; transition: width 240ms ease; }
.onv-sum__prog small { overflow: hidden; font-size: 12px; color: var(--pj-muted); white-space: nowrap; text-overflow: ellipsis; }
.onv-sum__go { color: var(--pj-ink-2); font-size: 22px; }

/* Rummen som rutor. */
.onv .onv-tiles { position: static; display: flex; gap: 8px; margin: 0 -2px 12px; padding: 2px 2px 4px; overflow-x: auto; border: 0; border-radius: 0; background: transparent; box-shadow: none; scrollbar-width: none; }
.onv .onv-tiles::-webkit-scrollbar { display: none; }
.onv .onv-tile {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  align-content: center;
  gap: 6px;
  width: 6.4rem;
  height: auto;
  min-height: 80px;
  padding: 10px 8px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--pj-ink);
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
}
.onv .onv-tile > .material-symbols-outlined { font-size: 28px; color: #56655b; font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }
.onv .onv-tile.is-on { border: 2px solid rgba(47, 111, 92, 0.25); background: #fff; box-shadow: 0 10px 22px -16px rgba(23, 33, 26, 0.5); color: var(--pj-ink); }
.onv .onv-tile.is-on > .material-symbols-outlined { color: #2f6f5c; }
.onv-tile__name { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; overflow: hidden; }
.onv-tile__name > span { overflow: hidden; text-overflow: ellipsis; }
.onv-tile__name i { font-size: 17px; color: #2f6f5c; font-style: normal; font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24; }
.onv .onv-tile--add { border: 1.5px dashed #b9c6bd; background: rgba(255, 255, 255, 0.45); color: var(--pj-ink-2); font-weight: 400; white-space: normal; text-align: center; line-height: 1.2; }
.onv .onv-tile--add > .material-symbols-outlined { color: var(--pj-ink-2); font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; }

/* Rummet. */
.onv-room__h { grid-template-columns: 96px minmax(0, 1fr) auto !important; gap: 14px !important; padding-bottom: 14px !important; }
.onv-room__h .ons-room__img { width: 96px; height: 72px; border-radius: 14px; }
.onv-room__h .ons-room__t small { font-size: 13px; letter-spacing: 0; text-transform: none; }
.onv-room__h .ons-name input { font-size: 25px; font-weight: 600; border-bottom-color: transparent; }
.onv-room__h .ons-name input:focus { border-bottom-color: var(--pj-leaf); }
.onv-status { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; white-space: nowrap; padding: 4px 10px 4px 6px; border-radius: 999px; background: #f1f4f1; font-size: 13px; color: var(--pj-muted); }
.onv-status .material-symbols-outlined { font-size: 18px; }
.onv-status.is-done { background: #e6f2ea; color: var(--pj-ink); }
.onv-status.is-done .material-symbols-outlined { color: #2f6f5c; font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24; }
.onv-room__nav { display: flex; gap: 6px; }
.onv-room__nav button { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--pj-line-2); border-radius: 50%; background: #fff; box-shadow: 0 6px 14px -10px rgba(23, 33, 26, 0.4); color: var(--pj-ink); cursor: pointer; }
.onv-room__nav button:disabled { opacity: 0.35; cursor: default; }
.onv .ons-sec h3 { align-items: baseline; font-size: 16px; }
.onv .ons-sec h3 small { font-size: 13px; }
.onv-aside { margin-left: auto; font-size: 13px !important; color: var(--pj-muted); }
.onv .ons-photos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.onv .ons-photo { aspect-ratio: 1; border-radius: 12px; }
.onv .ons-photo--add, .onv .ons-photo--add.is-ghost { border: 1.5px dashed #c5d0c8; background: rgba(255, 255, 255, 0.7); color: var(--pj-ink); }
.onv .ons-photo--add label { gap: 6px; padding: 4px; font-size: 12.5px; text-align: center; line-height: 1.2; }
.onv .ons-photo--add .material-symbols-outlined { font-size: 26px; color: var(--pj-ink-2); }
.onv .ons-chips { gap: 8px; }
.onv .ons-chip { min-height: 44px; padding: 0 14px 0 12px; gap: 8px; font-size: 14px; color: var(--pj-ink); }
.onv .ons-chip .material-symbols-outlined { font-size: 19px; color: var(--pj-muted); }
.onv .ons-chip.is-on { border-color: #cfe3d8; background: #e6f2ea; color: var(--pj-ink); }
.onv .ons-chip.is-on .material-symbols-outlined { color: #2f6f5c; font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24; }
.onv .ons-own > span { display: flex; align-items: baseline; font-size: 16px; }
.onv .ons-note { min-height: 84px; padding: 12px 14px; border-radius: 14px; background: #fff; font-size: 16px; }
.onv-mform { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; }
.onv-mform label { font-size: 13px; }
.onv-mform .ons-mf input { height: 48px; padding: 0 12px; border-radius: 12px; font-size: 16px; }
.onv-mwide { grid-column: 1 / 2; }
.onv-remove { display: inline-flex; align-items: center; gap: 6px; margin: 14px 0 0; padding: 6px 2px; border: 0; background: transparent; font: inherit; font-size: 13px; color: var(--pj-muted); cursor: pointer; }
.onv-remove .material-symbols-outlined { font-size: 18px; }
.onv-remove:hover { color: #b42318; }

/* Foten. */
.onv-foot { display: grid !important; gap: 10px; }
.onv-foot__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 8px; }
.onv-foot .ons-btn { min-height: 58px; border-radius: 16px; }
.onv-save { justify-content: flex-start !important; gap: 8px !important; padding: 0 10px !important; border: 0 !important; background: #eef2ee !important; color: var(--pj-ink) !important; }
.onv-save .material-symbols-outlined { font-size: 24px; color: var(--pj-ink-2); }
.onv-foot .ons-btn > span:not(.material-symbols-outlined) { display: grid; gap: 1px; text-align: left; line-height: 1.2; }
.onv-foot .ons-btn b { font-size: 15.5px; font-weight: 500; }
.onv-foot .ons-btn small { overflow: hidden; font-size: 12px; font-weight: 400; white-space: nowrap; text-overflow: ellipsis; opacity: 0.8; }
.onv-next { justify-content: center !important; gap: 8px !important; background: #2f6f5c !important; }
.onv-next > span:first-child { text-align: center !important; }
.onv-hint { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 !important; padding: 11px 12px; border: 1px solid var(--pj-line-2); border-radius: 14px; background: #f5f7f5; font-size: 13px !important; color: var(--pj-ink-2) !important; }
.onv-hint .material-symbols-outlined { font-size: 20px; color: #2f6f5c; }
.onv-hint b { font-weight: 500; }
.onv-hint--static { margin-top: 12px !important; }
.onv-toast { position: fixed; left: 50%; bottom: calc(150px + env(safe-area-inset-bottom, 0px)); z-index: 40; display: inline-flex; align-items: center; gap: 8px; margin: 0 !important; padding: 10px 14px; border-radius: 999px; background: #17211a; color: #fff !important; font-size: 13.5px !important; transform: translateX(-50%); }
.onv-toast .material-symbols-outlined { font-size: 18px; color: #6ee7b7; }

/* Tomt besök och arket med rumstyper. */
.onv-empty { display: grid; justify-items: center; gap: 6px; padding: 32px 20px !important; text-align: center; }
.onv-empty__icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 6px; border-radius: 20px; background: #e6f2ea; color: #2f6f5c; font-size: 32px; }
.onv-empty h1 { margin: 0 !important; font-size: 21px !important; }
.onv-empty p { max-width: 22rem; margin: 0 0 10px !important; }
.onv-empty__add { min-height: 50px; padding: 0 22px; border-radius: 14px; }
.onv-sheet:not([open]) { display: none; }
.onv-sheet { width: min(560px, 100%); max-height: calc(100dvh - 3rem); margin: auto auto 0; padding: 0; overflow: auto; border: 0; border-radius: 24px 24px 0 0; background: #fff; color: var(--pj-ink); }
.onv-sheet::backdrop { background: rgba(23, 33, 26, 0.35); backdrop-filter: blur(4px); }
.onv-sheet__card { display: grid; gap: 10px; padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px)); }
.onv-sheet__card header { display: flex; align-items: center; justify-content: space-between; }
.onv-sheet__card h2 { margin: 0; font-size: 19px; font-weight: 600; }
.onv-sheet__card p { margin: 0 !important; }
.onv-sheet__x { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #f1f4f1; color: var(--pj-muted); cursor: pointer; }
.onv-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.onv-types > form { display: contents; }
.onv-types .ons-tile img { aspect-ratio: 4 / 3; }
@media (min-width: 640px) { .onv-sheet { margin: auto; border-radius: 24px; } }

/* Översikten. */
.onv-addbtn { width: 100%; min-height: 48px; margin: 4px 0 12px; justify-content: center; }
.onv-next-note { margin: 8px 0 0 !important; font-size: 12.5px !important; text-align: center; }

@media (max-width: 1023px) {
  .onv-head__title { display: grid; grid-column: 2; justify-items: center; gap: 1px; }
  .onv-head__title b { display: inline-flex; align-items: center; gap: 4px; font-size: 18px; font-weight: 600; color: var(--pj-ink); white-space: nowrap; }
  .onv-head__title b .material-symbols-outlined { font-size: 22px; color: #2f6f5c; }
  .onv-head__title small { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--pj-muted); }
  .onv-head__title small i { width: 8px; height: 8px; border-radius: 50%; background: #34b27b; }
  .onv .ons-appbar > .ons-appbar__name { display: none; }
  .onv-addgrid { display: none !important; }
  .onv.has-room { padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
  .onv .ons-room.is-active .onv-foot { padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px)); border: 0; border-radius: 24px 24px 0 0; background: rgba(255, 255, 255, 0.97); box-shadow: 0 -12px 30px -20px rgba(23, 33, 26, 0.45); }
  .onv:has(:is(input, textarea):focus) .ons-room.is-active .onv-foot { padding-inline: 0; border-radius: 0; background: transparent; box-shadow: none; }
}
@media (max-width: 400px) {
  .onv-sum__go { display: none; }
  .onv-sum { grid-template-columns: 46px minmax(0, 1fr) auto; }
  .onv-room__h { grid-template-columns: 84px minmax(0, 1fr) auto !important; }
  .onv-room__h .ons-room__img { width: 84px; height: 64px; }
  .onv-room__h .ons-name input { font-size: 22px; }
  .onv-room__nav button { width: 40px; height: 40px; }
}
@media (min-width: 1024px) {
  .onv-foot__row { display: flex; justify-content: flex-end; }
  .onv-foot .onv-save { display: none; }
}

/* På plats på telefon, Hems formspråk (mobilloopen 2026-10-10, varv 15): en knapp i foten (Nästa rum – kryss, ord,
   foton och mått sparar sig själva), rummets namn får bredden (svep, rutorna och Nästa rum leder mellan rummen),
   vita kort med Hems skugga och 20 px marginal. */
@media (max-width: 1023px) {
  .onv { padding-inline: calc(var(--zm-gutter, 20px) - 16px); }
  .onv .ons-card, .onv .onv-sum { border: 0; border-radius: var(--zm-card-radius, 18px); background: var(--zm-card, #fff); box-shadow: var(--zm-card-shadow, 0 1px 2px rgba(20, 30, 25, 0.05)); }
  .onv .onv-tile { border: 2px solid transparent; background: var(--zm-card, #fff); box-shadow: var(--zm-card-shadow, 0 1px 2px rgba(20, 30, 25, 0.05)); }
  .onv .onv-tile.is-on { border-color: var(--zm-green, #1f6b4f); box-shadow: var(--zm-card-shadow, 0 1px 2px rgba(20, 30, 25, 0.05)); }
  .onv .onv-tile--add { border: 1.5px dashed #b9c6bd; background: transparent; box-shadow: none; }
  .onv .onv-sum__go { display: block; }
  .onv-sum:not(.is-empty) { grid-template-columns: 46px minmax(0, 1fr) auto auto; }
  .onv-sum.is-empty + .onv-tiles { display: none; }
  .onv .onv-foot .onv-hint, .onv .onv-foot .onv-save { display: none; }
  .onv .onv-foot { grid-template-columns: minmax(0, 1fr); justify-content: stretch; }
  .onv .onv-foot__row { display: grid; grid-template-columns: minmax(0, 1fr); }
  .onv .onv-foot .onv-next { width: 100%; justify-content: space-between; padding-inline: 16px 12px; }
  .onv .onv-foot .ons-btn { min-height: var(--zm-primary-h, 44px); padding-block: 4px; border-radius: var(--zm-primary-radius, 12px); }
  .onv .ons-room.is-active .onv-foot { padding: 10px var(--zm-gutter, 20px) calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--zm-line, #e3e6e1); border-radius: 0; background: var(--zm-bg, #f4f5f1); box-shadow: none; }
  .onv.has-room { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .onv-toast { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .onv-room__nav { display: none !important; }
  .onv-room__h { grid-template-columns: 56px minmax(0, 1fr) !important; gap: 12px !important; }
  .onv-room__h .ons-room__img { width: 56px; height: 44px; border-radius: var(--zm-thumb-radius, 12px); }
  .onv-room__h .ons-name input { min-height: 36px; font-size: 22px; }
  .onv-remove { min-height: 44px; }
  .ons-photo > button { width: 36px; height: 36px; }
  /* Täthet (mobilloopen T6): inget tomt band över huvudet (huvudet har själv 4 px), lägre rumsrutor – raden
     "Lägg till rum" på en rad så att flexraden inte sträcker alla rutor – och Kundmötets ingress bort (statusraden säger det). */
  #zimla-page-content:has(> .ons) { padding-top: 4px; }
  .onv .onv-tile { min-height: 64px; padding: 6px 8px; gap: 2px; }
  .onv .onv-tile > .material-symbols-outlined { font-size: 24px; }
  .onv .onv-tile--add { white-space: nowrap; }
  .onv .onv-tile--add > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .mtg-rec__lede { display: none !important; }
  /* Rummets huvud: namnet först, sedan "Rum N av M (· ingen mall)" och status som text på samma rad – statusen
     bryts till egen rad bara när den inte får plats, och har fast bredd så att Dokumenterat inte flyttar något. */
  .onv-room__h { align-items: start; }
  .onv-room__h .ons-room__t { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; overflow: hidden; }
  .onv-room__h .ons-name { order: -1; flex: 0 0 100%; min-width: 0; max-width: 100%; }
  .onv-room__h .ons-name input { width: 0; min-height: 44px; }
  .onv-room__h .ons-room__t small { flex: 0 1 auto; min-width: 0; line-height: 18px; }
  .onv-room__h .onv-status, .onv-room__h .onv-status.is-done { position: relative; flex: none; min-width: 8.4rem; gap: 4px; margin: 0; padding: 0; border-radius: 0; background: none; font-size: 13px; line-height: 18px; }
  .onv-room__h .onv-status .material-symbols-outlined { font-size: 16px; }
  .onv-room__h .onv-status::before { content: "·"; position: absolute; left: -10px; color: var(--pj-muted); }
}
@media (max-width: 359px) {
  .onv-room__h .ons-name input { font-size: 20px; }
  .onv-head__title b { font-size: 16px; }
  .onv-sum__prog small { display: none; }
}

/* Skicka igen eller till ny mottagare (skickad offert): hopfällbar under påminnelsen. */
.qresend { border: 1px solid var(--pj-line-2); border-radius: 12px; background: #fff; }
.qresend > summary { display: flex; align-items: center; gap: 8px; padding: 10px 12px; color: var(--pj-ink, #17201b); font-size: .88rem; cursor: pointer; list-style: none; }
.qresend > summary::-webkit-details-marker { display: none; }
.qresend > summary > .material-symbols-outlined { font-size: 18px; color: var(--pj-leaf-dark); }
.qresend > summary .qresend__chev { margin-left: auto; color: var(--pj-muted, #7a857e); transition: transform 160ms ease; }
.qresend[open] > summary .qresend__chev { transform: rotate(180deg); }
.qresend[open] { padding-bottom: 12px; }
.qresend__list { display: grid; gap: 0; margin: 0 12px 10px; padding: 0; list-style: none; border-top: 1px solid var(--pj-line-2); }
.qresend__list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--pj-line-2); }
.qresend__who { display: grid; min-width: 0; font-size: .86rem; }
.qresend__who b { overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.qresend__who small { overflow: hidden; color: var(--pj-muted, #7a857e); font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.qresend__new { display: flex; gap: 8px; margin: 0 12px; }
.qresend__new input { flex: 1; min-width: 0; min-height: 38px; padding: 0 12px; border: 1px solid var(--pj-line-2); border-radius: 10px; background: #fafbf8; font: inherit; font-size: .86rem; }
.qresend__new input:focus { border-color: #028a51; outline: none; box-shadow: 0 0 0 3px rgb(2 138 81 / 14%); }
.qresend > .qmuted { display: block; margin: 8px 12px 0; font-size: .76rem; }
/* Kopiera länk till offerten: bara knappen, som säger till när länken är kopierad. */
.qacts > .qshare { width: 100%; justify-content: center; }
.qacts > .qshare.is-copied { border-color: #028a51; color: #028a51; }
.ovs-share { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-left: 4px; padding: 0; border: 1px solid var(--pj-line-2); border-radius: 8px; background: #fff; color: var(--pj-muted, #7a857e); vertical-align: middle; cursor: pointer; }
.ovs-share:hover, .ovs-share.is-copied { border-color: #028a51; color: #028a51; }
.ovs-share .material-symbols-outlined { font-size: 16px; }

/* Kundmöte/På plats – responsiva rester efter genomgången.
   Två spalter bara när mötet själv är brett nog (AI-panelen öppen på 1100 px klämde vänsterspalten). */
.mtg { container: mtg / inline-size; }
@container mtg (max-width: 819px) {
  .mtg-grid, .ons-start.mtg-grid { grid-template-columns: minmax(0, 1fr); }
  .mtg-aside { position: static; }
}
/* Snabbtaggarna bryter rad på desktop i stället för att klippas vid kanten. */
@media (min-width: 1024px) {
  .mtg-tags__row { flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; }
}
/* Smal telefon: mindre mikrofon och ring, så "Klar med mötet" får plats. */
@media (max-width: 374px) {
  .mtg-mic { width: 60px; height: 60px; margin: 14px 12px 14px 14px; box-shadow: 0 0 0 calc(9px + var(--level) * 4px) rgba(var(--tone), 0.14), 0 0 0 calc(18px + var(--level) * 6px) rgba(var(--tone), 0.07); }
  .mtg-mic .material-symbols-outlined { font-size: 32px; }
  .onv-sum__prog { width: 5.4rem; padding-left: 10px; }
}
/* Kundmötet på telefon, Hems formspråk (mobilloopen 2026-10-10, varv 16): vita kort, 20 px marginal, mikrofonen är
   enda start/paus (spökknappen gjorde samma sak), kundens knapp blir en ikon så namnet får plats. */
@media (max-width: 1023px) {
  .mtg { padding-inline: calc(var(--zm-gutter, 20px) - 16px); }
  .mtg .ons-card { border: 0; border-radius: var(--zm-card-radius, 18px); background: var(--zm-card, #fff); box-shadow: var(--zm-card-shadow, 0 1px 2px rgba(20, 30, 25, 0.05)); }
  .mtg .mtg-pause { display: none; }
  .mtg .mtg-rec__actions { grid-template-columns: minmax(0, 1fr); }
  .mtg[data-phase="start"] .mtg-rec__actions { display: none; }  /* innan något sagts är mikrofonen enda handlingen */
  .mtg-cust__text b { padding-right: 3.25rem; }
  .mtg .mtg-cust__edit { top: 50%; width: 44px; min-height: 44px; padding: 0; border-radius: 999px; transform: translateY(-50%); }
  .mtg .mtg-cust__edit > span:not(.material-symbols-outlined) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .mtg .mtg-cust__edit .material-symbols-outlined { font-size: 20px; }
}
@media (max-width: 380px) {
  .mtg-wiz li:not(.is-now) { flex: none; }
  .mtg-wiz li:not(.is-now) button { width: 44px; justify-content: center; padding: 0; }
  .mtg-wiz li:not(.is-now) span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Skickad/accepterad offert på telefon (mobilloopen 2026-10-10, varv 26): panelen täcker skärmen med Hems
   bakgrund (fadingen bär hela ytan), uppföljningen är ETT vitt kort, bara flikraden står fast. Utkastet (.op, M10)
   rörs inte. */
@media (max-width: 1023px) {
  #offer-settings-slot:not([hidden]):has(> .poset:not(.op)) { overflow-y: auto; overscroll-behavior: contain; }
  /* Dockan över den öppna offertpanelen – uppföljningen och utkastet (.op, mobilloopen varv 47) (regeln vid 5276 förlorade mot `body:has(.pdock) .pdock { z-index: 49 }` längre ner – samma specificitet) – annars går dockens knappar inte att trycka. */
  html.zimla-offer-panel-open body:has(.pdock) .pdock { z-index: 95; }
  #offer-settings-slot .poset:not(.op) { min-height: 100dvh; overflow: visible; border: 0; border-radius: 0; background: var(--zm-bg, #f4f5f1); box-shadow: none; }
  #offer-settings-slot .poset:not(.op) > .poset-top { position: static; align-items: center; padding: 10px var(--zm-gutter, 20px); border-bottom: 0; background: transparent; }
  #offer-settings-slot .poset:not(.op) > .poset-top h2 { font-size: 17px; font-weight: 500; }
  #offer-settings-slot .poset:not(.op) > .poset-top .poset-t { display: none; } #offer-settings-slot .poset:not(.op) > .poset-top .poset-t-m { display: inline; }
  #offer-settings-slot .poset:not(.op) .poset-close { height: 44px; padding: 0 16px; border-radius: 12px; font-size: 15px; }
  #offer-settings-slot .poset:not(.op) .poset-close .material-symbols-outlined { display: none; }
  #offer-settings-slot .poset:not(.op) > .poset-follow { padding: 0 var(--zm-gutter, 20px) 20px; }
  #offer-settings-slot .poset:not(.op) .qfollow { border: 0; border-radius: var(--zm-card-radius, 18px); box-shadow: var(--zm-card-shadow, 0 1px 2px rgba(20, 30, 25, 0.05)); }
  #offer-settings-slot .poset:not(.op) .qf-top { top: 0; border-radius: var(--zm-card-radius, 18px) var(--zm-card-radius, 18px) 0 0; }
  #offer-settings-slot .poset:not(.op) .qfollow :is(#qf-status, #qsum, #qf-dialog, #qf-portal, #qf-history) { scroll-margin-top: 120px; }
  #offer-settings-slot .poset:not(.op) .qf-top .qf-jump button { height: 44px; padding: 0 4px; font-size: 13.5px; }
  /* Inga kort i kortet: summan och signeringsbeviset blir tonade ytor utan ram. */
  #offer-settings-slot .poset:not(.op) .qprice { border: 0; }
  #offer-settings-slot .poset:not(.op) #quote-detail-acceptance .quote-review-card { border: 0; box-shadow: none; background: #f6f8f5; }
  #offer-settings-slot .poset:not(.op) .qsum .quote-review-group__count { font-size: 13px; }
  #offer-settings-slot .poset:not(.op) .qsum :is(.quote-review-group, .quote-review-room):not(:first-child) .quote-review-metric > span { display: none; }
  #offer-settings-slot .poset:not(.op) .qsum .quote-review-metric > span { font-size: 11.5px; }
  #offer-settings-slot .poset:not(.op) .qsum .quote-review-view-switch button, #offer-settings-slot .poset:not(.op) .qsum .quote-review-expand-all { min-height: 40px; font-size: 13px; }
}
/* Länk till offertens egen sida (/offerter/<id>/) i versionsraden. */
.qrow > summary { grid-template-columns: 26px minmax(0, 1fr) auto auto auto 20px; }
.qrow-acts { display: inline-flex; align-items: center; gap: 2px; }
.qrow-open { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--pj-muted); text-decoration: none; transition: background 150ms ease, color 150ms ease; }
.qrow-open:hover, .qrow-open:focus-visible { background: var(--pj-line-2); color: var(--pj-leaf-dark); }
.qrow-open .material-symbols-outlined { font-size: 18px; }
@container qlist (max-width: 520px) {
  .qrow > summary { grid-template-columns: 26px minmax(0, 1fr) auto auto 20px; }
  .qrow > summary .qrow-acts { grid-column: 4; grid-row: 1; }
  .qrow > summary .chev { grid-column: 5; }
}
@media (max-width: 640px) {
  .ata .qrow > summary { grid-template-columns: 26px minmax(0, 1fr) auto auto 20px; }
  .ata .qrow > summary .qrow-acts { grid-column: 4; grid-row: 1; }
  .ata .qrow > summary .chev { grid-column: 5; }
}
.qhead-open { display: inline-grid; vertical-align: middle; width: 28px; height: 28px; margin-left: 4px; }

/* Offert-fliken: versionslistan är utgångsläget. Alla rader lika höga; den valda markeras och styr högerspalten. */
.qlist .qrow > summary, .qlist .qrow:not(.is-current) > summary { padding: 8px 12px; }
.qlist .qrow:not(.is-current) > summary .chev { transform: none; }
.qedit-cta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qedit-cta small { color: var(--pj-muted); font-size: 12px; }
.qback { display: inline-flex; align-items: center; gap: 4px; color: var(--pj-muted); text-decoration: none; }
.qback:hover, .qback:focus-visible { color: var(--pj-leaf-dark); }
.qback .material-symbols-outlined { font-size: 15px; }
@media (prefers-reduced-motion: reduce) { .qrow > summary .chev { transition: none; } }

/* Eget moment i sidopanelen (Kalkyl): en tyst rad under listan, formuläret fälls ut på plats. */
.kcustom { padding: 0 14px 12px; }
.kcustom-open { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 40px; border: 1px dashed var(--pj-line); border-radius: 12px; background: transparent; color: var(--pj-leaf-dark); font: inherit; font-size: 13px; cursor: pointer; }
.kcustom-open:hover { background: var(--pj-ok-2); border-style: solid; }
.kcustom-open .material-symbols-outlined { font-size: 18px; }
.kcustom-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; padding: 12px; border: 1px solid var(--pj-line); border-radius: 12px; background: #fff; }
.kcustom-h { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.kcustom-h b { font-weight: 500; }
.kcustom-f { display: grid; gap: 4px; min-width: 0; font-size: 12px; color: var(--pj-muted); }
.kcustom-name { grid-column: 1 / -1; }
.kcustom-f input { width: 100%; min-width: 0; height: 38px; padding: 0 10px; border: 1px solid var(--pj-line); border-radius: 9px; font: inherit; font-size: 13.5px; color: var(--pj-ink, #17211a); background: #fff; }
.kcustom-f input:focus { outline: 2px solid var(--pj-leaf); outline-offset: -1px; }
.kcustom-in { position: relative; display: block; }
.kcustom-in input { padding-right: 30px; }
.kcustom-in em { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 12px; color: var(--pj-muted); }
.kcustom-note { grid-column: 1 / -1; font-size: 11.5px; color: var(--pj-muted); }
.kcustom-err { grid-column: 1 / -1; margin: 0; font-size: 12px; color: #b4453a; }
.kcustom-save { grid-column: 1 / -1; justify-content: center; height: 42px; }
/* Mängd från ett antaget rumsmått (standard/uppskattning): samma ton som "≈" i Rum-fliken tills det bekräftats. */
.kcard-tags .kfact.is-assumed { border-color: #ecd9a8; background: var(--pj-warn-2); color: #7a5a1a; }
/* Kryss på momentraden i Rum-fliken: samma kryss som i Kalkyl, till höger där priset stod. */
.rmom .rmom-check { grid-area: auto; align-self: center; margin: 0; }
.rmom.is-pending { opacity: .45; transition: opacity 150ms ease; }
/* Antalet på momentraden: stilla tal (sv-SE, tabellsiffror) som blir ett fält vid klick; pris står per grupp. */
.rmom { grid-template-columns: minmax(0, 1fr) auto auto; }
.rmom-qty { display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 3px; min-width: 3.5rem; padding: 2px 6px; border: 1px solid transparent; border-radius: 6px; font-size: 12px; color: var(--pj-muted); font-variant-numeric: tabular-nums; white-space: nowrap; cursor: text; transition: border-color 120ms ease, background 120ms ease; }
.rmom-qty b { font-weight: 400; color: var(--pj-ink-2); }
.rmom-qty small { font-size: 11px; }
.rmom-qty[role="button"]:hover, .rmom-qty:focus-within, .rmom-qty:focus-visible { border-color: var(--pj-line); background: #fff; outline: none; }
.rmom-qty:focus-visible { box-shadow: 0 0 0 2px #cfe3d6; }
.rmom-qty.is-static { cursor: default; }
.rmom-qty-input { width: 5ch; min-width: 4ch; max-width: 7ch; padding: 0; border: 0; background: transparent; font: inherit; font-size: 12px; text-align: right; color: var(--pj-ink); font-variant-numeric: tabular-nums; outline: none; }
/* Pluppen: bock i vila, × när man pekar på den eller tabbar dit (borttagning har ångra-raden som skydd). */
.rmom-check .rmom-x { display: none; }
.rmom-check.is-on:is(:hover, :focus-visible) .rmom-ok { display: none; }
.rmom-check.is-on:is(:hover, :focus-visible) .rmom-x { display: inline; }
@media (pointer: coarse) {
  .rmom { min-height: 44px; }
  .rmom-qty { min-height: 40px; align-items: center; padding: 0 8px; }
  .rmom .rmom-check { position: relative; }
  .rmom .rmom-check::after { content: ""; position: absolute; inset: -9px; }
}
@media (pointer: coarse) { .rmom .rmom-check { width: 32px; height: 32px; } }
.rmom.is-removed .rmom-name { color: var(--pj-muted); }
.rmom.is-removed .rmom-name s { text-decoration-color: #c9d2cb; }
.qsend-err { grid-column: 1 / -1; margin: 0; font-size: 12.5px; color: #b4453a; }
/* Offert-tabellen står ensam: full bredd på alla brytpunkter. */
#project-offer-list > .qlist { grid-column: 1 / -1; }
button.qrow-open { border: 0; background: transparent; padding: 0; font: inherit; cursor: pointer; }
/* Revisionsutkast: "Ändrat sedan version N" – hopfällt under utkastremsan, samma ton som raderna. */
.qchanges { margin: -2px 18px 10px; border: 1px solid var(--pj-line-2); border-radius: 10px; background: #fff; }
.qchanges > summary { list-style: none; display: flex; align-items: center; gap: 6px; padding: 8px 12px; font-size: 12.5px; color: var(--pj-ink, #17211a); cursor: pointer; }
.qchanges > summary::-webkit-details-marker { display: none; }
.qchanges > summary .material-symbols-outlined { font-size: 18px; color: var(--pj-muted); transition: transform 180ms ease; }
.qchanges[open] > summary .material-symbols-outlined { transform: rotate(90deg); }
.qchanges-delta { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--pj-muted); }
.qchanges-delta.is-up { color: #7a5a1a; } .qchanges-delta.is-down { color: var(--pj-leaf-dark); }
.qchanges > div { padding: 0 12px 10px; }
.qchanges-empty { margin: 0; font-size: 12.5px; color: var(--pj-muted); }
@media (prefers-reduced-motion: reduce) { .qchanges > summary .material-symbols-outlined { transition: none; } }
/* Stegarnas värde går att skriva in direkt (sparas vid Enter/lämna fältet), knapparna finns kvar. */
.qstep-in { width: 42px; height: 26px; border: 0; background: transparent; text-align: center; font: inherit; font-size: 12.5px; font-weight: 500; font-variant-numeric: tabular-nums; color: inherit; padding: 0; }
.qstep-in:focus { outline: 2px solid var(--pj-leaf); outline-offset: -1px; border-radius: 6px; background: #fff; }
.qstep-val { display: inline-flex; align-items: center; min-width: 40px; justify-content: center; }
.qstep-val .qstep-in { width: 30px; text-align: right; }
.qstep-val em { font-style: normal; font-size: 12.5px; font-weight: 500; }

/* Stegare: värdet först (skrivbart), sedan − och + som egna segment – samma form överallt i offerten. */
html .qstep, html :is(.qfull, .qside-draft) .qstep {
  display: inline-flex; align-items: stretch; height: 34px; padding: 0; overflow: hidden;
  border: 1px solid #d6dfd8; border-radius: 10px; background: #fff; box-shadow: none;
}
html .qstep:focus-within { border-color: var(--pj-leaf); box-shadow: 0 0 0 3px rgba(8, 122, 85, 0.12); }
html .qstep .qstep-in,
html :is(.qfull, .qside-draft) .qstep input.qstep-in:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
  width: 48px; min-width: 0; height: 100%; min-height: 0; padding: 0 10px; border: 0; border-radius: 0; background: transparent; outline: 0; box-shadow: none;
  text-align: left; font: inherit; font-size: 13.5px; font-weight: 500; font-variant-numeric: tabular-nums; color: #17211a;
}
html .qstep .qstep-in:focus { outline: 0; background: transparent; }
html .qstep .qstep-val { display: inline-flex; align-items: center; min-width: 0; padding-right: 8px; }
html .qstep .qstep-val .qstep-in,
html :is(.qfull, .qside-draft) .qstep .qstep-val input.qstep-in:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]) { width: 38px; padding-right: 2px; text-align: left; }
html .qstep .qstep-val em { font-style: normal; font-size: 13px; color: #6b7a70; }
html .qstep button, html :is(.qfull, .qside-draft) .qstep button {
  width: 34px; height: auto; display: grid; place-items: center; padding: 0; border: 0; border-left: 1px solid #e3e9e4;
  background: #fff; color: #2f4a3b; font-size: 17px; line-height: 1; cursor: pointer; transition: background-color 120ms ease, color 120ms ease;
}
html .qstep button:last-child { background: #f7faf8; }
html .qstep button:hover:not(:disabled) { background: #eef5f0; color: #075d43; }
html .qstep button:active:not(:disabled) { background: #e3efe7; }
html .qstep button:disabled { color: #b8c3bb; cursor: default; background: #fff; }
html .qstep button:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px rgba(8, 122, 85, 0.3); }
@media (pointer: coarse) { html .qstep { height: 40px; } html .qstep button { width: 40px; } }

/* Zimla AI arbetar i ett rum: chippet byts till "Zimla arbetar…" (samma mått som .rchip, samma familj
   som Klart), siffrorna dämpas medan de är på väg att ändras. Statusbyte – ingen rörelse på raden. */
.rchip.is-ai { min-width: 0; background: var(--pj-ok-2); color: var(--pj-leaf-dark); animation: rchip-in 160ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.rchip.is-ai::before { display: none; }
.rchip-dots { display: inline-grid; grid-template-columns: 4px 4px; gap: 2px; flex: none; animation: zimla-rchip-spin 1.15s linear infinite; }
.rchip-dots i { width: 4px; height: 4px; border-radius: 999px; background: var(--pj-ink, #1c2a22); }
.rchip-dots i:nth-child(2), .rchip-dots i:nth-child(4) { background: var(--pj-leaf-dark); }
@keyframes zimla-rchip-spin { to { transform: rotate(360deg); } }
@keyframes rchip-in { from { opacity: 0; } to { opacity: 1; } }
.rrow.is-ai-working .rmetrics { opacity: 0.45; transition: opacity 160ms ease; }
.rrow.is-ai-working .rrow-name small { color: var(--pj-faint); }
.rlist-ai { display: flex; align-items: center; gap: 8px; margin: 2px 0 0; color: var(--pj-leaf-dark); font-size: 12.5px; }
.rlist-ai[hidden] { display: none; }
.rrow-name strong { overflow-wrap: anywhere; }
/* Mobil: en markerad rad ska inte landa bakom trådbrickan och dockan. */
.rrow { scroll-margin-bottom: calc(env(safe-area-inset-bottom) + 9rem); }
@media (prefers-reduced-motion: reduce) { .rchip-dots, .rchip.is-ai { animation: none; } }
.qadopt { display: block; margin-top: 6px; line-height: 1.4; }

/* Kalkyl-fliken: vald rad bärs av den fyllda gröna bocken och namnet (500) – ingen grön kantlinje (::before)
   och inget band bakom titeln (::after). Bara under .kguide: Avancerad kalkyl är orörd.
   .kguide.kguide: calculation.css laddas efter och har samma specificitet. */
.kguide.kguide [data-calculation-workflow-panel][data-workflow-layout] .workflow-guide__composed[data-row-layout] .workflow-guide__moment-row:is(.is-selected, .is-open, .is-editing)::before,
.kguide.kguide [data-calculation-workflow-panel][data-workflow-layout] .workflow-guide__composed[data-row-layout] .workflow-guide__moment-row:is(.is-selected, .is-open, .is-editing)::after { content: none !important; display: none !important; }
.kguide.kguide [data-calculation-workflow-panel][data-workflow-layout] .workflow-guide__composed[data-row-layout] .workflow-guide__moment-row.is-selected { background: transparent !important; box-shadow: none !important; }
.kguide.kguide [data-calculation-workflow-panel][data-workflow-layout] .workflow-guide__composed[data-row-layout] .workflow-guide__moment-row.is-open { background: #f7faf8 !important; }
.kguide.kguide [data-calculation-workflow-panel][data-workflow-layout] .workflow-guide__composed[data-row-layout] .workflow-guide__moment-row :is(.workflow-guide__row-heading, .workflow-guide__row-identity) { border-bottom: 0 !important; box-shadow: none !important; }
.kguide.kguide [data-calculation-workflow-panel][data-workflow-layout] .workflow-guide__composed[data-row-layout] .workflow-guide__moment-row.is-selected .workflow-guide__row-state,
.kguide.kguide [data-calculation-workflow-panel][data-workflow-layout] .workflow-guide__composed[data-row-layout] .workflow-guide__moment-row .workflow-guide__row-state.is-instant-on { background: var(--pj-leaf-dark) !important; border-color: var(--pj-leaf-dark) !important; color: #fff !important; box-shadow: none !important; }
.kguide.kguide [data-calculation-workflow-panel][data-workflow-layout] .workflow-guide__composed[data-row-layout] .workflow-guide__moment-row.is-selected .workflow-guide__row-state .material-symbols-outlined,
.kguide.kguide [data-calculation-workflow-panel][data-workflow-layout] .workflow-guide__composed[data-row-layout] .workflow-guide__moment-row .workflow-guide__row-state.is-instant-on .material-symbols-outlined { color: #fff !important; font-size: 18px !important; font-variation-settings: 'wght' 600; }
.kguide .workflow-guide__row-state { transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease; }

/* Telefon: projekthuvudet som en list – liten bild · namn + status / kund · initialer, summa + nästa steg,
   stegen. Adress (finns i kundrutan), kicker, "kalkyl exkl. moms" och brödsmulans namn tas bort; inga
   layout-övergångar. Specificiteten slår Offert-flikens :has(.qfull)-regler som står tidigare. */
@media (max-width: 720px) {
  /* Rad 1: ← · liten bild (byggnadstyp) · namn · status. Rad 2: kund · initialer | summa · Följ upp. Sedan stegen. */
  .project-frame .phead .phead-row { grid-template-columns: 32px 26px minmax(0, 1fr) auto auto; gap: 4px 8px; padding: 8px 12px 8px 6px; align-items: center; animation: none; }
  .project-frame .phead .phead-text { display: contents; }
  .project-frame .phead .phead-back { display: grid; place-items: center; grid-column: 1; grid-row: 1; width: 32px; height: 36px; border-radius: 9px; color: var(--pj-ink-2); text-decoration: none; }
  .project-frame .phead .phead-back .material-symbols-outlined { font-size: 20px; }
  .project-frame .phead .phead-pic { grid-column: 2; grid-row: 1; }
  .project-frame .phead :is(.phead-row, .phead-pic__btn, h1, .phead-kicker, .phead-btn, .phead-sub, .phead-kr > b) { transition: none; }
  .project-frame .phead .phead-pic__btn { width: 26px; aspect-ratio: 1; border-radius: 7px; opacity: 1; pointer-events: auto; }
  .project-frame .phead .phead-pic__edit { display: none; }
  .project-frame .phead .phead-name { grid-column: 3 / 5; grid-row: 1; min-width: 0; }
  .project-frame .phead .phead-kicker { grid-column: 5; grid-row: 1; max-height: none; margin: 0; opacity: 1; pointer-events: auto; }
  .project-frame .phead .phead-kicker > span:first-child { display: none; }
  .project-frame .phead h1 { margin: 0; font-size: 17px; line-height: 1.25; }
  .project-frame .phead .phead-name__btn { display: block; max-width: 100%; margin: 0; padding: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .project-frame .phead .phead-name__btn .material-symbols-outlined { display: none; }
  .project-frame .phead .phead-sub { grid-column: 2 / 4; grid-row: 2; display: flex; align-items: center; gap: 6px; min-width: 0; margin: 2px 0 0; white-space: nowrap; overflow: hidden; }
  .project-frame .phead .phead-sub :is(.phead-sub__addr, .dot, .phead-who__name) { display: none; }
  .project-frame .phead .phead-sub__btn { min-height: 32px; margin: 0; overflow: hidden; text-overflow: ellipsis; }
  .project-frame .phead .phead-who { margin-left: auto; } .project-frame .phead .phead-who__btn { min-width: 32px; min-height: 32px; justify-content: center; }
  .project-frame .phead .phead-kr { grid-column: 4 / 6; grid-row: 2; display: flex; align-items: center; gap: 8px; justify-self: end; }
  .project-frame .phead .phead-kr > b { font-size: 15px; white-space: nowrap; } .project-frame .phead .phead-kr > small { display: none; }
  .project-frame .phead .phead-btn { display: inline-flex; height: 34px; max-height: none; margin: 0; padding: 0 10px; font-size: 13px; opacity: 1; pointer-events: auto; position: relative; }
  .project-frame .phead .phead-btn::after { content: ''; position: absolute; inset: -4px 0; } /* 44 px träffyta */
  .pcrumb-block { display: none; } /* ← står i huvudet */
  /* Stegen är huvudmenyn: fyllda cirklar som förut, men med luft – större ikon och etikett, högre rad. */
  .project-frame .phead .pstep { gap: 5px; padding: 10px 4px 11px; }
  .project-frame .phead .pstep .pnum { width: 26px; height: 26px; font-size: 12.5px; } .project-frame .phead .pstep .pnum .material-symbols-outlined { font-size: 16px; }
  .project-frame .phead .pstep .ptext b { font-size: 12.5px; }
  /* Använd ytan: inga staplade marginaler runt fliken (skal, panel, guidens kropp och gruppyta). */
  .project-shell { padding: 2px 0 112px; }
  .rhub { padding: 8px; }
  .kguide .workflow-guide__body { padding: 0 !important; }
}
/* Smal telefon: gruppväljaren får plats med namnet (ikonen bort, rum och grupp mer lika breda). */
@media (max-width: 440px) {
  .ktabs.kbar { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 44px; }
  .kbar-group > .material-symbols-outlined:first-child { display: none; }
  .kbar-room, .kbar-group { padding-left: 8px; }
}
/* Följ upp, smal skärm: ett fast huvud (version, belopp, genvägar) och delarna kant i kant under – inga kort i kortet. */
@container project-detail (max-width: 760px) {
  .qf-top { position: sticky; top: 55px; z-index: 6; background: #fff; border-radius: 16px 16px 0 0; border-bottom: 1px solid var(--pj-line-2); }
  .qf-top .qf-head { border-bottom: 0; padding: 8px 10px 6px; }
  .qf-top .qpick-btn { min-height: 42px; }
  .qf-top .qf-amt b { font-size: 18px; }
  .qf-top .qf-jump { position: static; margin: 0; padding: 0 6px 6px; border: 0; border-radius: 0; box-shadow: none; }
  .qf-top .qf-jump button { height: 36px; }
  .qf-top .qf-jump small { font-weight: 400; color: var(--pj-muted); }
  .qfollow #qf-status, .qfollow #qsum, .qfollow #qf-dialog, .qfollow #qf-portal, .qfollow #qf-history { scroll-margin-top: 160px; }
  .qfollow .qsb-side { padding: 10px 0 4px; }
  .qfollow .qsb-side .qsb-side { padding: 0; }
  .qfollow .qstatus .mod-head { padding-left: 12px; padding-right: 12px; }
  .qfollow .qsteps { padding-left: 12px; padding-right: 12px; }
  .qfollow .qstatus .qprice { margin: 2px 12px 8px; }
  .qfollow .qacts { padding: 10px 12px 12px; }
  .qfollow #quote-detail-acceptance .quote-review-card { width: auto; margin: 0 12px 8px; }
}
.qnotes { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--pj-line-2); }
.qnotes h5 { margin: 0 0 6px; font-size: 12.5px; font-weight: 500; color: var(--pj-ink-2); } .qnotes h5 small { font-weight: 400; color: var(--pj-muted); }
.qnotes textarea { width: 100%; border: 1px solid var(--pj-line); border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 12.5px; line-height: 1.45; resize: vertical; }
.qnotes p { margin: 0; font-size: 12.5px; color: var(--pj-ink-2); }
/* Nästa steg ovanför dockan (bara smal skärm): klistrar i sektionens nederkant, så det aldrig täcker slutet. */
.qf-dockbar { display: none; }
@container project-detail (max-width: 760px) {
  .qf-dockbar { position: sticky; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 6; display: grid; margin: 0 8px 8px; padding: 6px; border-radius: 14px; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px); box-shadow: 0 10px 28px -18px rgba(23, 33, 26, 0.45); }
  .qf-dockbar .kbtn { width: 100%; min-height: 46px; justify-content: center; }
}
/* Redigera, smal skärm: huvudet (version, belopp, sidor) sitter ihop med sidan under – ett kort, inte två. */
.qf-top--edit { display: none; }
@container project-detail (max-width: 760px) {
  .qf-top--edit { display: block; border: 1px solid var(--pj-line-2); border-bottom-color: var(--pj-line-2); }
  .qf-top--edit .qf-jump { gap: 4px; }
  .qslides .qfull { gap: 0 16px; }
  .qslides .qfull .qmain, .qslides .qfull .qcard-villkor, .qslides .qfull .qcard-bilagor, .qslides .qfull .qcard-val, .qslides .qfull .qside, .qslides .qfull .qcard-hist, .qslides .qfull .qcard-dialog { border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; max-height: calc(100dvh - 186px); }
  .qslides .qfull .qmain > .mod-head { display: none; }
}
/* Följ upp: kundens portal – rum som rader, bilderna laddas först när raden öppnas. */
.qf-portal h3 { margin: 0 0 4px; font-size: 14px; font-weight: 500; } .qf-portal h3 small { font-weight: 400; color: var(--pj-muted); font-size: 12px; }
.qf-portal > .qmuted { display: block; margin: 0 0 8px; font-size: 12.5px; }
.qportal-room { border-top: 1px solid var(--pj-line-2); }
.qportal-room > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; list-style: none; cursor: pointer; font-size: 13px; }
.qportal-room > summary::-webkit-details-marker { display: none; }
.qportal-room > summary .material-symbols-outlined { font-size: 18px; color: var(--pj-faint); transition: transform 160ms ease; }
.qportal-room[open] > summary .material-symbols-outlined { transform: rotate(90deg); }
.qportal-room > summary b { font-weight: 500; } .qportal-room > summary small { margin-left: auto; color: var(--pj-muted); font-size: 12px; }
.qportal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; padding: 0 0 12px; }
.qportal-ph { position: relative; margin: 0; aspect-ratio: 1; border-radius: 9px; overflow: hidden; background: #f2f5ef; }
.qportal-ph img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.55; transition: opacity 150ms ease; }
.qportal-ph.is-shared img { opacity: 1; }
.qportal-share { position: absolute; right: 4px; bottom: 4px; display: inline-flex; align-items: center; gap: 3px; min-height: 32px; padding: 0 9px; border: 0; border-radius: 999px; background: rgba(255,255,255,0.92); font: inherit; font-size: 11.5px; color: var(--pj-ink-2); cursor: pointer; }
.qportal-share .material-symbols-outlined { font-size: 15px; }
.qportal-ph.is-shared .qportal-share { background: var(--pj-leaf-dark); color: #fff; }
.qportal-add { display: grid; align-content: center; aspect-ratio: 1; border: 1px dashed var(--pj-line); border-radius: 9px; }
.qportal-add label { display: grid; justify-items: center; gap: 4px; padding: 6px; text-align: center; font-size: 12px; color: var(--pj-leaf-dark); cursor: pointer; }
.qportal-add .material-symbols-outlined { font-size: 22px; }
.qportal-add.is-pending { opacity: 0.55; pointer-events: none; }
.qportal-err { display: block; padding: 0 6px; font-size: 11px; color: #b42318; text-align: center; }
/* Översikt: tidslinjen – projektets period bland andra jobb (vecka för vecka), streckad medan förslaget väntar. */
.ovs-tl__grid { position: relative; --pad: 18px; --name: 150px; padding: 0 var(--pad) 14px; }
.ovs-tl__weeks { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); margin-left: var(--name); padding-bottom: 4px; border-bottom: 1px solid var(--pj-line-2); font-size: 10.5px; color: var(--pj-faint); }
.ovs-tl__weeks span { display: grid; white-space: nowrap; overflow: hidden; } .ovs-tl__weeks b { font-weight: 500; color: var(--pj-muted); } .ovs-tl__weeks .is-now { color: var(--pj-leaf-dark); }
.ovs-tl__today { position: absolute; top: 0; bottom: 14px; width: 1px; left: calc(var(--pad) + var(--name) + (100% - 2 * var(--pad) - var(--name)) * var(--t) / 100); background: var(--pj-leaf); pointer-events: none; }
.ovs-tl__row { display: grid; grid-template-columns: var(--name) minmax(0, 1fr); align-items: center; min-height: 34px; border-bottom: 1px solid var(--pj-line-2); }
.ovs-tl__name { display: grid; min-width: 0; padding-right: 10px; font-size: 12px; color: var(--pj-muted); } .ovs-tl__name, .ovs-tl__name small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ovs-tl__name small { font-size: 10.5px; color: var(--pj-faint); }
.ovs-tl__row.is-own .ovs-tl__name { color: var(--pj-ink); font-weight: 500; }
.ovs-tl__track { position: relative; height: 12px; }
.ovs-tl__track i { position: absolute; top: 0; bottom: 0; border-radius: 6px; background: var(--c, #9aa79d); opacity: 0.35; }
.ovs-tl__row.is-own .ovs-tl__track { height: 16px; } .ovs-tl__row.is-own .ovs-tl__track i { opacity: 1; }
.ovs-tl__track i.is-prelim { background: repeating-linear-gradient(135deg, var(--c, #9aa79d) 0 6px, transparent 6px 10px); border: 1px solid var(--c, #9aa79d); opacity: 1; }
@container project-detail (max-width: 760px) { .ovs-tl__grid { --name: 96px; --pad: 12px; } .ovs-tl__weeks span:nth-child(odd) { visibility: hidden; } }
/* Planering: meddelandet till kunden och "sätt direkt" på egen rad under datum och dagar. */
.pfield .pmsg { grid-column: 1 / -1; }
.pfield .pmsg small { font-size: 10.5px; color: var(--pj-faint); }
.pfield .pmsg textarea { width: 100%; min-height: 38px; field-sizing: content; max-height: 8lh; border: 1px solid var(--pj-line); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 13px; color: var(--pj-ink); background: #fff; resize: vertical; }
.pfield .pdirect { grid-column: 1 / -1; justify-self: start; font-size: 12.5px; }
.pfield .pclear { justify-self: start; }
.pdeclined { margin: 0 18px 10px; }
/* Startblocket: perioden och förslaget får brytas – långa rader får aldrig trycka ut sidan. */
.ovs-progress__head { flex-wrap: wrap; } .ovs-progress__head b { white-space: nowrap; }
.ovs-progress__head small { white-space: normal; min-width: 0; }
.ovs-top, .ovs-progress { min-width: 0; }
/* ── Rum-fliken på datorn: rummen som kort (ägarens skiss) ──
   Samma markup som mobilens rader: kortets framsida är radens summary, "Visa alla moment" är
   details[open] (alla moment med kryss, rummets tal, Öppna kalkyl · Ta bort), Frågor visar förslagen
   i en ruta över kortet (.is-q). Under 1024 px syns inget av det här – mobilen är som förut. */
.rcard-head, .rcard-acts, .rcard-groups, .rcard-more, .rcard-add { display: none; }
@media (min-width: 1024px) {
  .rlist:not([data-view="table"], [data-density="rows"]) { grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); gap: 12px; align-items: start; }
  .rlist:not([data-view="table"], [data-density="rows"]) > .rlist-head, .rlist:not([data-view="table"], [data-density="rows"]) > .rhub-empty { grid-column: 1 / -1; }
  .rlist-head { padding: 2px 2px 6px; align-items: flex-end; }
  .rlist-head > .mod-icon { display: none; }
  .rlist-title:not(.rcard-head) { flex: 0 0 auto; }
  .rlist-title:not(.rcard-head) > h2, .rlist-title:not(.rcard-head) > p:not(.rlist-ai) { display: none; }
  .rcard-head { display: block; flex: 1; min-width: 0; }
  /* "Zimla arbetar · 2 av 5 rum klara …" tar inte titelns plats: är huvudet för smalt (titel + status + verktyg)
     står statusen på en egen rad under, och titeln krymper aldrig ihop till ett ord per rad. */
  /* Gäller både Rumsvy och Tabellvy (i tabellen tar verktygen flex: 1 och klämde titeln till 0 px). */
  .rlist > .rlist-head { container-type: inline-size; flex-wrap: wrap; row-gap: 4px; }
  .rlist > .rlist-head > .rcard-head { min-width: min(320px, 100%); }
  @container (max-width: 1240px) {
    .rlist-title:not(.rcard-head):has(> .rlist-ai:not([hidden])) { order: 3; flex: 1 1 100%; }
  }
  .rcard-kicker { display: block; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pj-muted); }
  .rcard-titlerow { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin-top: 2px; }
  .rcard-titlerow h2 { margin: 0; font-family: Newsreader, Georgia, serif; font-size: 26px; font-weight: 500; letter-spacing: -0.01em; text-transform: none; color: var(--pj-ink); }
  .rcard-level { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px; border-radius: 999px; border: 1px solid #b7d8c5; background: #eef7f1; font-size: 12px; color: var(--pj-leaf-dark); }
  .rcard-level .material-symbols-outlined { font-size: 14px; }
  .rcard-titlerow small { font-size: 12.5px; color: var(--pj-muted); }

  .rlist:not([data-view="table"], [data-density="rows"]) .rrow, .rlist:not([data-view="table"], [data-density="rows"]) .rrow:last-of-type { position: relative; min-width: 0; border: 1px solid var(--pj-line-2); border-radius: 14px; background: #fff; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow.is-missing > .rrow-sum { background: none; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow > .rrow-sum { grid-template-columns: minmax(0, 1fr); grid-template-areas: "pic" "name" "total" "acts" "groups" "more"; align-items: start; gap: 8px; padding: 8px 8px 10px; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow-sum:hover { background: none; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow-idx { display: none; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow-pic { grid-area: pic; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow-pic__btn { width: 100%; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow-img { width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: 10px; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow-sum > .rrow-img { grid-area: pic; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow-pic__edit { opacity: 1; right: 6px; bottom: 6px; width: 24px; height: 24px; font-size: 14px; opacity: 0.85; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow-name { grid-area: name; padding: 0 4px; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow-name strong { font-size: 14px; overflow-wrap: anywhere; }
  /* Namnet fäller ut kortet; pennan byter namn. */
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow-rename__btn { pointer-events: none; cursor: pointer; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow-rename__btn .material-symbols-outlined { pointer-events: auto; cursor: text; opacity: 0.7; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow-sum > .rmetrics { grid-area: total; justify-self: start; padding: 0 4px; text-align: left; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow-sum > .rmetrics > span:not(.is-total) { display: none; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow-sum > .rmetrics .is-total small { display: none; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow-sum > .rmetrics .is-total .rmet { text-align: left; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow-sum > .rmetrics .is-total b { font-family: Newsreader, Georgia, serif; font-size: 22px; font-weight: 500; color: var(--pj-ink); }
  /* Förslagsmärket ligger på fotot. */
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow-sum > .rchip { position: absolute; top: 14px; left: 14px; min-width: 0; box-shadow: 0 2px 8px -4px rgba(23, 33, 26, 0.35); cursor: pointer; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rcard-acts { grid-area: acts; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rcard-acts .rhub-btn { justify-content: center; width: 100%; padding: 0 6px; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rcard-own { display: grid; place-items: center; min-height: 32px; border: 1px dashed var(--pj-line); border-radius: 9px; font-size: 12px; color: var(--pj-muted); }
  .rlist:not([data-view="table"], [data-density="rows"]) .rcard-groups { grid-area: groups; display: grid; gap: 10px; padding: 10px 4px 0; border-top: 1px solid var(--pj-line-2); }
  .rlist:not([data-view="table"], [data-density="rows"]) .rcard-grp { display: grid; gap: 3px; min-width: 0; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rcard-grp-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rcard-grp-h > b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pj-ink-2); }
  .rlist:not([data-view="table"], [data-density="rows"]) .rcard-grp-h > span { font-size: 11.5px; color: var(--pj-muted); white-space: nowrap; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rcard-mom { display: flex; align-items: flex-start; gap: 7px; min-width: 0; font-size: 12px; line-height: 1.35; color: var(--pj-ink-2); }
  .rlist:not([data-view="table"], [data-density="rows"]) .rcard-mom::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 5px; border-radius: 50%; background: #3a8874; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rcard-mom > span { flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rcard-empty { font-size: 12px; color: var(--pj-muted); }
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow.is-missing .rcard-empty, .rlist:not([data-view="table"], [data-density="rows"]) .rrow.is-missing .rmetrics .is-total b { color: #b0771a; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rcard-more { grid-area: more; display: inline-flex; align-items: center; gap: 2px; padding: 0 4px; font-size: 12px; color: var(--pj-leaf-dark); }
  .rlist:not([data-view="table"], [data-density="rows"]) .rcard-more .material-symbols-outlined { font-size: 16px; transition: transform 160ms ease; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rcard-more__open { display: none; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow[open]:not(.is-q) .rcard-more__open { display: inline; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow[open]:not(.is-q) .rcard-more__closed { display: none; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow[open]:not(.is-q) .rcard-more .material-symbols-outlined { transform: rotate(180deg); }

  /* Utfällt kort: radens egna arbetsgrupper (kompakta) och foten (Öppna kalkyl · Ta bort). */
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow > .rbody { display: flex; flex-direction: column; gap: 8px; padding: 0 12px 10px; }
  /* Alla kort är lika höga. "Visa alla moment" gör kortets nedre del skrollbar: rummets alla moment
     (kryss, ångra, justerbara summor) i kortet, rutnätet står still. */
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow, .rlist:not([data-view="table"], [data-density="rows"]) .rrow:last-of-type { display: flex; flex-direction: column; height: var(--rcard-h, 600px); }
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow > .rrow-sum { flex: 0 0 auto; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow:not([open]) > .rrow-sum, .rlist:not([data-view="table"], [data-density="rows"]) .rrow.is-q > .rrow-sum { flex: 1 1 auto; min-height: 0; grid-template-rows: auto auto auto auto minmax(0, 1fr) auto; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow:not([open]) .rcard-groups, .rlist:not([data-view="table"], [data-density="rows"]) .rrow.is-q .rcard-groups { align-self: stretch; align-content: start; min-height: 0; overflow: hidden; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rcard-groups.is-clipped { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); }
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow[open]:not(.is-q) .rcard-groups { display: none; }
  /* details låter inte innehållet vara flexdel (Firefox): listan fyller kortet under summeringen i stället. */
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow[open]:not(.is-q) > .rbody { position: absolute; top: var(--rcard-sum-h, 50%); right: 0; bottom: 0; left: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 0; border-top: 1px solid var(--pj-line-2); border-radius: 0 0 14px 14px; background: #fff; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow[open]:not(.is-q) > .rbody .rlinks { position: sticky; bottom: 0; z-index: 1; margin: 0 -12px; padding: 8px 12px 10px; background: #fff; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow:not(.is-q) > .rbody .rbody-right { order: -1; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow > .rbody .rbody-right { padding-top: 0; gap: 8px; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow.is-q > .rbody .rbody-right { display: none; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow > .rbody .rbody-left { padding-top: 0; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow > .rbody .rbody-right > .rkicker { display: none; }
  .rlist:not([data-view="table"]) .rrow > .rbody .rgrp > summary { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 6px 0 2px; min-height: 0; }
  .rlist:not([data-view="table"]) .rrow > .rbody .rgrp > summary > .rmetrics { display: block; }
  .rlist:not([data-view="table"]) .rrow > .rbody .rgrp > summary > .rrow-chev, .rlist:not([data-view="table"]) .rrow > .rbody .rgrp > summary > .rgrp-icon { display: none; }
  .rlist:not([data-view="table"]) .rrow > .rbody .rgrp-name strong { font-size: 10px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pj-ink-2); }
  .rlist:not([data-view="table"]) .rrow > .rbody .rgrp-name small { display: none; }
  .rlist:not([data-view="table"]) .rrow > .rbody .rgrp .rmetrics > span:not(.is-total) { display: none; }
  .rlist:not([data-view="table"]) .rrow > .rbody .rgrp .rmetrics small { display: none; }
  .rlist:not([data-view="table"]) .rrow > .rbody .rgrp .rmetrics b { font-family: inherit; font-size: 11.5px; font-weight: 400; color: var(--pj-muted); }
  .rlist:not([data-view="table"]) .rrow > .rbody .rmoms { padding: 0; }
  .rlist:not([data-view="table"]) .rrow > .rbody .rmom { grid-template-columns: minmax(0, 1fr) auto; gap: 6px; padding: 4px 0; font-size: 12px; }
  /* Kortets rad: plupp · namn · antal. Pluppen är borttagningen – en grön prick som blir × vid hover/fokus. */
  .rlist:not([data-view="table"]) .rrow > .rbody .rmom { grid-template-columns: 18px minmax(0, 1fr) auto; align-items: start; gap: 6px; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow > .rbody .rmom .rmom-check { order: -1; width: 18px; height: 18px; margin-top: 0; border: 0; border-radius: 50%; background: none; color: transparent; }
  .rlist:not([data-view="table"]) .rrow > .rbody .rmom .rmom-check::before { content: ""; grid-area: 1 / 1; width: 6px; height: 6px; border-radius: 50%; background: #3a8874; }
  .rlist:not([data-view="table"]) .rrow > .rbody .rmom .rmom-check .material-symbols-outlined { grid-area: 1 / 1; font-size: 15px; }
  .rlist:not([data-view="table"]) .rrow > .rbody .rmom .rmom-check .rmom-ok { display: none; }
  .rlist:not([data-view="table"]) .rrow > .rbody .rmom .rmom-check:is(:hover, .rlist:not([data-view="table"]) :focus-visible) { background: #fbeceb; border: 0; }
  .rlist:not([data-view="table"]) .rrow > .rbody .rmom .rmom-check:is(:hover, .rlist:not([data-view="table"]) :focus-visible)::before { display: none; }
  .rlist:not([data-view="table"]) .rrow > .rbody .rmom .rmom-check.is-on:is(:hover, .rlist:not([data-view="table"]) :focus-visible) .rmom-x { display: inline; color: #b4453a; }
  .rlist:not([data-view="table"]) .rrow > .rbody .rmom .rmom-check:focus-visible { outline: 2px solid var(--pj-leaf-dark); outline-offset: 1px; }
  .rlist:not([data-view="table"]) .rrow > .rbody .rmom.is-removed .rmom-check::before { background: transparent; box-shadow: inset 0 0 0 1.5px #9fb3a6; }
  .rlist:not([data-view="table"]) .rrow > .rbody .rmom.is-removed .rmom-check:is(:hover, .rlist:not([data-view="table"]) :focus-visible) { background: #eef5ec; }
  .rlist:not([data-view="table"]) .rrow > .rbody .rmom.is-removed .rmom-check:is(:hover, .rlist:not([data-view="table"]) :focus-visible) .rmom-ok { display: inline; color: var(--pj-leaf-dark); }
  .rlist:not([data-view="table"]) .rrow > .rbody .rmom-qty { min-width: 0; padding: 0 4px; font-size: 11.5px; }
  /* Korten står alltid öppna med alla moment – "Visa alla moment" och Öppna/Stäng alla behövs inte här. */
  .rlist:not([data-view="table"], [data-density="rows"]) .rcard-more, .rlist:not([data-view="table"], [data-density="rows"]) [data-rlist-toggle-all] { display: none !important; }
  /* Utfällt: det som saknas (mått/antal) står först och går att fylla i på kortet; förslagen bor under Frågor. */
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow:not(.is-q) > .rbody .rbody-left { display: contents; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow:not(.is-q) > .rbody .rqpanel { display: none; }
  /* Frågor är platsen för allt som behöver svar: mängder som saknas först, även när förslagen är klara. */
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow.is-q > .rbody .rqpanel > .rconfirm.is-assumed { display: grid; }
  /* I rutan: rumsskissen överst, det som saknas som en lista under – etikett till vänster, fältet till höger. */
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow-dim .rrow-need { display: none; }
  /* Måtten ut ur Frågor: m²-raden är kortets Mått-knapp – en liten rund knapp med linjal (bärnsten när något saknas). */
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow-sum > .rrow-name .rrow-dim { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; min-width: 0; height: 26px; margin-top: 3px; padding: 0 10px 0 7px; border: 1px solid var(--pj-line); border-radius: 999px; background: #fff; color: var(--pj-ink-2); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: auto; transition: background 140ms ease, border-color 140ms ease; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow-name .rrow-dim .rrow-dim-ico { display: inline; font-size: 15px; color: var(--pj-leaf-dark); }
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow-name .rrow-dim em { display: none; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow-name .rrow-dim:hover { background: #eef5ec; border-color: #cfdccf; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow-name .rrow-dim.is-missing { border-color: #efd9a8; background: var(--pj-warn-2); color: #8a5a12; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow-name .rrow-dim.is-missing .rrow-dim-ico { color: #b0771a; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow-name .rrow-dim.is-missing:hover { background: #f8ead0; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow-name .rrow-dim .rrow-dim-n { display: inline-grid; height: 16px; margin-left: 1px; font-size: 10.5px; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow-name .rrow-dim:focus-visible { outline: 2px solid var(--pj-leaf-dark); outline-offset: 2px; }
  @media (pointer: coarse) { .rlist:not([data-view="table"], [data-density="rows"]) .rrow-sum > .rrow-name .rrow-dim { height: 40px; padding: 0 12px 0 9px; } }
  .rlist:not([data-view="table"], [data-density="rows"]) .rcard-empty-dims { color: #b0771a; text-decoration: underline; text-underline-offset: 2px; }
  /* Fel från sparningen (kök utan stommar …) syns i Mått-läget, resten av förslagen inte. */
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow.is-q.is-q-dims > .rbody .rqpanel > .rq-host:has(.rerror) { display: block; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow.is-q.is-q-dims > .rbody .rq-host > :not(.rerror) { display: none; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow.is-q > .rbody { max-height: calc(100dvh - 140px); overflow-y: auto; overscroll-behavior: contain; }
  /* Rutan i två lägen: Frågor = bara förslagen, Mått = bara måttformuläret (öppet, Spara synlig, ingen linjal). */
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow.is-q:not(.is-q-dims) > .rbody .rqpanel > .rconfirm, .rlist:not([data-view="table"], [data-density="rows"]) .rrow.is-q:not(.is-q-dims) > .rbody .rqpanel > .rconfirm.is-assumed { display: none; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow.is-q.is-q-dims > .rbody .rqpanel > :not(.rconfirm) { display: none; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow.is-q.is-q-dims > .rbody .rqpanel > .rconfirm { display: grid; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow.is-q.is-q-dims .rconfirm-ico { display: none; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rcard-q-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #fbeed5; color: #8a5a12; font-size: 11px; font-weight: 500; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow > .rbody .rconfirm .rq-prompt small { display: block; margin-left: 0; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow:not(.is-q) > .rbody .rlinks { order: 1; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow:not(.is-q) > .rbody .rlinks { flex-wrap: wrap; padding-top: 8px; border-top: 1px solid var(--pj-line-2); }
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow > .rbody .rlinks > button:not(.rlinks-end):not(.rlinks-main) { display: none; } /* nivån har Mallar på kortet *//* Frågor: förslagen i en ruta över kortet (drill: opacitet och en kort förflyttning). */
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow.is-q > .rbody { position: absolute; z-index: 30; top: 44px; left: 0; width: min(340px, 86vw); padding: 10px; border: 1px solid var(--pj-line-2); border-radius: 14px; background: #fff; box-shadow: 0 24px 60px -24px rgba(23, 33, 26, 0.35); animation: rcard-q 180ms cubic-bezier(0.22, 1, 0.36, 1) both; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow.is-q.is-q-flip > .rbody { left: auto; right: 0; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow.is-q > .rbody .rlinks { display: none; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow.is-q { z-index: 30; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rcard-add { display: grid; place-items: center; align-content: center; gap: 4px; min-height: 160px; border: 1px dashed #cfe3d8; border-radius: 14px; background: rgba(247, 250, 246, 0.7); font: inherit; font-size: 13px; color: var(--pj-leaf-dark); cursor: pointer; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rcard-add:hover { background: #f1f7f2; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rcard-add .material-symbols-outlined { font-size: 22px; }
  .rlist:not([data-view="table"], [data-density="rows"]):has(.rhub-empty) .rcard-add { display: none; }
}
/* "Komplettera" som summa öppnar Frågor (dator) – ser ut som texten den ersatte. */
.rmetrics .is-total .rmet-ask { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
@media (min-width: 1024px) { .rmetrics .is-total .rmet-ask:hover { text-decoration: underline; text-underline-offset: 3px; } }
@keyframes rcard-q { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .rrow.is-q > .rbody { animation: none !important; } }
@media (min-width: 1024px) and (hover: none) { .rrow-rename__btn .material-symbols-outlined { opacity: 1; } }
@media (min-width: 1024px) {
  /* Namnformuläret stoppar klick (byt namn); på kortet går klicket igenom till kortet – utom pennan och fältet. */
  .rrow-sum > .rrow-name { pointer-events: none; }
  .rrow-sum > .rrow-name .rrow-rename__btn .material-symbols-outlined, .rrow-sum > .rrow-name input { pointer-events: auto; }
}

/* Räkna om + ändringsrutan (Kalkyl): sparade siffror dämpas tills rummet räknats om; rutan visar gammal → ny per moment. */
.ksh-stats.is-stale b { color: var(--pj-muted); font-weight: 500; }
.ksh-recalc[disabled] { opacity: 0.6; cursor: progress; }
.ksh-act .rchip.ksh-changes { height: 28px; padding: 0 12px; font-size: 12.5px; cursor: pointer; }
.mall.kchg { width: min(760px, 100%); }
.kchg .mall-h p b { font-weight: 500; color: var(--pj-ink); }
.kchg-scroll { padding-bottom: 8px; }
.kchg-head, .kchg-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px 190px; gap: 12px; align-items: start; }
.kchg-head { position: sticky; top: 0; z-index: 1; background: #fff; padding: 6px 12px; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--pj-muted); border-bottom: 1px solid var(--pj-line); }
.kchg-head span:not(:first-child) { text-align: right; }
.kchg-list { list-style: none; margin: 0; padding: 0; }
.kchg-row { padding: 9px 12px; border-top: 1px solid var(--pj-line-2); font-size: 13.5px; }
.kchg-row:first-child { border-top: 0; }
.kchg-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.kchg-name b { font-weight: 400; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kchg-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kchg-num small { color: var(--pj-muted); font-size: 12.5px; }
.kchg-num .kchg-d { display: block; }
.kchg-d { font-style: normal; font-size: 11px; color: var(--pj-leaf-dark); font-variant-numeric: tabular-nums; }
.kchg-d.is-up { color: var(--pj-warn); }
.kchg-row.is-removed .kchg-num small { text-decoration: line-through; }
.kchg-f a { color: var(--pj-leaf-dark); text-decoration: underline; }
.kchg-veil { animation: kchg-in 180ms cubic-bezier(0.2, 0, 0, 1); }
@keyframes kchg-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .kchg-veil { animation: none; } }
@media (max-width: 720px) {
  .kchg-head { display: none; }
  .kchg-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name total" "hours hours"; gap: 2px 12px; padding: 12px 14px; }
  .kchg-name { grid-area: name; }
  .kchg-row .kchg-num:nth-child(2) { grid-area: hours; text-align: left; font-size: 12px; color: var(--pj-muted); }
  .kchg-row .kchg-num:nth-child(3) { grid-area: total; }
  .kchg-f { flex-direction: row; align-items: center; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .kchg-f .rhub-btn { min-height: 44px; flex: none; }
  .kchg .mall-x { width: 44px; height: 44px; }
}
@media (max-width: 1023px) {
  /* Räkna om / Se ändringar får egen rad över Mall + Lägg till rum – långa etiketter bryts inte mitt i. */
  .kbar-acts { flex-wrap: wrap; }
  .kbar-acts > button { flex: 1 1 auto; justify-content: center; min-height: 40px; white-space: nowrap; }
  .kbar-acts > button:nth-child(-n+2) { flex-basis: 100%; }
}
@media (max-width: 1023px) {
  /* Kvittot "Inget ändrades" är en liten ruta, inte helskärm. */
  .mall-veil:has(.kchg.is-empty) { padding: 16px; }
  .mall.kchg.is-empty { height: auto; border-radius: 18px; }
}

/* Rumskortet, kompakt (ägarens skiss): bild · namn + pris på en rad · mått, antal moment, Mallar och
   Frågor på en rad · sedan listan. Namnblockets delar blir egna celler (display: contents). */
@media (min-width: 1024px) {
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rrow > .rrow-sum {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "pic pic pic" "name name total" "dim meta acts" "groups groups groups" "more more more";
    column-gap: 6px; row-gap: 6px; padding: 6px 6px 8px;
  }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rrow:not([open]) > .rrow-sum, .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rrow.is-q > .rrow-sum { grid-template-rows: auto auto auto minmax(0, 1fr) auto; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rrow-sum > .rrow-name { display: contents; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rrow-name > .rrow-rename { grid-area: name; align-self: center; min-width: 0; padding-left: 4px; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rrow-name > .rrow-rename strong { display: block; font-size: 14px; line-height: 1.25; overflow-wrap: break-word; hyphens: auto; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rrow-name > small { grid-area: meta; align-self: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--pj-muted); }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rrow-sum > .rrow-name .rrow-dim { grid-area: dim; align-self: center; height: 22px; margin: 0 0 0 2px; padding: 0 7px 0 5px; font-size: 11px; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rrow-name .rrow-dim .rrow-dim-ico { font-size: 13px; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rrow-sum > .rmetrics { grid-area: total; align-self: center; justify-self: end; padding: 0 4px 0 0; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rrow-sum > .rmetrics .is-total b { font-size: 19px; white-space: nowrap; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rcard-acts { grid-area: acts; display: flex; gap: 4px; align-self: center; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rcard-acts .rhub-btn { width: auto; height: 22px; min-height: 22px; padding: 0 7px; gap: 3px; font-size: 11px; border-radius: 7px; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rcard-acts .rhub-btn .material-symbols-outlined { font-size: 13px; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rcard-own { min-height: 22px; padding: 0 7px; font-size: 11px; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rrow-img { aspect-ratio: 16 / 9; }
}

/* ── Rum-fliken, Tabellvy (datorn): samma details.rrow som korten, bara ett annat CSS-läge ──
   Rubrik, rader och summarad delar kolumner. Ett klick på raden fäller ut rummets arbetsgrupper
   under den (samma .rbody som kortet). Mobilen har ingen växel och behåller sina rader. */
.rlist-view, .rtable-head, .rtable-foot { display: none; }
@media (min-width: 1024px) {
  .rlist-view { display: inline-flex; padding: 2px; border: 1px solid var(--pj-line); border-radius: 9px; background: #f6f8f5; }
  .rlist-view > button { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; font: inherit; font-size: 12px; color: var(--pj-muted); cursor: pointer; }
  .rlist-view > button .material-symbols-outlined { font-size: 15px; }
  .rlist-view > button[aria-pressed="true"] { background: #fff; color: var(--pj-ink); box-shadow: 0 1px 2px rgba(23, 33, 26, 0.08); }
  .rlist-view > button:focus-visible { outline: 2px solid var(--pj-leaf-dark); outline-offset: 1px; }

  .rlist:is([data-view="table"], [data-density="rows"]) { --rt-cols: 28px 44px minmax(0, 1fr) 104px 84px 112px 112px 124px 132px; display: block; border: 1px solid var(--pj-line-2); border-radius: 14px; background: #fff; overflow: clip; }
  .rlist:is([data-view="table"], [data-density="rows"]) > .rlist-head { padding: 12px 14px 10px; }
  .rlist:is([data-view="table"], [data-density="rows"]) :is(.rtable-head, .rtable-foot, .rrow > .rrow-sum) {
    display: grid; grid-template-columns: var(--rt-cols); align-items: center; column-gap: 12px; padding: 0 14px;
    grid-template-areas: "idx pic name dim h m l t chip";
  }
  .rlist:is([data-view="table"], [data-density="rows"]) .rtable-head { position: sticky; top: 0; z-index: 2; min-height: 34px; border-top: 1px solid var(--pj-line-2); border-bottom: 1px solid var(--pj-line-2); background: #fafbf9; font-size: 10px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pj-muted); }
  .rlist:is([data-view="table"], [data-density="rows"]) .rtable-foot { min-height: 44px; border-top: 1px solid var(--pj-line); background: #fafbf9; font-size: 12.5px; color: var(--pj-ink-2); font-variant-numeric: tabular-nums; }
  .rlist:is([data-view="table"], [data-density="rows"]) .rtable-foot .rt-t { font-weight: 500; color: var(--pj-ink); }
  .rlist:is([data-view="table"], [data-density="rows"]) .rtable-foot small { font-weight: 400; color: #b0771a; }
  .rt-idx { grid-area: idx; } .rt-name { grid-area: name; } .rt-dim { grid-area: dim; } .rt-h { grid-area: h; } .rt-m { grid-area: m; } .rt-l { grid-area: l; } .rt-t { grid-area: t; } .rt-chip { grid-area: chip; }
  .rlist:is([data-view="table"], [data-density="rows"]) :is(.rtable-head, .rtable-foot) > :is(.rt-h, .rt-m, .rt-l, .rt-t) { text-align: right; }
  .rlist:is([data-view="table"], [data-density="rows"]) .rtable-head > .rt-name { grid-column: pic-start / name-end; }

  .rlist:is([data-view="table"], [data-density="rows"]) > .rrow { border-top: 1px solid var(--pj-line-2); }
  .rlist:is([data-view="table"], [data-density="rows"]) > .rrow:first-of-type { border-top: 0; }
  .rlist:is([data-view="table"], [data-density="rows"]) .rrow > .rrow-sum { min-height: 44px; padding-top: 4px; padding-bottom: 4px; gap: 0 12px; grid-template-areas: "idx pic name dim h m l t chip" "idx pic meta dim h m l t chip"; }
  .rlist:is([data-view="table"], [data-density="rows"]) .rrow-idx { grid-area: idx; font-size: 11.5px; color: var(--pj-muted); font-variant-numeric: tabular-nums; }
  .rlist:is([data-view="table"], [data-density="rows"]) .rrow-pic { grid-area: pic; }
  .rlist:is([data-view="table"], [data-density="rows"]) .rrow-img { width: 44px; height: 30px; border-radius: 6px; }
  .rlist:is([data-view="table"], [data-density="rows"]) .rrow-sum > .rrow-name, .rlist:is([data-view="table"], [data-density="rows"]) .rrow-sum > .rmetrics { display: contents; }
  .rlist:is([data-view="table"], [data-density="rows"]) .rrow-name > .rrow-rename { grid-area: name; align-self: end; min-width: 0; }
  .rlist:is([data-view="table"], [data-density="rows"]) .rrow-name > .rrow-rename strong { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rlist:is([data-view="table"], [data-density="rows"]) .rrow-name > small { grid-area: meta; align-self: start; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
  .rlist:is([data-view="table"], [data-density="rows"]) .rrow-name > .rrow-dim { grid-area: dim; font-size: 12.5px; color: var(--pj-ink-2); font-variant-numeric: tabular-nums; }
  .rlist:is([data-view="table"], [data-density="rows"]) .rrow-name .rrow-dim.is-missing { color: #b0771a; text-decoration: underline; text-underline-offset: 2px; }
  .rlist:is([data-view="table"], [data-density="rows"]) .rrow-name .rrow-dim em { display: none; }
  .rlist:is([data-view="table"], [data-density="rows"]) .rmetrics > span { display: block; text-align: right; }
  .rlist:is([data-view="table"], [data-density="rows"]) .rmetrics > span:nth-child(1) { grid-area: h; }
  .rlist:is([data-view="table"], [data-density="rows"]) .rmetrics > span:nth-child(2) { grid-area: m; }
  .rlist:is([data-view="table"], [data-density="rows"]) .rmetrics > span:nth-child(3) { grid-area: l; }
  .rlist:is([data-view="table"], [data-density="rows"]) .rmetrics > span.is-total { grid-area: t; }
  .rlist:is([data-view="table"], [data-density="rows"]) .rmetrics small { display: none; }
  .rlist:is([data-view="table"], [data-density="rows"]) .rmetrics b { font-size: 12.5px; font-weight: 400; }
  .rlist:is([data-view="table"], [data-density="rows"]) .rmetrics .is-total b { font-weight: 500; color: var(--pj-ink); }
  .rlist:is([data-view="table"], [data-density="rows"]) .rrow-sum > .rchip { grid-area: chip; justify-self: start; }
  .rlist:is([data-view="table"], [data-density="rows"]) .rbody { padding: 4px 14px 14px 98px; border-top: 1px dashed var(--pj-line-2); background: #fcfdfb; }
  /* Radläget (Rumsvy med delar eller fler än 12 rum): miniatyren bär kortets Bilder och ⋯ (rumstyp) – samma mål som
     på kortet, synliga vid hovring/fokus så raden förblir lugn. "≈" säger redan att ytan är preliminär. */
  .rlist[data-density="rows"]:not([data-view="table"]) .rrow-photos { top: 0; right: auto; left: 0; width: 44px; height: 30px; padding: 0; justify-content: center; border-radius: 6px; background: rgba(23, 33, 26, 0.55); color: #fff; opacity: 0; transition: opacity 120ms ease; }
  .rlist[data-density="rows"]:not([data-view="table"]) .rrow-photos { font-size: 0; }
  .rlist[data-density="rows"]:not([data-view="table"]) .rrow-photos .material-symbols-outlined { font-size: 16px; }
  .rlist[data-density="rows"]:not([data-view="table"]) .rrow-photos small { display: none; }
  .rlist[data-density="rows"]:not([data-view="table"]) .rrow-pic__btn { position: absolute; top: -6px; right: -10px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(23, 33, 26, 0.18); opacity: 0; transition: opacity 120ms ease; }
  .rlist[data-density="rows"]:not([data-view="table"]) .rrow-pic__btn .material-symbols-outlined { font-size: 16px; }
  .rlist[data-density="rows"]:not([data-view="table"]) .rrow-sum:is(:hover, :focus-within) :is(.rrow-photos, .rrow-pic__btn) { opacity: 1; }
  @media (hover: none) { .rlist[data-density="rows"]:not([data-view="table"]) :is(.rrow-photos, .rrow-pic__btn) { opacity: 1; } }
  /* Listan står med synlig överkant (menyerna får gå utanför): foten följer de rundade hörnen, spökraderna (ritningsanalys)
     döljs som i Tabellvy – de har inte radens kolumner. */
  .rlist[data-density="rows"]:not([data-view="table"]) .rtable-foot { border-bottom-left-radius: 13px; border-bottom-right-radius: 13px; }
  .rlist[data-density="rows"]:not([data-view="table"]) > .rrow.is-ghost { display: none; }
  .rlist[data-density="rows"]:not([data-view="table"]) .rrow-dim-pre { display: none; }
  /* Radens kolumner (UX-packet tatt 2026-10-08): Material och Arbete står i Tabellvy och offerten – utan dem får namnet
     plats vid 1024 px. Menyer och sökträffar får gå utanför listan; Öppna alla vore ett anrop per rum. */
  .rlist[data-density="rows"]:not([data-view="table"]) { --rt-cols: 24px 44px minmax(0, 1fr) 104px 72px 112px 104px; overflow: visible; }
  .rlist[data-density="rows"]:not([data-view="table"]) :is(.rtable-head, .rtable-foot) { grid-template-areas: "idx pic name dim h t chip"; }
  .rlist[data-density="rows"]:not([data-view="table"]) .rrow > .rrow-sum { grid-template-areas: "idx pic name dim h t chip" "idx pic meta dim h t chip" "idx pic search search search search search"; }
  .rlist[data-density="rows"]:not([data-view="table"]) :is(.rtable-head, .rtable-foot) > :is(.rt-m, .rt-l), .rlist[data-density="rows"]:not([data-view="table"]) .rrow-sum .rmetrics > span:is(:nth-child(2), :nth-child(3)) { display: none; }
  .rlist[data-density="rows"]:not([data-view="table"]) [data-rlist-toggle-all] { display: none; }
  /* Kortets sökfält (stenkoll P0): samma katalogsök och mikrofon som på kortet, under namnet i en utfälld rad. */
  .rlist[data-density="rows"]:not([data-view="table"]) details.rrow[open] > .rrow-sum > .rcard-search { grid-area: search; position: relative; display: flex; align-items: center; gap: 6px; height: 32px; margin: 6px 0 8px; padding: 0 10px; border: 1px solid var(--pj-line); border-radius: 9px; background: #fff; cursor: text; }
  .rlist[data-density="rows"]:not([data-view="table"]) details.rrow[open] > .rrow-sum > .rcard-search:focus-within { border-color: #b9dcc8; box-shadow: 0 0 0 3px rgba(58, 136, 116, 0.14); }
  /* Namnet fäller ut raden (knegare); pennan byter namn – som på kortet. */
  .rlist[data-density="rows"]:not([data-view="table"]) .rrow-rename__btn { pointer-events: none; cursor: pointer; }
  .rlist[data-density="rows"]:not([data-view="table"]) .rrow-rename__btn .material-symbols-outlined { pointer-events: auto; cursor: text; opacity: 0.7; }
  @media (max-width: 1279px) {
    /* Smal skärm (ofta med chatten öppen): Timmar viker så att rummets namn står kvar. */
    .rlist[data-density="rows"]:not([data-view="table"]) { --rt-cols: 24px 44px minmax(0, 1fr) 96px 104px 96px; }
    .rlist[data-density="rows"]:not([data-view="table"]) :is(.rtable-head, .rtable-foot) { grid-template-areas: "idx pic name dim t chip"; }
    .rlist[data-density="rows"]:not([data-view="table"]) .rrow > .rrow-sum { grid-template-areas: "idx pic name dim t chip" "idx pic meta dim t chip" "idx pic search search search search"; }
    .rlist[data-density="rows"]:not([data-view="table"]) :is(.rtable-head, .rtable-foot) > .rt-h, .rlist[data-density="rows"]:not([data-view="table"]) .rrow-sum .rmetrics > span:nth-child(1) { display: none; }
  }
  .rlist:is([data-view="table"], [data-density="rows"]) > .rcard-add, .rlist[data-view="table"] [data-rlist-toggle-all] { display: none; }
}

/* ── Offertremsan i projekthuvudet (ägarens skiss): offertens läge i en rad ── */
.poffer { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 12px -2px 0; padding: 10px 2px 0; border-top: 1px solid var(--pj-line-2); min-height: 44px; }
.poffer.is-loading .skel { flex: 1; max-width: 520px; }
.poffer-k { font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pj-leaf-dark); }
.poffer-status { height: 22px; display: inline-flex; align-items: center; padding: 0 8px; border-radius: 6px; background: var(--pj-line-2); font-size: 11.5px; color: var(--pj-ink-2); }
.poffer-status.is-sent { background: var(--pj-sent-2); color: var(--pj-sent); }
.poffer-status.is-accepted { background: var(--pj-ok-2); color: var(--pj-leaf-dark); }
.poffer-facts { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.poffer-facts > span { display: grid; gap: 1px; min-width: 58px; padding: 4px 9px; border: 1px solid var(--pj-line-2); border-radius: 8px; background: #fbfcfa; }
.poffer-facts small { font-size: 10px; color: var(--pj-muted); white-space: nowrap; }
.poffer-facts b { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; color: var(--pj-ink); white-space: nowrap; }
.poffer-facts b i { width: 6px; height: 6px; border-radius: 50%; background: var(--pj-faint); }
.poffer-facts b i.is-ok { background: var(--pj-leaf); }
.poffer-facts b i.is-warn { background: #d99a2b; }
.poffer-sums { display: inline-flex; gap: 16px; margin-left: auto; text-align: right; }
.poffer-sums > span { display: grid; gap: 1px; }
.poffer-sums small { font-size: 10px; color: var(--pj-muted); }
.poffer-sums b { font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--pj-ink); white-space: nowrap; }
.poffer-sums b.is-inc { color: var(--pj-leaf-dark); }
.poffer-settings { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 10px 0 12px; border: 1px solid var(--pj-line); border-radius: 9px; background: #fff; font-size: 12.5px; color: var(--pj-ink); text-decoration: none; white-space: nowrap; }
.poffer-settings:hover { background: #f6f8f5; }
.poffer-settings .material-symbols-outlined { font-size: 16px; color: var(--pj-muted); }
.poffer-empty { font-size: 12px; color: var(--pj-muted); }
@media (max-width: 1023px) { .poffer-sums { margin-left: 0; } .poffer-facts { width: 100%; } }

/* Avancerad kalkyl som popup över projektsidan. */
.calc-pop { width: min(1500px, calc(100vw - 48px)); height: calc(100dvh - 48px); max-width: none; max-height: none; padding: 0; border: 0; border-radius: 16px; background: #fff; box-shadow: 0 40px 90px -30px rgba(20, 40, 30, 0.55); overflow: hidden; }
.calc-pop[open] { display: flex; flex-direction: column; }
.calc-pop::backdrop { background: rgba(20, 40, 30, 0.35); backdrop-filter: blur(3px); }
.calc-pop-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 48px; padding: 0 10px 0 18px; border-bottom: 1px solid var(--pj-line-2); }
.calc-pop-h b { font-size: 14px; font-weight: 500; color: var(--pj-ink); }
.calc-pop-x { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 999px; background: var(--pj-line-2); color: var(--pj-ink-2); cursor: pointer; }
.calc-pop-x:hover { background: #e4eae3; }
.calc-pop iframe { flex: 1; width: 100%; border: 0; }
/* Kortets fot: Avancerad kalkyl som hel knapp (skissen). */
@media (min-width: 1024px) {
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow > .rbody .rlinks .rlinks-main { flex: 1; justify-content: center; height: 32px; padding: 0 10px !important; border-radius: 9px; font-weight: 500; }
}

/* Kortet: bara momentlistan skrollar – Avancerad kalkyl står fast i kortets botten, utanför listan. */
@media (min-width: 1024px) {
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow[open]:not(.is-q) > .rbody { overflow: hidden; padding-bottom: 8px; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow[open]:not(.is-q) > .rbody .rbody-right { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow[open]:not(.is-q) > .rbody .rlinks { position: static; flex: none; margin: 0; padding: 8px 0 0; border-top: 1px solid var(--pj-line-2); background: #fff; }
}

/* Offertinställningar: dropdown under huvudet, tre spalter (Kunden ser · Priser & villkor · Skicka). */
/* Dropdownen ligger över sidan och flyttar inget: utanför ramens rutnät, placerad under huvudet (top sätts vid öppning). */
.project-frame:has(> .poset-slot) { position: relative; }
.poset-slot { position: absolute; left: 0; right: 0; z-index: 20; }
.poset { position: relative; max-height: calc(100dvh - 140px); overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--pj-line); border-radius: 16px; background: #fff; box-shadow: 0 30px 70px -30px rgba(20, 40, 30, 0.45); }
.poset.is-loading { padding: 20px; }
.poset-top { position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 18px 12px; border-bottom: 1px solid var(--pj-line-2); background: #fff; }
.poset-top h2 { margin: 0; font-size: 15px; font-weight: 500; color: var(--pj-ink); }
.poset-t-m { display: none; }
.poset-top p { margin: 2px 0 0; font-size: 12px; color: var(--pj-muted); }
.poset-close { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px; border: 1px solid var(--pj-line); border-radius: 8px; background: #fff; font: inherit; font-size: 12.5px; color: var(--pj-ink); cursor: pointer; }
.poset-close .material-symbols-outlined { font-size: 16px; }
.poset-h { margin: 0 0 8px; font-size: 13.5px; font-weight: 500; color: var(--pj-ink); }
.poset-h small { margin-left: 4px; font-size: 11.5px; font-weight: 400; color: var(--pj-muted); }
.poset-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.poset-grid > .poset-col, .poset-grid .qside-terms { padding: 14px 18px 18px; }
.poset-grid > .poset-col { border-right: 1px solid var(--pj-line-2); }
/* Skicka-spalten återanvänder offertflikens panel: villkoren blir mittspalten, resten högerspalten. */
.poset-grid > .qcol { display: contents; }
.poset-grid .qside { grid-column: 2 / 4; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; }
.poset-grid .qside > :not(.qside-terms) { grid-column: 2; padding-left: 18px; padding-right: 18px; }
.poset-grid .qside > .mod-head { padding-top: 14px; }
.poset-grid .qside-terms { grid-column: 1; grid-row: 1 / span 20; border-right: 1px solid var(--pj-line-2); }
.poset-grid .qside > .mod-foot { padding-bottom: 18px; }
.poset-follow { padding: 12px 18px 18px; }
.poset-empty { margin: 0; padding: 18px; font-size: 13px; color: var(--pj-muted); }
@media (max-width: 1023px) {
  .poset { max-height: none; }
  .poset-grid, .poset-grid .qside { grid-template-columns: minmax(0, 1fr); }
  .poset-grid .qside { grid-column: auto; }
  .poset-grid .qside > :not(.qside-terms), .poset-grid .qside-terms { grid-column: 1; grid-row: auto; border-right: 0; }
  .poset-grid > .poset-col { border-right: 0; border-bottom: 1px solid var(--pj-line-2); }
}

/* Stegraden är borta: en liten rad med tillbaka och Mer. */
.pnav { display: flex; justify-content: flex-end; gap: 6px; margin-top: 8px; }
.pnav a { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border-radius: 8px; font-size: 12.5px; color: var(--pj-ink-2); text-decoration: none; }
.pnav a:hover, .pnav a.on { background: #f2f5ef; }
.pnav .material-symbols-outlined { font-size: 16px; }
.pnav-back { margin-right: auto; }

/* Kortet enligt skissen: namn + pris · "N moment · nivå" · m² | Mallar Frågor · sökfält · listan. */
.rcard-search { display: none; }
@media (min-width: 1024px) {
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rrow > .rrow-sum {
    grid-template-areas: "pic pic pic" "name name total" "meta meta meta" "dim . acts" "search search search" "groups groups groups" "more more more";
    row-gap: 4px;
  }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rrow:not([open]) > .rrow-sum, .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rrow.is-q > .rrow-sum { grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rrow-name > small { padding-left: 4px; margin-top: -2px; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rrow-sum > .rrow-name .rrow-dim { justify-self: start; margin-top: 2px; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rcard-acts { justify-self: end; margin-top: 2px; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rcard-search { grid-area: search; position: relative; display: flex; align-items: center; gap: 6px; height: 32px; margin: 4px 0 2px; padding: 0 10px; border: 1px solid var(--pj-line); border-radius: 9px; background: #fff; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rcard-search:focus-within { border-color: #b9dcc8; box-shadow: 0 0 0 3px rgba(58, 136, 116, 0.14); }
  .rcard-search > .material-symbols-outlined { font-size: 16px; color: var(--pj-faint); }
  .rcard-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; font: inherit; font-size: 12.5px; color: var(--pj-ink); outline: none; }
  .rcard-hits { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 6; }
  .rsearch-hits { margin: 0; padding: 4px; list-style: none; border: 1px solid var(--pj-line); border-radius: 10px; background: #fff; box-shadow: 0 18px 40px -20px rgba(20, 40, 30, 0.45); max-height: 280px; overflow-y: auto; }
  .rsearch-hit { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 7px; }
  .rsearch-hit:hover { background: #f6f8f5; }
  .rsearch-hit b { display: block; font-size: 12.5px; font-weight: 500; color: var(--pj-ink); }
  .rsearch-hit small { display: block; font-size: 11px; color: var(--pj-muted); }
  .rsearch-add { height: 26px; padding: 0 8px; border: 1px solid #b9dcc8; border-radius: 7px; background: #eef7f1; font: inherit; font-size: 11.5px; color: var(--pj-leaf-dark); cursor: pointer; white-space: nowrap; }
  .rsearch-add:hover { background: #e2f1e8; }
  .rsearch-on { display: inline-flex; align-items: center; gap: 2px; font-size: 11.5px; color: var(--pj-leaf-dark); }
  .rsearch-on .material-symbols-outlined { font-size: 14px; }
  .rsearch-none { padding: 8px; font-size: 12px; color: var(--pj-muted); }
}

.poffer-more { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--pj-muted); text-decoration: none; }
.poffer-more:hover { background: #f2f5ef; color: var(--pj-ink); }
.phead-kr-sum { display: grid; justify-items: end; }
.phead-kr-k { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pj-muted); }
.phead-kr-sum em { font-style: normal; font-weight: 500; color: var(--pj-leaf-dark); }
/* Projektsidan: hela skalet max 1560px, centrerat. */
.project-shell { max-width: 1560px; margin-left: auto; margin-right: auto; }
.project-shell .project-frame:has(#rhub-list) { max-width: 1560px; }

/* Toppen enligt ägarens bild (2026-09-28): huvudet + offertbandet i ett kort. */
@media (min-width: 1024px) {
  .project-frame > .phead { overflow: visible; border-radius: 20px; background: rgba(250, 251, 249, 0.92); border: 1px solid rgba(255, 255, 255, 0.9); }
  .phead .phead-row { grid-template-columns: 124px minmax(0, 1fr) auto; gap: 22px; padding: 22px 22px 18px; align-items: start; }
  .phead .phead-back { display: none; }
  .phead .phead-pic__btn { width: 124px; aspect-ratio: auto; height: 92px; padding: 6px; border: 1px solid var(--pj-line); border-radius: 12px; background: #fff; }
  .phead .phead-pic__btn img { border-radius: 6px; object-fit: contain; background: #fff; }
  .phead .phead-text { padding-top: 4px; }
  .phead .phead-kicker { font-size: 10.5px; font-weight: 500; letter-spacing: 0.14em; color: var(--pj-leaf-dark); }
  .phead .phead-chip { padding: 2px 8px; border-radius: 6px; font-size: 11px; background: #eceee9; color: var(--pj-ink-2); }
  .phead h1 { margin: 8px 0 0; font-size: 23px; }
  .phead .phead-sub { margin-top: 10px; }
  .phead .phead-kr { align-self: start; gap: 0; }
  .phead .phead-kr-sum { gap: 2px; }
  .phead .phead-kr-sum > b { font-size: 32px; font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--pj-ink); }
  .phead .phead-kr-sum > small { font-size: 11.5px; color: var(--pj-muted); }
  .phead .phead-kr-k { font-size: 10.5px; font-weight: 500; color: var(--pj-ink-2); margin-bottom: 2px; }
  .phead .phead-btn { height: 40px; margin-top: 14px; padding: 0 18px; border-radius: 9px; background: #1f5f4c; }

  .phead .poffer { flex-wrap: nowrap; gap: 12px; margin: 0; padding: 12px 22px; min-height: 64px; border-top: 1px solid var(--pj-line); border-radius: 0 0 20px 20px; background: rgba(238, 241, 236, 0.7); }
  .phead .poffer-k { font-size: 10.5px; letter-spacing: 0.16em; margin-right: 2px; }
  .phead .poffer-status { height: 22px; border-radius: 6px; background: #e4e7e1; color: var(--pj-ink-2); font-size: 11px; }
  .phead .poffer-facts { flex-wrap: nowrap; gap: 0; margin-left: 8px; border: 1px solid var(--pj-line); border-radius: 9px; background: #fff; overflow: hidden; }
  .phead .poffer-facts > span { gap: 2px; min-width: 0; padding: 6px 13px 7px; border: 0; border-left: 1px solid var(--pj-line); border-radius: 0; background: transparent; }
  .phead .poffer-facts > span:first-child { border-left: 0; }
  .phead .poffer-facts small { font-size: 11px; }
  .phead .poffer-facts b { font-size: 12.5px; }
  .phead .poffer-sums { gap: 22px; margin-right: 6px; }
  .phead .poffer-sums small { font-size: 11px; }
  .phead .poffer-sums b { font-size: 13.5px; }
  .phead .poffer-settings { height: 38px; padding: 0 14px; border-color: var(--pj-line); border-radius: 9px; font-size: 13px; }
  .phead .poffer-settings .material-symbols-outlined { font-size: 18px; color: var(--pj-ink-2); }
  .phead .poffer-settings[data-customer-view] { gap: 8px; }
}
/* Offertremsan bryter efter sin egen bredd, inte skärmens: med Zimla AI dockad är kortet smalt på en bred skärm, och
   då trycktes faktaknapparna ihop tills etiketterna låg över varandra. Smal remsa: Offert + status och knapparna på
   första raden, faktaramen på egen rad där knapparna delar bredden. Knapparna blir aldrig smalare än sin text – får de
   inte plats bryter ramen till två rader (inget scrollar, Mottagare syns alltid). Kundens vy blir ikonknapp när det är
   riktigt trångt (namnet ligger kvar för skärmläsare och som title). Under 1024 px gäller mobilens egna regler. */
.poffer-wrap { container: poffer / inline-size; }
@media (min-width: 1024px) {
  .phead .poffer-facts > button { min-width: auto; }
  @container poffer (max-width: 1280px) {
    .phead .poffer { flex-wrap: wrap; row-gap: 10px; }
    .phead .poffer-settings[data-customer-view] { margin-left: auto; }
    .phead .poffer-facts { order: 5; flex: 1 1 100%; flex-wrap: wrap; gap: 1px; margin-left: 0; background: var(--pj-line); }
    .phead .poffer-facts > button { flex: 1 1 0; padding-inline: 11px; border-left: 0; background: #fff; }
    .phead .poffer-facts > button:hover { background: #f4f7f3; }
  }
  @container poffer (max-width: 900px) {
    .phead .poffer-settings[data-customer-view] { width: 38px; padding: 0; justify-content: center; gap: 0; font-size: 0; }
  }
}
.pmore { justify-self: center; display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 8px; padding: 6px 12px; border-radius: 9px; font-size: 12.5px; color: var(--pj-muted); text-decoration: none; }
.pmore:hover { background: rgba(255, 255, 255, 0.7); color: var(--pj-ink); }
.pmore .material-symbols-outlined { font-size: 18px; }
@media (min-width: 1024px) {
  .project-shell { padding-top: 44px; } /* luft under skalets klocka/avatar (brödsmulorna är borta) */
  .phead .phead-sub__btn.is-empty { border-bottom: 1px dashed var(--pj-leaf); }
  .project-frame > .phead { background: rgba(250, 251, 249, 0.96); }
}
@media (min-width: 1024px) {
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rrow-name > .rrow-rename strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; hyphens: none; }
  .rlist:not([data-view="table"]) .rrow > .rbody .rgrp-name { display: flex; align-items: baseline; gap: 6px; }
  .rlist:not([data-view="table"]) .rrow > .rbody .rgrp-name small { display: inline; font-size: 10.5px; color: var(--pj-faint); }
  .rlist:not([data-view="table"]) .rrow > .rbody .rgrp-name small > span { display: none; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow > .rbody .rlinks .rlinks-end { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; padding: 0 !important; border-radius: 9px; opacity: 0; transition: opacity 140ms ease; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow:hover > .rbody .rlinks .rlinks-end, .rlist:not([data-view="table"], [data-density="rows"]) .rrow > .rbody .rlinks .rlinks-end:focus-visible { opacity: 1; }
  .rlinks-end .material-symbols-outlined { font-size: 18px; }
}
.rlist[data-rlist]:not([data-view="table"]) .rrow-rename__btn { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rcard-mic { display: grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px; margin-right: -4px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--pj-leaf); cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
.rcard-mic .material-symbols-outlined { font-size: 17px; }
.rcard-mic:hover { background: var(--pj-ok-2); }
.rcard-mic.is-rec { background: var(--pj-leaf); color: #fff; box-shadow: 0 0 0 4px rgba(58, 136, 116, 0.18); }
@media (min-width: 1024px) {
  /* Ta bort tar ingen plats förrän man hovrar kortet – Avancerad kalkyl är full bredd som i bilden. */
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow > .rbody .rlinks { gap: 0; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow > .rbody .rlinks .rlinks-end { flex-basis: 0; width: 0; overflow: hidden; transition: opacity 140ms ease, flex-basis 160ms ease, width 160ms ease, margin 160ms ease; }
  .rlist:not([data-view="table"], [data-density="rows"]) .rrow:hover > .rbody .rlinks .rlinks-end, .rlist:not([data-view="table"], [data-density="rows"]) .rrow > .rbody .rlinks .rlinks-end:focus-visible { flex-basis: 32px; width: 32px; margin-left: 6px; }
}

/* Tabellvyn = rummens poster (ägarens bild 2026-09-28). Rumsvyn döljer den; tabellvyn döljer rumsraderna. */
.rpt-tools, .rposts { display: none; }
@media (min-width: 1024px) {
  .rlist[data-view="table"] > details.rrow, .rlist[data-view="table"] > .rtable-head, .rlist[data-view="table"] > .rtable-foot,
  .rlist[data-view="table"] > .rcard-add, .rlist[data-view="table"] > .rrow.is-ghost,
  .rlist[data-view="table"] [data-rlist-toggle-all], .rlist[data-view="table"] .rlist-sort { display: none !important; }
  .rlist[data-view="table"] > .rpt-tools { display: grid; gap: 12px; grid-column: 1 / -1; margin-bottom: 4px; }
  .rlist[data-view="table"] > .rposts { display: block; grid-column: 1 / -1; }
  .rlist[data-view="table"] .rlist-tools { flex: 1; }
  .rlist[data-view="table"] .rlist-view { margin: 0 auto; }

  .rpt-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 0; padding: 10px 14px; border: 1px solid var(--pj-line); border-radius: 10px; background: #fff; font-size: 12.5px; color: var(--pj-ink-2); }
  .rpt-hint b { font-weight: 500; color: var(--pj-ink); }
  .rpt-hint > span { display: inline-flex; align-items: center; gap: 6px; }
  .rpt-hint i { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #1f5f4c; color: #fff; font-size: 10px; font-style: normal; }
  .rpt-hint-x { margin-left: auto; display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 6px; background: none; color: var(--pj-muted); cursor: pointer; }
  .rpt-hint-x:hover { background: #f2f5ef; color: var(--pj-ink); }
  .rpt-hint-x .material-symbols-outlined { font-size: 16px; }

  .rpt-bar { display: grid; grid-template-columns: minmax(0, 1fr) 200px auto auto; align-items: end; gap: 12px; }
  .rpt-bar label > span:first-child, .rpt-by > span:first-child { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 500; color: var(--pj-ink); }
  .rpt-search-box { position: relative; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border: 1px solid var(--pj-line); border-radius: 10px; background: #fff; }
  .rpt-search-box:focus-within { border-color: #b9dcc8; box-shadow: 0 0 0 3px rgba(58, 136, 116, 0.14); }
  .rpt-search-box > .material-symbols-outlined { font-size: 18px; color: var(--pj-faint); }
  .rpt-search-box input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; font: inherit; font-size: 13.5px; outline: none; }
  .rpt-hits { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; }
  .rpt-room select { width: 100%; height: 42px; padding: 0 10px; border: 1px solid var(--pj-line); border-radius: 10px; background: #fff; font: inherit; font-size: 13.5px; color: var(--pj-ink); }
  .rpt-fold { display: inline-flex; align-items: center; gap: 4px; height: 42px; padding: 0 14px; border: 1px solid var(--pj-line); border-radius: 10px; background: #fff; font: inherit; font-size: 13.5px; color: var(--pj-ink); cursor: pointer; white-space: nowrap; }
  .rpt-fold:hover { background: #f6f8f5; }
  .rpt-fold .material-symbols-outlined { font-size: 18px; color: var(--pj-muted); }
  .rpt-seg { display: inline-flex; height: 42px; padding: 3px; border-radius: 10px; background: #e9ece6; }
  .rpt-seg button { padding: 0 16px; border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: 13.5px; color: var(--pj-muted); cursor: pointer; }
  .rpt-seg button[aria-pressed="true"] { background: #fff; color: var(--pj-ink); box-shadow: 0 1px 3px rgba(23, 33, 26, 0.12); }

  .rposts > .skel { padding: 16px; border: 1px solid var(--pj-line); border-radius: 12px; background: #fff; }
  .rpt { --rpt-cols: 56px minmax(0, 2.4fr) minmax(0, 1.1fr) 90px 60px 110px 130px 110px 64px; border: 1px solid var(--pj-line); border-radius: 12px; background: #fff; overflow: hidden; }
  .rpt-head, .rpt-row, .rpt-grp > summary { display: grid; grid-template-columns: var(--rpt-cols); align-items: center; column-gap: 12px; padding: 0 14px; }
  .rpt-head { height: 44px; border-bottom: 1px solid var(--pj-line); font-size: 11.5px; color: var(--pj-ink-2); }
  .rpt .is-num { text-align: right; justify-self: stretch; }
  .rpt .is-end { justify-self: end; }
  .rpt-grp > summary { height: 50px; border-bottom: 1px solid var(--pj-line-2); background: #f6f7f4; cursor: pointer; list-style: none; }
  .rpt-grp > summary::-webkit-details-marker { display: none; }
  .rpt-grp > summary .rpt-gname { grid-column: 2 / span 6; display: flex; align-items: baseline; gap: 10px; }
  .rpt-grp > summary .rpt-gname b { font-size: 14px; font-weight: 500; }
  .rpt-grp > summary .rpt-gname small { font-size: 12px; color: var(--pj-muted); }
  .rpt-gsum { grid-column: 8; text-align: right; font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
  .rpt-nr { font-size: 12px; color: var(--pj-faint); font-variant-numeric: tabular-nums; }
  .rpt-grp > summary .rpt-nr { color: var(--pj-muted); }
  .rpt-row { min-height: 52px; border-bottom: 1px solid var(--pj-line-2); font-size: 13.5px; }
  .rpt-row:hover { background: #fbfcfa; }
  .rpt-row.is-pending { opacity: 0.45; pointer-events: none; }
  .rpt-name { padding: 8px 0; color: var(--pj-ink); overflow-wrap: anywhere; }
  .rpt-where { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--pj-ink-2); }
  .rpt-unit, .rpt-type { color: var(--pj-ink-2); }
  .rpt-price { font-variant-numeric: tabular-nums; }
  .rpt-price small { margin-left: 4px; color: var(--pj-muted); }
  .rpt-sum { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .rpt-qty { width: 72px; height: 32px; padding: 0 8px; border: 1px solid transparent; border-radius: 7px; background: transparent; font: inherit; font-size: 13.5px; text-align: right; font-variant-numeric: tabular-nums; color: var(--pj-ink); }
  .rpt-qty:hover { border-color: var(--pj-line); background: #fff; }
  .rpt-qty:focus { outline: none; border-color: #b9dcc8; background: #fff; box-shadow: 0 0 0 3px rgba(58, 136, 116, 0.14); }
  .rpt-x { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--pj-line); border-radius: 7px; background: #fff; color: var(--pj-muted); cursor: pointer; }
  .rpt-x:hover { border-color: #efc9c4; background: #fdf2f2; color: #b4453a; }
  .rpt-x .material-symbols-outlined { font-size: 16px; }
  .rpt-empty { margin: 0; padding: 24px 14px; font-size: 13px; color: var(--pj-muted); }
  .rpt-foot { display: flex; justify-content: space-between; gap: 24px; margin-top: 12px; padding: 16px 18px; border: 1px solid var(--pj-line); border-radius: 12px; background: #fff; }
  .rpt-count { font-size: 12.5px; color: var(--pj-muted); }
  .rpt-sums { display: grid; gap: 8px; width: min(320px, 100%); margin: 0; font-size: 13px; }
  .rpt-sums > div { display: flex; justify-content: space-between; gap: 16px; }
  .rpt-sums dt { color: var(--pj-ink-2); } .rpt-sums dd { margin: 0; font-variant-numeric: tabular-nums; }
  .rpt-sums .is-total { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--pj-line); font-weight: 500; }
  .rpt-sums .is-pay { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--pj-line); font-weight: 500; }
  .rpt-sums .is-pay dd { font-size: 18px; }
}
@media (min-width: 1024px) {
  /* Kompaktare topp (ägarens bild): summan och Skapa offert bredvid varandra. */
  .phead .phead-row { padding: 18px 22px 16px; align-items: center; }
  .phead .phead-kr { display: flex; align-items: center; gap: 20px; align-self: center; }
  .phead .phead-kr > form { display: contents; }
  .phead .phead-kr-sum > b { font-size: 30px; }
  .phead .phead-btn { margin-top: 0; }
  .phead .poffer { min-height: 58px; padding-top: 10px; padding-bottom: 10px; }
}
@media (min-width: 1024px) {
  /* Tabellen som i bilderna: kolumnen Kunden ser, textfält som ser ut som text, lägg-till-rad och summeringen i samma ruta. */
  .rpt { --rpt-cols: 52px minmax(0, 2.6fr) minmax(0, 1fr) 80px 56px 104px 124px 104px 96px 56px; }
  .rpt .is-mid { justify-self: center; }
  .rpt-grp > summary .rpt-gname { grid-column: 2 / span 6; }
  .rpt-grp > summary { height: 48px; border-top: 1px solid var(--pj-line-2); background: #f3f5f1; }
  .rpt-in { width: 100%; height: 32px; padding: 0 8px; margin-left: -8px; border: 1px solid transparent; border-radius: 7px; background: transparent; font: inherit; font-size: 13.5px; color: var(--pj-ink); }
  .rpt-in:hover { border-color: var(--pj-line); background: #fff; }
  .rpt-in:focus { outline: none; border-color: #b9dcc8; background: #fff; box-shadow: 0 0 0 3px rgba(58, 136, 116, 0.14); }
  .rpt-qty.rpt-in { width: 72px; margin-left: 0; text-align: right; font-variant-numeric: tabular-nums; }
  .rpt-name { display: grid; gap: 1px; }
  .rpt-name small { font-size: 11px; color: var(--pj-muted); }
  .rpt-eye { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border: 0; border-radius: 999px; background: #e3f1e8; color: var(--pj-leaf-dark); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; }
  .rpt-eye:hover { background: #d4eadc; }
  .rpt-eye.is-off { background: #eceee9; color: var(--pj-muted); }
  .rpt-row.is-hidden .rpt-name, .rpt-row.is-hidden .rpt-sum { color: var(--pj-muted); }
  .rpt-addrow { padding: 10px 14px 12px 76px; border-bottom: 1px solid var(--pj-line-2); }
  .rpt-add { height: 32px; padding: 0 12px; border: 1px dashed #b9cfc2; border-radius: 8px; background: transparent; font: inherit; font-size: 12.5px; color: var(--pj-leaf-dark); cursor: pointer; }
  .rpt-add:hover { background: #f2f8f4; border-style: solid; }
  .rpt-foot { margin: 0; padding: 18px 20px 20px; border: 0; border-radius: 0; background: transparent; }
  .rpt-count { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--pj-muted); }
  .rpt-sums { width: min(340px, 100%); }
  .rpt-disc dd { display: flex; align-items: center; gap: 18px; }
  .rpt-pct { display: inline-flex; align-items: center; gap: 4px; color: var(--pj-muted); }
  .rpt-pct .rpt-in { width: 52px; margin: 0; text-align: right; }
  .rpt-disc em, .rpt-sums em { font-style: normal; color: #b7791f; }
  .rpt-sums .is-pay dd { font-family: Newsreader, Georgia, serif; font-size: 22px; font-weight: 500; }
}
@media (min-width: 1024px) { .rpt { --rpt-cols: 44px minmax(0, 3.2fr) minmax(0, 1fr) 72px 48px 96px 118px 96px 88px 52px; column-gap: 10px; } .rpt-head, .rpt-row, .rpt-grp > summary { column-gap: 10px; } }
@media (min-width: 1024px) { .rpt-sums dd, .rpt-disc em { white-space: nowrap; } .rpt-disc { align-items: center; } }
@media (min-width: 1024px) {
  /* Markera rader (ägarens bild): kryssrutor först i raden, och en grön list som står kvar överst vid scroll. */
  .rpt { --rpt-cols: 22px 40px minmax(0, 3.2fr) minmax(0, 1fr) 72px 48px 96px 118px 96px 88px 52px; }
  .rpt-grp > summary .rpt-gname { grid-column: 3 / span 6; }
  .rpt-gsum { grid-column: 9; }
  .rpt-addrow { padding-left: 96px; }
  .rpt-cb { appearance: none; -webkit-appearance: none; display: grid; place-items: center; width: 18px; height: 18px; margin: 0; padding: 0; border: 1.5px solid #b9c4bc; border-radius: 5px; background: #fff; cursor: pointer; }
  .rpt-cb:hover { border-color: var(--pj-leaf); }
  .rpt-cb:checked, .rpt-cb[aria-pressed="true"] { border-color: #1f5f4c; background: #1f5f4c; }
  .rpt-cb:checked::after, .rpt-cb[aria-pressed="true"]::after { content: ''; width: 9px; height: 5px; margin-top: -2px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg); }
  .rpt-cb:indeterminate, .rpt-cb[aria-pressed="mixed"] { border-color: #1f5f4c; background: #7fa898; }
  .rpt-cb:indeterminate::after, .rpt-cb[aria-pressed="mixed"]::after { content: ''; width: 8px; height: 2px; border-radius: 1px; background: #fff; }
  .rpt-cb:focus-visible { outline: 2px solid var(--pj-leaf); outline-offset: 2px; }
  .rpt-row.is-selected { background: #eef6f0; }
  .rpt-multi { margin: -2px 0 0 4px; font-size: 12.5px; color: var(--pj-ink-2); }
  .rpt-multi button { padding: 0; border: 0; background: none; font: inherit; font-weight: 500; color: var(--pj-leaf-dark); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
  .rlist[data-view="table"] > .rpt-bulk:not([hidden]) { display: flex; }
  .rpt-bulk { position: sticky; top: 12px; z-index: 15; grid-column: 1 / -1; align-items: center; gap: 10px; min-height: 54px; margin-bottom: 8px; padding: 8px 12px 8px 16px; border-radius: 12px; background: #1f5f4c; color: #fff; box-shadow: 0 18px 40px -22px rgba(20, 40, 30, 0.6); animation: rpt-bulk-in 160ms cubic-bezier(0.22, 1, 0.36, 1) both; }
  .rpt-bulk b { font-size: 13.5px; font-weight: 500; white-space: nowrap; }
  .rpt-bulk-sep { width: 1px; height: 22px; margin: 0 4px; background: rgba(255, 255, 255, 0.25); }
  .rpt-bulk button { height: 34px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 8px; background: transparent; font: inherit; font-size: 13px; color: #fff; cursor: pointer; white-space: nowrap; }
  .rpt-bulk button:hover { background: rgba(255, 255, 255, 0.1); }
  .rpt-bulk button:disabled { opacity: 0.5; cursor: progress; }
  .rpt-bulk .rpt-bulk-clear { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; border: 0; }
  .rpt-bulk .rpt-bulk-clear .material-symbols-outlined { font-size: 16px; }
}
@keyframes rpt-bulk-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .rpt-bulk { animation: none; } }
@media (min-width: 1024px) { .rpt-head, .rpt-row, .rpt-grp > summary { padding: 0 20px; column-gap: 14px; } .rpt-head { height: 50px; } .rpt-row { min-height: 58px; } .rpt-name { padding: 12px 0; } .rpt-grp > summary { height: 54px; } .rpt-addrow { padding: 12px 20px 14px 108px; } .rpt-foot { padding: 22px 24px 24px; } }
@media (min-width: 1024px) { .rlist[data-view="table"] > .rpt-tools, .rlist[data-view="table"] > .rpt-bulk, .rlist[data-view="table"] > .rposts { margin-left: 14px; margin-right: 14px; } .rlist[data-view="table"] > .rposts { margin-bottom: 14px; } }
@media (min-width: 1024px) { .rpt-bulk { top: 56px; z-index: 40; } }
/* Direkt borttag: raden försvinner i samma bildruta; servern sparar i bakgrunden. */
/* !important: .rlist .rposts .rpt-row (display:grid) och mobilens tabellrad är mer specifika – raden stod kvar tills servern ritat om. */
.rpt-row.is-removed { display: none !important; }
.rpt-err { margin: 0; padding: 8px 12px; border: 1px solid #efc9c4; border-radius: 9px; background: #fdf2f2; font-size: 12.5px; color: #9b3a30; }
.rpt-row.is-adding { background: #f2f8f4; color: var(--pj-muted); animation: rpt-add-in 180ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.rpt-row.is-adding .rpt-sum { font-weight: 400; color: var(--pj-leaf-dark); }
@keyframes rpt-add-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .rpt-row.is-adding { animation: none; } }

/* Skapa offert (Offertinställningar, ägarens bild 2026-09-29): tre kort och en statusrad, över sidan. */
.op { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: calc(100dvh - 120px); overflow: hidden; padding: 0; border-radius: 18px; background: #fbfcfa; }
.op-head { display: flex; align-items: flex-start; gap: 16px; padding: 16px 20px 12px; border-bottom: 1px solid var(--pj-line-2); }
.op-head > div { flex: 1; min-width: 0; }
.op-head h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 16px; font-weight: 500; color: var(--pj-ink); }
.op-head p { margin: 4px 0 0; font-size: 12.5px; color: var(--pj-muted); }
.op-chip { padding: 2px 8px; border-radius: 6px; background: #eceee9; font-size: 11.5px; font-weight: 400; color: var(--pj-ink-2); }
.op-link { height: 32px; padding: 0 8px; border: 0; background: none; font: inherit; font-size: 12.5px; color: var(--pj-muted); cursor: pointer; }
.op-link:hover { color: #b4453a; }
.op-x { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #eef1ec; color: var(--pj-ink-2); cursor: pointer; }
.op-x:hover { background: #e3e8e2; }
.op-x .material-symbols-outlined { font-size: 18px; }
.op-err { margin: 10px 20px 0; padding: 8px 12px; border: 1px solid #efc9c4; border-radius: 9px; background: #fdf2f2; font-size: 12.5px; color: #9b3a30; }
.op-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr) minmax(0, 0.9fr); gap: 12px; align-items: start; padding: 12px; overflow-y: auto; overscroll-behavior: contain; }
.op-card { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--pj-line); border-radius: 14px; background: #fff; }
.op-card h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 500; color: var(--pj-ink); }
.op-card h3 small { font-size: 12px; font-weight: 400; color: var(--pj-muted); }
.op-step { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--pj-ink); color: #fff; font-size: 11px; }
.op-step.is-done { background: #1f5f4c; }
.op-step .material-symbols-outlined { font-size: 14px; }
.op-k { font-size: 10.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pj-ink-2); }
.op-k small { margin-left: 6px; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--pj-muted); }
.op-k b { margin-left: 8px; letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--pj-ink); }
.op-k.is-green { color: #1f5f4c; }
.op-sec { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.op-sec > small { font-size: 11.5px; color: var(--pj-muted); }
.op-recips { display: flex; flex-wrap: wrap; gap: 6px; }
.op-recips:empty { display: none; }
.op-recip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 6px 6px 10px; border: 1px solid var(--pj-line); border-radius: 10px; background: #f6f8f5; font-size: 12.5px; }
.op-recip small { display: block; font-size: 11px; color: var(--pj-muted); }
.op-recip b { font-weight: 500; }
.op-recip button { display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 6px; background: transparent; color: var(--pj-muted); cursor: pointer; }
.op-recip button .material-symbols-outlined { font-size: 15px; }
.op-add { display: grid; gap: 8px; }
.op-add-row { display: flex; gap: 8px; }
.op-add input, .op-select, .op-text { width: 100%; min-width: 0; height: 38px; padding: 0 12px; border: 1px solid var(--pj-line); border-radius: 9px; background: #f7f8f5; font: inherit; font-size: 13px; color: var(--pj-ink); }
.op-add input:focus, .op-select:focus, .op-text:focus { outline: none; border-color: #b9dcc8; background: #fff; box-shadow: 0 0 0 3px rgba(58, 136, 116, 0.14); }
.op-select.is-static { display: flex; align-items: center; }
.op-text { height: auto; min-height: 76px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
#offer-send-form { display: grid; gap: 10px; }
.op-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0 16px; border: 1px solid var(--pj-line); border-radius: 9px; background: #fff; font: inherit; font-size: 13px; color: var(--pj-ink); cursor: pointer; white-space: nowrap; }
.op-btn:hover { background: #f6f8f5; }
.op-btn.is-primary { border-color: #1f5f4c; background: #1f5f4c; color: #fff; }
.op-btn.is-primary:hover { background: #184d3e; }
.op-btn.is-primary:disabled { border-color: #9cc3b3; background: #9cc3b3; cursor: not-allowed; }
.op-btn.is-big { height: 44px; padding: 0 22px; font-size: 14px; }
.op-btn .material-symbols-outlined { font-size: 18px; }
.op-seg { display: inline-flex; padding: 3px; border-radius: 9px; background: #eef0ec; }
.op-seg button { height: 28px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; font: inherit; font-size: 12px; color: var(--pj-ink-2); cursor: pointer; }
.op-seg button.on { background: #fff; color: var(--pj-ink); box-shadow: 0 1px 3px rgba(23, 33, 26, 0.12); }
.op-seg.is-wide { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.op-seg.is-wide button { height: 34px; font-size: 13px; }
.op-total { display: grid; gap: 10px; padding: 14px; border: 1px solid #d9e8df; border-radius: 12px; background: linear-gradient(180deg, #f4faf6, #fff); }
.op-total-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.op-big { display: block; margin-top: 2px; font-family: Newsreader, Georgia, serif; font-size: 30px; font-weight: 500; line-height: 1.1; color: var(--pj-ink); font-variant-numeric: tabular-nums; }
.op-total dl { display: grid; gap: 3px; margin: 2px 0 0; font-size: 12px; }
.op-total dl > div { display: flex; justify-content: space-between; gap: 14px; }
.op-total dt { color: var(--pj-muted); } .op-total dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; }
/* ROT: avdraget i dl:en (samma bärnsten som kundvyns ROT-rad) och det kunden betalar under totalen. Raden behåller sin
   plats när ROT är av (visibility, inte display) – brytaren under flyttar inte när man slår om. Ingen rörelse. */
.op-total dd.op-rot-dd { color: #a8651a; white-space: nowrap; }
.op-pay { display: block; margin-top: 4px; font-size: 13px; color: var(--pj-muted); }
.op-pay b { margin-left: 4px; font-size: 14px; font-weight: 500; color: var(--pj-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.op-pay.is-off { visibility: hidden; }
.op-rot-persons { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; font-size: 12.5px; color: var(--pj-ink-2); }
.op-rot-persons[hidden] { display: none; }
.op-rot-persons small { flex-basis: 100%; font-size: 11.5px; color: #a8651a; }
.op-rot-persons small[hidden] { display: none; }
@media (max-width: 767px) { .op-rot-persons .op-seg button { height: 38px; padding: 0 14px; } }
.op-bar { display: flex; height: 6px; overflow: hidden; border-radius: 3px; background: #eef1ec; }
.op-bar i { display: block; height: 100%; transition: width 160ms ease; }
.is-labor { background: #1f5f4c; } .is-material { background: #8fc2ae; } .is-other { background: #d9a64a; }
.op-legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.op-legend small { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--pj-muted); }
.op-legend small i { width: 8px; height: 8px; border-radius: 2px; }
.op-legend b { font-size: 13.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
.op-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.op-steps.is-two { grid-template-columns: 1fr 1fr; }
.op-stepper { display: grid; gap: 4px; padding: 8px 10px; border: 1px solid var(--pj-line); border-radius: 10px; background: #fff; font-size: 11.5px; color: var(--pj-muted); }
.op-stepper-row { display: flex; align-items: center; gap: 6px; }
.op-stepper-row button, .op-days button { display: grid; place-items: center; flex: 0 0 26px; width: 26px; height: 26px; border: 1px solid var(--pj-line); border-radius: 7px; background: #fff; font: inherit; font-size: 15px; color: var(--pj-ink-2); cursor: pointer; }
.op-stepper-row button:hover, .op-days button:hover { background: #f2f5ef; }
.op-num { display: flex; flex: 1; align-items: baseline; justify-content: flex-end; gap: 2px; }
.op-num input { width: 100%; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 15px; font-weight: 500; text-align: right; color: var(--pj-ink); font-variant-numeric: tabular-nums; }
.op-num input:focus { outline: none; }
.op-num em { font-style: normal; font-size: 12px; color: var(--pj-muted); }
.op-stepper select { height: 26px; border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 500; color: var(--pj-ink); }
.op-stepper.is-switch { grid-template-columns: 1fr auto; align-items: center; }
.op-stepper.is-switch b { grid-column: 1; font-size: 14px; font-weight: 500; color: var(--pj-ink); }
.op-stepper.is-switch .sw { grid-column: 2; grid-row: 1 / span 2; }
.op-other { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--pj-line); border-radius: 12px; }
.op-other-head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--pj-line-2); }
.op-other-head b { font-size: 13.5px; font-weight: 500; }
.op-other-head small { display: block; font-size: 11.5px; color: var(--pj-muted); }
/* "Övrigt per rum" på: raden säger att kunden ser beloppen i rummen (följer växeln direkt, ingen omritning). */
.op-other-head .op-spread-note { display: none; color: var(--pj-ok, #1f6b4f); }
#offer-settings:has([data-op-option="customer_spread_common_costs"].on) .op-other-head .op-spread-note { display: block; }
.op-days { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: 9px; background: #f2f4f0; font-size: 12px; color: var(--pj-muted); }
.op-days input { width: 34px; border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 500; text-align: center; color: var(--pj-ink); }
.op-other-sum { text-align: right; } .op-other-sum b { font-size: 15px; font-variant-numeric: tabular-nums; }
.op-costs { display: grid; margin: 0; padding: 0; list-style: none; }
.op-cost { display: grid; grid-template-columns: 20px minmax(0, 1fr) 70px 48px 90px 24px; align-items: center; gap: 8px; min-height: 36px; border-bottom: 1px solid var(--pj-line-2); font-size: 13px; }
.op-cost:last-child { border-bottom: 0; }
.op-cost.is-off { display: none; }
.op-cost-ok { display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid #b9dcc8; border-radius: 50%; font-size: 12px; color: var(--pj-leaf); }
.op-cost-rate { text-align: right; font-variant-numeric: tabular-nums; color: var(--pj-ink-2); }
.op-cost small { font-size: 11.5px; color: var(--pj-muted); }
.op-cost-total { text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
.op-cost-x { display: grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 6px; background: transparent; color: var(--pj-faint); cursor: pointer; }
.op-cost-x:hover { background: #fdf2f2; color: #b4453a; }
.op-cost-x .material-symbols-outlined { font-size: 15px; }
.op-add-cost summary { list-style: none; cursor: pointer; font-size: 12.5px; font-weight: 500; color: var(--pj-leaf-dark); }
.op-add-cost summary::-webkit-details-marker { display: none; }
.op-add-menu { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.op-add-menu button { height: 30px; padding: 0 10px; border: 1px dashed #b9cfc2; border-radius: 8px; background: #fff; font: inherit; font-size: 12.5px; color: var(--pj-leaf-dark); cursor: pointer; }
.op-calc { border-top: 1px solid var(--pj-line-2); padding-top: 10px; }
.op-calc summary { display: inline-flex; align-items: center; gap: 2px; list-style: none; cursor: pointer; font-size: 12.5px; font-weight: 500; color: var(--pj-leaf-dark); }
.op-calc summary::-webkit-details-marker { display: none; }
.op-calc summary .material-symbols-outlined { font-size: 16px; transition: transform 160ms ease; }
.op-calc[open] summary .material-symbols-outlined { transform: rotate(180deg); }
.op-calc-list { display: grid; gap: 4px; margin: 10px 0 0; font-size: 12.5px; }
.op-calc-list > div { display: flex; justify-content: space-between; } .op-calc-list dt { color: var(--pj-muted); } .op-calc-list dd { margin: 0; font-variant-numeric: tabular-nums; }
.op-calc-list .is-total { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--pj-line-2); font-weight: 500; }
.op-toggles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; }
.op-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; font-size: 13px; color: var(--pj-ink); }
.op-note { font-size: 11.5px; color: var(--pj-muted); }
.op-comment { display: contents; }
.op-attach .qsec h4 { margin: 0 0 8px; font-size: 10.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pj-ink-2); }
.op-attach .qattach { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.op-foot { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--pj-line); background: #fff; }
.op-pill { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px 0 8px; border: 1px solid var(--pj-line); border-radius: 999px; background: #fff; font-size: 12.5px; color: var(--pj-ink); white-space: nowrap; }
.op-pill i { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #c9d1cb; }
.op-pill.is-ok i { background: #1f5f4c; box-shadow: inset 0 0 0 4px #1f5f4c; }
.op-pill.is-ok { border-color: #cfe3d8; background: #f2f8f4; }
.op-pill.is-muted { color: var(--pj-muted); }
.op-foot-sum { display: grid; margin-left: auto; margin-right: 8px; text-align: right; }
.op-foot-sum small { font-size: 11px; color: var(--pj-muted); }
.op-foot-sum b { font-family: Newsreader, Georgia, serif; font-size: 22px; font-weight: 500; line-height: 1.1; font-variant-numeric: tabular-nums; }
.op { max-height: var(--op-max, calc(100dvh - 120px)); }

/* Leverans 1 (handoff D1/D2, UX-packen 2026-09-29): backdrop bakom huvudet, drill-rörelse, markerade kort,
   fel-läge på Mottagare, klickbara chips/pills, 3/2/1 kolumner och helskärm på telefon. */
.op { display: flex; flex-direction: column; max-height: var(--op-max, calc(100dvh - 120px)); }
.op > .op-grid { flex: 1 1 auto; min-height: 0; padding-bottom: 16px; }
.op > .op-err { margin: 12px 12px 0; }
.poset-backdrop { position: fixed; inset: 0; z-index: 25; background: rgba(15, 23, 20, 0.4); opacity: 0; pointer-events: none; transition: opacity 180ms ease; }
.poset-backdrop.is-on { opacity: 1; pointer-events: auto; }
.project-frame > .phead { position: relative; z-index: 30; }
.poset-slot { z-index: 28; }
.poset-slot > .poset { transition: opacity 220ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.poset-slot.is-entering > .poset { opacity: 0; transform: translateY(-6px); }
.poset-slot.is-leaving > .poset { opacity: 0; transform: translateY(-4px); transition-duration: 160ms; }
/* visibility, inte bara pointer-events: composerns fält och knappar har egna pointer-events: auto och fångade
   annars klicken på statusraden (Skapa offert, Kundens vy) genom den osynliga composern. */
html.zimla-offer-panel-open .zimla-dock { opacity: 0; visibility: hidden; pointer-events: none; }
[data-op-card] { transition: box-shadow 300ms ease, background-color 300ms ease, border-color 300ms ease; }
[data-op-card].is-marked { box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.22); background-color: #f4fbf6; }
.op-card.is-error { border-color: #fda4af; box-shadow: 0 0 0 4px #fff1f2; }
.op-req { margin-left: auto; padding: 2px 8px; border-radius: 6px; background: #fff1f2; font-size: 11px; font-weight: 500; color: #be123c; }
.op-field-err { margin: 0; font-size: 12.5px; color: #be123c; }
.op-card.is-error .op-add input { border-color: #fda4af; }
/* Remsans chips är knappar som leder till sitt kort. */
.poffer-facts > button { display: grid; gap: 2px; min-width: 0; padding: 6px 13px 7px; border: 0; border-left: 1px solid var(--pj-line); background: transparent; font: inherit; text-align: left; cursor: pointer; }
.poffer-facts > button:first-child { border-left: 0; }
.poffer-facts > button:hover { background: #f4f7f3; }
.poffer-facts > button:focus-visible { outline: 2px solid #16a34a; outline-offset: -2px; }
.poffer-facts b i.is-bad { background: #e11d48; }
.poffer-facts > button.is-missing b { color: #be123c; }
.poffer-chev { transition: transform 150ms ease; }
[data-offer-settings-toggle][aria-expanded="true"] .poffer-chev { transform: rotate(180deg); }
.phead .phead-kr-sum > b { font-family: Newsreader, Georgia, serif; }
@media (min-width: 1024px) {
  .phead .poffer-facts { border: 1px solid var(--pj-line); border-radius: 9px; background: #fff; overflow: hidden; }
  .phead .poffer-facts > button { padding: 6px 13px 7px; }
}
/* Statusraden. */
.op-foot { flex-wrap: wrap; row-gap: 8px; }
.op-foot-title { display: inline-flex; align-items: center; gap: 8px; margin-right: 4px; font-size: 14px; font-weight: 500; color: var(--pj-ink); white-space: nowrap; }
.op-pills { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.op-pill { font: inherit; font-size: 12.5px; cursor: pointer; }
.op-pill i { position: relative; flex: 0 0 16px; box-shadow: none !important; }
.op-pill i::after { position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; font-style: normal; font-weight: 600; color: #fff; }
.op-pill.is-ok i { background: #16a34a; } .op-pill.is-ok i::after { content: '✓'; }
.op-pill.is-bad { border-color: #fecdd3; background: #fff1f2; color: #be123c; } .op-pill.is-bad i { background: #e11d48; } .op-pill.is-bad i::after { content: '!'; }
.op-pill.is-warn { border-color: #fde68a; background: #fffbeb; color: #92400e; } .op-pill.is-warn i { background: #f59e0b; } .op-pill.is-warn i::after { content: '?'; }
.op-foot .op-link { height: 38px; }
.op-foot form { display: contents; }
/* Skicka-dialogen. */
.op-confirm { width: min(440px, calc(100vw - 32px)); padding: 20px; border: 0; border-radius: 16px; background: #fff; box-shadow: 0 30px 80px -20px rgba(20, 30, 25, 0.35); max-height: calc(100dvh - 32px); overflow: auto; }
/* Skicka med: e-post, sms eller båda (radioknappar i segmentet, piltangenter fungerar). */
.op-via { width: 100%; margin: 0 0 10px; }
.op-via label { position: relative; display: grid; place-items: center; height: 34px; border-radius: 7px; font-size: 13px; color: var(--pj-ink-2); cursor: pointer; }
.op-via input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.op-via label:has(:checked) { background: #fff; color: var(--pj-ink); box-shadow: 0 1px 3px rgba(23, 33, 26, 0.12); }
.op-via label:has(:focus-visible) { outline: 2px solid var(--pj-green, #1f6b4f); outline-offset: 1px; }
.op-via-phone { display: grid; gap: 4px; margin: 0 0 10px; font-size: 12px; color: var(--pj-ink-2); }
.op-via-phone[hidden] { display: none; }
.op-via-phone input { height: 38px; padding: 0 12px; border: 1px solid #dfe3dc; border-radius: 9px; font: inherit; font-size: 14px; color: var(--pj-ink); }
.op-via-phone input.is-error { border-color: #c2412d; }
.op-confirm-err { margin: 0 0 10px; font-size: 12.5px; color: #b3261e; }
.op-confirm-err[hidden] { display: none; }
.op-confirm dl > [hidden] { display: none; }
@media (max-width: 767px) { .op-confirm :is(.op-via label, .op-btn) { min-height: 44px; } }
.op-confirm::backdrop { background: rgba(15, 23, 20, 0.45); }
.op-confirm[open] { animation: op-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.op-confirm h3 { margin: 0 0 12px; font-family: Newsreader, Georgia, serif; font-size: 20px; font-weight: 500; }
.op-confirm dl { display: grid; gap: 6px; margin: 0; padding: 12px; border-radius: 10px; background: #f6f8f5; font-size: 13px; }
.op-confirm dl > div { display: flex; justify-content: space-between; gap: 12px; } .op-confirm dt { color: var(--pj-muted); } .op-confirm dd { margin: 0; font-weight: 500; text-align: right; overflow-wrap: anywhere; }
.op-confirm-note { margin: 12px 0 0; font-size: 12.5px; color: var(--pj-muted); }
.op-confirm-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.calc-pop[open] { animation: op-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes op-in { from { opacity: 0; transform: translateY(4px); } }
/* Kolumnerna följer panelens egen bredd – inte fönstrets – så att sidomeny, Zimla AI och smala fönster aldrig
   klämmer tre kolumner: 3 från 1140 px panel, 2 från 700 px (Mottagare + Innehåll vänster, Pris höger i full höjd),
   annars 1. Korten anpassar sitt innehåll efter sin egen bredd. */
.op { container: op / inline-size; }
.op-card { container: opcard / inline-size; }
@container op (min-width: 1140px) { .op-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr) minmax(0, 0.9fr); } }
@container op (min-width: 700px) and (max-width: 1139.98px) {
  .op-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "recip price" "show price"; }
  .op-grid > [data-op-card="recipient"] { grid-area: recip; }
  .op-grid > [data-op-card="price"] { grid-area: price; }
  .op-grid > [data-op-card="show"] { grid-area: show; }
}
@container op (max-width: 699.98px) { .op-grid { grid-template-columns: minmax(0, 1fr); } }
.op-sec { flex-wrap: wrap; row-gap: 6px; }
@container opcard (max-width: 460px) {
  .op-cost { grid-template-columns: 20px minmax(0, 1fr) auto 24px; grid-template-areas: "ok name total x" ". rate rate ."; row-gap: 0; padding: 6px 0; }
  .op-cost-ok { grid-area: ok; } .op-cost-name { grid-area: name; } .op-cost-total { grid-area: total; } .op-cost-x { grid-area: x; }
  .op-cost-rate { grid-area: rate; text-align: left; font-size: 12px; } .op-cost > small { display: none; }
  .op-other-head { grid-template-columns: minmax(0, 1fr) auto; } .op-days { grid-column: 1 / -1; justify-self: start; }
}
@container opcard (max-width: 400px) {
  .op-toggles { grid-template-columns: minmax(0, 1fr); }
  .op-attach .qattach { grid-template-columns: minmax(0, 1fr); }
  .op-total-top { flex-wrap: wrap; }
}
@container opcard (max-width: 360px) {
  .op-steps { grid-template-columns: minmax(0, 1fr); }
  .op-steps.is-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .op-add-row { flex-wrap: wrap; } .op-add-row > .op-btn { flex: 1 1 100%; }
  .op-seg.is-wide button { padding: 0 4px; }
}
/* Låg skärm: panelen lägger sig över projekthuvudet (detail.html size) och får minst ~560 px. */
.poset-slot.is-over { z-index: 31; }
/* Telefon: panelen är en egen helskärmsvy (drill), statusraden sticky längst ner med Skapa offert i full bredd. */
@media (max-width: 767px) {
  .poset-slot:has(> .op), .poset-slot { position: fixed !important; inset: 0 !important; top: 0 !important; z-index: 60; }
  .poset-slot > .op { height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; }
  .op .op-grid { padding: 10px; }
  .op-foot { position: sticky; bottom: 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
  .op-foot-title, .op-foot-sum { display: none; }
  .op-pills { flex-wrap: nowrap; width: 100%; overflow-x: auto; }
  .op-foot > .op-btn.is-primary { order: 5; flex: 1 1 100%; height: 48px; }
  .op-stepper-row button, .op-days button { flex-basis: 40px; width: 40px; height: 40px; }
  .op .sw { transform: scale(1.1); }
  .op-cost-x { width: 36px; height: 36px; } .op-recip button { width: 36px; height: 36px; } .op-seg button { height: 38px; } .op-x { width: 44px; height: 44px; }
  .calc-pop { width: 100vw; height: 100dvh; max-width: 100vw; border-radius: 0; }
  .poffer-facts { flex-wrap: nowrap !important; overflow-x: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .poset-slot > .poset, .poset-backdrop, [data-op-card] { transition: none; }
  .op-confirm[open], .calc-pop[open] { animation: none; }
  [data-op-card].is-marked { box-shadow: 0 0 0 2px #16a34a; }
}
/* Statusraden på en rad: checklistan krymper och scrollar i sidled i stället för att bryta raden. */
.op-foot { flex-wrap: nowrap; }
.op-pills { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.op-pills::-webkit-scrollbar { display: none; }
.op-foot > * { flex-shrink: 0; }
.op-foot > .op-pills { flex-shrink: 1; }
@media (max-width: 1279px) { .op-foot-title { display: none; } }
/* Datorn: checklistan bryts i rader i stället för att gömmas i en sidledsscroll – varningarna (val kvar, osäkra
   frågor, mottagare saknas) måste synas. Ryms den inte bredvid knapparna hamnar den på egen rad ovanför dem. */
@media (min-width: 1024px) {
  .op-foot { flex-wrap: wrap; row-gap: 8px; }
  .op-foot > .op-pills { flex: 1 1 100%; order: -1; flex-wrap: wrap; overflow: visible; }
}
@media (min-width: 1800px) { .op-foot > .op-pills { flex-basis: 520px; order: 0; } }
/* Under 1024 px: panelen är en egen helskärmsvy, appens topprad och flikrad göms medan den är öppen. */
@media (max-width: 1023px) {
  .poset-slot { position: fixed !important; inset: 0 !important; top: 0 !important; z-index: 80; }
  .poset-slot > .op { height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; }
  html.zimla-offer-panel-open [data-zimla-global-topbar], html.zimla-offer-panel-open [data-zimla-mobile-dock] { visibility: hidden; }
  .op-foot { flex-wrap: wrap; position: sticky; bottom: 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
  .op-foot > .op-pills { flex: 1 1 100%; order: -1; }
  .op-foot-sum { margin-left: 0; }
  .op-foot > .op-btn.is-primary { margin-left: auto; }
  .poset-backdrop { display: none; }
}
@media (max-width: 767px) {
  .op-foot > .op-btn.is-primary { order: 5; flex: 1 1 100%; margin-left: 0; }
}
.op-foot .op-link { white-space: nowrap; }

/* ── Leverans 2 (handoff D3): rumskortet enligt prototypen ────────────────────────────────────────────
   Kortet: foto 7,5 rem (status + Bilder + …), namn/pris, "N moment · Mall", m²-chip · Mallar · Frågor, sök,
   momentlista 17 rem med egen scroll, Avancerad kalkyl längst ner. Ingen absolut positionering längre –
   listan har fast höjd, så alla kort blir lika höga. Mobilen (< 1024 px) rörs inte här. */
@media (min-width: 1024px) {
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rrow,
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rrow:last-of-type { display: block; height: auto; padding: 8px; border: 1px solid #f4f4f5; border-radius: 16px; background: #fff; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rrow > .rrow-sum { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "pic pic" "name total" "meta meta" "dims acts" "search search"; gap: 0 8px; padding: 0; list-style: none; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rrow > .rrow-sum::-webkit-details-marker { display: none; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rcard-groups, .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rcard-more { display: none !important; }
  /* Foto med status och Bilder. */
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rrow-pic { grid-area: pic; position: relative; height: 7.5rem; overflow: hidden; border-radius: 12px; background: #f3f4f2; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rrow-pic > .rrow-img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: 0; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rrow-sum > .rchip { position: absolute; top: 16px; left: 16px; z-index: 2; height: 20px; padding: 0 8px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.95); font-size: 11.2px; color: #047857; box-shadow: none; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rrow-sum > .rchip::before { content: ''; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: #16a34a; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rrow-sum > .rchip.is-new { color: #3e4a3d; } .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rrow-sum > .rchip.is-new::before { background: #a1a1aa; }
  .rrow-photos { position: absolute; top: 8px; right: 38px; display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.95); font: inherit; font-size: 11.2px; font-weight: 500; color: #191c1b; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); cursor: pointer; }
  .rrow-photos .material-symbols-outlined { font-size: 15px; }
  .rrow-photos small { color: #6f7c70; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rrow-pic__btn { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.95); color: #3e4a3d; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rrow-pic__btn .material-symbols-outlined { font-size: 18px; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rrow-pic__edit { display: none; }
  /* Namn, pris, meta, m²-chip. */
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rrow-name { display: contents; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rrow-rename { grid-area: name; min-width: 0; padding: 10px 4px 0; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rrow-rename strong { display: block; min-width: 0; font-size: 14.4px; font-weight: 500; line-height: 1.3; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rrow-rename__btn { display: flex; align-items: center; gap: 2px; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rrow-name > small { grid-area: meta; min-width: 0; padding: 0 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11.2px; color: #6f7c70; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rrow-sum > .rmetrics { grid-area: total; align-self: start; padding: 8px 4px 0 0; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rrow-sum > .rmetrics .is-total b { font-family: Newsreader, Georgia, serif; font-size: 18.4px; font-weight: 400; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rrow-dim { grid-area: dims; justify-self: start; display: inline-flex; align-items: center; gap: 4px; max-width: 100%; height: 22px; margin: 6px 0 0 4px; padding: 0 6px; overflow: hidden; border: 1px solid #bbf7d0; border-radius: 6px; background: #ecfdf5; font: inherit; font-size: 11.2px; font-weight: 500; white-space: nowrap; color: #191c1b; cursor: pointer; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rrow-dim .rrow-dim-ico { font-size: 13px; color: #16a34a; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rrow-dim::after { content: 'edit'; font-family: 'Material Symbols Outlined'; font-size: 12px; color: #16a34a; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rrow-dim.is-missing { border-color: #fde68a; background: #fffbeb; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rrow-dim em { font-style: normal; font-weight: 400; color: #92400e; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rcard-acts { grid-area: acts; display: flex; gap: 6px; margin-top: 6px; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rcard-acts .rhub-btn { height: 22px; min-height: 0; padding: 0 6px; border: 1px solid #e4e4e7; border-radius: 6px; font-size: 11.2px; font-weight: 500; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rcard-acts .rhub-btn .material-symbols-outlined { display: none; }
  /* Notisknappen är bara en ikon (Så är rummet räknat): den ena ikonen som syns på kortets knapprad. */
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rcard-acts .rcard-notes { display: inline-grid; place-items: center; width: 22px; padding: 0; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rcard-acts .rcard-notes .material-symbols-outlined { display: inline-block; font-size: 15px; }
  .rcard-qn { display: inline-grid; place-items: center; min-width: 16px; height: 16px; margin-left: 2px; padding: 0 4px; border-radius: 999px; background: #f59e0b; font-size: 10px; font-weight: 500; color: #fff; }
  .rcard-qn[hidden] { display: none; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rcard-search { grid-area: search; height: 30px; margin: 8px 0 0; padding: 0 2px 0 8px; border: 1px solid #f4f4f5; border-radius: 10px; background: #f9faf8; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rcard-search input { font-size: 12.2px; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rcard-mic { width: 24px; height: 24px; border-radius: 6px; background: #ecfdf5; color: #047857; -webkit-touch-callout: none; user-select: none; touch-action: none; }
  /* Kroppen: momentlistan (fast höjd, egen scroll) och Avancerad kalkyl. Frågor-rutan (.is-q) behåller sina regler. */
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rrow[open]:not(.is-q) > .rbody { position: static; display: flex; flex-direction: column; height: auto; padding: 0; overflow: visible; border: 0; background: none; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rrow:not(.is-q) > .rbody .rbody-left { display: block; padding: 0; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rrow:not(.is-q) > .rbody .rqpanel { display: none; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rrow:not(.is-q) > .rbody .rbody-right { display: block; height: 17rem; margin: 12px -4px 0; padding: 8px 4px 0; overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid #f4f4f5; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rrow:not(.is-q) > .rbody { display: flex; flex-direction: column; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rrow:not(.is-q) > .rbody .rbody-right { order: 1; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rrow:not(.is-q) > .rbody .rbody-left { order: 2; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rrow > .rbody .rlinks { position: static; display: flex; gap: 6px; margin: 8px 0 0; padding: 0; border: 0; background: none; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rrow > .rbody .rlinks .rlinks-main { flex: 1; height: 32px; border-radius: 10px; font-size: 12.5px; font-weight: 500; }
  /* Grupp: namn · antal · summa. */
  .rlist[data-rlist]:not([data-view="table"]) .rbody-right .rgrp { margin-bottom: 8px; }
  .rlist[data-rlist]:not([data-view="table"]) .rbody-right .rgrp[hidden] { display: none; }
  .rlist[data-rlist]:not([data-view="table"]) .rbody-right .rgrp > summary.rgrp-h { display: flex; align-items: center; gap: 6px; min-height: 0; padding: 4px 6px; border-radius: 6px; background: #f3f4f2; list-style: none; pointer-events: none; }
  .rlist[data-rlist]:not([data-view="table"]) .rbody-right .rgrp > summary .rrow-chev { display: none; }
  .rlist[data-rlist]:not([data-view="table"]) .rbody-right .rgrp-name { display: flex; align-items: baseline; gap: 6px; flex: 1; min-width: 0; }
  .rlist[data-rlist]:not([data-view="table"]) .rbody-right .rgrp-name strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #191c1b; }
  .rlist[data-rlist]:not([data-view="table"]) .rbody-right .rgrp-name small { display: inline; font-size: 10.5px; color: #a1a1aa; }
  .rlist[data-rlist]:not([data-view="table"]) .rbody-right .rgrp-sum { font-size: 11.5px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
  /* Momentrad: plupp/× · namn · penna · antal. */
  .rlist[data-rlist]:not([data-view="table"]) .rbody-right .rmoms { padding: 2px 0 0; }
  .rlist[data-rlist]:not([data-view="table"]) .rbody-right .rmom { display: flex; align-items: flex-start; gap: 6px; min-height: 22px; padding: 2px 6px 2px 2px; border-radius: 6px; font-size: 11.5px; line-height: 1.375; }
  .rlist[data-rlist]:not([data-view="table"]) .rbody-right .rmom.is-removed { display: none; }
  .rlist[data-rlist]:not([data-view="table"]) .rbody-right .rmom:hover, .rlist[data-rlist]:not([data-view="table"]) .rbody-right .rmom:focus-within { background: #f3f4f2; }
  .rmom-lead { position: relative; display: grid; place-items: center; flex: 0 0 18px; width: 18px; height: 18px; }
  .rmom-dot { width: 4px; height: 4px; border-radius: 50%; background: #16a34a; }
  .rmom-x, .rmom-edit { display: grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: #71717a; opacity: 0; cursor: pointer; }
  .rmom-x { position: absolute; inset: 0; }
  .rmom-x .material-symbols-outlined { font-size: 14px; } .rmom-edit .material-symbols-outlined { font-size: 13px; }
  .rmom-x:hover { background: #fff1f2; color: #e11d48; } .rmom-edit:hover { background: #ecfdf5; color: #047857; }
  .rmom:hover .rmom-x, .rmom:hover .rmom-edit, .rmom-x:focus-visible, .rmom-edit:focus-visible { opacity: 1; }
  .rmom:hover .rmom-dot { opacity: 0; }
  .rlist[data-rlist]:not([data-view="table"]) .rbody-right .rmom-name { flex: 1; min-width: 0; text-wrap: pretty; }
  .rlist[data-rlist]:not([data-view="table"]) .rbody-right .rmom-qty { display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 2px; min-width: 3.2rem; min-height: 0; padding: 1px 6px; border-radius: 4px; font-variant-numeric: tabular-nums; color: #a1a1aa; }
  .rlist[data-rlist]:not([data-view="table"]) .rbody-right .rmom-qty b { font-weight: 400; }
  .rlist[data-rlist]:not([data-view="table"]) .rbody-right .rmom-qty small { font-size: 10.5px; color: #d4d4d8; }
  .rlist[data-rlist]:not([data-view="table"]) .rbody-right .rmom:hover .rmom-qty { background: #fff; color: #09090b; }
  .rlist[data-rlist]:not([data-view="table"]) .rbody-right .rmom:hover .rmom-qty b { font-weight: 500; } .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rbody-right .rmom:hover .rmom-qty small { color: #6f7c70; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) .rbody-right .rempty { margin: 0; padding: 32px 16px; text-align: center; font-size: 12.5px; line-height: 1.6; color: #6f7c70; }
  /* Pekskärm: ingen hover – × och pennan syns dämpade, antalet mörkt, raderna högre. */
  @media (hover: none) {
    .rmom-x, .rmom-edit { opacity: 0.55; } .rmom-dot { display: none; }
    .rlist[data-rlist]:not([data-view="table"]) .rbody-right .rmom { min-height: 40px; align-items: center; }
    .rlist[data-rlist]:not([data-view="table"]) .rbody-right .rmom-qty { min-height: 36px; align-items: center; color: #09090b; }
    .rmom-lead, .rmom-x, .rmom-edit { width: 32px; height: 32px; flex-basis: 32px; }
  }
  /* Composern får aldrig täcka sista kortraden. */
  .rlist[data-rlist] { padding-bottom: 96px; }
}
/* Tabellraden som pennan pekar på: markerad i 4 s. */
.rpt-row.is-focus-mark { animation: rpt-focus 4s ease-out both; }
@keyframes rpt-focus { 0%, 70% { background: #ecfdf5; box-shadow: inset 3px 0 0 #16a34a; } 100% { background: #fff; box-shadow: inset 3px 0 0 transparent; } }
/* Popovers på korten (Mått, Bilder). */
.rpop { position: absolute; z-index: 70; width: min(300px, calc(100vw - 16px)); padding: 14px; border: 1px solid #f4f4f5; border-radius: 16px; background: #fff; box-shadow: 0 30px 80px -20px rgba(20, 30, 25, 0.35); animation: rpop-in 200ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.rpop.is-leaving { opacity: 0; transform: translateY(-4px); transition: opacity 160ms ease, transform 160ms ease; }
@keyframes rpop-in { from { opacity: 0; transform: translateY(-4px); } }
.rdim { display: grid; gap: 10px; }
.rdim-h { display: flex; align-items: center; gap: 6px; } .rdim-h b { font-size: 13.5px; font-weight: 500; } .rdim-h small { flex: 1; font-size: 11.5px; color: #6f7c70; }
/* Så är rummet räknat (ägaren 2026-10-07, UX-flocken): skälet till ett uppskattat mått står där man rättar det – under
   rubriken i Mått-rutan och i kortets notisruta. Bryts på egen rad, kortas aldrig av; vanlig vikt. */
.rdim-h { flex-wrap: wrap; } .rdim-h small:not(:empty) { order: 3; flex-basis: 100%; line-height: 1.4; hyphens: auto; }
.rdim-note { margin: 6px 0 0; font-size: 11.5px; line-height: 1.4; color: #6f7c70; hyphens: auto; }
.rcard-notes { padding-inline: 6px; } .rcard-notes .material-symbols-outlined { font-size: 15px; color: #a1a1aa; } .rcard-notes:hover .material-symbols-outlined, .rcard-notes:focus-visible .material-symbols-outlined { color: #191c1b; }
.rpop-notes { width: min(280px, calc(100vw - 16px)); } .rnotes dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 10px; margin: 10px 0 12px; }
.rnotes dt { font-size: 11.2px; color: #6f7c70; } .rnotes dd { margin: 0; font-size: 12.2px; line-height: 1.4; color: #191c1b; hyphens: auto; overflow-wrap: anywhere; }
.rnotes-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .rnotes-foot small { font-size: 11px; color: #6f7c70; }
.rdim-x, .rphotos-x { display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 50%; background: #f3f4f2; color: #3e4a3d; cursor: pointer; }
.rdim-x .material-symbols-outlined, .rphotos-x .material-symbols-outlined { font-size: 16px; }
.rdim-area { display: grid; grid-template-columns: auto auto 1fr; grid-template-rows: auto auto; align-items: baseline; column-gap: 8px; padding: 10px 12px; border-radius: 12px; background: #ecfdf5; }
.rdim-k { grid-column: 1 / -1; font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #3e4a3d; }
.rdim-area b { font-family: Newsreader, Georgia, serif; font-size: 28px; font-weight: 400; font-variant-numeric: tabular-nums; } .rdim-area em { font-style: normal; font-size: 14px; color: #3e4a3d; }
.rdim-area small { justify-self: end; font-size: 11.5px; color: #b45309; }
.rdim-two { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.rdim-f { display: grid; gap: 4px; font-size: 11.5px; color: #3e4a3d; }
.rdim-step { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 28px; align-items: center; height: 34px; border: 1px solid #e4e4e7; border-radius: 10px; background: #fff; }
.rdim-step button { height: 100%; border: 0; background: none; font: inherit; font-size: 15px; color: #3e4a3d; cursor: pointer; }
.rdim-step input { width: 100%; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.rdim-step input:focus { outline: none; } .rdim-step:focus-within { border-color: #16a34a; box-shadow: 0 0 0 4px #d1fae5; }
.rdim-step em { padding-left: 3px; font-style: normal; font-size: 11px; color: #a1a1aa; }
.rdim-two input[type="range"] { width: 100%; accent-color: #16a34a; }
.rdim-units small { display: block; margin-top: 2px; font-size: 11px; color: #6f7c70; }
/* Det som saknas för att kalkylen ska räknas (bänkskivans längd …): överst i måttrutan, i varningens ton. */
.rdim-needs { display: grid; gap: 8px; padding: 10px 12px; border-radius: 12px; background: #fdf6e7; box-shadow: inset 0 0 0 1px #f1dfb4; }
.rdim-needs .rdim-k { font-size: 10.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: #8a5a00; }
.rdim-need small { display: block; margin-top: 1px; font-size: 11px; color: #6f7c70; }
.rdim-derived { display: flex; gap: 6px; } .rdim-derived > span { padding: 4px 8px; border-radius: 999px; background: #f3f4f2; font-size: 11.5px; color: #3e4a3d; } .rdim-derived b { font-weight: 500; color: #191c1b; }
.rdim-recalc { display: flex; gap: 8px; font-size: 12.5px; } .rdim-recalc input { margin-top: 2px; accent-color: #16a34a; } .rdim-recalc small { display: block; font-size: 11px; color: #6f7c70; }
.rdim-err { margin: 0; font-size: 12px; color: #be123c; }
.rdim-foot { display: flex; align-items: center; gap: 6px; } .rdim-foot small { flex: 1; font-size: 11px; color: #a1a1aa; }
.rdim-foot .op-btn { height: 34px; padding: 0 12px; font-size: 12.5px; }
.rphotos { display: grid; gap: 10px; }
.rphotos-h { display: flex; align-items: center; gap: 6px; } .rphotos-h b { font-size: 13.5px; font-weight: 500; } .rphotos-h small { flex: 1; font-size: 11.5px; color: #6f7c70; }
.rphotos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; }
.rphotos-grid li { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 8px; background: #f3f4f2; }
.rphotos-grid img { width: 100%; height: 100%; object-fit: cover; }
.rphotos-del { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.95); color: #be123c; cursor: pointer; }
.rphotos-del .material-symbols-outlined { font-size: 15px; }
.rphotos-empty { margin: 0; font-size: 12.5px; color: #6f7c70; }
.rphotos-add { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; border: 1px dashed #bbf7d0; border-radius: 10px; background: #ecfdf5; font-size: 12.5px; font-weight: 500; color: #047857; cursor: pointer; }
.rphotos-add.is-busy { opacity: 0.6; pointer-events: none; }
.rphotos-err { margin: 0; font-size: 12px; color: #be123c; }
/* Ångra-toasten. */
.zimla-undo { position: fixed; left: 50%; bottom: 96px; z-index: 90; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; border-radius: 14px; background: #09090b; color: #fff; font-size: 13px; box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.5); opacity: 0; transform: translate(-50%, 8px); transition: opacity 200ms ease, transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.zimla-undo.is-on { opacity: 1; transform: translate(-50%, 0); }
.zimla-undo button { height: 32px; padding: 0 12px; border: 0; border-radius: 9px; background: #fff; font: inherit; font-size: 13px; font-weight: 500; color: #09090b; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .rpop, .zimla-undo, .rpt-row.is-focus-mark { animation: none; transition: none; } .rpt-row.is-focus-mark { background: #ecfdf5; } }
/* Kortets topp: vinner över de äldre kompakt-reglerna (fler tillstånd: :not([open]), .is-q). */
@media (min-width: 1024px) {
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) details.rrow > .rrow-sum,
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) details.rrow:not([open]) > .rrow-sum,
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) details.rrow.is-q > .rrow-sum {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: none;
    /* Knappraden (Mallar · + Moment · Frågor, ~200 px) delade kolumn med summan och tryckte ihop namnet till några
       tecken ("Badr"): den får en egen rad, måttchippet står bredvid "N moment · nivå". */
    grid-template-areas: "pic pic" "name total" "meta dims" "acts acts" "search search";
    gap: 0 8px; padding: 0;
  }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) details.rrow > .rrow-sum > .rrow-pic { width: 100%; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) details.rrow > .rrow-sum > .rrow-name > .rrow-rename { grid-area: name; align-self: start; padding: 10px 4px 0; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) details.rrow > .rrow-sum > .rrow-name > small { grid-area: meta; margin: 0; padding: 0 4px; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) details.rrow > .rrow-sum > .rrow-name > .rrow-dim { grid-area: dims; justify-self: end; align-self: center; margin: 2px 4px 0 0; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) details.rrow > .rrow-sum > .rrow-name > small { align-self: center; }
  /* Kortets måttchip är kort: "≈ 19,5 m²" i stället för "19,5 m² · preliminärt" (hela texten i title). */
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) details.rrow > .rrow-sum > .rrow-name > .rrow-dim .rrow-dim-pre { display: none; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) details.rrow > .rrow-sum > .rrow-name > .rrow-dim .rrow-dim-approx { display: inline; margin-right: 1px; }
  /* Hela namnet (radbryts i stället för att klippas) och ett klick på det byter namn, som i tabellen. */
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) details.rrow > .rrow-sum > .rrow-name > .rrow-rename strong,
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) details.rrow > .rrow-sum > .rrow-name > .rrow-rename .rrow-rename__btn { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; text-align: left; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) details.rrow > .rrow-sum > .rrow-name > .rrow-rename .rrow-rename__btn { pointer-events: auto; cursor: text; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) details.rrow > .rrow-sum > .rrow-name > .rrow-rename input[name="name"] { width: 100%; box-sizing: border-box; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) details.rrow > .rrow-sum > .rmetrics { grid-area: total; align-self: start; justify-self: end; padding: 8px 4px 0 0; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) details.rrow > .rrow-sum > .rcard-acts { grid-area: acts; justify-self: start; align-self: center; margin: 6px 0 0 4px; }
  .rlist[data-rlist]:not([data-view="table"], [data-density="rows"]) details.rrow > .rrow-sum > .rcard-search { grid-area: search; margin: 8px 0 0; }
}
.rbody-right .rmom.is-adding { background: #ecfdf5; animation: rpt-add-in 180ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.rbody-right .rmom.is-adding .rmom-qty small { color: #047857 !important; }

/* ── Leverans 3 (handoff D4): tabellvyn enligt prototypen ────────────────────────────────────────────────
   Tolv fasta kolumner i ett eget sidledsskal (min 1180 px), rad 48 px, grupprad 44 px, fält 32 px med ram bara vid
   hover/fokus, mörk bulklist, flytande bar. Summeringen ligger utanför skalet så Totalt aldrig hamnar utanför bild. */
.rlist .rposts { --rpt-grid: 40px 60px minmax(240px, 1fr) 132px 72px 64px 104px 96px 64px 108px 76px 36px; }
.rlist .rposts .rpt { overflow: hidden; border: 1px solid #f4f4f5; border-radius: 16px; background: #fff; }
.rlist .rposts .rpt-scroll { overflow-x: auto; }
.rlist .rposts .rpt-inner { min-width: 1180px; }
.rlist .rposts .rpt-head, .rlist .rposts .rpt-row, .rlist .rposts .rpt-grp-h { display: grid; grid-template-columns: var(--rpt-grid); column-gap: 8px; align-items: center; padding: 0; }
.rlist .rposts .rpt-head { height: 38px; border-bottom: 1px solid #f4f4f5; background: #f9faf8; font-size: 10.2px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #6f7c70; }
.rlist .rposts .pl { padding-left: 8px; } .rlist .rposts .pr { padding-right: 8px; } .rlist .rposts .pr3 { padding-right: 12px; }
.rlist .rposts .is-num { text-align: right; } .rlist .rposts .is-mid { display: flex; justify-content: center; }
.rpt-head-btn { border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; }
.rpt-head-btn:hover { color: #047857; }
.rlist .rposts .rpt-nrcell { display: flex; align-items: center; gap: 10px; font-size: 11.5px; font-variant-numeric: tabular-nums; color: #a1a1aa; }
.rlist .rposts .rpt-cb { appearance: none; -webkit-appearance: none; display: grid; place-items: center; flex: 0 0 16px; width: 16px; height: 16px; margin: 0; border: 1.5px solid #d4d4d8; border-radius: 4.5px; background: #fff; cursor: pointer; }
.rlist .rposts .rpt-cb:checked { border-color: #16a34a; background: #16a34a; }
.rlist .rposts .rpt-cb:checked::after { content: ''; width: 8px; height: 4px; margin-top: -2px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg); }
.rlist .rposts .rpt-cb:indeterminate { border-color: #16a34a; background: #6ee7b7; }
.rlist .rposts .rpt-cb:indeterminate::after { content: ''; width: 7px; height: 2px; border-radius: 1px; background: #fff; }
.rlist .rposts .rpt-cb:focus-visible { outline: 2px solid #16a34a; outline-offset: 2px; }
/* Grupp. */
.rlist .rposts .rpt-grp-h { height: 44px; border-bottom: 1px solid #f4f4f5; background: #f9faf8; cursor: pointer; }
.rlist .rposts .rpt-grp-h:hover { background: #f3f4f2; }
.rlist .rposts .rpt-grp-h:focus-visible { outline: 2px solid #16a34a; outline-offset: -2px; }
.rlist .rposts .rpt-grp-h .rpt-nrcell { font-size: 12.2px; }
.rpt-chev { font-size: 18px; color: #3e4a3d; transition: transform 150ms ease-out; }
.rlist .rposts .rpt-grp.is-closed .rpt-chev { transform: rotate(-90deg); }
.rlist .rposts .rpt-grp.is-closed > .rpt-row, .rlist .rposts .rpt-grp.is-closed > .rpt-addrow, .rlist .rposts .rpt-grp.is-closed > .rpt-emptygrp { display: none; }
.rlist .rposts .rpt-gname { grid-column: 3 / span 7; display: flex; align-items: center; gap: 10px; min-width: 0; padding-left: 8px; }
.rlist .rposts .rpt-gname b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14.1px; font-weight: 500; }
.rlist .rposts .rpt-gname small { padding: 2px 8px; border-radius: 999px; background: #edeeec; font-size: 10.9px; color: #6f7c70; white-space: nowrap; }
.rlist .rposts .rpt-gsum { grid-column: 10; padding-right: 12px; text-align: right; font-size: 14.1px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Rad. */
.rlist .rposts .rpt-row { min-height: 48px; border-bottom: 1px solid #fafafa; font-size: 13.4px; }
.rlist .rposts .rpt-row:hover { background: #f9faf8; }
.rlist .rposts .rpt-row.is-selected { background: rgba(236, 253, 245, 0.6); }
.rlist .rposts .rpt-row.is-hidden .rpt-text, .rlist .rposts .rpt-row.is-hidden .rpt-text-static, .rlist .rposts .rpt-row.is-hidden .rpt-sum { color: #a1a1aa; }
.rlist .rposts .rpt-row.is-moved { animation: rpt-moved 1.6s ease-out both; }
@keyframes rpt-moved { from { background: #ecfdf5; } to { background: #fff; } }
.rlist .rposts .rpt-row.is-dragging { opacity: 0.35; }
.rlist .rposts .rpt-row.is-drop-before { box-shadow: inset 0 2px 0 #16a34a; } .rlist .rposts .rpt-row.is-drop-after { box-shadow: inset 0 -2px 0 #16a34a; }
.rpt-move { display: flex; align-items: center; justify-content: center; gap: 1px; }
.rpt-drag { display: grid; place-items: center; padding: 0 2px; color: #d4d4d8; cursor: grab; touch-action: none; }
.rpt-drag:active { cursor: grabbing; }
.rpt-drag .material-symbols-outlined { font-size: 18px; }
.rpt-arrows { display: flex; flex-direction: column; }
.rpt-arrows button { display: grid; place-items: center; width: 16px; height: 14px; padding: 0; border: 0; background: none; color: #a1a1aa; cursor: pointer; }
.rpt-arrows button:hover { color: #047857; } .rpt-arrows .material-symbols-outlined { font-size: 16px; }
.rlist .rposts .rpt-name { display: grid; gap: 1px; min-width: 0; padding: 6px 0; }
.rlist .rposts .rpt-name small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-left: 8px; font-size: 10.9px; color: #a1a1aa; }
.rlist .rposts .rpt-text-static { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-left: 8px; font-weight: 500; }
.rlist .rposts .rpt-in { width: 100%; height: 32px; margin: 0; padding: 0 8px; border: 1px solid transparent; border-radius: 9.6px; background: transparent; font: inherit; font-size: 13.4px; font-variant-numeric: tabular-nums; color: #191c1b; outline: none; }
.rlist .rposts .rpt-in.rpt-text { font-weight: 500; text-overflow: ellipsis; }
.rlist .rposts .rpt-in:hover { border-color: #e4e4e7; background: #fff; }
.rlist .rposts .rpt-in:focus { border-color: #16a34a; background: #fff; box-shadow: 0 0 0 4px #d1fae5; }
.rlist .rposts .rpt-in.is-own { color: #047857; } .rlist .rposts .rpt-in.is-disc { color: #b45309; }
.rlist .rposts .rpt-suffix { position: relative; }
.rlist .rposts .rpt-suffix .rpt-in { padding-right: 26px; }
.rlist .rposts .rpt-suffix em { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); font-style: normal; font-size: 11.5px; color: #a1a1aa; pointer-events: none; }
.rlist .rposts .rpt-static { display: block; padding: 0 8px; color: #3e4a3d; }
.rlist .rposts .rpt-where, .rlist .rposts .rpt-unit, .rlist .rposts .rpt-type { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #3e4a3d; }
.rlist .rposts .rpt-sumcell { display: flex; flex-direction: column; align-items: flex-end; padding-right: 12px; }
.rlist .rposts .rpt-sum { font-size: 13.4px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rlist .rposts .rpt-was { font-size: 10.9px; color: #a1a1aa; }
.rlist .rposts .rpt-eye { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 68px; height: 26px; padding: 0; border: 1px solid #bbf7d0; border-radius: 999px; background: #ecfdf5; font: inherit; font-size: 11.5px; font-weight: 500; color: #047857; cursor: pointer; }
.rlist .rposts .rpt-eye i { width: 6px; height: 6px; border-radius: 50%; background: #16a34a; }
.rlist .rposts .rpt-eye.is-off { border-color: #e4e4e7; background: #fff; color: #71717a; } .rlist .rposts .rpt-eye.is-off i { background: #d4d4d8; }
/* Exkludera material: Typ-cellen är en knapp i samma familj som Visas (ram, 26 px) men rundad rektangel och utan prick.
   Med material: vit med byt-ikon. Utan: bärnsten som rabatt (avviker från kalkylen) och "mat." överstruket. */
.rlist .rposts .rpt-type:has(.rpt-mat) { overflow: visible; }
.rlist .rposts .rpt-mat { display: inline-flex; align-items: center; justify-content: space-between; gap: 4px; max-width: 100%; height: 26px; padding: 0 6px 0 7px; border: 1px solid #e4e4e7; border-radius: 8px; background: #fff; font: inherit; font-size: 11.5px; font-weight: 400; color: #3e4a3d; white-space: nowrap; cursor: pointer; transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease; }
.rlist .rposts .rpt-mat .material-symbols-outlined { font-size: 14px; color: #a1a1aa; }
.rlist .rposts .rpt-mat:hover { border-color: #d4d4d8; background: #f9faf8; }
.rlist .rposts .rpt-mat:active:not(:disabled) { transform: scale(0.97); }
.rlist .rposts .rpt-mat:focus-visible { outline: 2px solid #16a34a; outline-offset: 1px; }
.rlist .rposts .rpt-mat.is-off { border-color: #fde68a; background: #fffbeb; color: #92400e; justify-content: flex-start; }
.rlist .rposts .rpt-mat.is-off:hover { background: #fef3c7; }
.rlist .rposts .rpt-mat s { font-size: 10.9px; color: #b45309; }
.rlist .rposts .rpt-mat.is-some { border-color: #fde68a; color: #92400e; justify-content: flex-start; }
.rlist .rposts .rpt-mat.is-some i { width: 8px; height: 2px; border-radius: 1px; background: #d97706; }
.rlist .rposts .rpt-mat:disabled { cursor: default; opacity: 0.7; }
.rlist .rposts .rpt-gmat { grid-column: 8; display: flex; align-items: center; }
.rlist .rposts .rpt-gmat .rpt-mat { height: 24px; }
@media (max-width: 1023px) { .rlist .rposts .rpt-grp-h:has(.rpt-gmat) .rpt-gname { grid-column: 3 / span 5; } }
/* Med material igen: priset kommer från servern – siffrorna (inte raden) dämpas tills tabellen stämt av. */
.rlist .rposts .rpt-row.is-matwait :is(.rpt-sum, [data-rpt-price]) { opacity: 0.5; transition: opacity 0s 120ms; }
@media (prefers-reduced-motion: reduce) { .rlist .rposts .rpt-mat { transition: none; } .rlist .rposts .rpt-mat:active:not(:disabled) { transform: none; } }
.rlist .rposts .rpt-noline { font-size: 10.9px; color: #a1a1aa; white-space: nowrap; }
/* "väntar": utkastet står still tills det som saknas fyllts i – knappen öppnar rummets måttruta. */
.rlist .rposts .rpt-noline.is-waiting { padding: 2px 8px; border: 0; border-radius: 999px; background: #fdf6e7; color: #8a5a00; font: inherit; font-size: 10.9px; cursor: pointer; }
.rlist .rposts .rpt-noline.is-waiting:hover { background: #f8ebc9; }
.rlist .rposts .rpt-noline.is-waiting:focus-visible { outline: 2px solid #d99a2b; outline-offset: 1px; }
.rlist .rposts .rpt-x { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: none; color: #a1a1aa; cursor: pointer; }
.rlist .rposts .rpt-x:hover { background: #fff1f2; color: #e11d48; } .rlist .rposts .rpt-x .material-symbols-outlined { font-size: 18px; }
.rlist .rposts .rpt-addrow { padding: 8px 0 10px 116px; border-bottom: 1px solid #f4f4f5; }
.rlist .rposts .rpt-add { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 12.5px; font-weight: 500; color: #047857; cursor: pointer; }
.rlist .rposts .rpt-add:hover { background: #ecfdf5; } .rlist .rposts .rpt-add .material-symbols-outlined { font-size: 16px; }
.rlist .rposts .rpt-emptygrp { margin: 0; padding: 16px 0 16px 116px; font-size: 12.5px; color: #6f7c70; }
.rlist .rposts .rpt-stale { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 8px 12px; border: 1px solid #fde68a; border-radius: 12px; background: #fffbeb; font-size: 12.5px; color: #92400e; }
.rlist .rposts .rpt-stale .material-symbols-outlined { font-size: 18px; }
/* Summering. */
.rlist .rposts .rpt-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 0; padding: 18px 20px 20px; border: 0; border-top: 1px solid #f4f4f5; border-radius: 0; background: #fff; }
.rlist .rposts .rpt-count { margin: 0; font-size: 12.2px; color: #6f7c70; }
.rlist .rposts .rpt-sums { display: grid; gap: 6px; width: min(360px, 100%); margin: 0; font-size: 13px; }
.rlist .rposts .rpt-sums > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.rlist .rposts .rpt-sums dt { color: #3e4a3d; } .rlist .rposts .rpt-sums dd { margin: 0; font-variant-numeric: tabular-nums; }
.rlist .rposts .rpt-sums em { font-style: normal; color: #b45309; }
.rpt-link { display: inline-flex; align-items: center; gap: 2px; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.rpt-link:hover { color: #047857; text-decoration: underline; text-underline-offset: 3px; } .rpt-link .material-symbols-outlined { font-size: 16px; }
.rlist .rposts .rpt-sums .is-total { margin-top: 6px; padding-top: 10px; border-top: 1px solid #f4f4f5; font-weight: 500; }
.rlist .rposts .rpt-sums .is-pay { margin-top: 6px; padding-top: 10px; border-top: 1px solid #f4f4f5; font-weight: 500; }
.rlist .rposts .rpt-sums .is-pay dd { font-family: Newsreader, Georgia, serif; font-size: 22px; font-weight: 400; }
.rlist .rposts .rpt-pct { display: inline-flex; align-items: center; position: relative; width: 64px; }
.rlist .rposts .rpt-pct .rpt-in { width: 64px; padding-right: 22px; text-align: right; border-color: #e4e4e7; }
.rlist .rposts .rpt-pct em { position: absolute; right: 8px; color: #a1a1aa; }
/* Verktyg: hjälprad, sökrad, bulklist, flytande bar. */
.rlist[data-view="table"] > .rpt-tools { gap: 10px; }
.rlist .rpt-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin: 0; padding: 8px 14px; border: 0; border-radius: 12.8px; background: #ecfdf5; font-size: 12.2px; color: #3e4a3d; }
.rlist .rpt-hint b { font-weight: 500; color: #047857; }
.rlist .rpt-hint i { display: inline; width: auto; height: auto; margin-right: 4px; border-radius: 0; background: none; font-style: normal; color: #3e4a3d; }
.rlist .rpt-bar { display: flex; align-items: center; gap: 8px; }
.rlist .rpt-search-box { position: relative; display: flex; flex: 1; align-items: center; gap: 8px; height: 36px; padding: 0 4px 0 12px; border: 1px solid #e4e4e7; border-radius: 12.8px; background: #fff; }
.rlist .rpt-search-box:focus-within { border-color: #16a34a; box-shadow: 0 0 0 4px #d1fae5; }
.rlist .rpt-search-box > .material-symbols-outlined { font-size: 18px; color: #a1a1aa; }
.rlist .rpt-search-box input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; font: inherit; font-size: 13.4px; outline: none; }
.rpt-chip-group { display: inline-flex; align-items: center; gap: 2px; height: 24px; padding: 0 4px 0 8px; border: 0; border-radius: 999px; background: #ecfdf5; font: inherit; font-size: 11.5px; font-weight: 500; color: #047857; cursor: pointer; white-space: nowrap; }
.rpt-chip-group .material-symbols-outlined { font-size: 14px; }
.rpt-to { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 6px 0 10px; border-left: 1px solid #f4f4f5; font-size: 11.5px; color: #6f7c70; }
.rpt-to select { max-width: 150px; border: 0; background: transparent; font: inherit; font-size: 12.2px; color: #3e4a3d; appearance: none; -webkit-appearance: none; cursor: pointer; }
.rpt-to .material-symbols-outlined { font-size: 16px; color: #a1a1aa; pointer-events: none; }
.rlist .rpt-hits { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0; }
.rlist .rpt-hits .rsearch-hits { max-height: 320px; }
.rsearch-own { display: grid; gap: 6px; padding: 6px 8px; border-top: 1px solid #f4f4f5; }
.rsearch-own-open { justify-self: start; padding: 4px 0; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 500; color: #047857; cursor: pointer; }
.rsearch-own-form { display: grid; grid-template-columns: minmax(0, 1fr) 140px 80px 96px auto; gap: 6px; align-items: center; }
.rsearch-own-form[hidden] { display: none; }
.rsearch-own-form input, .rsearch-own-form select { height: 32px; min-width: 0; padding: 0 8px; border: 1px solid #e4e4e7; border-radius: 8px; background: #fff; font: inherit; font-size: 12.5px; }
.rsearch-own-in { position: relative; } .rsearch-own-in input { width: 100%; padding-right: 22px; text-align: right; } .rsearch-own-in em { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); font-style: normal; font-size: 11px; color: #a1a1aa; }
.rsearch-own-err { grid-column: 1 / -1; font-size: 12px; color: #be123c; }
.rlist .rpt-seg { display: inline-flex; height: 36px; padding: 2px; border-radius: 10px; background: #edeeec; }
.rlist .rpt-seg button { padding: 0 14px; border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: 13px; color: #6f7c70; cursor: pointer; }
.rlist .rpt-seg button[aria-pressed="true"] { background: #fff; color: #191c1b; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.rlist .rpt-fold { height: 36px; border-color: #e4e4e7; border-radius: 12.8px; font-size: 13px; }
.rlist[data-view="table"] > .rpt-bulk:not([hidden]) { display: flex; }
.rlist .rpt-bulk { position: sticky; top: 64px; z-index: 15; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 0; padding: 6px 8px 6px 14px; border-radius: 14.4px; background: #09090b; color: #fff; }
.rlist .rpt-bulk b { font-size: 12.8px; font-weight: 500; }
.rlist .rpt-bulk .rpt-bulk-sep { width: 1px; height: 16px; margin: 0 2px; background: rgba(255, 255, 255, 0.2); }
.rpt-bulk-k { font-size: 11.8px; color: #d4d4d8; }
.rpt-bulk-pct { display: inline-flex; align-items: center; height: 32px; padding-right: 8px; border-radius: 8px; background: #fff; }
.rpt-bulk-pct input { width: 40px; border: 0; background: transparent; padding: 0 4px 0 0; font: inherit; font-size: 12.8px; font-weight: 500; text-align: right; color: #09090b; outline: none; }
.rpt-bulk-pct em { font-style: normal; font-size: 11.5px; color: #71717a; }
.rlist .rpt-bulk button { height: 32px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 8px; background: transparent; font: inherit; font-size: 12.2px; color: #fff; }
.rlist .rpt-bulk button.is-light { border-color: #fff; background: #fff; font-weight: 500; color: #09090b; }
.rlist .rpt-bulk button.is-danger { border-color: rgba(253, 164, 175, 0.4); color: #fecdd3; }
.rlist .rpt-bulk .rpt-bulk-clear { margin-left: auto; border: 0; color: #d4d4d8; }
.rpt-float { display: none; }
@media (min-width: 1024px) {
  .rlist[data-view="table"] > .rpt-float:not([hidden]) { position: fixed; top: 10px; left: var(--rpt-float-left, 120px); right: var(--rpt-float-right, 40px); z-index: 45; display: flex; align-items: center; gap: 12px; padding: 6px 8px; border: 1px solid #f4f4f5; border-radius: 16px; background: rgba(255, 255, 255, 0.97); box-shadow: 0 30px 80px -20px rgba(20, 30, 25, 0.35); }
  .rpt-float-view { display: inline-flex; padding: 2px; border-radius: 10px; background: #edeeec; }
  .rpt-float-view button { height: 30px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: 12.8px; color: #6f7c70; cursor: pointer; }
  .rpt-float-view button[aria-pressed="true"] { background: #fff; color: #191c1b; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
  .rpt-float-sum { display: grid; } .rpt-float-sum small { font-size: 10.2px; color: #6f7c70; } .rpt-float-sum b { font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
  .rpt-float-search { display: inline-flex; flex: 1; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border: 1px solid #e4e4e7; border-radius: 10px; background: #fff; font: inherit; font-size: 13px; color: #a1a1aa; cursor: text; }
  .rpt-float-search .material-symbols-outlined { font-size: 18px; }
  .rpt-float .rpt-by { display: inline-flex; align-items: center; gap: 8px; } .rpt-float .rpt-by > small { font-size: 12px; color: #6f7c70; }
}
@media (max-width: 1000px) { .rlist .rpt-float { display: none !important; } }
/* Pekskärm: ingen hover – fälten visar att de går att ändra, träffytorna blir större. */
@media (hover: none) {
  .rlist .rposts .rpt-in { border-bottom: 1px dashed #d4d4d8; border-radius: 0; }
  .rpt-arrows button { width: 28px; height: 20px; }
  .rlist .rposts .rpt-cb { position: relative; } .rlist .rposts .rpt-cb::before { content: ''; position: absolute; inset: -12px; }
}
@media (prefers-reduced-motion: reduce) { .rlist .rposts .rpt-row.is-moved { animation: none; } .rpt-chev { transition: none; } }
/* D5c Avancerad kalkyl: guiden direkt i popupen. Flex-kolumn med max-höjd så huvudet alltid syns; lämnar plats åt den dockade AI-panelen. */
.calc-pop { width: min(1320px, calc(100vw - var(--zimla-ai-panel-inset, 0px) - 48px)); height: calc(100dvh - 48px); max-height: calc(100dvh - 48px); inset: 0 var(--zimla-ai-panel-inset, 0px) 0 0; margin: auto; }
.calc-pop-h { flex: none; height: 56px; }
/* Förbyggd guide: den stängda dialogen får layout osynligt utanför skärmen, så att öppningen inte räknar om hela guiden. */
.calc-pop[data-prebuilt]:not([open]) { display: flex; flex-direction: column; position: fixed; inset: 0 auto auto -200vw; margin: 0; opacity: 0; pointer-events: none; }
.calc-pop-t { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.calc-pop-t b, .calc-pop-t small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calc-pop-t small { font-size: 12px; color: var(--pj-muted); font-variant-numeric: tabular-nums; }
.calc-pop-body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 14px 18px 24px; }
.calc-pop-body .kguide-skel { min-height: 420px; }
/* calculation.css låser arbetsytan till 100 % höjd med overflow: hidden (Kalkyl-sidans egna skrollytor); i popupen skrollar kroppen. */
.calc-pop-body > .calculation-workspace { height: auto; max-height: none; min-height: 0; overflow: visible; }
.calc-pop .zimla-undo { position: fixed; }
@media (pointer: coarse) { .calc-pop-body .workflow-guide__stepper button, .calc-pop-body [data-calculation-workflow-panel] button.h-7 { min-width: 36px; min-height: 36px; } }
@media (max-width: 1023px) { .calc-pop { width: 100vw; max-height: 100dvh; height: 100dvh; margin: 0; } }
/* D5b Frågor för rummet: numrerade frågor, radioval i två kolumner, foten syns alltid. */
.rq-pop { width: min(800px, calc(100vw - var(--zimla-ai-panel-inset, 0px) - 48px)); }
.rq-pop[open] { display: flex; flex-direction: column; }
.rqd { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.rqd-h { flex: none; display: flex; align-items: flex-start; gap: 12px; padding: 16px 16px 14px 20px; border-bottom: 1px solid var(--pj-line-2); }
.rqd-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rqd-t b { font-family: Newsreader, Georgia, serif; font-size: 21px; font-weight: 500; color: var(--pj-ink); overflow-wrap: anywhere; }
.rqd-t small { font-size: 12.5px; color: var(--pj-muted); }
.rqd-body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; display: grid; gap: 6px; align-content: start; padding: 12px 14px; background: #f7f9f6; }
.rqd-q { display: flex; gap: 12px; padding: 14px 16px; border: 1px solid transparent; border-radius: 14px; background: #fff; cursor: default; transition: border-color 160ms ease; }
.rqd-q.is-current { border-color: #16a34a; }
.rqd-n { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 999px; background: #047857; color: #fff; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.rqd-q.is-assumed .rqd-n, .rqd-q.is-unanswered .rqd-n { background: #e7ece6; color: var(--pj-ink-2); }
.rqd-main { flex: 1; min-width: 0; display: grid; gap: 10px; }
.rqd-top { display: flex; align-items: flex-start; gap: 12px; }
.rqd-p { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rqd-p b { font-size: 14px; font-weight: 500; color: var(--pj-ink); overflow-wrap: anywhere; }
.rqd-p small { font-size: 12px; color: var(--pj-muted); }
.rqd-pill { flex: none; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 500; background: #f1f4f0; color: var(--pj-ink-2); }
.rqd-q.is-answered .rqd-pill { background: #ecfdf5; color: #047857; }
.rqd-q.is-uncertain .rqd-pill, .rqd-q.is-assumed .rqd-pill { background: #fffbeb; color: #92400e; }
.rqd-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rqd-opts.is-wide { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .rqd-opts.is-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rqd-opts button { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px; border: 1px solid #e4e4e7; border-radius: 12px; background: #fff; font: inherit; font-size: 13.5px; font-weight: 500; color: var(--pj-ink); text-align: left; cursor: pointer; }
.rqd-opts button i { flex: none; width: 14px; height: 14px; border-radius: 999px; border: 1px solid #d4d4d8; }
.rqd-opts button[aria-checked="true"] { border-color: #16a34a; background: #ecfdf5; }
.rqd-opts button[aria-checked="true"] i { border: 4px solid #047857; }
.rqd-q.is-assumed .rqd-opts button[aria-checked="true"] { border-style: dashed; border-color: #e2c98f; background: #fffbf0; }
.rqd-opts button:hover { border-color: #a7d7b8; }
.rqd-unsure { justify-self: start; padding: 0; border: 0; background: none; font: inherit; font-size: 12.5px; color: var(--pj-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.rqd-f { flex: none; display: flex; align-items: center; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--pj-line-2); background: #fff; }
.rqd-left { flex: 1; font-size: 13px; color: var(--pj-ink-2); font-variant-numeric: tabular-nums; }
.rqd-btn { height: 40px; padding: 0 16px; border: 1px solid #e4e4e7; border-radius: 12px; background: #fff; font: inherit; font-size: 13px; font-weight: 500; color: var(--pj-ink); cursor: pointer; }
.rqd-btn:disabled { opacity: 0.45; cursor: default; }
.rqd-btn.is-primary { border-color: #16a34a; background: #16a34a; color: #fff; }
.rqd-empty { margin: 0; padding: 24px; font-size: 13.5px; color: var(--pj-muted); }
.rqd-skel { display: grid; gap: 10px; padding: 20px; min-height: 320px; align-content: start; }
.rqd-skel span { height: 92px; border-radius: 14px; }
@media (max-width: 1023px) { .rq-pop { width: 100vw; } .rqd-f .rqd-btn { height: 44px; } }
/* D5a Mallar: serif-priser i normal vikt, ljusgröna Välj-knappar, tvåradiga celler (varianten som hovertext),
   kolumnerna ryms utan sidscroll från ~920 px, glid upp vid öppning. */
.mall-sum b { font-family: Newsreader, Georgia, serif; font-size: 19px; font-weight: 400; }
.mall-head .rhub-btn { height: 36px; padding: 0 14px; border-color: #16a34a; background: #16a34a; color: #fff; font-weight: 500; }
.mall-head .rhub-btn:hover { background: #15803d; border-color: #15803d; }
.mcell b small { color: var(--pj-muted); font-size: 11.5px; font-weight: 400; }
.mall-f { position: relative; z-index: 3; background: #fff; }
.mall-scroll { padding-bottom: 20px; }
@media (min-width: 901px) {
  .mall-grid { min-width: 0; grid-template-columns: minmax(170px, 1.25fr) repeat(var(--mall-cols, 4), minmax(118px, 1fr)); }
  .mall-head b, .mall-m b { overflow-wrap: anywhere; }
}
.mall-veil { animation: mall-veil-in 200ms ease both; }
.mall-veil > .mall { animation: mall-in 240ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes mall-veil-in { from { opacity: 0; } }
@keyframes mall-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .mall-veil > .mall { animation-name: mall-veil-in; } }
details.rrow.is-pending { opacity: 0.6; transition: opacity 120ms ease; pointer-events: none; }
.rqd-measure { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 14px; border-radius: 12px; background: #fffbeb; color: #92400e; font-size: 13px; }
.rqd-measure .material-symbols-outlined { font-size: 18px; }
/* ═══ Mobil (handoff M2–M4, M6, M7, M9): < 1024 px. Rumskorten är listrader och, öppnade, rumssidan. ═══ */
.pdock, .mhead, .rpage-h, .rpage-area, .rpage-row, .rpage-q, .rpage-tabs, .rpage-guide, .rmv, .rgo, .rmom-step, .rmom-price, .rpt-mmeta, .rpt-mdisc, .rpt-mhid, .rpt-mnomat { display: none; }
.msheet { display: none; }
@media (max-width: 1023px) {
  /* Skalet: projektets egen docka (Rum · Tabell · orben · Offert · Kund) och eget huvud; skalets länkar och topprad vilar. */
  body:has(.pdock) [data-zimla-global-topbar] { display: none; }
  body:has(.pdock) [data-zimla-mobile-dock] .grid > a, body:has(.pdock) [data-zimla-mobile-dock] [data-zimla-dock-label] { visibility: hidden; }
  body:has(.pdock) [data-zimla-mobile-dock] > div.pointer-events-auto { background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; pointer-events: none; }
  body:has(.pdock) [data-zimla-mobile-dock] [data-zimla-dock-orb] { pointer-events: auto; -webkit-touch-callout: none; user-select: none; }
  .pdock { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; position: fixed; z-index: 48; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom) + 0.5rem); max-width: 28rem; margin: 0 auto; min-height: 4rem; padding: 6px 10px; border: 1px solid #dce4de; border-radius: 1.45rem; background: rgba(253, 254, 252, 0.96); box-shadow: 0 18px 44px -30px rgba(21, 26, 22, 0.3); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
  .pdock button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 3.1rem; padding: 4px; border: 0; border-radius: 0.8rem; background: none; font: inherit; font-size: 0.64rem; font-weight: 500; line-height: 1; color: #68736a; }
  .pdock button .material-symbols-outlined { font-size: 1.2rem; }
  .pdock button[aria-current] { color: #056344; }
  .pdock-orb { display: flex; align-items: flex-end; justify-content: center; min-height: 3.1rem; padding-bottom: 4px; }
  .pdock-orb small { font-size: 0.64rem; font-weight: 500; color: #056344; white-space: nowrap; }
  body:has(:is(input, textarea):focus) .pdock, body:has(.pdock):has(:is(input, textarea):focus) [data-zimla-mobile-dock] { display: none; }
  html.zimla-rpage-open, html.zimla-rpage-open body { overflow: hidden; }

  /* Projektsidan: huvudet, offertremsan och datorns listhuvud vilar; M2 har eget huvud. */
  body:has(.pdock) .phead { display: none; }
  body:has(.pdock) .pcrumbs { display: none; } /* mobilens huvud har tillbaka-pilen till kunden */
  body:has(.pdock) .project-shell { padding: 0 0 calc(6rem + env(safe-area-inset-bottom)); max-width: 560px; margin: 0 auto; }
  .rlist[data-rlist] { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
  .rlist-head { display: block !important; position: sticky; top: 0; z-index: 5; margin: 0 !important; padding: 0 !important; background: #f6f7f5; }
  .rlist-head > :not(.mhead):not(.mseg):not(.mbanner) { display: none !important; }
  .mhead { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 10px 16px; border-bottom: 1px solid #e7ebe6; background: rgba(250, 251, 249, 0.96); backdrop-filter: blur(12px); }
  .mhead-back, .rpage-back { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 999px; background: #fff; color: #151a16; box-shadow: 0 0 0 1px #e7ebe6; }
  .mhead-t, .rpage-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  .mhead-t b, .rpage-t b { font-size: 16px; font-weight: 500; color: #151a16; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mhead-t small, .rpage-t small { font-size: 12px; color: #6f7c70; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mhead-sum, .rpage-sum { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
  .mhead-sum b, .rpage-sum b { font-size: 16px; font-weight: 500; color: #151a16; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .mhead-sum small, .rpage-sum small { font-size: 10.5px; color: #6f7c70; }
  .rtable-head, .rlist .rtable-foot, .rpt-float, .rlist-view { display: none !important; }

  /* M2 listrad: bild · namn / yta · moment / "N val kvar" · summa · chevron. Hela raden är trycket. */
  .rlist[data-rlist]:not([data-view="table"]) { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; }
  .rlist[data-rlist]:not([data-view="table"]) > details.rrow:not(.is-page) { margin: 0 16px !important; padding: 0 !important; border: 0 !important; border-radius: 16px !important; background: #fff !important; box-shadow: 0 0 0 1px #edf0ec !important; overflow: hidden; }
  .rlist[data-rlist]:not([data-view="table"]) > details.rrow:not(.is-page) > summary.rrow-sum { display: grid !important; grid-template-columns: 52px minmax(0, 1fr) auto 18px !important; grid-template-areas: "pic head head go" "pic mv mv go" !important; align-items: center !important; gap: 2px 12px !important; min-height: 76px; padding: 12px 10px 12px 12px !important; cursor: pointer; list-style: none; }
  .rlist[data-rlist]:not([data-view="table"]) > details.rrow:not(.is-page) > summary.rrow-sum > * { display: none !important; }
  .rlist[data-rlist]:not([data-view="table"]) > details.rrow:not(.is-page) > summary.rrow-sum > .rrow-pic { display: block !important; grid-area: pic; width: 52px; height: 52px; border-radius: 12px; overflow: hidden; background: #f1f4f0; }
  .rlist[data-rlist]:not([data-view="table"]) > details.rrow:not(.is-page) .rrow-pic > :not(.rrow-img) { display: none !important; }
  .rlist[data-rlist]:not([data-view="table"]) > details.rrow:not(.is-page) .rrow-img { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 0 !important; }
  .rlist[data-rlist]:not([data-view="table"]) > details.rrow:not(.is-page) > summary.rrow-sum > .rpage-h { display: flex !important; grid-area: head; align-items: center; gap: 10px; min-width: 0; }
  details.rrow:not(.is-page) .rpage-back, details.rrow:not(.is-page) .rpage-sum small { display: none !important; }
  details.rrow:not(.is-page) .rpage-t b { font-size: 15px; }
  details.rrow:not(.is-page) .rpage-sum b { font-size: 15px; }
  .rlist[data-rlist]:not([data-view="table"]) > details.rrow:not(.is-page) > summary.rrow-sum > .rmv:not([hidden]) { display: inline-flex !important; grid-area: mv; justify-self: start; align-items: center; min-height: 24px; margin-top: 2px; padding: 2px 9px; border-radius: 999px; background: #fef3c7; color: #92400e; font-size: 11.5px; font-weight: 500; }
  .rlist[data-rlist]:not([data-view="table"]) > details.rrow:not(.is-page) > summary.rrow-sum > .rgo { display: block !important; grid-area: go; font-size: 18px; color: #a3ada5; }
  .rlist[data-rlist]:not([data-view="table"]) > details.rrow:not(.is-page) > .rbody { display: none !important; }
  .rlist[data-rlist] .rcard-add { display: flex !important; align-items: center; justify-content: center; gap: 6px; min-height: 52px; margin: 4px 16px 0 !important; border: 1px dashed #b9d8c5 !important; border-radius: 16px !important; background: transparent !important; color: #047857 !important; font-size: 14px; font-weight: 500; }
  .rlist[data-rlist] > :is(.rpt-tools, .rhub-plan, .rhub-empty) { margin-left: 16px; margin-right: 16px; }
  body:has(.pdock) .pmore { margin: 16px; }

  /* M3/M4 rumssidan: kortet i sidläge täcker sidan (drill från höger), huvudet är den enda sticky raden. */
  .rlist[data-rlist] details.rrow.is-page { position: fixed !important; inset: 0 !important; z-index: 40 !important; display: block !important; margin: 0 !important; padding: 0 0 calc(6.5rem + env(safe-area-inset-bottom)) !important; border: 0 !important; border-radius: 0 !important; background: #f6f7f5 !important; box-shadow: none !important; overflow-y: auto !important; overscroll-behavior: contain; max-height: none !important; animation: rpage-in 260ms cubic-bezier(0.22, 1, 0.36, 1) both; }
  @keyframes rpage-in { from { transform: translateX(24px); opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .rlist[data-rlist] details.rrow.is-page { animation-name: rpage-fade; } @keyframes rpage-fade { from { opacity: 0; } } }
  details.rrow.is-page > summary.rrow-sum { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; width: auto !important; max-width: none !important; gap: 10px !important; padding: 0 0 4px !important; list-style: none; cursor: default; background: none !important; border: 0 !important; grid-template-columns: none !important; grid-template-areas: none !important; }
  details.rrow.is-page > summary.rrow-sum::-webkit-details-marker { display: none; }
  details.rrow.is-page > summary.rrow-sum > * { display: none !important; }
  details.rrow.is-page > summary.rrow-sum > .rpage-h { display: flex !important; order: 0; position: sticky; top: 0; z-index: 3; align-items: center; gap: 10px; min-height: 60px; padding: 10px 16px; border-bottom: 1px solid #e7ebe6; background: rgba(250, 251, 249, 0.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  details.rrow.is-page > summary.rrow-sum > .rrow-pic { display: block !important; order: 1; position: relative; width: auto !important; height: 150px; margin: 4px 16px 0; border-radius: 16px; overflow: hidden; background: #eef1ed; }
  details.rrow.is-page .rrow-pic .rrow-img { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 0 !important; }
  details.rrow.is-page .rrow-pic .rrow-pic__btn { display: none !important; }
  details.rrow.is-page .rrow-pic .rrow-photos { display: inline-flex !important; position: absolute; right: 10px; bottom: 10px; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, 0.94); font-size: 13px; font-weight: 500; color: #151a16; }
  details.rrow.is-page > summary.rrow-sum > .rpage-area { display: grid !important; order: 2; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k btn" "v btn" "s btn"; align-items: center; column-gap: 12px; margin: 0 16px; padding: 12px 14px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px #edf0ec; }
  .rpage-k { grid-area: k; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #6f7c70; }
  .rpage-area > b { grid-area: v; font-family: Newsreader, Georgia, serif; font-size: 26px; font-weight: 400; color: #151a16; font-variant-numeric: tabular-nums; }
  .rpage-area > small { grid-area: s; font-size: 12px; color: #6f7c70; }
  .rpage-dims { grid-area: btn; min-height: 44px; padding: 0 14px; border: 0; border-radius: 12px; background: #ecfdf5; color: #047857; font: inherit; font-size: 13.5px; font-weight: 500; }
  details.rrow.is-page > summary.rrow-sum > .rpage-row { display: grid !important; order: 3; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 8px; margin: 0 16px; }
  .rpage-mall { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 52px; padding: 6px 14px; border: 0; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px #edf0ec; font: inherit; text-align: left; }
  .rpage-mall small { font-size: 11px; color: #6f7c70; } .rpage-mall b { font-size: 14px; font-weight: 500; color: #151a16; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
  .rpage-add { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 52px; border: 0; border-radius: 14px; background: #16a34a; color: #fff; font: inherit; font-size: 14px; font-weight: 500; }
  details.rrow.is-page > summary.rrow-sum > .rpage-q { display: flex !important; order: 4; align-items: center; gap: 12px; margin: 0 16px; min-height: 60px; padding: 10px 14px; border: 0; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px #edf0ec; font: inherit; text-align: left; color: #151a16; }
  .rpage-qn { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 999px; background: #f59e0b; color: #fff; font-size: 13px; font-weight: 500; }
  .rpage-qn.is-done { background: #ecfdf5; color: #047857; } .rpage-qn .material-symbols-outlined { font-size: 16px; }
  .rpage-qt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .rpage-qt b { font-size: 14px; font-weight: 500; } .rpage-qt small { font-size: 12px; color: #6f7c70; }
  details.rrow.is-page.is-searching > summary.rrow-sum > .rcard-search { display: flex !important; order: 5; position: relative; align-items: center; gap: 8px; margin: 0 16px; min-height: 48px; padding: 0 6px 0 12px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1.5px #16a34a; }
  details.rrow.is-page .rcard-search input { flex: 1; min-width: 0; height: 44px; border: 0; background: transparent; font-size: 16px; outline: none; }
  details.rrow.is-page .rcard-search .rcard-hits:not(:empty) { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 4; max-height: 50vh; overflow: auto; border-radius: 14px; background: #fff; box-shadow: 0 18px 40px -18px rgba(20, 30, 25, 0.35), 0 0 0 1px #edf0ec; }
  details.rrow.is-page > .rbody { display: block !important; padding: 12px 0 0 !important; border: 0 !important; background: none !important; }
  details.rrow.is-page .rbody-left { display: none !important; }
  details.rrow.is-page .rpage-tabs { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 2px 16px 10px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); }
  .rpage-catalog-status:not([hidden]) { display: flex; align-items: center; gap: 8px; margin: 0 16px 8px; color: #647268; font-size: 12px; }
  .rpage-catalog-status button { border: 0; background: none; color: #087b52; font: inherit; text-decoration: underline; cursor: pointer; }
  details.rrow.is-page .rpage-tabs::-webkit-scrollbar { display: none; }
  .rpage-tabs button { flex: none; scroll-snap-align: center; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 1px solid #e4e4e7; border-radius: 999px; background: #fff; font: inherit; font-size: 14px; color: #151a16; white-space: nowrap; animation: rpage-chip 200ms ease both; }
  @keyframes rpage-chip { from { opacity: 0; } }
  .rpage-tabs button i { font-style: normal; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: #f1f4f0; font-size: 11.5px; text-align: center; font-variant-numeric: tabular-nums; }
  .rpage-tabs button[aria-selected="true"] { border-color: #16a34a; background: #16a34a; color: #fff; } .rpage-tabs button[aria-selected="true"] i { background: rgba(255, 255, 255, 0.25); }
  details.rrow.is-page .rbody-right { display: block !important; margin: 0 16px; padding: 0 !important; max-height: none !important; overflow: visible !important; border: 0 !important; background: none !important; }
  details.rrow.is-page .rbody-right[hidden] { display: none !important; }
  details.rrow.is-page .rbody-right > .rkicker { display: none; }
  details.rrow.is-page .rgrp { margin: 0 0 10px !important; border: 0 !important; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px #edf0ec; overflow: hidden; }
  details.rrow.is-page .rgrp-h { display: flex !important; align-items: center; justify-content: space-between; min-height: 42px; padding: 0 14px !important; border-bottom: 1px solid #f1f4f0; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #6f7c70; list-style: none; }
  details.rrow.is-page .rgrp-h .rrow-chev, details.rrow.is-page .rgrp-h small { display: none; }
  details.rrow.is-page .rgrp-h strong { font-weight: 500; } details.rrow.is-page .rgrp-sum { text-transform: none; font-size: 13px; letter-spacing: 0; color: #151a16; font-weight: 500; font-variant-numeric: tabular-nums; }
  details.rrow.is-page .rmoms { display: block !important; padding: 0 !important; }
  details.rrow.is-page .rmom { display: grid !important; grid-template-columns: minmax(0, 1fr) 44px auto 44px; align-items: center; gap: 0; min-height: 60px; padding: 8px 8px 8px 14px !important; border-top: 1px solid #f1f4f0; cursor: pointer; }
  details.rrow.is-page .rmom:first-child { border-top: 0; }
  details.rrow.is-page .rmom.is-removed { opacity: 0.5; }
  details.rrow.is-page .rmom-lead, details.rrow.is-page .rmom-edit { display: none !important; }
  details.rrow.is-page .rmom-name { display: flex !important; flex-direction: column; gap: 2px; min-width: 0; padding-right: 8px; font-size: 14px; line-height: 1.3; color: #151a16; white-space: normal !important; overflow: hidden; }
  details.rrow.is-page .rmom-price { display: block; font-size: 12px; color: #6f7c70; font-variant-numeric: tabular-nums; }
  details.rrow.is-page .rmom-step { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: #f4f6f3; font: inherit; font-size: 20px; color: #151a16; }
  details.rrow.is-page .rmom-step:active { transform: scale(0.96); }
  details.rrow.is-page .rmom-qty { display: inline-flex !important; align-items: baseline; justify-content: center; gap: 3px; min-width: 64px; height: 44px; line-height: 44px; padding: 0 4px; font-variant-numeric: tabular-nums; white-space: nowrap; }
  details.rrow.is-page .rmom-qty b { font-size: 15px; font-weight: 500; } details.rrow.is-page .rmom-qty small { font-size: 11px; color: #6f7c70; }
  details.rrow.is-page .rmom-qty input { width: 64px; height: 40px; font-size: 16px; text-align: center; }
  details.rrow.is-page .rmom-qty.is-static { grid-column: 2 / 5; justify-content: flex-end; }
  details.rrow.is-page .rempty { margin: 0; padding: 18px 14px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px #edf0ec; font-size: 13.5px; color: #6f7c70; }
  details.rrow.is-page .rpage-guide { display: block; margin: 0 8px; }
  details.rrow.is-page .rpage-guide[hidden] { display: none; }
  details.rrow.is-page .rpage-guide .workflow-guide__group-tabs, details.rrow.is-page .rpage-guide .workflow-guide__shared-toolbar { display: none !important; }
  .rpage-err { margin: 0 16px; font-size: 13px; color: #9f1239; }

  /* Sheets: Mått- och Bilder-popovern blir bottensheets på telefon. */
  .rpop.rpop-dims, .rpop.rpop-photos { position: fixed !important; left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; z-index: 70; width: auto !important; max-width: none !important; max-height: 92dvh; overflow: auto; border-radius: 22px 22px 0 0 !important; padding-bottom: env(safe-area-inset-bottom); animation: msheet-in 240ms cubic-bezier(0.22, 1, 0.36, 1) both; }
  .rpop.rpop-dims::before, .rpop.rpop-photos::before { content: ""; position: fixed; inset: 0 0 100% 0; }
  .rpop .rdim-step button { min-width: 44px; min-height: 44px; } .rpop .rdim-step input { font-size: 16px; }
  .rpop .rdim-foot { position: sticky; bottom: 0; background: #fff; }
  .rpop .rdim-foot > small { display: none; }

  /* M6 tabellen på telefon: en lista – text, "antal × à-pris · rum", summa med rabatt/Dold. Raden öppnar Redigera rad. */
  .rlist[data-view="table"] .rpt-tools { margin: 10px 16px 8px; }
  .rlist[data-view="table"] .rpt-hint { display: none !important; }
  .rlist[data-view="table"] .rpt-scroll { overflow: visible !important; }
  .rlist[data-view="table"] .rpt-inner { min-width: 0 !important; }
  .rlist[data-view="table"] .rpt-head { display: none !important; }
  .rlist[data-view="table"] .rpt { margin: 0 16px; border: 0 !important; background: none !important; }
  .rlist[data-view="table"] .rpt-grp { margin-bottom: 10px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px #edf0ec; overflow: hidden; }
  .rlist[data-view="table"] .rpt-grp-h { display: flex !important; align-items: center; gap: 8px; min-height: 50px; padding: 0 14px !important; }
  .rlist[data-view="table"] .rpt-grp-h .rpt-nrcell { display: none !important; }
  .rlist[data-view="table"] .rpt-gname { flex: 1; min-width: 0; display: flex !important; align-items: center; gap: 8px; }
  .rlist[data-view="table"] .rpt-gname b { font-size: 15px; font-weight: 500; }
  .rlist[data-view="table"] .rpt-gname small { padding: 1px 7px; border-radius: 999px; background: #f1f4f0; font-size: 11px; }
  .rlist[data-view="table"] .rpt-row { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; grid-template-areas: "name sum" !important; align-items: center; gap: 8px; min-height: 60px; padding: 10px 14px !important; border-top: 1px solid #f1f4f0; cursor: pointer; }
  .rlist[data-view="table"] .rpt-row > * { display: none !important; }
  .rlist[data-view="table"] .rpt-row > .rpt-name { display: flex !important; grid-area: name; flex-direction: column; gap: 2px; min-width: 0; }
  .rlist[data-view="table"] .rpt-row > .rpt-name > small:not(.rpt-mmeta) { display: none; }
  .rlist[data-view="table"] .rpt-row .rpt-text, .rlist[data-view="table"] .rpt-row .rpt-text-static { display: block; width: 100%; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; font: inherit; font-size: 14px; color: #151a16; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
  .rlist[data-view="table"] .rpt-mmeta { display: block; font-size: 12px; color: #6f7c70; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .rlist[data-view="table"] .rpt-row > .rpt-sumcell { display: flex !important; grid-area: sum; flex-direction: column; align-items: flex-end; gap: 3px; }
  .rlist[data-view="table"] .rpt-sumcell .rpt-was { display: none; }
  .rlist[data-view="table"] .rpt-mdisc:not([hidden]) { display: inline-block; padding: 1px 6px; border-radius: 6px; background: #fef3c7; color: #92400e; font-size: 10.5px; font-style: normal; }
  .rlist[data-view="table"] .rpt-mnomat:not([hidden]) { display: inline-block; padding: 1px 6px; border-radius: 6px; background: #fffbeb; color: #92400e; font-size: 10.5px; font-style: normal; }
  .rlist[data-view="table"] .rpt-gmat { display: none; }  /* telefon: hela gruppen via Välj flera → Utan material */
  .rlist[data-view="table"] .rpt-row.is-hidden .rpt-mhid { display: inline-block; padding: 1px 6px; border-radius: 6px; background: #f1f4f0; color: #6f7c70; font-size: 10.5px; font-style: normal; }
  .rlist[data-view="table"] .rpt-row.is-hidden .rpt-text, .rlist[data-view="table"] .rpt-row.is-hidden .rpt-sum { color: #8b958d; }
  .rlist[data-view="table"] .rpt-addrow { padding: 4px 14px 10px; } .rlist[data-view="table"] .rpt-add { width: 100%; min-height: 44px; justify-content: center; }
  .rlist[data-view="table"] .rpt-foot { margin: 0 16px; }
  .rlist[data-view="table"] > details.rrow { display: none !important; }

  /* Redigera rad (M7) som bottensheet. */
  .msheet[open] { display: flex; flex-direction: column; position: fixed; inset: auto 0 0 0; width: 100%; max-width: 100%; max-height: 92dvh; margin: 0; padding: 0; border: 0; border-radius: 22px 22px 0 0; background: #f6f7f5; color: #151a16; animation: msheet-in 240ms cubic-bezier(0.22, 1, 0.36, 1) both; }
  .msheet::backdrop { background: rgba(20, 30, 25, 0.4); }
  @keyframes msheet-in { from { transform: translateY(24px); opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .msheet[open], .rpop.rpop-dims, .rpop.rpop-photos { animation-name: rpage-fade; } }
  .msheet-grip { width: 40px; height: 4px; margin: 8px auto 0; border-radius: 999px; background: #d4d8d3; }
  .msheet-h { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px 6px; }
  .msheet-h b { font-family: Newsreader, Georgia, serif; font-size: 21px; font-weight: 500; }
  .msheet-x { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 999px; background: #e9ece8; }
  .msheet-body { flex: 1 1 auto; min-height: 0; overflow: auto; display: grid; gap: 12px; padding: 6px 16px 12px; }
  .msheet-f { display: grid; gap: 6px; } .msheet-f > span:first-child { font-size: 12.5px; color: #6f7c70; }
  .msheet-f textarea, .msheet-in input { width: 100%; padding: 12px; border: 1px solid #dfe4de; border-radius: 14px; background: #fff; font: inherit; font-size: 16px; color: #151a16; resize: vertical; }
  .msheet-f small { font-size: 12px; color: #6f7c70; }
  .msheet-in { position: relative; display: block; } .msheet-in em { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-style: normal; color: #6f7c70; }
  .msheet-in input { padding-right: 40px; text-align: right; font-variant-numeric: tabular-nums; }
  .msheet-card { display: grid; gap: 8px; padding: 12px 14px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px #edf0ec; }
  .msheet-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; }
  .mstep { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 14px; background: #f4f6f3; }
  .mstep button { width: 44px; height: 44px; border: 0; border-radius: 12px; background: none; font: inherit; font-size: 20px; color: #151a16; }
  .mstep input { width: 64px; height: 44px; border: 0; background: none; font-size: 16px; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
  .mstep em { min-width: 22px; font-style: normal; font-size: 12px; color: #6f7c70; }
  .msheet-facts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font-size: 12.5px; color: #6f7c70; } .msheet-facts b { font-weight: 500; color: #151a16; }
  .mchips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .mchips button { min-height: 44px; border: 1px solid #e4e4e7; border-radius: 12px; background: #fff; font: inherit; font-size: 13.5px; color: #151a16; }
  .mchips button[aria-checked="true"] { border-color: #f59e0b; background: #fffbeb; }
  .mchips button[data-rs-disc="0"][aria-checked="true"] { border-color: #16a34a; background: #ecfdf5; }
  .msheet-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 10px 14px; border: 0; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px #edf0ec; font: inherit; text-align: left; color: #151a16; }
  .msheet-switch span { display: flex; flex-direction: column; gap: 1px; } .msheet-switch b { font-size: 14px; font-weight: 500; } .msheet-switch small { font-size: 12px; color: #6f7c70; }
  .msheet-switch i { flex: none; position: relative; width: 48px; height: 28px; border-radius: 999px; background: #d4d8d3; transition: background 150ms ease; }
  .msheet-switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 999px; background: #fff; transition: transform 150ms ease; }
  .msheet-switch[aria-checked="true"] i { background: #16a34a; } .msheet-switch[aria-checked="true"] i::after { transform: translateX(20px); }
  .msheet-sum { display: flex; align-items: baseline; justify-content: space-between; margin: 0; padding: 4px 2px; font-size: 14px; color: #6f7c70; }
  .msheet-sum b { font-family: Newsreader, Georgia, serif; font-size: 24px; font-weight: 400; color: #151a16; font-variant-numeric: tabular-nums; }
  .msheet-f2 { flex: none; display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid #e7ebe6; background: #fff; }
  .msheet-btn { min-height: 50px; padding: 0 18px; border: 1px solid #e4e4e7; border-radius: 14px; background: #fff; font: inherit; font-size: 15px; font-weight: 500; color: #151a16; }
  .msheet-btn.is-primary { border-color: #16a34a; background: #16a34a; color: #fff; }
  .msheet-btn.is-danger { color: #be123c; }
  /* Frågor (M8) som bottensheet. */
  .rq-pop[open] { position: fixed; inset: auto 0 0 0; width: 100%; max-width: 100%; height: auto; max-height: 92dvh; margin: 0; border-radius: 22px 22px 0 0; animation: msheet-in 240ms cubic-bezier(0.22, 1, 0.36, 1) both; }
  .rqd-opts { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
}
@media (min-width: 768px) and (max-width: 1023px) { .rq-pop[open], .msheet[open] { max-width: 560px; margin: 0 auto; } }
@media (max-width: 1023px) {
  body:has(.pdock) #project-rooms-hub.rhub { margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  body:has(.pdock) #project-detail-tab-panel { margin: 0 !important; padding: 0 !important; }
  body:has(.pdock) .project-frame { padding: 0 !important; gap: 0 !important; }
}
@media (max-width: 1023px) {
  .rlist[data-view="table"] > .rpt-tools { display: grid !important; gap: 10px; }
  .rlist[data-view="table"] > .rposts { display: block !important; }
  .rlist[data-view="table"] .rposts .rpt-row { column-gap: 8px; }
  .rlist[data-view="table"] .rposts .rpt-grp-h { grid-template-columns: none !important; }
  .rlist[data-view="table"] .rposts .rpt-gname { padding-left: 0; }
  /* Mått-sheeten: ett fält per rad, 44 px-knappar. */
  .rpop.rpop-dims .rdim-two { grid-template-columns: minmax(0, 1fr) !important; }
  .rpop.rpop-dims .rdim-two input[type="range"] { display: none; }
  .rpop.rpop-dims .rdim-f { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 56px; }
  .rpop.rpop-dims .rdim-step { flex: none; width: 190px; }
  .rpop.rpop-dims .rdim-foot { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .rpop.rpop-dims .rdim-foot .op-btn { min-height: 50px; }
}
@media (max-width: 1023px) { .rlist[data-view="table"] > .rcard-add, .rlist[data-view="table"] > .rhub-plan { display: none !important; } }
@media (max-width: 1023px) {
  .rlist[data-rlist][data-view="table"] { display: block !important; min-width: 0; }
  .rlist[data-view="table"] > .rpt-tools, .rlist[data-view="table"] .rpt-bar, .rlist[data-view="table"] .rpt-search-box { min-width: 0; max-width: 100%; }
  .rlist[data-view="table"] .rpt-bar { display: flex; flex-wrap: wrap; gap: 8px; }
  .rlist[data-view="table"] .rpt-search-box { flex: 1 1 100%; }
  .rlist[data-view="table"] .rpt-by { flex: 1; } .rlist[data-view="table"] .rpt-by > small { display: none; }
}
@media (max-width: 1023px) { body:has(.pdock) .project-shell { background: #f6f7f5; min-height: 100dvh; max-width: none; } body:has(.pdock) .project-frame { max-width: 560px; margin: 0 auto; } }
details.rrow:not(.is-page) .rmom-price, details.rrow:not(.is-page) .rmom-step { display: none !important; }
@media (max-width: 1023px) {
  #ai-sheet[open] .aich { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
  .aich-host { display: contents; }
  .aich-said { margin: 0; padding: 12px 14px; border-radius: 14px; background: #fff; font-style: italic; font-size: 14px; line-height: 1.45; color: #3f4a42; }
  .aich-list { display: grid; margin: 0; padding: 0; list-style: none; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px #edf0ec; overflow: hidden; }
  .aich-row { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 10px 8px 14px; border-top: 1px solid #f1f4f0; }
  .aich-row:first-child { border-top: 0; }
  .aich-row.is-undone .aich-t { opacity: 0.5; text-decoration: line-through; }
  .aich-ok { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 999px; background: #ecfdf5; color: #047857; font-size: 16px; }
  .aich-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .aich-t b { font-size: 14px; font-weight: 500; } .aich-t small { font-size: 12px; color: #6f7c70; }
  .aich-undo { flex: none; min-width: 72px; min-height: 44px; border: 1px solid #e4e4e7; border-radius: 12px; background: #fff; font: inherit; font-size: 13.5px; font-weight: 500; color: #151a16; }
  .aich-undo:disabled { color: #8b958d; }
  .aich-empty { margin: 0; font-size: 14px; color: #6f7c70; }
  .aich-f { grid-template-columns: auto 1fr; }
}
/* M10 Offert på telefon: huvud (stäng · Skapa offert · totalen), checklistan som rader överst, korten, Skapa offert fast i botten. */
@media (max-width: 719px) {
  .poset.op { display: grid !important; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "x title sum" "pills pills pills" "grid grid grid" "view del del" "primary primary primary"; gap: 0; background: #f6f7f5; }
  .poset.op > .op-foot { display: contents !important; }
  .op > .op-foot > .op-x { grid-area: x; position: sticky; top: 0; z-index: 3; align-self: stretch; width: 44px !important; height: auto !important; min-height: 60px; margin: 0; padding-left: 12px; border-radius: 0; background: rgba(250, 251, 249, 0.97); }
  .op > .op-foot > .op-foot-title { grid-area: title; display: flex !important; position: sticky; top: 0; z-index: 3; align-items: center; gap: 8px; min-height: 60px; padding: 0 10px; background: rgba(250, 251, 249, 0.97); font-size: 16px; font-weight: 500; }
  .op > .op-foot > .op-foot-sum { grid-area: sum; display: flex !important; position: sticky; top: 0; z-index: 3; flex-direction: column; align-items: flex-end; justify-content: center; min-height: 60px; padding: 0 16px 0 6px; background: rgba(250, 251, 249, 0.97); }
  .op > .op-foot > .op-foot-sum b { font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .op > .op-foot > .op-foot-sum small { order: 2; font-size: 10.5px; color: #6f7c70; }
  .op > .op-foot > .op-pills { grid-area: pills; display: grid !important; gap: 0; width: auto !important; margin: 10px 16px 4px; padding: 0; overflow: hidden !important; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px #edf0ec; }
  .op > .op-foot > .op-pills .op-pill { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; margin: 0; padding: 0 14px; border: 0; border-top: 1px solid #f1f4f0; border-radius: 0; background: #fff; font-size: 14px; font-weight: 400; text-align: left; color: #151a16; }
  .op > .op-foot > .op-pills .op-pill:first-child { border-top: 0; }
  .op > .op-foot > .op-pills .op-pill::after { content: "chevron_right"; margin-left: auto; font-family: "Material Symbols Outlined"; font-size: 18px; color: #a3ada5; }
  .op > .op-foot > .op-pills .op-pill.is-bad { color: #be123c; font-weight: 500; }
  .op > .op-grid { grid-area: grid; padding: 8px 16px !important; }
  .op > .op-foot > [data-customer-view] { grid-area: view; justify-self: start; margin: 4px 0 12px 16px; }
  .op > .op-foot > form { grid-area: del; justify-self: end; align-self: center; margin: 4px 16px 12px 0; }
  .op > .op-foot > .op-btn.is-primary { grid-area: primary; position: sticky; bottom: 0; z-index: 3; width: auto; height: 52px !important; margin: 0; padding: 0 16px; border-radius: 0; box-shadow: 0 -8px 20px -14px rgba(20, 30, 25, 0.35); padding-bottom: env(safe-area-inset-bottom); }
}
@media (max-width: 719px) {
  #offer-settings-slot:not([hidden]) { overflow-y: auto !important; overscroll-behavior: contain; }
  .poset.op { height: auto !important; min-height: 100%; max-height: none !important; overflow: visible !important; grid-template-rows: auto auto auto auto 1fr auto; grid-template-areas: "x title sum" "pills pills pills" "grid grid grid" "view del del" "." "primary primary primary"; }
  .op > .op-grid { height: auto !important; max-height: none !important; overflow: visible !important; }
  .op > .op-foot > .op-pills .op-pill { display: flex !important; }
  .op > .op-foot > .op-foot-sum b { font-family: inherit; }
}
.cv-back { display: none; }
@media (max-width: 1023px) {
  #customer-view-pop .cv-back { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: #f1f4f0; font: inherit; font-size: 13.5px; font-weight: 500; color: #151a16; }
  #customer-view-pop .calc-pop-h > b, #customer-view-pop .calc-pop-x { display: none; }
  #customer-view-pop .calc-pop-h { height: 60px; padding: 0 16px; }
}
/* Mått: golvytan är ett fält – ser ut som talet, en streckad linje säger att den går att skriva i. */
.rdim-area { cursor: text; }
.rdim-area-in { width: 5.2ch; min-width: 0; padding: 0 2px; border: 0; border-bottom: 1px dashed #9cc9ae; border-radius: 0; background: transparent; font-family: Newsreader, Georgia, serif; font-size: 28px; font-weight: 400; color: #151a16; font-variant-numeric: tabular-nums; outline: none; }
.rdim-area-in:hover { border-bottom-color: #16a34a; }
.rdim-area-in:focus { border-bottom: 1.5px solid #16a34a; background: rgba(255, 255, 255, 0.6); }
@media (max-width: 1023px) { .rdim-area-in { font-size: 28px; } }
/* Studio (/?projekt=<id>) är arbetssidan; /projekt/<id>/ är sammanställningen med en väg in i Studio. */
.project-shell.is-studio .phead-studio { display: none; }
.phead-btn.is-ghost { background: #fff; color: #1f4e3d; box-shadow: inset 0 0 0 1px #d7e3dc; }
.phead-btn.is-ghost:hover { background: #f3f8f5; }
.phead-btn.is-ghost .material-symbols-outlined { font-size: 18px; }
/* Sammanställningen: summan krymper aldrig under Öppna i Studio / Skapa offert. */
.phead .phead-kr > .phead-kr-sum, .phead .phead-kr > .phead-btn { flex: none; }
.phead .phead-kr { gap: 12px; }
.phead .phead-kr > .phead-kr-sum { margin-right: 8px; }
@media (max-width: 1023px) {
  /* Projektet i Studio på telefon: kant i kant på en slät yta (prototypen M2–M4), ingen ruta ovanpå scenen. */
  body:has(.pdock) #zimla-page-content { padding: 0 !important; background: #f6f7f5; min-height: 100dvh; }
  body:has(.pdock) .project-shell { border-radius: 0; box-shadow: none; }
}
/* M5 Lyssnar: mörk helskärm medan man håller in Zimla. Tar inga tryck (fingret ligger kvar på knappen); dockan syns dämpad under. */
.zlisten { display: none; }
@media (max-width: 1023px) {
  html.zimla-listening .zlisten { display: block; position: fixed; inset: 0; z-index: 75; pointer-events: none; background: #1f2221; color: #f4f7f5; animation: zlisten-in 200ms ease both; }
  @keyframes zlisten-in { from { opacity: 0; } }
  .zlisten-k { position: absolute; top: calc(env(safe-area-inset-top) + 88px); left: 24px; right: 24px; margin: 0; font-size: 11.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #34d399; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .zlisten-t { position: absolute; top: calc(env(safe-area-inset-top) + 116px); left: 24px; right: 24px; max-height: 42vh; margin: 0; overflow: hidden; font-size: 24px; line-height: 1.35; font-weight: 400; letter-spacing: -0.01em; display: flex; flex-direction: column-reverse; }
  .zlisten-t > span { display: inline; }
  .zlisten-t [data-zlisten-provisional] { color: rgba(244, 247, 245, 0.62); }
  .zlisten-t { display: block; }
  .zlisten-orb { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 170px); width: 96px; height: 96px; transform: translateX(-50%); }
  .zlisten-halo { position: absolute; inset: -56px; border-radius: 999px; background: rgba(16, 185, 129, 0.12); }
  html.zimla-listening .zlisten[data-state="listening"] .zlisten-halo { animation: zlisten-halo 1.6s ease-in-out infinite; }
  @keyframes zlisten-halo { 50% { transform: scale(1.08); background: rgba(16, 185, 129, 0.18); } }
  .zlisten-face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 14px; border-radius: 999px; background: #047857; box-shadow: 0 12px 30px -10px rgba(4, 120, 87, 0.6); }
  .zlisten-face i { width: 17px; height: 34px; border-radius: 999px; background: #fff; }
  .zlisten-hint { position: absolute; left: 24px; right: 24px; bottom: calc(env(safe-area-inset-bottom) + 118px); margin: 0; text-align: center; font-size: 14px; color: rgba(244, 247, 245, 0.72); }
  html.zimla-listening [data-zimla-mobile-dock], html.zimla-listening .pdock { opacity: 0.35; }
  html.zimla-listening [data-zimla-mobile-dock] [data-zimla-dock-orb] { opacity: 1; }
  @media (prefers-reduced-motion: reduce) { html.zimla-listening .zlisten { animation: none; } html.zimla-listening .zlisten[data-state="listening"] .zlisten-halo { animation: none; } }
}
@media (max-width: 1023px) {
  .aich-q { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px #edf0ec; }
  .aich-q[hidden], .aich-ex[hidden] { display: none; }
  .aich-q-t { margin: 0; font-size: 15px; font-weight: 500; color: #151a16; }
  .aich-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .aich-opts.is-odd > button:last-child { grid-column: 1 / -1; }
  .aich-opts button { min-height: 48px; padding: 8px 12px; border: 1px solid #e4e4e7; border-radius: 12px; background: #fff; font: inherit; font-size: 14px; font-weight: 500; color: #151a16; }
  .aich-opts button.is-on { border-color: #16a34a; background: #16a34a; color: #fff; }
  .aich-opts button:disabled:not(.is-on) { opacity: 0.5; }
  .aich-q-sent { margin: 0; font-size: 13px; color: #6f7c70; }
  .aich-measure { display: grid; gap: 8px; }
  .aich-measure .msheet-in { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 12px; border: 1.2px solid #dfe2dd; border-radius: 14px; background: #fff; }
  .aich-measure .msheet-in span { color: #6f7c70; font-size: 13px; }
  .aich-measure .msheet-in input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 16px; font-variant-numeric: tabular-nums; outline: none; }
  .aich-measure .msheet-in em { color: #6f7c70; font-size: 14px; font-style: normal; }
  .aich-measure-go { min-height: 48px; border: 0; border-radius: 14px; background: #1f5c45; color: #fff; font: inherit; font-size: 15px; font-weight: 500; }
  .aich-measure-go:disabled { opacity: .6; }
  .aich-ex { padding: 12px 14px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px #edf0ec; }
  .aich-ex-h { margin: 0 0 6px; font-size: 12px; color: #6f7c70; }
  .aich-ex ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14px; font-style: italic; color: #3f4a42; }
  #ai-sheet .msheet-h b { font-family: Newsreader, Georgia, serif; font-size: 22px; }
}
/* Mobil: tomt projekt ("Börja med att prata") och rumsvalet "Vilka rum ska renoveras?". */
.mstart { display: none; }
@media (max-width: 1023px) {
  body:has(.pdock) .rhub-empty { display: none; }
  .mstart { display: grid; justify-items: center; gap: 8px; margin: 12px 16px 0; padding: 22px 18px 18px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px #edf0ec; text-align: center; }
  .mstart-orb { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; gap: 7px; border-radius: 999px; background: #047857; }
  .mstart-orb i { width: 9px; height: 18px; border-radius: 999px; background: #fff; }
  .mstart b { font-size: 16px; font-weight: 500; color: #151a16; }
  .mstart p { margin: 0; max-width: 30ch; font-size: 13.5px; line-height: 1.5; color: #5f6b62; }
  .mstart-btn { width: 100%; min-height: 46px; margin-top: 8px; border: 1px solid #dfe4de; border-radius: 12px; background: #fff; font: inherit; font-size: 14px; font-weight: 500; color: #151a16; }
  .mroomgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mroomopt { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 52px; padding: 6px 10px; border: 1px solid #e4e4e7; border-radius: 14px; background: #fff; font: inherit; font-size: 14.5px; font-weight: 500; color: #151a16; }
  .mroomopt .material-symbols-outlined { display: none; font-size: 18px; color: #047857; }
  .mroomopt[aria-pressed="true"] { border-color: #16a34a; background: #ecfdf5; }
  .mroomopt[aria-pressed="true"] .material-symbols-outlined { display: inline; }
  .msheet-f2.is-one { grid-template-columns: 1fr; }
  .msheet-btn.is-primary:disabled { opacity: 0.5; }
}
/* Lägg till i <rum> (mobil): sök överst, lista med ✓ Finns / + Lägg till, rösttips längst ner. */
@media (max-width: 1023px) {
  #add-sheet[open] { height: 92dvh; }
  .madd { grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; }
  .madd-q { width: 100%; min-height: 46px; padding: 0 14px; border: 1px solid #dfe4de; border-radius: 14px; background: #fff; font: inherit; font-size: 16px; color: #151a16; }
  .madd-hits { min-height: 0; overflow: auto; }
  .madd-hits .rsearch-hits { position: static; display: block; margin: 0; padding: 0; list-style: none; max-height: none; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px #edf0ec; overflow: hidden; }
  .madd-hits .rsearch-hit { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 8px 14px; border-top: 1px solid #f1f4f0; }
  .madd-hits .rsearch-hit:first-child { border-top: 0; }
  .madd-hits .rsearch-hit > span:first-child { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  .madd-hits .rsearch-hit b { font-size: 14px; font-weight: 500; color: #151a16; }
  .madd-hits .rsearch-hit small { font-size: 12px; color: #6f7c70; }
  .madd-hits .rsearch-add { flex: none; min-height: 40px; padding: 0 4px; border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 500; color: #047857; }
  .madd-hits .rsearch-on { flex: none; display: inline-flex; align-items: center; gap: 3px; font-size: 13px; color: #6f7c70; }
  .madd-hits .rsearch-on .material-symbols-outlined { font-size: 16px; }
  .madd-hits .rsearch-none { padding: 14px; font-size: 13.5px; color: #6f7c70; }
  .madd-hits .rsearch-own { padding: 10px 14px; border-top: 1px solid #f1f4f0; }
  .madd-tip { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; color: #5f6b62; }
  .madd-tip .material-symbols-outlined { font-size: 16px; color: #047857; }
}
@media (max-width: 1023px) {
  /* Toasten (Ångra, "2 rum lades till") i full bredd ovanför dockan, som i prototypen. */
  .zimla-undo { left: 16px; right: 16px; width: auto; max-width: 528px; margin: 0 auto; bottom: calc(env(safe-area-inset-bottom) + 84px); transform: translateY(8px); justify-content: space-between; padding: 12px 10px 12px 14px; font-size: 13.5px; line-height: 1.4; }
  .zimla-undo.is-on { transform: none; }
}
/* Mobilens arbetsgrupper (prototypen M4): sektion som kort, rad med +/bock, varianter som undertext och knappar, −/+ på vald rad. */
@media (max-width: 1023px) {
  details.rrow.is-page .rpage-guide { margin: 0 16px; }
  .mcat-group { display: grid; gap: 10px; }
  .mcat-group[hidden] { display: none; }
  .mcat-sec { border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px #edf0ec; overflow: hidden; }
  .mcat-sec-h { display: flex; align-items: center; justify-content: space-between; min-height: 40px; padding: 0 14px; border-bottom: 1px solid #f1f4f0; font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: #6f7c70; }
  .mcat-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "tick text step" ". vars vars"; align-items: center; column-gap: 12px; row-gap: 8px; min-height: 60px; padding: 10px 12px; border-top: 1px solid #f1f4f0; }
  .mcat-row:first-of-type { border-top: 0; }
  .mcat-tick { grid-area: tick; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 999px; background: #ecfdf5; color: #047857; }
  .mcat-tick .material-symbols-outlined { font-size: 20px; }
  .mcat-row.is-on .mcat-tick { background: #1f5c46; color: #fff; }
  .mcat-t { grid-area: text; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .mcat-t b { font-size: 14.5px; font-weight: 500; color: #151a16; line-height: 1.3; }
  .mcat-sub { font-size: 12px; color: #6f7c70; line-height: 1.35; }
  .mcat-picked { display: none; font-size: 12px; font-weight: 500; color: #047857; }
  .mcat-row.is-on .mcat-sub { display: none; }
  .mcat-row.is-on .mcat-picked:not(:empty) { display: block; }
  .mcat-vars { grid-area: vars; display: none; flex-wrap: wrap; gap: 6px; }
  .mcat-row.is-on .mcat-vars { display: flex; }
  .mcat-vars button { min-height: 36px; padding: 0 14px; border: 1px solid #e4e4e7; border-radius: 999px; background: #fff; font: inherit; font-size: 13px; font-weight: 500; color: #151a16; }
  .mcat-vars button[aria-checked="true"] { border-color: #16a34a; background: #16a34a; color: #fff; }
  .mcat-step { grid-area: step; display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 12px; background: #f4f6f3; font-variant-numeric: tabular-nums; }
  .mcat-step button { width: 40px; height: 40px; border: 0; background: none; font: inherit; font-size: 19px; color: #151a16; }
  .mcat-step b { min-width: 26px; text-align: right; font-size: 15px; font-weight: 500; }
  .mcat-step small { min-width: 18px; font-size: 11px; color: #6f7c70; }
  /* Undervalen (antal per vitvara, material …) på en vald rad, som guidens fält på datorn. */
  .mcat-row.has-fields { grid-template-areas: "tick text step" ". vars vars" ". fields fields"; }
  .mcat-fields { grid-area: fields; display: none; flex-direction: column; gap: 6px; }
  .mcat-row.is-on .mcat-fields { display: flex; }
  .mcat-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; }
  .mcat-field.is-choice { flex-direction: column; align-items: flex-start; gap: 6px; }
  .mcat-flabel { font-size: 13px; color: #3f4a42; }
  .mcat-fstep { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 12px; background: #f4f6f3; font-variant-numeric: tabular-nums; }
  .mcat-fstep button { width: 40px; height: 40px; border: 0; background: none; font: inherit; font-size: 19px; color: #151a16; }
  .mcat-fstep b { min-width: 22px; text-align: right; font-size: 15px; font-weight: 500; }
  .mcat-fstep small { min-width: 18px; padding-left: 2px; font-size: 11px; color: #6f7c70; }
  .mcat-fchips { display: flex; flex-wrap: wrap; gap: 6px; }
  .mcat-fchips button { min-height: 36px; padding: 0 14px; border: 1px solid #e4e4e7; border-radius: 999px; background: #fff; font: inherit; font-size: 13px; font-weight: 500; color: #151a16; }
  .mcat-fchips button[aria-checked="true"] { border-color: #16a34a; background: #16a34a; color: #fff; }
}
/* Tabellen på telefon (prototypen M6): huvudet "Tabell", bara Yrkesgrupp/Rum + Välj flera, kryssrutor och mörk rad ovanför dockan. */
.rpt-selmode, .rpt-bulk-mcount, .rpt-bulk-mdisc, .rpt-bulk-short, .mhead-table { display: none; }
@media (max-width: 1023px) {
  .rlist[data-view="table"] .mhead-t:not(.mhead-table) { display: none; }
  .rlist[data-view="table"] .mhead-table { display: flex; }
  .rlist[data-view="table"] .rpt-search-box, .rlist[data-view="table"] .rpt-fold { display: none !important; }
  .rlist[data-view="table"] .rpt-bar { display: flex !important; flex-wrap: nowrap; align-items: center; gap: 8px; }
  .rlist[data-view="table"] .rpt-seg { flex: 1; display: grid !important; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 14px; background: #e9ece8; }
  .rlist[data-view="table"] .rpt-seg button { min-height: 38px; border: 0; border-radius: 11px; background: none; font: inherit; font-size: 14px; color: #6f7c70; }
  .rlist[data-view="table"] .rpt-seg button[aria-pressed="true"] { background: #fff; color: #151a16; font-weight: 500; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); }
  .rlist[data-view="table"] .rpt-selmode { display: block; flex: none; min-height: 44px; padding: 0 14px; border: 1px solid #e4e4e7; border-radius: 14px; background: #fff; font: inherit; font-size: 14px; font-weight: 500; color: #151a16; }
  .rlist[data-view="table"] .rpt-selmode[aria-pressed="true"] { border-color: #1f5c46; background: #1f5c46; color: #fff; }
  .rlist.is-selecting[data-view="table"] .rpt-row { grid-template-columns: 28px minmax(0, 1fr) auto !important; grid-template-areas: "cb name sum" !important; }
  .rlist.is-selecting[data-view="table"] .rpt-row > .rpt-nrcell { display: flex !important; grid-area: cb; }
  .rlist.is-selecting[data-view="table"] .rpt-row > .rpt-nrcell .rpt-nr { display: none; }
  .rlist.is-selecting[data-view="table"] .rpt-row .rpt-cb { width: 22px; height: 22px; flex-basis: 22px; border-radius: 6px; }
  .rlist.is-selecting[data-view="table"] .rpt-row:has([data-rpt-check]:checked) { background: #f1f8f4; }
  .rlist[data-view="table"] .rpt-bulk:not([hidden]) { position: fixed; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom) + 84px); z-index: 49; max-width: 536px; margin: 0 auto; display: flex !important; align-items: center; gap: 6px; padding: 8px 8px 8px 14px; border-radius: 16px; background: #1c1f1e; color: #fff; box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.5); }
  .rlist[data-view="table"] .rpt-bulk > * { display: none !important; }
  .rlist[data-view="table"] .rpt-bulk > .rpt-bulk-mcount { display: block !important; flex: 1; font-size: 14px; font-weight: 500; }
  .rlist[data-view="table"] .rpt-bulk > .rpt-bulk-mdisc, .rlist[data-view="table"] .rpt-bulk > [data-rpt-bulk-action="hide"], .rlist[data-view="table"] .rpt-bulk > [data-rpt-bulk-action="remove"] { display: inline-flex !important; align-items: center; min-height: 40px; padding: 0 14px; border: 0; border-radius: 11px; font: inherit; font-size: 13.5px; font-weight: 500; }
  .rlist[data-view="table"] .rpt-bulk > .rpt-bulk-mdisc { background: #fff; color: #151a16; }
  .rlist[data-view="table"] .rpt-bulk > [data-rpt-bulk-action="hide"] { background: #3a3f3d; color: #fff; }
  .rlist[data-view="table"] .rpt-bulk > [data-rpt-bulk-action="remove"] { background: #5b2c2c; color: #ffd9d6; }
  .rlist[data-view="table"] .rpt-bulk .rpt-bulk-long { display: none; }
  .rlist[data-view="table"] .rpt-bulk .rpt-bulk-short { display: inline; }
  .mdisc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-bottom: 8px; }
  .mdisc button { min-height: 52px; border: 1px solid #e4e4e7; border-radius: 14px; background: #fff; font: inherit; font-size: 15px; font-weight: 500; color: #151a16; }
}
@media (max-width: 1023px) { .rlist[data-view="table"] .rpt-bulk:not([hidden]) { top: auto !important; height: auto !important; min-height: 56px; } }

/* M10/M11 på telefon: Offert och Kund är vyer med dockan kvar (Offert/Kund markerad), tillbaka-pil, skicka-knappen flyter ovanför dockan. */
.op-x-back, .op-send-long { display: none; }
@media (max-width: 1023px) {
  html.zimla-offer-panel-open body:has(.pdock) [data-zimla-mobile-dock] { display: block !important; z-index: 96; }
  html.zimla-offer-panel-open .pdock, body:has(#customer-view-pop[open]) .pdock { display: grid !important; z-index: 95; }
  body:has(#customer-view-pop[open]) [data-zimla-mobile-dock] { z-index: 96; }
  body:has(.pdock) #offer-settings-slot:not([hidden]) { padding-bottom: calc(env(safe-area-inset-bottom) + 84px); }
  body:has(.pdock) .op-x-close { display: none; } body:has(.pdock) .op-x-back { display: inline; }
  body:has(.pdock) .op-send-long { display: inline; } body:has(.pdock) .op-send-short { display: none; }
  body:has(.pdock) .op > .op-foot > .op-btn.is-primary { bottom: 12px; margin: 0 16px 12px; border-radius: 14px; padding-bottom: 0; box-shadow: 0 12px 28px -10px rgba(16, 52, 40, 0.5), 0 3px 8px -2px rgba(16, 30, 24, 0.18); }
  #customer-view-pop[open]:not(:modal) { position: fixed; inset: 0; z-index: 90; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0 0 calc(env(safe-area-inset-bottom) + 84px); border: 0; border-radius: 0; display: flex; flex-direction: column; background: #fff; }
  #customer-view-pop[open]:not(:modal) iframe { flex: 1; width: 100%; border: 0; }
}
@media (max-width: 1023px) {
  html.zimla-offer-panel-open body:has(.pdock) [data-zimla-mobile-dock] { visibility: visible; }
  html.zimla-offer-panel-open body:has(.pdock) .zimla-dock { opacity: 1; visibility: visible; pointer-events: auto; }
}
/* Prata med Zimla (kort tryck) och "Jag lägger in det…" (medan Zimla arbetar), som i prototypen. */
.zwork { display: none; }
@media (max-width: 1023px) {
  .mtalk-intro { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; background: #1f5c46; color: #fff; }
  .mtalk-intro .mstart-orb { flex: none; width: 44px; height: 44px; background: #0b7a57; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35); }
  .mtalk-intro p { margin: 0; font-size: 13.5px; line-height: 1.45; }
  .mtalk-k { margin: 6px 0 0; font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: #6f7c70; }
  .mtalk-ex { display: grid; gap: 8px; }
  .mtalk-ex button { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 14px; border: 0; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px #edf0ec; font: inherit; font-size: 14px; text-align: left; color: #151a16; }
  .mtalk-ex button::before { content: "mic"; font-family: "Material Symbols Outlined"; font-size: 18px; color: #047857; }
  .mtalk-write { display: flex; gap: 8px; }
  .mtalk-write input { flex: 1; min-width: 0; min-height: 48px; padding: 0 14px; border: 1px solid #dfe4de; border-radius: 14px; background: #fff; font: inherit; font-size: 16px; }
  .mtalk-write .msheet-btn { min-height: 48px; }
  .zwork:not([hidden]) { display: grid; justify-items: center; gap: 8px; position: fixed; left: 50%; top: 42%; z-index: 97; width: min(260px, calc(100vw - 64px)); padding: 20px 18px 18px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 100vmax rgba(20, 30, 25, 0.28), 0 24px 60px -20px rgba(20, 30, 25, 0.45); transform: translate(-50%, -50%); text-align: center; }
  .zwork b { font-size: 15px; font-weight: 500; color: #151a16; }
  .zwork small { font-size: 12.5px; font-style: italic; color: #5f6b62; }
  .zwork-spin { width: 28px; height: 28px; border-radius: 999px; border: 3px solid #d7eee2; border-top-color: #047857; animation: zwork-spin 900ms linear infinite; }
  @keyframes zwork-spin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .zwork-spin { animation-duration: 2.4s; } }
}
/* Vanliga val på telefon (prototypen M8): kort per fråga, bock när besvarad, bara Klar i foten. */
.rqd-mob, .rqd-done { display: none; }
@media (max-width: 1023px) {
  .rqd .rqd-desk { display: none; } .rqd .rqd-mob { display: inline; }
  .rqd-h { padding: 14px 16px 10px; border-bottom: 0; }
  .rqd-t b { font-family: inherit; font-size: 17px; font-weight: 500; }
  .rqd-t small { font-size: 12.5px; line-height: 1.45; }
  .rqd-body { padding: 4px 16px 12px; gap: 10px; background: #f6f7f5; }
  .rqd-q { position: relative; padding: 12px 14px 14px; border: 0 !important; box-shadow: 0 0 0 1px #edf0ec; }
  .rqd-n, .rqd-pill, .rqd-unsure, .rqd-p small { display: none !important; }
  .rqd-q.is-answered::after { content: "check"; position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 999px; background: #ecfdf5; font-family: "Material Symbols Outlined"; font-size: 14px; color: #047857; }
  .rqd-p b { font-size: 14px; }
  .rqd-opts, .rqd-opts.is-wide { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .rqd-opts > button:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .rqd-opts button { justify-content: center; min-height: 44px; }
  .rqd-opts button i { display: none; }
  .rqd-opts button[aria-checked="true"] { border-color: #1f5c46; background: #1f5c46; color: #fff; }
  .rqd-q.is-assumed .rqd-opts button[aria-checked="true"] { border: 1px dashed #9cc9ae; background: #fff; color: #151a16; }
  .rqd-f { background: #f6f7f5; border-top: 1px solid #e7ebe6; }
  .rqd-f > :not(.rqd-done) { display: none !important; }
  .rqd-f .rqd-done { display: block; flex: 1; min-height: 50px; border-radius: 14px; font-size: 15px; }
}
/* Mobildockan som prototypen: helbred vit list (95 %, suddig, 1 px kant överst), etiketter 11/600, mascoten 60 px med vit ring. */
@media (max-width: 1023px) {
  [data-zimla-mobile-dock] { padding: 0 !important; background: transparent !important; }
  [data-zimla-mobile-dock] > div.pointer-events-auto { max-width: none !important; margin: 0 !important; border: 0 !important; border-top: 1px solid #e6e8e3 !important; border-radius: 0 !important; background: rgba(255, 255, 255, 0.95) !important; box-shadow: none !important; backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important; padding-bottom: env(safe-area-inset-bottom) !important; }
  [data-zimla-mobile-dock] .grid { min-height: 0 !important; padding: 6px 6px 8px !important; align-items: end; }
  [data-zimla-mobile-dock] .grid > a { min-height: 46px !important; gap: 4px !important; font-size: 11px !important; font-weight: 600 !important; color: #8a918c; }
  [data-zimla-mobile-dock] .grid > a[aria-current="page"] { color: #1f6b4f !important; }
  [data-zimla-mobile-dock] .grid > a .material-symbols-outlined, [data-zimla-mobile-dock] .grid > a svg { font-size: 22px !important; width: 22px; height: 22px; }
  [data-zimla-mobile-dock] [data-zimla-dock-orb] { top: -20px !important; gap: 6px !important; font-size: 11px !important; font-weight: 600 !important; color: #1f6b4f !important; }
  [data-zimla-mobile-dock] [data-zimla-dock-orb] .zimla-dock-orb { width: 60px; height: 60px; background: #067a58; outline: 0; box-shadow: 0 10px 24px rgba(31, 107, 79, 0.4), 0 0 0 5px #fff; }
  [data-zimla-mobile-dock] [data-zimla-dock-orb] .zimla-dock-orb__eyes { gap: .5rem; }
  [data-zimla-mobile-dock] [data-zimla-dock-orb] .zimla-dock-orb__eye { width: .7rem; height: 1.35rem; }
  /* Projektdockan samma list; orben (skalets) ligger över dess mitt. */
  .pdock { left: 0 !important; right: 0 !important; bottom: 0 !important; max-width: none !important; min-height: 0; padding: 6px 6px calc(8px + env(safe-area-inset-bottom)) !important; border: 0 !important; border-top: 1px solid #e6e8e3 !important; border-radius: 0 !important; background: rgba(255, 255, 255, 0.95) !important; box-shadow: none !important; backdrop-filter: blur(18px); }
  .pdock button { min-height: 46px; gap: 4px; font-size: 11px; font-weight: 600; color: #8a918c; }
  .pdock button[aria-current] { color: #1f6b4f; }
  .pdock button .material-symbols-outlined { font-size: 22px; }
  .pdock-orb small { color: #1f6b4f; font-size: 11px; font-weight: 600; }
  /* Innehåll, fasta knappar och toasten ovanför den lägre listen. */
  .zimla-undo { bottom: calc(env(safe-area-inset-bottom) + 80px); }
}
@media (max-width: 1023px) {
  [data-zimla-mobile-dock] [data-zimla-dock-orb] .zimla-dock-orb-slot { display: grid; place-items: center; width: 60px; height: 60px; }
  [data-zimla-mobile-dock] [data-zimla-dock-orb] { top: -18px !important; min-height: 0 !important; padding: 0 !important; }
}
@media (max-width: 1023px) {
  /* I projektet ritar projektdockan listen; skalets list är genomskinlig, bara orben syns. */
  body:has(.pdock) [data-zimla-mobile-dock] > div.pointer-events-auto { background: transparent !important; border-top-color: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  body:has(.pdock) .pdock { z-index: 49; }
  body:has(.pdock) .rhub-plan, body:has(.pdock) .pmore { position: relative; z-index: 0; }
}
/* ═══ Mobiltema = prototypen (värden avlästa ur referens/Zimla Mobil.dc.html): Inter 600/700, mörkgrönt, 18 px kort. ═══ */
@media (max-width: 1023px) {
  /* Värdena läser Hems formspråk (--zm-*, zimla-start.css M1) – mobilloopen 2026-10-10, varv 14. */
  body:has(.pdock) { --m-ink: var(--zm-ink, #1d2420); --m-muted: var(--zm-muted, #6b736e); --m-muted2: var(--zm-ink-2, #4e5751); --m-primary: var(--zm-green, #1f6b4f); --m-dark: var(--zm-hero, #1f5c45); --m-soft: var(--zm-green-soft, #e9f2ec); --m-line: var(--zm-line, #e3e6e1); --m-step: #f0f2ee; --m-bg: var(--zm-bg, #f4f5f1); --m-gut: var(--zm-gutter, 20px); --m-shadow: var(--zm-card-shadow, 0 1px 2px rgba(20, 30, 25, 0.05)); }
  body:has(.pdock) #zimla-page-content, body:has(.pdock) .project-shell { background: var(--m-bg) !important; }
  /* Huvud (lista och rum). */
  .mhead, details.rrow.is-page > summary.rrow-sum > .rpage-h { background: rgba(244, 245, 241, 0.96); border-bottom-color: #e6e8e3; }
  .mhead-t b, .rpage-t b { font-size: 17px; font-weight: 600; color: var(--m-ink); }
  .mhead-t small, .rpage-t small { font-size: 12.5px; color: var(--m-muted); }
  .mhead-sum b, .rpage-sum b { font-size: 16.5px; font-weight: 700; color: var(--m-ink); }
  .mhead-sum small, .rpage-sum small { font-size: 10.5px; color: var(--m-muted); }
  .mhead-back, .rpage-back { width: 36px; height: 36px; box-shadow: 0 0 0 1px var(--m-line); }
  /* Rumsrader. */
  .rlist[data-rlist]:not([data-view="table"]) > details.rrow:not(.is-page) { border-radius: 18px !important; box-shadow: 0 1px 2px rgba(20, 30, 25, 0.05) !important; }
  .rlist[data-rlist]:not([data-view="table"]) > details.rrow:not(.is-page) > summary.rrow-sum { gap: 3px 12px !important; min-height: 72px; padding: 10px 12px 10px 10px !important; }
  .rlist[data-rlist]:not([data-view="table"]) > details.rrow:not(.is-page) > summary.rrow-sum > .rrow-pic { border-radius: 14px; background: #e6ebe5; }
  details.rrow:not(.is-page) .rpage-t b { font-size: 16px; font-weight: 600; }
  details.rrow:not(.is-page) .rpage-t small { font-size: 13px; }
  details.rrow:not(.is-page) .rpage-sum b { font-size: 15.5px; font-weight: 600; }
  .rlist[data-rlist]:not([data-view="table"]) > details.rrow:not(.is-page) > summary.rrow-sum > .rmv:not([hidden]) { min-height: 0; padding: 2px 8px; background: #fdf1e0; color: #8a5716; font-size: 11.5px; font-weight: 600; }
  .rlist[data-rlist] .rcard-add { min-height: 48px; border: 1.2px dashed #b9c9bf !important; border-radius: 18px !important; color: var(--m-primary) !important; font-size: 15.5px; font-weight: 600; }
  /* Rumssidan. */
  details.rrow.is-page > summary.rrow-sum > .rpage-area, details.rrow.is-page > summary.rrow-sum > .rpage-q, .rpage-mall { border-radius: 18px; box-shadow: 0 1px 2px rgba(20, 30, 25, 0.05); }
  .rpage-k { font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; color: var(--m-muted); }
  .rpage-area > b { font-family: inherit; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: var(--m-ink); }
  .rpage-area > small { font-size: 13px; color: var(--m-muted); }
  .rpage-dims { min-height: 38px; padding: 0 16px; border-radius: 14px; background: var(--m-soft); color: var(--m-dark); font-size: 15px; font-weight: 600; }
  .rpage-mall small { font-size: 12px; color: var(--m-muted); } .rpage-mall b { font-size: 15px; font-weight: 600; }
  .rpage-add { min-height: 47px; border-radius: 18px; background: var(--m-primary); font-size: 15.5px; font-weight: 600; }
  .rpage-qn { width: 30px; height: 30px; background: #c47d1b; font-size: 15px; font-weight: 700; }
  .rpage-qt b { font-size: 15.5px; font-weight: 600; color: var(--m-ink); } .rpage-qt small { font-size: 12.5px; color: var(--m-muted); }
  /* Täthet (mobilloopen T5): jobbet – momenten – syns på första skärmen. Låst rum ritar inte raden Mall/Lägg till (annars dubbelt gap). */
  details.rrow.is-page > summary.rrow-sum > .rrow-pic { height: 104px; }
  details.rrow.is-page > summary.rrow-sum > .rpage-area { padding: 10px 14px; }
  .rpage-area > b { font-size: 24px; line-height: 1.2; }
  details.rrow.is-page .rrow-pic .rrow-photos::before, .rpage-dims::before { content: ""; position: absolute; inset: -4px; }
  .rpage-dims { position: relative; } .rpage-dims::before { inset: -3px 0; }
  .rpage-qt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rhub.is-locked details.rrow.is-page > summary.rrow-sum > .rpage-row { display: none !important; }
  details.rrow.is-page > .rbody { padding-top: 6px !important; }
  .rpage-tabs button { min-height: 33px; padding: 0 14px; border: 1.2px solid var(--m-line); font-size: 14px; font-weight: 600; color: var(--m-ink); }
  .rpage-tabs button[aria-selected="true"] { border-color: var(--m-dark); background: var(--m-dark); }
  .rpage-tabs button i { font-weight: 600; }
  details.rrow.is-page .rgrp { border-radius: 18px; box-shadow: 0 1px 2px rgba(20, 30, 25, 0.05); }
  details.rrow.is-page .rgrp-h { min-height: 44px; font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--m-ink); }
  details.rrow.is-page .rgrp-h small { display: inline-block !important; margin-left: 6px; padding: 0 5px; border-radius: 999px; background: #eef0ec; font-size: 11.5px; font-weight: 600; color: var(--m-muted2); }
  details.rrow.is-page .rgrp-sum { font-size: 14px; font-weight: 600; }
  details.rrow.is-page .rmom-name { font-size: 15px; font-weight: 500; }
  details.rrow.is-page .rmom-price { font-size: 12.5px; color: var(--m-muted); }
  details.rrow.is-page .rmom { grid-template-columns: minmax(0, 1fr) 40px auto 40px; }
  details.rrow.is-page .rmom-step { width: 40px; height: 40px; border-radius: 12px; background: var(--m-step); font-size: 20px; }
  details.rrow.is-page .rmom-qty { height: 40px; line-height: 40px; background: var(--m-step); }
  details.rrow.is-page .rmom-qty b { font-size: 16px; font-weight: 600; }
  .mcat-sec { border-radius: 18px; box-shadow: 0 1px 2px rgba(20, 30, 25, 0.05); }
  .mcat-sec-h { font-size: 11.5px; font-weight: 600; }
  .mcat-t b { font-size: 15px; font-weight: 500; }
  .mcat-tick { background: var(--m-soft); color: var(--m-primary); }
  .mcat-row.is-on .mcat-tick { background: var(--m-dark); }
  .mcat-picked { color: var(--m-primary); font-weight: 600; }
  .mcat-vars button { min-height: 36px; font-weight: 600; } .mcat-vars button[aria-checked="true"] { border-color: var(--m-dark); background: var(--m-dark); }
  .mcat-step { background: var(--m-step); border-radius: 12px; }
  /* Sheets. */
  .msheet[open], .rq-pop[open] { background: var(--m-bg, #f4f5f1); }
  .msheet-h b, #ai-sheet .msheet-h b, .rqd-t b { font-family: inherit !important; font-size: 19px !important; font-weight: 600 !important; letter-spacing: -0.01em; color: #1d2420; }
  .rqd-t small, .msheet-body > p:first-child { font-size: 14px; color: #4e5751; }
  .msheet-x { width: 32px; height: 32px; background: #e9ece8; }
  .msheet-btn { border-radius: 16px; font-size: 16px; font-weight: 600; min-height: 45px; }
  .msheet-btn.is-primary, .rqd-btn.is-primary, .rqd-f .rqd-done { border-color: #1f6b4f; background: #1f6b4f; color: #fff; }
  .rqd-p b { font-size: 15.5px; font-weight: 600; }
  .rqd-opts button, .mchips button, .mroomopt, .aich-opts button, .mdisc button { min-height: 44px; border: 1.2px solid #dfe2dd; border-radius: 14px; font-size: 15px; font-weight: 500; }
  .rqd-opts button[aria-checked="true"], .aich-opts button.is-on { border-color: #1f5c45; background: #1f5c45; color: #fff; font-weight: 600; }
  .mroomopt[aria-pressed="true"] { border-color: #1f5c45; background: #e9f2ec; color: #1f5c45; font-weight: 600; }
  .mroomopt[aria-pressed="true"] .material-symbols-outlined { color: #1f5c45; }
  .mchips button[aria-checked="true"] { border-color: #1f5c45; background: #1f5c45; color: #fff; }
  .msheet-sum b { font-family: inherit; font-size: 22px; font-weight: 700; }
  .msheet-switch[aria-checked="true"] i { background: #1f6b4f; }
  .rdim-area-in { font-family: inherit; font-weight: 700; }
  .mtalk-intro { background: #1f5c45; }
  .aich-said { color: #4e5751; }
  .madd-hits .rsearch-add { color: #1f6b4f; font-weight: 600; }
  /* Hem är facit (mobilloopen varv 14): 20 px marginal, en bakgrund kant till kant, Hems kortskugga, ingen serif. */
  body:has(.pdock) .mhead, details.rrow.is-page > summary.rrow-sum > .rpage-h { padding-left: var(--m-gut); padding-right: var(--m-gut); }
  body:has(.pdock) :is(.mbanner, .mseg, .pmore, .mstart, .rpage-err, .rpage-catalog-status:not([hidden])),
  .rlist[data-rlist] > :is(.rpt-tools, .rhub-plan, .rhub-empty), .rlist[data-view="table"] :is(.rpt-tools, .rpt, .rpt-foot),
  details.rrow.is-page > summary.rrow-sum > :is(.rrow-pic, .rpage-area, .rpage-row, .rpage-q, .rcard-search), details.rrow.is-page :is(.rbody-right, .rpage-guide) { margin-left: var(--m-gut) !important; margin-right: var(--m-gut) !important; }
  .rlist[data-rlist]:not([data-view="table"]) > details.rrow:not(.is-page), .rlist[data-rlist] .rcard-add { margin-left: var(--m-gut) !important; margin-right: var(--m-gut) !important; }
  details.rrow.is-page .rpage-tabs { padding-left: var(--m-gut); padding-right: var(--m-gut); scroll-padding-inline: var(--m-gut); }
  body:has(.pdock) .mpane-body { padding-left: var(--m-gut); padding-right: var(--m-gut); }
  body:has(.pdock) .mpane-body.is-skel { background-position: var(--m-gut) 12px, var(--m-gut) 134px; background-size: calc(100% - 2 * var(--m-gut)) 110px, calc(100% - 2 * var(--m-gut)) 300px; }
  .rlist-head, body:has(.pdock) .mpane-h, .rqd-body, .rqd-f { background: var(--m-bg); }
  .rlist[data-rlist] details.rrow.is-page { background: var(--m-bg) !important; }
  body:has(.pdock) .project-shell { background: var(--m-bg); }
  /* Bara huvudet står fast; offertremsan och Rum | Tabell rullar med listan (rummet ser mer av listan på 320 px). */
  .rlist-head { display: contents !important; }
  body:has(.pdock) .rlist-head > .mhead { position: sticky; top: 0; z-index: 5; background: var(--m-bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .rlist[data-rlist]:not([data-view="table"]) > .rlist-head > .mbanner { margin-top: 2px; }
  .rlist[data-rlist]:not([data-view="table"]) > .rlist-head > .mseg { margin-top: 4px; }
  details.rrow.is-page > summary.rrow-sum > .rpage-h { background: var(--m-bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
  /* Långa namn bryts på två rader i stället för att klippas ("Kök/var…" på 320 px). */
  .mhead-t b, .rpage-t b, details.rrow:not(.is-page) .rpage-t small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; overflow-wrap: break-word; }
  @media (max-width: 359px) {
    .mhead-sum small, .rpage-sum small { max-width: 9.5em; white-space: normal; text-align: right; line-height: 1.25; }
    /* Smal telefon: summan under namnet så att namnet får hela bredden. */
    details.rrow:not(.is-page) .rpage-h { flex-wrap: wrap; row-gap: 2px; }
    details.rrow:not(.is-page) .rpage-t { flex-basis: 100%; }
    details.rrow:not(.is-page) .rpage-sum { align-items: flex-start; }
  }
  /* Täthet (mobilloopen T5): "N val kvar" under summan i stället för en egen rad – raden är lika hög med och utan chip. */
  @media (min-width: 360px) {
    .rlist[data-rlist]:not([data-view="table"]) > details.rrow:not(.is-page) > summary.rrow-sum { grid-template-areas: "pic head head go" !important; }
    .rlist[data-rlist]:not([data-view="table"]) > details.rrow:not(.is-page) > summary.rrow-sum > .rpage-h { align-self: stretch; }
    .rlist[data-rlist]:not([data-view="table"]) > details.rrow:not(.is-page) > summary.rrow-sum > .rpage-h > .rpage-sum { align-self: flex-start; }
    .rlist[data-rlist]:not([data-view="table"]) > details.rrow:not(.is-page) > summary.rrow-sum:has(> .rmv:not([hidden])) > .rpage-h > .rpage-sum { min-width: 84px; padding-bottom: 24px; }
    .rlist[data-rlist]:not([data-view="table"]) > details.rrow:not(.is-page) > summary.rrow-sum > .rmv:not([hidden]) { position: relative; grid-area: head; justify-self: end; align-self: end; margin-top: 0; min-height: 22px; }
    .rlist[data-rlist]:not([data-view="table"]) > details.rrow:not(.is-page) > summary.rrow-sum > .rmv:not([hidden])::after { content: ""; position: absolute; inset: -6px -4px; }
  }
  /* Bannern: fetstilen på egen rad bredvid knappen. */
  .rlist[data-rlist]:not([data-view="table"]) > .rlist-head > .mbanner { padding: 6px 12px; }
  .rlist-head > .mbanner > span b { display: block; }
  /* Radens bild i Hems mått (45 px, radie 12) – ger namnet tillbaka de 8 px som marginalen tar. */
  .rlist[data-rlist]:not([data-view="table"]) > details.rrow:not(.is-page) > summary.rrow-sum { grid-template-columns: var(--zm-thumb, 45px) minmax(0, 1fr) auto 18px !important; }
  .rlist[data-rlist]:not([data-view="table"]) > details.rrow:not(.is-page) > summary.rrow-sum > .rrow-pic { width: var(--zm-thumb, 45px); height: var(--zm-thumb, 45px); border-radius: var(--zm-thumb-radius, 12px); }
  .mcard, .mstart, .rlist[data-view="table"] .rpt-grp, details.rrow.is-page .rempty, .rqd-q { box-shadow: var(--m-shadow) !important; }
  body:has(.pdock) .mov-pay b { font-family: inherit; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: var(--m-ink); }
  .rpage-tabs button { min-height: 36px; }
  .mhead-back, .rpage-back { position: relative; }
  .mhead-back::before, .rpage-back::before { content: ""; position: absolute; inset: -4px; }
}
@media (max-width: 1023px) {
  details.rrow.is-page .rgrp-name { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 6px; }
  details.rrow.is-page .rgrp-h small { margin-left: 0; line-height: 17px; }
}
@media (max-width: 1023px) {
  /* Dockan som prototypen: sidoknapparna i listens överkant (etiketterna i höjd med "Håll & prata"), orben lyft över kanten. */
  [data-zimla-mobile-dock] .grid { align-items: start !important; padding: 6px 6px 10px !important; min-height: 64px !important; }
  [data-zimla-mobile-dock] .grid > a { justify-content: flex-start !important; min-height: 0 !important; padding: 6px 4px 0 !important; }
  [data-zimla-mobile-dock] [data-zimla-dock-orb] { top: -26px !important; align-self: start; }
  .pdock { align-items: start !important; min-height: 64px; padding: 6px 6px calc(10px + env(safe-area-inset-bottom)) !important; }
  .pdock button { justify-content: flex-start; min-height: 0; padding: 6px 4px 0; }
  .pdock-orb { align-self: start; min-height: 0; padding: 38px 0 0; }
}
@media (max-width: 1023px) {
  /* Dockan (slutlig): fast höjd, fem lika breda knappar centrerade i listen, alla etiketter på samma linje;
     mascoten flyter centrerad över mittknappen. */
  [data-zimla-mobile-dock] .grid { height: 64px !important; min-height: 64px !important; padding: 0 8px !important; align-items: center !important; }
  [data-zimla-mobile-dock] .grid > a, [data-zimla-mobile-dock] [data-zimla-dock-orb] { position: relative; top: 0 !important; height: 48px !important; min-height: 48px !important; padding: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-end !important; gap: 5px !important; align-self: center !important; }
  [data-zimla-mobile-dock] .grid > a > span:first-child { height: 24px; width: 24px; }
  [data-zimla-mobile-dock] [data-zimla-dock-orb] .zimla-dock-orb-slot { position: absolute; left: 50%; bottom: 23px; transform: translateX(-50%); }
  [data-zimla-mobile-dock] [data-zimla-dock-label] { line-height: 13px; }
  [data-zimla-mobile-dock] .grid > a > span:last-child { line-height: 13px; }
  .pdock { height: calc(64px + env(safe-area-inset-bottom)); min-height: 0; padding: 0 8px env(safe-area-inset-bottom) !important; align-items: center !important; }
  .pdock button { height: 48px; min-height: 48px; padding: 0; justify-content: flex-end; gap: 5px; line-height: 13px; }
  .pdock button .material-symbols-outlined { height: 24px; line-height: 24px; }
  .pdock-orb { height: 48px; min-height: 0; padding: 0; display: flex; align-items: flex-end; justify-content: center; align-self: center; }
  .pdock-orb small { line-height: 13px; }
  [data-zimla-mobile-dock] > div.pointer-events-auto { padding-bottom: env(safe-area-inset-bottom) !important; }
}
@media (max-width: 1023px) {
  [data-zimla-mobile-dock] > div.pointer-events-auto, .pdock { background: rgba(255, 255, 255, 0.985) !important; box-shadow: 0 -8px 24px -18px rgba(20, 30, 25, 0.18) !important; }
  body:has(.pdock) [data-zimla-mobile-dock] > div.pointer-events-auto { background: transparent !important; box-shadow: none !important; }
}
/* Lyssnar – mjuk övergång (ägaren: "känns hackig"): lagret finns alltid och tonas in/ut; sidan suddas och mörknar,
   texten glider upp, mascoten växer in med två ringar som andas medan den lyssnar. Släpp → tonas ut (200 ms). */
@media (max-width: 1023px) {
  .zlisten { display: block !important; position: fixed; inset: 0; z-index: 75; pointer-events: none; visibility: hidden; opacity: 0;
    background: rgba(24, 29, 27, 0.9) !important; backdrop-filter: blur(14px) saturate(0.8); -webkit-backdrop-filter: blur(14px) saturate(0.8);
    color: #f4f7f5; transition: opacity 200ms ease, visibility 0s linear 200ms; animation: none !important; }
  html.zimla-listening .zlisten { visibility: visible; opacity: 1; transition: opacity 220ms ease, visibility 0s; }
  .zlisten-k, .zlisten-t { transform: translateY(10px); opacity: 0; transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), opacity 240ms ease; }
  html.zimla-listening .zlisten-k, html.zimla-listening .zlisten-t { transform: none; opacity: 1; }
  html.zimla-listening .zlisten-t { transition-delay: 40ms; }
  .zlisten-k { color: #6ee7b7; }
  .zlisten-t { font-size: 25px; line-height: 1.32; font-weight: 500; }
  .zlisten-orb { width: 110px; height: 110px; bottom: calc(env(safe-area-inset-bottom) + 190px); transform: translateX(-50%) scale(0.82); opacity: 0; transition: transform 200ms ease-out, opacity 180ms ease; }
  html.zimla-listening .zlisten-orb { transform: translateX(-50%) scale(1); opacity: 1; }
  .zlisten-face { background: #067a58; box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.18), 0 18px 40px -12px rgba(0, 0, 0, 0.5); }
  .zlisten-face i { width: 19px; height: 38px; }
  .zlisten-halo { inset: -34px; background: rgba(16, 185, 129, 0.14); animation: none !important; }
  .zlisten-orb::before { content: ""; position: absolute; inset: -74px; border-radius: 999px; background: rgba(16, 185, 129, 0.07); }
  html.zimla-listening .zlisten[data-state="listening"] .zlisten-halo { animation: none !important; }
  html.zimla-listening .zlisten[data-state="listening"] .zlisten-orb::before { animation: none; }
  @keyframes zlisten-breathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.7; } }
  html.zimla-listening .zlisten:not([data-state="listening"]) .zlisten-face { animation: none; }
  @keyframes zlisten-wait { 50% { transform: scale(0.95); } }
  .zlisten-hint { bottom: calc(env(safe-area-inset-bottom) + 132px); font-size: 14.5px; transition: opacity 200ms ease; }
  html.zimla-listening [data-zimla-mobile-dock], html.zimla-listening .pdock { opacity: 0.25; transition: opacity 200ms ease; }
  [data-zimla-mobile-dock], .pdock { transition: opacity 200ms ease; }
  @media (prefers-reduced-motion: reduce) {
    .zlisten, .zlisten-k, .zlisten-t, .zlisten-orb, .zlisten-hint, html.zimla-listening .zlisten, [data-zimla-mobile-dock], .pdock { transition: none !important; transform: none !important; }
    .zlisten-orb { transform: translateX(-50%) !important; }
    html.zimla-listening .zlisten .zlisten-halo, html.zimla-listening .zlisten .zlisten-orb::before, html.zimla-listening .zlisten .zlisten-face { animation: none !important; }
  }
}
/* Mobil: Rum | Tabell-segmentet (prototypen), rumsrutorna i "Vilka rum ska renoveras?" och ett rent tomt projekt. */
.mseg { display: none; }
@media (max-width: 1023px) {
  .mseg { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin: 12px 16px 4px; padding: 3px; border-radius: 12px; background: #e9ece8; }
  .mseg button { min-height: 36px; border: 0; border-radius: 10px; background: none; font: inherit; font-size: 14px; font-weight: 600; color: #6b736e; }
  .mseg button[aria-current] { background: #fff; color: #1d2420; box-shadow: 0 1px 2px rgba(20, 30, 25, 0.08); }
  .mroomgrid { gap: 10px; }
  #rooms-sheet .mroomopt { min-height: 62px; border: 2px solid #e3e6e1; border-radius: 14px; font-size: 16px; font-weight: 600; color: #1d2420; transition: background-color 0.15s, border-color 0.15s, transform 0.1s; }
  #rooms-sheet .mroomopt:active { transform: scale(0.97); }
  #rooms-sheet .mroomopt[aria-pressed="true"] { border-color: #1f6b4f; background: #e9f2ec; color: #1f5c45; }
  #project-rooms-hub:has(.mstart) .rlist .rcard-add, #project-rooms-hub:has(.rlist details.rrow) .rhub-planhint:not(.is-attachment) { display: none !important; }
}
/* Mobil: Översikt och Kund (handoff-bilderna) – lägen ovanför rumslistan, samma huvud, dockan ligger kvar. */
.mpane, .mbanner { display: none; }
@media (max-width: 1023px) {
  .mpane:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 47; overflow-y: auto; overscroll-behavior: contain; background: #f4f5f1; padding-bottom: calc(96px + env(safe-area-inset-bottom)); animation: mpane-in 0.16s ease-out; }
  @keyframes mpane-in { from { opacity: 0; } }
  .mpane-h { position: sticky; top: 0; z-index: 2; background: #f6f7f5; }
  .mpane-h .mhead-table { display: none !important; }
  .mpane-body { display: grid; gap: 12px; padding: 12px 16px 0; color: #1d2420; }
  .mpane-body.is-skel { min-height: 60vh; background: linear-gradient(#fff, #fff) 16px 12px / calc(100% - 32px) 110px no-repeat, linear-gradient(#e9ece8, #e9ece8) 16px 134px / calc(100% - 32px) 300px no-repeat; border-radius: 18px; }
  .mcard { padding: 16px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px #edf0ec; }
  .mcard > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
  .mk { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #6b736e; }
  .mov-status header b { font-size: 15px; font-weight: 600; color: #1f6b4f; }
  .mov-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
  .mov-steps li { display: grid; gap: 6px; font-size: 12px; color: #9aa19c; }
  .mov-steps i { height: 5px; border-radius: 999px; background: #e3e6e1; }
  .mov-steps .is-done i, .mov-steps .is-on i { background: #1f6b4f; }
  .mov-steps .is-on span { font-weight: 600; color: #1d2420; }
  .mov-sub { margin: 12px 0 0; font-size: 14px; color: #6b736e; }
  .mov-sub button { padding: 0; border: 0; background: none; font: inherit; color: #1f6b4f; text-decoration: underline; text-underline-offset: 3px; }
  .mnext { display: grid; gap: 10px; padding: 18px 16px 16px; border-radius: 22px; background: #1f5c45; color: #fff; box-shadow: 0 14px 30px -18px rgba(31, 92, 69, 0.6); }
  .mnext .mk { color: rgba(255, 255, 255, 0.7); }
  .mnext h2 { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; }
  .mnext p { margin: 0; font-size: 14px; color: rgba(255, 255, 255, 0.85); }
  .mnext ul { margin: 2px 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, 0.14); }
  .mnext li { display: flex; align-items: center; gap: 12px; min-height: 46px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); font-size: 15px; }
  .mnext li[hidden] { display: none; }
  .mnext li > span { flex: 1; min-width: 0; }
  .mnext li > i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; font-style: normal; font-size: 13px; font-weight: 700; }
  .mnext li.is-ok > i { background: #7ee2a8; color: #1f5c45; }
  .mnext li.is-ok > i::before { content: "✓"; }
  .mnext li.is-warn > i { background: #f2c14e; color: #5a3d00; }
  .mnext li.is-bad > i { background: #f08a80; color: #5c130d; }
  .mnext li.is-warn > i::before, .mnext li.is-bad > i::before { content: "!"; }
  .mnext li button { flex: none; min-height: 40px; padding: 0 2px 0 8px; border: 0; background: none; font: inherit; font-size: 14px; color: rgba(255, 255, 255, 0.75); }
  .mnext-go { min-height: 48px; margin-top: 6px; border: 0; border-radius: 14px; background: #fff; font: inherit; font-size: 16px; font-weight: 600; color: #1f5c45; }
  .mnext-go:active, .mcu-btn:active, .mcu-acts a:active { transform: scale(0.98); }
  .mov-eco header small { font-size: 13px; color: #6b736e; }
  .mov-pay { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
  .mov-pay > span { display: grid; gap: 2px; }
  .mov-pay > span small { font-size: 14px; color: #4e5751; }
  .mov-pay b { font-family: Georgia, "Times New Roman", serif; font-size: 32px; font-weight: 400; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
  .mov-pay > small { font-size: 13px; line-height: 1.45; text-align: right; color: #6b736e; }
  .mov-eco .op-legend { margin-top: 10px; }
  .mov-rot { margin: 10px 0 0; font-size: 13px; color: #a8651a; }
  .mbanner { display: flex; align-items: center; gap: 10px; margin: 10px 16px 0; padding: 10px 12px; border-radius: 14px; background: #e9f2ec; font-size: 13.5px; line-height: 1.35; color: #1d2420; }
  .mbanner > i { flex: none; width: 8px; height: 8px; border-radius: 999px; background: #22c55e; }
  .mbanner > span { flex: 1; min-width: 0; }
  .mbanner b { font-weight: 600; }
  .mbanner button { flex: none; min-height: 36px; padding: 0 4px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: #1f6b4f; }
  html.zimla-mpane-open .mpane .mbanner, html.zimla-mpane-open .mpane .mseg:not(.is-in) { display: none; }
  .op > .op-foot > .op-pills [data-offer-rooms] { display: none !important; }
  .op > .op-foot > .op-pills .op-mchoices[hidden] { display: none !important; }
  /* Kund */
  .mcu-h { position: relative; display: flex; align-items: center; gap: 12px; }
  .mcu-saved { position: absolute; top: 50%; right: 0; display: inline-flex; align-items: center; gap: 3px; min-height: 44px; padding-left: 8px; transform: translateY(-50%); background: #fff; font-size: 14px; font-weight: 600; color: #1f6b4f; pointer-events: none; animation: mcu-saved 1.8s forwards; }
  .mcu-saved .material-symbols-outlined { font-size: 18px; }
  @keyframes mcu-saved { 0%, 78% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
  .mcu-av { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; background: #1f5c45; font-size: 16px; font-weight: 600; color: #fff; }
  .mcu-t { display: grid; flex: 1; min-width: 0; }
  .mcu-t b { overflow: hidden; font-size: 18px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
  .mcu-t small { font-size: 13.5px; color: #6b736e; }
  .mcu-edit, .mcu-link { flex: none; min-height: 44px; margin-right: -10px; padding: 0 10px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: #1f6b4f; }
  .mcu-link { position: relative; min-height: 0; margin: 0; padding: 0; font-weight: 500; text-align: left; }
  .mcu-link::after { content: ""; position: absolute; inset: -12px -4px; }
  .mcu-acts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 10px 0 4px; }
  .mcu-acts > * { display: grid; justify-items: center; gap: 1px; padding: 8px 4px 7px; line-height: 16px; border-radius: 12px; background: #e9f2ec; font-size: 13px; font-weight: 600; color: #1f5c45; text-decoration: none; }
  .mcu-acts > [aria-disabled] { background: #f0f2ee; color: #a3aaa5; }
  .mcu-acts .material-symbols-outlined { font-size: 20px; }
  .mcu-rows { margin: 0; }
  .mcu-rows > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; padding: 9px 0; line-height: 20px; border-top: 1px solid #f1f2ef; font-size: 14.5px; }
  .mcu-rows dt { color: #6b736e; }
  .mcu-rows dd { margin: 0; overflow-wrap: anywhere; }
  .mcu-warn { width: 100%; min-height: 48px; margin-top: 10px; padding: 8px 12px; border: 1px solid #f0d9a0; border-radius: 12px; background: #fdf4dc; font: inherit; font-size: 14px; font-weight: 600; color: #7a5200; }
  /* Formuläret (ägaren 2026-10-11, UX-gänget): tätt, etiketten till vänster som i kortet (staplad under 360 px),
     Postnr/Ort på en rad som aldrig går utanför, felet vid fältet och Spara över hela bredden. */
  .mcu-form { display: grid; gap: 8px; }
  .mcu-formt { margin-bottom: 2px; font-size: 16px; line-height: 20px; font-weight: 600; }
  .mcu-form label, .mcu-fields label { display: grid; gap: 3px; min-width: 0; font-size: 13px; line-height: 16px; color: #4e5751; }
  .mcu-form input, .mcu-fields input { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid #e3e6e1; border-radius: 12px; background: #fff; font: inherit; font-size: 16px; color: #1d2420; }
  .mcu-form input:focus, .mcu-fields input:focus { outline: 2px solid #1f6b4f; outline-offset: -1px; }
  .mcu-form textarea { box-sizing: border-box; width: 100%; min-width: 0; min-height: 64px; padding: 10px 12px; border: 1px solid #e3e6e1; border-radius: 12px; background: #fff; font: inherit; font-size: 16px; line-height: 22px; color: #1d2420; resize: vertical; }
  .mcu-form textarea:focus { outline: 2px solid #1f6b4f; outline-offset: -1px; }
  .mcu-notes { white-space: pre-line; }
  .mcu-form input[aria-invalid="true"] { border-color: #a8322a; }
  .mcu-form label.is-err > span { color: #a8322a; }
  .mcu-two { display: grid; grid-template-columns: minmax(0, 6rem) minmax(0, 1fr); gap: 3px 8px; }
  .mcu-two-l { grid-column: 1 / -1; font-size: 13px; line-height: 16px; color: #4e5751; }
  /* Spara går alltid att nå: fäst ovanför dockan, och ovanför tangentbordet när ett fält har fokus (dockan döljs då;
     --zs-session-keyboard sätts av zimla-ai-mobile-gestures.js). Avståndet räknas från panelens utfyllnad (96 px + säker zon). */
  .mcu-actions { position: sticky; z-index: 1; bottom: 8px; display: flex; gap: 8px; margin-top: -4px; padding-top: 6px; background: #fff; }
  .mcu-form:focus-within .mcu-actions { bottom: calc(var(--zs-session-keyboard, 0px) - 88px - env(safe-area-inset-bottom)); }
  .mcu-btn { flex: 1; min-height: 46px; padding: 0 18px; border: 1px solid #e3e6e1; border-radius: 12px; background: #fff; font: inherit; font-size: 15px; font-weight: 500; color: #1d2420; }
  .mcu-btn.is-primary { flex: 2; border-color: #1f6b4f; background: #1f6b4f; font-weight: 600; color: #fff; }
  .mcu-err { margin: -4px 0 0; font-size: 13px; line-height: 16px; color: #a8322a; }
  @media (min-width: 360px) {
    .mcu-form label { grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 8px; }
    .mcu-form label.is-area { align-items: start; } .mcu-form label.is-area > span { padding-top: 13px; }
    .mcu-two { grid-template-columns: 84px minmax(0, 5.5rem) minmax(0, 1fr); align-items: center; gap: 8px; }
    .mcu-two-l { grid-column: auto; }
    .mcu-err { padding-left: 92px; }
  }
  .mcu > form, .mcu > div { animation: mcu-in 0.18s cubic-bezier(0.22, 1, 0.36, 1); }
  @keyframes mcu-in { from { opacity: 0; transform: translateY(4px); } }
  @media (prefers-reduced-motion: reduce) { .mcu > form, .mcu > div { animation: none; } }
  .mcu-miss { padding: 3px 9px; border-radius: 999px; background: #fdf0cf; font-size: 12.5px; font-weight: 600; color: #8a5a00; }
  .mcu-ok { font-size: 13px; font-weight: 600; color: #1f6b4f; }
  .mcu-off { font-size: 13px; color: #6b736e; }
  .mpane .mcu-rot .mseg.is-in { display: grid; margin: 0 0 10px !important; } /* slår mobilens 20 px-marginal på .mseg */
  .mcu-rot .mseg.is-in button { position: relative; min-height: 40px; line-height: 1.15; }
  /* Jobbet: raderna till kundsidan (Hems listrad: ikonruta, titel + undertext, chevron). */
  .mcu-job { display: grid; padding: 2px 16px; }
  .mcu-go { display: grid; grid-template-columns: 36px minmax(0, 1fr) 20px; align-items: center; gap: 12px; min-height: 56px; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
  .mcu-go + .mcu-go { border-top: 1px solid #f1f2ef; }
  .mcu-go > .material-symbols-outlined:first-child { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: #e9f2ec; font-size: 20px; color: #1f5c45; }
  .mcu-go > .material-symbols-outlined:last-child { font-size: 20px; color: #9aa29d; }
  .mcu-go b { display: block; font-size: 15px; line-height: 20px; font-weight: 500; }
  .mcu-go small { display: block; overflow: hidden; font-size: 13px; line-height: 17px; color: #6b736e; white-space: nowrap; text-overflow: ellipsis; }
  .mcu-go:active { opacity: 0.6; }
  /* ROT: öppet när något saknas, annars en rad med sammanfattningen. */
  .mcu-rot-h { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; margin: -8px 0 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; }
  .mcu-rot-h .mk { flex: 1; }
  .mcu-rot-chev { font-size: 20px; color: #9aa29d; transition: transform 0.18s ease; }
  .mcu-rot-h[aria-expanded="true"] .mcu-rot-chev { transform: rotate(180deg); }
  .mcu-rot-h[aria-expanded="true"] { margin-bottom: 4px; }
  .mcu-rot-sum { margin: -6px 0 -4px; overflow: hidden; font-size: 14px; line-height: 20px; color: #4e5751; white-space: nowrap; text-overflow: ellipsis; }
  .mcu-rot > form:not([style*="none"]) { animation: mcu-in 0.18s cubic-bezier(0.22, 1, 0.36, 1); }
  @media (prefers-reduced-motion: reduce) { .mcu-rot > form { animation: none !important; } .mcu-rot-chev { transition: none; } }
  .mcu-rot .mseg.is-in button::after { content: ""; position: absolute; inset: -3px -1px; }
  .mcu-fields { display: grid; gap: 8px; }
  .mcu-fields label > span::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 999px; background: #e3a93b; vertical-align: 1px; }
  .mcu-fields label.is-set > span::before { background: #22c55e; }
  .mcu-note { margin: 10px 0 0; font-size: 12.5px; color: #6b736e; }
  @media (prefers-reduced-motion: reduce) { .mpane:not([hidden]) { animation: none; } }
}
.poset-empty { display: grid; justify-items: start; gap: 12px; }
.poset-empty p { margin: 0; }
@media (max-width: 1023px) {
  .poset-empty { justify-items: stretch; padding: 20px 16px; font-size: 15px; line-height: 1.5; color: #4e5751; }
  .poset-empty .op-btn { min-height: 52px; border-radius: 14px; font-size: 16px; }
}
.rqd-val { font-weight: 400; color: #8a5a00; white-space: nowrap; }
@media (max-width: 1023px) {
  .rpop.rpop-dims .rdim-step { grid-template-columns: 44px minmax(0, 1fr) auto 44px; height: 46px; border-radius: 12px; }
  .rpop.rpop-dims .rdim-step button { min-width: 0; min-height: 0; font-size: 20px; color: #1f5c45; }
  .rpop.rpop-dims .rdim-step input { text-align: right; font-size: 17px; font-weight: 600; }
  .rpop.rpop-dims .rdim-step em { padding: 0 2px 0 4px; font-size: 13px; }
}
/* Mått-sheeten som designprototypen: mörkgrön golvyta med väggyta/omkrets, fälten som vita rader, Räkna om som reglage. */
@media (max-width: 1023px) {
  .rpop.rpop-dims { background: #f4f5f1 !important; }
  .rpop.rpop-dims .rdim { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
  .rpop.rpop-dims .rdim > * { grid-column: 1 / -1; }
  .rpop.rpop-dims .rdim-h b { font-size: 19px; font-weight: 600; color: #1d2420; }
  .rpop.rpop-dims .rdim-x { width: 36px; height: 36px; background: #e9ece8; }
  .rpop.rpop-dims .rdim-area { grid-row: 2; grid-column: 1 / -1; padding: 14px 18px 16px; border-radius: 18px; background: #1f5c45; color: #fff; }
  .rpop.rpop-dims .rdim-k { color: rgba(255, 255, 255, 0.75); }
  .rpop.rpop-dims .rdim-area-in { width: 4.6ch; border-bottom-color: rgba(255, 255, 255, 0.35); color: #fff; font-size: 34px; }
  .rpop.rpop-dims .rdim-area-in:focus { background: rgba(255, 255, 255, 0.12); border-bottom-color: #fff; }
  .rpop.rpop-dims .rdim-area em { font-size: 18px; font-weight: 600; color: #fff; }
  .rpop.rpop-dims .rdim-area small { color: #f6d58e; }
  .rpop.rpop-dims .rdim-derived { grid-row: 2; grid-column: 2; z-index: 1; display: grid; justify-items: end; gap: 2px; align-self: center; margin-right: 18px; pointer-events: none; }
  .rpop.rpop-dims .rdim-derived > span { padding: 0; background: none; font-size: 13px; color: rgba(255, 255, 255, 0.85); }
  .rpop.rpop-dims .rdim-derived b { font-weight: 500; color: #fff; }
  .rpop.rpop-dims .rdim-f { padding: 8px 8px 8px 16px; border-radius: 16px; background: #fff; font-size: 15.5px; color: #1d2420; }
  .rpop.rpop-dims .rdim-step { border: 0; background: #eef0ec; }
  .rpop.rpop-dims .rdim-step:focus-within { box-shadow: 0 0 0 2px #1f6b4f; }
  .rpop.rpop-dims .rdim-step input { text-align: center; background: transparent; }
  .rpop.rpop-dims .rdim-recalc { align-items: center; gap: 12px; padding: 12px 14px 12px 16px; border-radius: 16px; background: #fff; font-size: 15px; color: #1d2420; }
  .rpop.rpop-dims .rdim-recalc > span { order: -1; flex: 1; }
  .rpop.rpop-dims .rdim-recalc small { margin-top: 2px; font-size: 12.5px; }
  .rpop.rpop-dims .rdim-recalc input { flex: none; -webkit-appearance: none; appearance: none; position: relative; width: 52px; height: 32px; margin: 0; border-radius: 999px; background: #d5dad4; cursor: pointer; transition: background-color 0.15s; }
  .rpop.rpop-dims .rdim-recalc input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); transition: transform 0.15s; }
  .rpop.rpop-dims .rdim-recalc input:checked { background: #1f6b4f; }
  .rpop.rpop-dims .rdim-recalc input:checked::after { transform: translateX(20px); }
  .rpop.rpop-dims .rdim-foot { margin: 4px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid #e3e6e1; background: #f4f5f1; }
  .rpop.rpop-dims .rdim-foot .op-btn { border-radius: 14px; font-size: 16px; }
  .rpop.rpop-dims .rdim-foot .op-btn:not(.is-primary) { background: #fff; }
  /* Redigera rad: vald rabatt syns (prototypens bärnstensram). */
  #rpt-sheet .mchips button[aria-checked="true"] { border-color: #d9a23a !important; background: #fff7e8 !important; color: #1d2420 !important; }
}
/* Mall på telefon (designprototypen): bottensheet med Välj mall | Jämför; Välj mall = radiokort med ett tryck. */
.mall-mseg, .mall-pick { display: none; }
@media (max-width: 1023px) {
  .mall-mseg { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin: 0 16px 12px; padding: 3px; border-radius: 12px; background: #e9ece8; }
  .mall-mseg button { min-height: 38px; border: 0; border-radius: 10px; background: none; font: inherit; font-size: 14px; font-weight: 600; color: #6b736e; }
  .mall-mseg button[aria-pressed="true"] { background: #fff; color: #1d2420; box-shadow: 0 1px 2px rgba(20, 30, 25, 0.08); }
  .mall:not(.is-compare) .mall-scroll, .mall:not(.is-compare) .mall-f { display: none !important; }
  .mall:not(.is-compare) { top: auto !important; height: auto !important; max-height: 88dvh; border-radius: 22px 22px 0 0 !important; background: #f4f5f1 !important; }
  .mall:not(.is-compare) .mall-h p { display: none; }
  .mall-pick { display: grid; gap: 10px; padding: 0 16px calc(16px + env(safe-area-inset-bottom)); overflow-y: auto; }
  .mall-pick form { margin: 0; }
  .mall-opt { display: flex; align-items: flex-start; gap: 14px; width: 100%; padding: 14px 16px; border: 1.5px solid transparent; border-radius: 16px; background: #fff; font: inherit; text-align: left; color: #1d2420; box-shadow: 0 1px 2px rgba(20, 30, 25, 0.05); }
  .mall-opt:active { transform: scale(0.99); }
  .mall-opt > i { flex: none; width: 22px; height: 22px; margin-top: 2px; border: 2px solid #c9cfc8; border-radius: 999px; }
  .mall-opt.is-cur { border-color: #1f6b4f; }
  .mall-opt.is-cur > i { border-color: #1f6b4f; background: radial-gradient(circle, #1f6b4f 45%, transparent 50%); }
  .mall-opt > span { display: grid; gap: 2px; min-width: 0; }
  .mall-opt b { font-size: 16.5px; font-weight: 600; }
  .mall-opt small { font-size: 14px; line-height: 1.35; color: #6b736e; }
  .mall-opt em { margin-top: 2px; font-size: 13px; font-style: normal; font-weight: 600; color: #1f6b4f; }
  .mall-opt em.is-warn { color: #a8651a; }
  .mall-opt:disabled { opacity: 0.6; }
}
@media (max-width: 1023px) {
  .mall-veil:has(> .mall:not(.is-compare)) { place-items: end stretch; }
  .mall:not(.is-compare) { width: 100% !important; }
}
@media (max-width: 1023px) { .mall.is-compare .mall-pick { display: none; } }
/* Rumssidans Valda-lista som designprototypen: gruppnamn i versaler utan räknare, stegaren som en grå pill. */
@media (max-width: 1023px) {
  details.rrow.is-page .rgrp-name strong { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #6b736e; }
  details.rrow.is-page .rgrp-name small[data-rgrp-count] { display: none; }
  details.rrow.is-page .rgrp-sum { font-size: 15px; font-weight: 700; }
  details.rrow.is-page .rmom-step[data-rmom-step="-1"] { border-radius: 12px 0 0 12px; }
  details.rrow.is-page .rmom-step[data-rmom-step="1"] { border-radius: 0 12px 12px 0; }
  details.rrow.is-page .rmom-step + .rmom-qty { border-radius: 0; }
}
/* Mall · Jämför på telefon (designprototypen). Tabellen är kvar på datorn. */
.mall-mcmp { display: none; }
@media (max-width: 1023px) {
  .mall.is-compare .mall-scroll, .mall.is-compare .mall-f { display: none !important; }
  .mall.is-compare .mall-h p { display: none; }
  .mall.is-compare { top: auto !important; height: auto !important; max-height: 92dvh; border-radius: 22px 22px 0 0 !important; background: #f4f5f1 !important; }
  .mall-veil:has(> .mall.is-compare) { place-items: end stretch; }
  .mall.is-compare .mall-mcmp { display: flex; flex-direction: column; gap: 12px; min-height: 0; padding: 0 16px calc(12px + env(safe-area-inset-bottom)); overflow-y: auto; }
  .mall-mcols { --n: 3; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
  .mall-mcol { display: grid; justify-items: center; gap: 2px; padding: 12px 8px 10px; border: 1.5px solid transparent; border-radius: 16px; background: #fff; text-align: center; box-shadow: 0 1px 2px rgba(20, 30, 25, 0.05); }
  .mall-mcol.is-cur { border-color: #1f6b4f; }
  .mall-mcol b { font-size: 15px; font-weight: 600; }
  .mall-mcol strong { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
  .mall-mcol small { font-size: 12.5px; color: #8a918c; }
  .mall-mcol form { width: 100%; margin: 6px 0 0; }
  .mall-mcol button, .mall-mvald { display: grid; place-items: center; width: 100%; min-height: 40px; margin-top: 6px; border: 0; border-radius: 12px; background: #1f6b4f; font: inherit; font-size: 15px; font-weight: 600; color: #fff; }
  .mall-mcol form button { margin-top: 0; }
  .mall-mvald { background: #e9f2ec; color: #1f5c45; }
  .mall-mvald.is-warn { background: #fdf0cf; color: #8a5a00; }
  .mall-mrows { border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(20, 30, 25, 0.05); overflow: hidden; }
  .mall-mrow { display: grid; gap: 6px; padding: 10px 10px 10px 12px; border-top: 1px solid #f1f2ef; }
  .mall-mrow:first-child { border-top: 0; }
  .mall-mrow > span:first-child { font-size: 14.5px; color: #1d2420; }
  .mall-mcells { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
  .mall-mcells i { display: grid; place-items: center; height: 30px; border-radius: 8px; background: #f0f2ee; font-style: normal; font-size: 14px; color: #a3aaa5; }
  .mall-mcells i.is-in { background: #e3efe7; color: #1f5c45; font-weight: 700; }
  .mall-mnote { margin: 0; font-size: 13px; text-align: center; color: #8a918c; }
}
@media (max-width: 1023px) { .mall-mcol { padding-inline: 4px; } .mall-mcol strong { font-size: 13.5px; letter-spacing: -0.01em; white-space: nowrap; } }
/* Jämför: mallkorten står kvar, momentraderna scrollar (kan vara många). */
@media (max-width: 1023px) {
  .mall.is-compare .mall-mcmp { overflow: hidden; }
  .mall-mcols, .mall-mnote { flex: none; }
  .mall-mrows { flex: 1 1 auto; min-height: 0; overflow-y: auto !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 1023px) { .mall-pick { flex: 1 1 auto; min-height: 0; overscroll-behavior: contain; } }
/* Dockan som designprototypen: tunna linjeikoner (23 px, 1,8 streck) och Inter 11/600 – ingen ikonfont. */
@media (max-width: 1023px) {
  [data-zimla-mobile-dock] a, [data-zimla-mobile-dock] [data-zimla-dock-label], .pdock > button, .pdock-orb small { font-family: Inter, system-ui, sans-serif !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0 !important; line-height: 1.1 !important; }
  [data-zimla-mobile-dock] a { color: #8a918c !important; gap: 3px !important; }
  [data-zimla-mobile-dock] a[aria-current="page"] { color: #1f6b4f !important; }
  .pdock > button { gap: 3px !important; color: #8a918c !important; }
  .pdock > button[aria-current] { color: #1f6b4f !important; }
  [data-zimla-mobile-dock] [data-zimla-dock-label], .pdock-orb small { color: #1f6b4f !important; }
  .zdock-ico { display: block; width: 23px; height: 23px; flex: none; }
  [data-zimla-mobile-dock] a > span:first-child { width: 23px !important; height: 23px !important; transform: none !important; }
}

/* Studio i ÄTA-läge (projects/detail.html .is-ata, rummen i ÄTA:n): inga frågor per kort, inga nya rum – ÄTA:n fylls med moment. */
.rhub.is-ata :is(.rcard-acts [data-rcard-q], .rq-host, .rcard-add, .rpage-q, .rmv, [data-rlist-add-room]) { display: none !important; }
/* Låst version på telefon: Lägg till rum och tabellens Lägg till rad är skrivkontroller som resten i zimla-areas.css:42 –
   ändringar går via bannerns Fortsätt på ÄTA (mobilloopen varv 53). */
@media (max-width: 1023px) { .rhub.is-locked :is(.rcard-add, .rpt-add, [data-rlist-add-room]) { display: none !important; } }
/* ÄTA-läget: Vanliga val hör till v1 (regeln ovan) – radens chip och dess reserverade plats under summan (varv 44) bort. */
@media (max-width: 1023px) { .rhub.is-ata .rlist[data-rlist]:not([data-view="table"]) > details.rrow:not(.is-page) > summary.rrow-sum > .rmv:not([hidden]) { display: none !important; } .rhub.is-ata .rlist[data-rlist]:not([data-view="table"]) > details.rrow:not(.is-page) > summary.rrow-sum > .rpage-h > .rpage-sum { min-width: 0; padding-bottom: 0; } }

/* Tabellvy: tom rad att fylla i ("+ Lägg till rad i …"), samma fält som sökningens eget moment. */
.rpt-newrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 12px 8px 48px; padding: 8px 10px; border: 1px solid #b9dcc8; border-radius: 10px; background: #fff; }
.rpt-newrow input[name="name"] { flex: 1 1 220px; min-width: 0; height: 32px; padding: 0 10px; border: 1px solid var(--pj-line); border-radius: 8px; font: inherit; font-size: 13px; }
.rpt-newrow select { height: 32px; border: 1px solid var(--pj-line); border-radius: 8px; font: inherit; font-size: 12.5px; padding: 0 6px; background: #fff; }
.rpt-newrow-x { border: 0; background: none; color: var(--pj-muted); font: inherit; font-size: 12.5px; cursor: pointer; }
.rpt-newrow .rsearch-own-err { flex-basis: 100%; color: #9a3a2e; }
.rpt-newrow[hidden] { display: none; }

/* Zimla AI: det som just hände (ZimlaRoomsAiSync i _rooms_list_script.html). Ny rad: grön ton och vänsterkant;
   ny summa: svagare ton utan kant. Står kvar tills raden setts ~2,5 s och tonar sedan ut (is-ai-seen). Bara bakgrund
   och skugga – inget i layouten flyttar sig. */
/* Tonen ritas som inre skugga ovanpå radens egen bakgrund (inget !important behövs och den kan tona ut). */
.is-ai-new { box-shadow: inset 3px 0 0 #10b981, inset 0 0 0 999px rgba(16, 185, 129, 0.14); }
.is-ai-changed { box-shadow: inset 0 0 0 999px rgba(16, 185, 129, 0.08); }
.is-ai-seen { animation: zimla-ai-seen 900ms ease-out forwards; }
@keyframes zimla-ai-seen { to { box-shadow: inset 3px 0 0 rgba(16, 185, 129, 0), inset 0 0 0 999px rgba(16, 185, 129, 0); } }
@media (prefers-reduced-motion: reduce) { .is-ai-seen { animation-duration: 1ms; } }

/* Delar (en lägenhet, ett radhus): rubriken står före delens rum över listans hela bredd, som syskon till rummen
   (listans rader är desamma som i ett platt projekt). Hopfälld del döljer rummen; mobilens rumssida syns ändå. */
.rpart-h { grid-column: 1 / -1; position: relative; display: flex; align-items: center; gap: 4px; margin: 10px 0 4px; padding-right: 6px; border-radius: 12px; background: #f9faf8; }
.rpart-h:hover { background: #f4f7f3; }
.rpart-toggle { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 6px 0 12px; border: 0; background: none; color: var(--pj-ink); font: inherit; text-align: left; cursor: pointer; }
.rpart-more > summary { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--pj-muted); cursor: pointer; list-style: none; }
.rpart-more > summary::-webkit-details-marker { display: none; }
.rpart-more > summary:hover, .rpart-more[open] > summary { background: #eef3ee; color: var(--pj-ink); }
.rpart-menu { position: absolute; right: 6px; top: calc(100% + 6px); z-index: 30; display: grid; gap: 10px; width: min(300px, calc(100vw - 2rem)); padding: 12px; border-radius: 14px; background: #fff; border: 1px solid var(--pj-line); box-shadow: 0 30px 60px -30px rgba(20, 40, 30, 0.5); }
.rpart-menu label { display: grid; gap: 6px; font-size: 12.5px; color: var(--pj-muted); }
.rpart-copy { display: flex; gap: 6px; }
.rpart-copy input { flex: 1; min-width: 0; height: 32px; padding: 0 10px; border: 1px solid var(--pj-line); border-radius: 9px; font: inherit; font-size: 13px; color: var(--pj-ink); }
.rpart-copy input[type="number"] { flex: 0 0 72px; }
.rpart-copy button { height: 32px; padding: 0 12px; border: 1px solid var(--pj-line); border-radius: 9px; background: #fff; font: inherit; font-size: 12.5px; color: var(--pj-ink); cursor: pointer; }
.rpart-chev { font-size: 20px; color: var(--pj-muted); transform: rotate(90deg); transition: transform 160ms ease; }
.rpart-h.is-folded .rpart-chev { transform: none; }
.rpart-name { font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.rpart-meta { flex: 1; min-width: 0; font-size: 12.5px; color: var(--pj-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rpart-kr { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Specifikt nog att slå kortlägets .rrow:last-of-type. */
.rlist[data-rlist] > details.rrow.is-part-folded:not(.is-page) { display: none; }
@media (max-width: 1023px) { .rpart-toggle { min-height: 56px; } .rpart-more > summary { width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) { .rpart-chev { transition: none; } }
.rrow-parts-host:not(:empty) { display: block; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--pj-line-2); }
.rrow-parts { display: flex; flex-wrap: wrap; gap: 6px; }
.rrow-parts button, .rrow-newpart button { height: 30px; padding: 0 10px; border: 1px solid var(--pj-line); border-radius: 9px; background: #fff; font: inherit; font-size: 12.5px; color: var(--pj-ink); cursor: pointer; }
.rrow-parts button.is-active { border-color: #9cc7b1; background: #eaf3ee; }
.rrow-newpart { display: flex; gap: 6px; margin-top: 8px; }
.rrow-newpart input { flex: 1; min-width: 0; height: 30px; padding: 0 10px; border: 1px solid var(--pj-line); border-radius: 9px; font: inherit; font-size: 12.5px; }
/* ⋯-menyn (rumstyp, del) ligger i kortets bild, som klipper för de rundade hörnen: menyn får gå utanför medan den är öppen. */
.rlist[data-rlist]:not([data-view="table"]) .rrow-pic:has(> .rrow-pick) { overflow: visible; z-index: 20; }
/* Kvittot efter en ändring i ett rum med kopior: "Gör samma i alla 6" (en plats, efter ändringen – aldrig ett läge). */
.rspread { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 8px 10px; border-radius: 10px; background: #eef5f0; font-size: 12.5px; color: var(--pj-ink-2); }
.rspread > span { flex: 1; min-width: 0; }
.rspread button { flex: none; height: 30px; padding: 0 12px; border: 1px solid #9cc7b1; border-radius: 9px; background: #fff; font: inherit; font-size: 12.5px; color: var(--pj-ink); cursor: pointer; }
.rspread.is-done { background: #f4f7f3; }
.rpart-job { grid-column: 1 / -1; }
/* Offertens "Per rum": delens rubrik (en lägenhet) med antal rum och summa före delens rum. */
.quote-review-part { display: flex; align-items: baseline; gap: 10px; margin: 14px 4px 4px; font-size: 13px; color: var(--pj-ink, #1d2a24); }
.quote-review-part b { font-weight: 500; }
.quote-review-part span { flex: 1; color: var(--pj-muted, #687369); font-size: 12.5px; }
.quote-review-part strong { font-weight: 500; font-variant-numeric: tabular-nums; }

/* =========================================================
   Studio-ikonen (Zimla-figuren med gnista, handoff 2026-10-02). Läget styrs av länken runt ikonen:
     inaktiv – standard · hover/fokus – blink + gnistan snurrar en gång · aktiv – a[aria-current="page"] → fylld disk.
   Mörk sidomeny är standard; .zs-light (mobilens docka) ger ljusa färger och 23 px.
   ========================================================= */
:root {
  --zs-ink: #8fa198; --zs-ink-hover: #ffffff; --zs-ink-active: #ffffff;
  --zs-disc-active: #2fbf71; --zs-eyes-active: currentColor;
}
.zs-light { --zs-ink: #8a918c; --zs-ink-hover: #1d2420; --zs-ink-active: #1f6b4f; --zs-disc-active: #1f6b4f; --zs-eyes-active: #ffffff; }
.zs-icon { width: 19px; height: 19px; color: var(--zs-ink); overflow: visible; flex: none; }
.zs-light .zs-icon { width: 23px; height: 23px; }
.zs-icon .zs-disc { fill: transparent; transition: fill .15s ease-out; }
.zs-icon .zs-eyes, .zs-icon .zs-spark { transform-box: fill-box; transform-origin: 50% 50%; }
:is(a, button):is(:hover, :focus-visible) > .zs-icon { color: var(--zs-ink-hover); }
:is(a, button):is(:hover, :focus-visible) > .zs-icon .zs-eyes { animation: zs-blink 900ms ease-in-out; }
:is(a, button):is(:hover, :focus-visible) > .zs-icon .zs-spark { animation: zs-twinkle 900ms cubic-bezier(.3, 1.4, .5, 1); }
:is(a, button)[aria-current="page"] > .zs-icon { color: var(--zs-ink-active); }
:is(a, button)[aria-current="page"] > .zs-icon .zs-disc { fill: var(--zs-disc-active); }
:is(a, button)[aria-current="page"] > .zs-icon .zs-eyes { stroke: var(--zs-eyes-active); }
@keyframes zs-blink { 0%, 30%, 60%, 100% { transform: scaleY(1); } 40%, 50% { transform: scaleY(.12); } }
@keyframes zs-twinkle { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(90deg) scale(1.35); } 100% { transform: rotate(180deg) scale(1); } }
@media (prefers-reduced-motion: reduce) { .zs-icon .zs-eyes, .zs-icon .zs-spark { animation: none !important; } }
/* Sidomenyns svg-regel (app.css: .zimla-desktop-sidebar nav a svg, !important) får inte färga Studio-ikonen. */
.zimla-desktop-sidebar a > .zs-icon { width: 19px !important; height: 19px !important; color: var(--zs-ink) !important; }
.zimla-desktop-sidebar a:is(:hover, :focus-visible) > .zs-icon { color: var(--zs-ink-hover) !important; }
.zimla-desktop-sidebar a[aria-current="page"] > .zs-icon { color: var(--zs-ink-active) !important; }
/* iPad i Safari: lg:h-screen (100vh) är höjden utan Safaris verktygsfält och flikrad – profilknappen längst ner hamnade
   under skärmkanten (användare 2026-10-14). 100dvh är den synliga höjden; på datorn samma sak som 100vh. */
@media (min-width: 1024px) { @supports (height: 100dvh) { .zimla-desktop-sidebar { height: 100dvh; } } }
/* Tabellvyn i ett projekt med delar: delarnas rubriker hör till rumsvyn (de fäller rumskorten) – i tabellen är delen
   grupperingens rubrik (Del → yrkesgrupp → rad), så rubrikerna ovanför tabellen döljs. */
.rlist[data-rlist][data-view="table"] > .rpart-h { display: none; }
.rlist .rposts .rpt-part { color: #6f7c70; }
/* Delen: samma radmönster som en grupp, utan egen platta; en hårlinje skiljer delarna. ⋯ är rumsvyns meny. */
.rlist .rposts .rpt-grp.is-part > .rpt-grp-h { position: relative; height: 48px; border-top: 1px solid #edf0ec; background: #fff; }
.rlist .rposts .rpt-grp.is-part > .rpt-grp-h:hover { background: #f9faf8; }
.rlist .rposts .rpt-grp.is-part > .rpt-grp-h .rpart-menu { cursor: default; }
.rlist .rposts .rpt:has(.rpart-more[open]), .rlist .rposts .rpt-scroll:has(.rpart-more[open]) { overflow: visible; }
/* Yrkesgruppen inne i delen: tunn underrubrik (nummer, namn, antal, summa) – fälls med delen, inte för sig. */
.rlist .rposts .rpt-sub { display: grid; grid-template-columns: var(--rpt-grid); column-gap: 8px; align-items: center; height: 34px; border-bottom: 1px solid #f4f4f5; background: #fbfcfa; }
.rlist .rposts .rpt-sub .rpt-nrcell { padding-left: 26px; }
.rlist .rposts .rpt-sub .rpt-gname b { font-size: 13.4px; color: #3e4a3d; }
/* Tabellvyn i sidled (desktop): dragg, kryss + nr och namnet står kvar till vänster och papperskorgen till höger, så att
   namnet syns när man tar bort rader i följd. De låsta cellerna ärver radens täta bakgrund och täcker mellanrummet mot
   grannen (marginal −8 px, innehållet står still); linjen mot det som rullar syns bara när det finns dolt innehåll där
   (.is-l/.is-r sätts av listans skript). Mobilens tabell är en lista och rullar inte i sidled. */
@media (min-width: 1024px) {
  .rlist .rposts .rpt-row { background: #fff; }
  .rlist .rposts .rpt-row:hover { background: #f9faf8; }
  .rlist .rposts .rpt-row.is-selected { background: #f4fef9; }
  .rlist .rposts .rpt-row.is-adding { background: #f2f8f4; }
  .rlist .rposts :is(.rpt-grp-h, .rpt-sub) .rpt-gname { grid-column: 3 / span 1; }
  .rlist .rposts :is(.rpt-head, .rpt-row, .rpt-grp-h, .rpt-sub) > :is(:nth-child(1), :nth-child(2), :nth-child(3)),
  .rlist .rposts :is(.rpt-head, .rpt-row, .rpt-grp-h) > :last-child { position: sticky; z-index: 1; align-self: stretch; display: flex; align-items: center; background: inherit; }
  .rlist .rposts :is(.rpt-head, .rpt-row, .rpt-grp-h, .rpt-sub) > :nth-child(1) { left: 0; margin-right: -8px; padding-right: 8px; justify-content: center; }
  .rlist .rposts :is(.rpt-head, .rpt-row, .rpt-grp-h, .rpt-sub) > :nth-child(2) { left: 48px; margin-right: -8px; padding-right: 8px; }
  .rlist .rposts :is(.rpt-head, .rpt-row, .rpt-grp-h, .rpt-sub) > :nth-child(3) { left: 116px; }
  .rlist .rposts .rpt-row > .rpt-name { flex-direction: column; align-items: stretch; justify-content: center; min-width: 0; }
  .rlist .rposts :is(.rpt-head, .rpt-row, .rpt-grp-h) > :last-child { right: 0; margin-left: -8px; padding-left: 8px; justify-content: center; }
  .rlist .rposts .rpt-grp-h > :last-child:has(.rpart-more[open]) { z-index: 6; }
  .rlist .rposts .rpt-addrow > .rpt-add { position: sticky; left: 116px; }
  .rlist .rposts .rpt-scroll.is-l :is(.rpt-head, .rpt-row, .rpt-grp-h, .rpt-sub) > :nth-child(3) { box-shadow: 1px 0 0 #e4e4e7, 8px 0 8px -8px rgba(20, 30, 25, 0.16); }
  .rlist .rposts .rpt-scroll.is-r :is(.rpt-head, .rpt-row, .rpt-grp-h) > :last-child { box-shadow: -1px 0 0 #e4e4e7, -8px 0 8px -8px rgba(20, 30, 25, 0.16); }
}
.rlist .rposts .rpt-sub .rpt-gname small { background: none; padding: 0; }
.rlist .rposts .rpt-subsum { grid-column: 10; padding-right: 12px; text-align: right; font-size: 13px; font-weight: 400; color: #3e4a3d; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rlist .rposts .rpt-grp.is-closed > .rpt-sub { display: none; }
@media (max-width: 1023px) {
  .rlist[data-view="table"] .rpt-sub { display: flex !important; align-items: center; gap: 8px; height: auto; min-height: 36px; padding: 0 14px; }
  .rlist[data-view="table"] .rpt-sub .rpt-nrcell { display: none; }
  .rlist[data-view="table"] .rpt-sub .rpt-gname { flex: 1; min-width: 0; }
}

/* Manuell kalkyl (rumskortet, alla bredder): Zimla-grön gradient med en tunn metallisk kant – ljus överkant som mörknar
   nedåt (1 px, två bakgrundslager) och en svag ljus innerkant upptill. Ingen glans, ingen yttre skugga: den ska kännas
   gedigen utan att konkurrera med Skapa offert. Vit 12,5 px-text: 5,2:1 överst, 7,5:1 nederst (WCAG AA). Höjd och
   radie följer brytpunkternas egna regler ovan. Rörelse: none – bara en kort tonändring. */
.rlist .rlinks .rlinks-main {
  border: 1px solid transparent !important;
  background:
    linear-gradient(180deg, #2a7a62 0%, #1f5f4c 100%) padding-box,
    linear-gradient(180deg, #e3efe9 0%, #8fb3a5 40%, #3d6b5c 75%, #0f4a37 100%) border-box !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.12);
  color: #fff !important;
  font-weight: 500;
  transition: filter 120ms ease;
}
.rlist .rlinks .rlinks-main .material-symbols-outlined { color: rgba(255, 255, 255, 0.85); }
@media (hover: hover) { .rlist .rlinks .rlinks-main:hover { filter: brightness(0.93); } }
.rlist .rlinks .rlinks-main:active { filter: brightness(0.88); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.22); }
.rlist .rlinks .rlinks-main:focus-visible { outline: 2px solid #1f5f4c; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .rlist .rlinks .rlinks-main { transition: none; } }
/* Offerten stoppades av antagna värden (skicka=1): raderna som spärrar är röda och pulserar två gånger när
   dialogen kommit in; nästa steg (Nästa rum / Tillbaka till offerten) tar över foten när rummet är klart. */
.rqd-need-note { display: grid; gap: 1px; }
.rqd-need-note > span:first-child { color: #b3261e; }
.rqd-need-rooms:empty { display: none; }
.rqd-why { margin: -4px 0 0; overflow: hidden; font-size: 12px; color: var(--pj-muted); white-space: nowrap; text-overflow: ellipsis; }
.rqd-q.is-need { position: relative; border-color: #fda4af; box-shadow: 0 0 0 4px #fff1f2; }
.rqd-q.is-need.is-current { border-color: #e11d48; }
.rqd-q.is-need::before { content: ""; position: absolute; inset: -4px; border-radius: 18px; box-shadow: 0 0 0 4px #fecdd3; opacity: 0; pointer-events: none; animation: rqd-need 800ms ease-in-out 240ms 2 both; }
@keyframes rqd-need { 50% { opacity: 1; } }
.rqd-q.is-need .rqd-unsure { display: none; }
.rqd-left.is-need { color: #b3261e; }
.rqd-fix { display: none; }
.rqd.is-fix-ready .rqd-fix { display: inline-flex; align-items: center; gap: 6px; max-width: 60%; }
.rqd.is-fix-ready [data-rqd-next] { display: none; }
.rqd-fix-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rlist .rchip.is-need { background: #fff1f2; color: #be123c; } .rlist .rchip.is-need::before { background: #e11d48; }
@media (max-width: 1023px) {
  .rqd-q.is-need { box-shadow: 0 0 0 1px #fda4af, 0 0 0 4px #fff1f2; }
  .rqd-q.is-need::after { content: ""; position: absolute; top: 14px; right: 14px; width: 8px; height: 8px; border-radius: 999px; background: #e11d48; }
  .rqd-q.is-estimate .rqd-p small { display: block !important; }
  .rqd.is-fix-ready .rqd-f > .rqd-done { display: none !important; }
  .rqd.is-fix-ready .rqd-f > .rqd-fix { display: flex !important; flex: 1; max-width: none; justify-content: center; min-height: 50px; border-radius: 14px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .rqd-q.is-need::before { animation: none; } }

/* Mobiluppdraget Fas 2 (docs/mobile/MOBILE_PLAN.md, UX-packen 2026-10-13): betalkortet i Rum ur offerten, rumskortens
   kundpris inkl. moms, Övrigt-kortet och rubrikraden "Rummen · tryck för att ändra" på samma rad som Rum | Tabell.
   Allt är mobilt – på datorn är värdarna dolda. */
.mpay, #mpay-other { display: none; }
@media (max-width: 1023px) {
  body:has(.pdock) .rlist[data-rlist]:not([data-view="table"]) > .mpay { display: block; margin: 0 var(--m-gut); }
  .mpay-card { box-sizing: border-box; padding: 9px 14px 7px; border-radius: 20px; line-height: 1.3; background: var(--m-dark); color: #fff; box-shadow: 0 10px 24px -14px rgba(31, 92, 69, 0.55); }
  .mpay-card.is-skel { height: 92px; background: #e2e9e3; box-shadow: none; }
  .mpay-k { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #9be8bd; }
  .mpay-k small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; color: #c8d9cf; }
  .mpay-big { display: flex; align-items: baseline; gap: 6px; margin: 2px 0 0; }
  .mpay-big b { font: 400 28px/1.05 var(--zm-serif, Newsreader, Georgia, serif); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .mpay-big span { font-size: 12px; color: #c8d9cf; }
  .mpay-card dl { display: grid; gap: 0; margin: 5px 0 0; padding-top: 4px; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 12.5px; color: #d5e3da; }
  .mpay-card dl div { display: flex; justify-content: space-between; gap: 12px; }
  .mpay-card dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .mpay-card dd button { margin: -6px 0; padding: 6px 0; border: 0; background: none; font: inherit; color: #ffd28a; text-decoration: underline; text-underline-offset: 2px; }
  /* Huvudet slutar visa kalkylens summa när offertens står på kortet: en siffra i första vyn. */
  body:has(.mpay .mpay-card) .mhead-sum.is-offer { display: none; }
  /* Rumskortets metarad (yta · moment · nivå) på en rad med ellips – kortet växer inte på höjden. */
  .rlist[data-rlist]:not([data-view="table"]) > details.rrow:not(.is-page) .rpage-t { min-width: 0; }
  .rlist[data-rlist]:not([data-view="table"]) > details.rrow:not(.is-page) .rpage-t small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Rumskortets belopp ur offerten (inkl. moms); väntande medan kortet räknas om efter en ändring. */
  .rpage-kr { font-variant-numeric: tabular-nums; white-space: nowrap; transition: opacity 120ms ease; }
  .rpage-kr.is-pending { opacity: 0.45; }
  .rpage-kr.is-outside { font-size: 12.5px !important; font-weight: 500 !important; color: var(--m-muted, #6b736e) !important; }
  /* Rumssidan redigerar kalkylen: huvudet visar rummets kalkyl exkl. moms, samma tal som raderna och grupperna. Kundpriset
     inkl. moms (påslag och moms) hör till listan, där det går ihop med betalkortet. */
  details.rrow.is-page .rpage-sum :is([data-rrow-kr], .rpage-kr-k) { display: none !important; }
  details.rrow.is-page .rpage-sum :is([data-rpage-total], small:not(.rpage-kr-k))[hidden] { display: inline !important; }
  /* Övrigt: det som hör till hela jobbet (etablering, städ, avfall …) – samma kort som rummen, sist i listan. */
  body:has(.pdock) .rlist[data-rlist]:not([data-view="table"]) > #mpay-other:not(:empty) { display: block; margin: 0 var(--m-gut) 10px; }
  .mother { box-sizing: border-box; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 12px 10px 14px; border: 0; border-radius: var(--zm-card-radius, 18px); background: #fff; box-shadow: var(--m-shadow); font: inherit; color: var(--m-ink); text-align: left; }
  .mother-ic { flex: none; display: grid; place-items: center; width: 37px; height: 37px; border-radius: 12px; background: var(--m-soft); font-size: 20px; color: var(--m-primary); }
  .mother-t { flex: 1; min-width: 0; }
  .mother-t b { display: block; font-size: 15px; font-weight: 600; }
  .mother-t small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--m-muted); }
  .mother-kr { flex: none; font-size: 15.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .mother-chev { flex: none; font-size: 20px; color: #9aa29d; }
  .mother:active { transform: scale(0.99); }
  /* Rubrikraden: "Rummen · tryck för att ändra" till vänster, Rum | Tabell till höger – ett band i stället för två. */
  body:has(.pdock) .rlist > .mseg { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0 var(--m-gut); padding: 0; background: none; }
  .mseg-k { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--m-muted, #6b736e); }
  .mseg-sw { flex: none; display: flex; gap: 2px; padding: 3px; border-radius: 11px; background: #e7ebe6; }
  .mseg-sw button { min-height: 32px; padding: 0 12px; }
  .rlist[data-view="table"] .mseg-k { visibility: hidden; }
  /* Bannern på en rad (utkast, signerad, skickad): texten kortas, knappen/länken står kvar till höger. */
  body:has(.pdock) .rlist-head > .mbanner { box-sizing: border-box; height: 44px; padding-top: 0; padding-bottom: 0; }
  body:has(.pdock) .rlist-head > .mbanner :is(a, button) { min-height: 40px; display: inline-flex; align-items: center; }
  body:has(.pdock) .rlist-head > .mbanner > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body:has(.pdock) .rlist-head > .mbanner > span b { display: inline; }
  .mnext-go:is(a) { display: flex; align-items: center; justify-content: center; text-decoration: none; }
  /* Sidfotens "Kund: offertversioner …": Kund i dockan och tillbaka-pilen går redan dit (UX-packen: tre vägar till samma sida). */
  body:has(.pdock) .pmore { display: none; }

  /* Fas 4 – rummets fokusmeny. Håll in: ingen bildmeny eller textmarkering på iOS, skroll i höjdled går före. */
  .rlist details.rrow:not(.is-page) > summary.rrow-sum, .rlist .mother { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: pan-y; }
  .rlist details.rrow.zm-gone { display: none !important; }  /* borttaget, väntar på Ångra-tiden */
  /* Exkluderat (offertens excluded_room_ids, bara utkast): kortet står kvar tonat med vad rummet skulle kosta, överstruket. */
  .rlist details.rrow[data-excluded]:not(.is-page) > summary.rrow-sum { background: #f1f2ee; }
  .rlist details.rrow[data-excluded]:not(.is-page) :is(.rrow-img, .rpage-t b) { opacity: 0.55; }
  .rlist details.rrow[data-excluded]:not(.is-page) .rpage-kr { text-decoration: line-through; color: var(--m-muted) !important; font-weight: 500 !important; }
  .rlist[data-rlist]:not([data-view="table"]) > details.rrow[data-excluded]:not(.is-page) > summary.rrow-sum > .rmv:not([hidden]) { display: none !important; }
  .rlist details.rrow[data-excluded] .rpage-t small { display: none; }
  .rlist details.rrow[data-excluded] .rpage-t::after { content: 'Exkluderad · räknas inte med'; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: #8a5a12; }
  .mother.is-excluded, .mother[data-excluded] { background: #f1f2ee; }
  .mother.is-excluded :is(.mother-ic, .mother-t b), .mother[data-excluded] :is(.mother-ic, .mother-t b) { opacity: 0.55; }
  .mother.is-excluded .mother-kr { font-size: 13px; font-weight: 500; color: #8a5a12; }
  /* ⋯ på rumssidan (samma meny som håll in); dold i listans rader. */
  .rpage-more { display: none; }
  details.rrow.is-page .rpage-more { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin-right: -8px; border: 0; border-radius: 50%; background: transparent; color: var(--m-ink, #1d2420); }
  details.rrow.is-page .rpage-more:active { background: var(--m-soft, #e9f2ec); }
}

/* ═══ Bottenmenyn som ett svävande skogspiller (ägaren 2026-10-30, efter referens; UX-packen) ═══════════════════════
   Samma skog och korn som startsidan: 12 px från kanterna, 10 px över hemindikatorn, 28 px rundning. Etiketterna står kvar
   (ägaren 2026-10-16: "för oklart att man kan hålla in gubben"); orben i mitten med mint ring. Projektdockan (.pdock)
   följer med så att orben aldrig står över en vit list. Ogenomskinlig – ingen suddning som målas om vid scroll. */
@media (max-width: 1023px) {
  :root { --zm-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .11 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
  [data-zimla-mobile-dock] > div.pointer-events-auto, body:has(.pdock) .pdock {
    margin: 0 12px calc(10px + env(safe-area-inset-bottom)) !important; border: 1px solid rgb(139 231 181 / 14%) !important; border-radius: 28px !important;
    background: var(--zm-grain), radial-gradient(ellipse 70% 120% at 50% 0%, rgb(139 231 181 / 14%), transparent 60%), #174c39 !important;
    background-size: 240px 240px, auto, auto !important; box-shadow: 0 14px 30px -12px rgba(15, 58, 44, .45) !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding-bottom: 0 !important;
  }
  [data-zimla-mobile-dock] { padding-bottom: 0 !important; }
  body:has(.pdock) .pdock { left: 0 !important; right: 0 !important; bottom: 0 !important; max-width: none !important; padding: 6px 6px 8px !important; }
  body:has(.pdock) [data-zimla-mobile-dock] > div.pointer-events-auto { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
  [data-zimla-mobile-dock] .grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 76px minmax(0, 1fr) minmax(0, 1fr) !important; }
  [data-zimla-mobile-dock] .grid > a, .pdock button { color: rgba(255, 255, 255, .7) !important; font-size: 10.5px !important; font-weight: 500 !important; }
  [data-zimla-mobile-dock] .grid > a[aria-current="page"], .pdock button[aria-current] { color: #8be7b5 !important; }
  [data-zimla-mobile-dock] [data-zimla-dock-orb], .pdock-orb small { color: #8be7b5 !important; font-weight: 500 !important; }
  [data-zimla-mobile-dock] [data-zimla-dock-orb] { top: -14px !important; }
  [data-zimla-mobile-dock] [data-zimla-dock-orb] [data-zimla-dock-label] { color: #8be7b5 !important; }
  /* Studio-ikonen på skogen: mint skiva och mörka ögon när fliken är vald. */
  [data-zimla-mobile-dock] .zs-light, body:has(.pdock) .pdock { --zs-ink: rgba(255, 255, 255, .7); --zs-ink-hover: #fff; --zs-ink-active: #8be7b5; --zs-disc-active: #8be7b5; --zs-eyes-active: #174c39; }
  [data-zimla-mobile-dock] [data-zimla-dock-orb] .zimla-dock-orb { width: 56px; height: 56px; box-shadow: 0 0 0 4px #174c39, 0 0 0 6px rgb(139 231 181 / 50%), 0 8px 22px rgb(139 231 181 / 35%); }
}
/* Bottenmenyn utanför projektet (ägaren 2026-10-30): glas som sökfältet och den publika menyn (halvgenomskinligt vitt, suddigt),
   ikon med namnet under (ägaren 2026-10-30), vald flik som en mörk pille bakom ikonen (som det valda filtret), Zimla-gubben i mitten i skogens
   grön med vit ring och utan namn (ingen grön, ägaren 2026-10-30). "Håll & prata" (etiketten) dyker upp som en pratbubbla ovanför gubben då och
   då (zimla-home-mobile.js, .is-hinting). I projektet (.pdock) har flikarna egna etiketter. */
@media (max-width: 1023px) {
  body:not(:has(.pdock)) [data-zimla-mobile-dock] > div.pointer-events-auto { margin: 0 22px calc(10px + env(safe-area-inset-bottom)) !important; border: 1px solid #ece9df !important;
    border-radius: 34px !important; background: linear-gradient(135deg, rgb(255 255 255 / 84%), rgb(255 255 255 / 68%)) !important; border-color: rgb(255 255 255 / 85%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.2) !important; backdrop-filter: blur(16px) saturate(1.2) !important; box-shadow: 0 1px 2px rgba(20, 30, 25, .06), 0 16px 34px -18px rgba(18, 56, 43, .45) !important; }
  /* Inget view-transition-namn: det gör listen till en egen bakgrundsrot, och då suddar glaset ingenting bakom sig. */
  body:not(:has(.pdock)) .dock-motion { view-transition-name: none; }
  body:not(:has(.pdock)) [data-zimla-mobile-dock] .grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; align-items: center !important; min-height: 0 !important; padding: 7px 8px !important; }
  body:not(:has(.pdock)) [data-zimla-mobile-dock] .grid > a { position: relative; justify-self: stretch; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; gap: 6px !important; height: 50px; min-height: 0 !important; padding: 4px 0 0 !important;
    border-radius: 0 !important; color: #6b746d !important; transition: color 160ms ease; }
  body:not(:has(.pdock)) [data-zimla-mobile-dock] .grid > a::before { content: ""; position: absolute; top: 0; left: 50%; width: min(52px, calc(100% - 6px)); height: 31px; transform: translateX(-50%); border-radius: 999px; background: transparent; transition: background-color 160ms ease; }
  body:not(:has(.pdock)) [data-zimla-mobile-dock] .grid > a > :first-child { position: relative; z-index: 1; }
  body:not(:has(.pdock)) [data-zimla-mobile-dock] .grid > a > span:last-child { position: relative; z-index: 1; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
    color: #6b746d; font-size: 10.5px !important; font-weight: 500 !important; line-height: 12px !important; white-space: nowrap; }
  body:not(:has(.pdock)) [data-zimla-mobile-dock] .grid > a[aria-current="page"] { color: #fff !important; --zs-ink-active: #fff; --zs-disc-active: transparent; --zs-eyes-active: #fff; }
  body:not(:has(.pdock)) [data-zimla-mobile-dock] .grid > a[aria-current="page"]::before { background: #12382b; }
  body:not(:has(.pdock)) [data-zimla-mobile-dock] .grid > a[aria-current="page"] > span:last-child { color: #12382b; font-weight: 600 !important; }
  body:not(:has(.pdock)) [data-zimla-mobile-dock] :is(.zs-light, .grid) { --zs-ink: #6b746d; --zs-ink-hover: #1d2420; }
  body:not(:has(.pdock)) [data-zimla-mobile-dock] [data-zimla-dock-orb] { top: 0 !important; justify-self: center; min-height: 52px !important; overflow: visible !important; }
  body:not(:has(.pdock)) [data-zimla-mobile-dock] [data-zimla-dock-orb] .zimla-dock-orb-slot { position: relative; left: auto; bottom: auto; transform: none; width: 52px; height: 52px; }
  body:not(:has(.pdock)) [data-zimla-mobile-dock] [data-zimla-dock-orb] .zimla-dock-orb { width: 52px; height: 52px; background: #174c39;
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgb(18 56 43 / 6%), 0 8px 20px -6px rgb(23 76 57 / 55%); }
  /* "Håll & prata": en pratbubbla ovanför gubben – poppar fram, står en stund, hoppar till och drar sig in. */
  body:not(:has(.pdock)) [data-zimla-mobile-dock] [data-zimla-dock-orb] [data-zimla-dock-label] {
    position: absolute !important; left: 50%; bottom: calc(100% + 12px); z-index: 3; padding: 8px 13px; border-radius: 999px; background: #12382b; color: #fff !important;
    font: 600 13px/1 Inter, ui-sans-serif, system-ui, sans-serif !important; white-space: nowrap; pointer-events: none; box-shadow: 0 10px 22px -10px rgb(15 58 44 / 60%);
    opacity: 0; transform: translateX(-50%) scale(.4); transform-origin: 50% 120%; }
  body:not(:has(.pdock)) [data-zimla-mobile-dock] [data-zimla-dock-orb] [data-zimla-dock-label]::after {
    content: ""; position: absolute; left: 50%; top: 100%; width: 10px; height: 10px; margin: -6px 0 0 -5px; border-radius: 2px; background: #12382b; transform: rotate(45deg); }
  body:not(:has(.pdock)) [data-zimla-mobile-dock] [data-zimla-dock-orb].is-hinting:not([class*="is-voice-"]) [data-zimla-dock-label] { animation: zm-dock-hint 3.4s both; }
  body:not(:has(.pdock)) [data-zimla-mobile-dock] [data-zimla-dock-orb].is-hinting:not([class*="is-voice-"]) .zimla-dock-orb { animation: zm-dock-nudge 3.4s both; }
  @keyframes zm-dock-hint {
    0% { opacity: 0; transform: translateX(-50%) translateY(8px) scale(.4); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
    14% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
    76% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); animation-timing-function: ease-out; }
    82% { opacity: 1; transform: translateX(-50%) translateY(-7px) scale(1.04); animation-timing-function: ease-in; }
    100% { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.4); }
  }
  @keyframes zm-dock-nudge { 0%, 6% { transform: none; } 12% { transform: scale(1.08); } 18%, 78% { transform: none; } 82% { transform: translateY(-3px); } 88%, 100% { transform: none; } }
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  body:not(:has(.pdock)) [data-zimla-mobile-dock] [data-zimla-dock-orb].is-hinting:not([class*="is-voice-"]) [data-zimla-dock-label] { animation: zm-dock-hint-still 3.4s both; }
  body:not(:has(.pdock)) [data-zimla-mobile-dock] [data-zimla-dock-orb].is-hinting .zimla-dock-orb { animation: none; }
  @keyframes zm-dock-hint-still { 0%, 100% { opacity: 0; transform: translateX(-50%); } 10%, 85% { opacity: 1; transform: translateX(-50%); } }
}
/* Från Studio till en annan sida (ägaren 2026-10-30: "dockan får en liten mini refresh"): startsidan bor i Zimla-panelen,
   och när man lämnar den stängs panelen medan dess grå, suddiga bakgrund (z 55) och skrivrad i ett ögonblick låg över
   menyn. Under bytet ligger menyn överst och bakgrunden visas inte – bara den valda fliken byts. */
@media (max-width: 1023px) {
  html:is(.zimla-page-leaving-studio, .zimla-page-landing-studio, .zimla-page-landed-studio) .zimla-ai-panel-backdrop { display: none !important; }
  html:is(.zimla-page-leaving-studio, .zimla-page-landing-studio, .zimla-page-landed-studio):not(.zgc-on) [data-zimla-mobile-dock] { z-index: 96 !important; }
}
/* Menyns kant som sökfältets glas (ägaren 2026-10-30): ljus kant, en ljusare överkant och en svag mörkare underkant. */
@media (max-width: 1023px) {
  body:not(:has(.pdock)) [data-zimla-mobile-dock] > div.pointer-events-auto {
    border-color: rgb(255 255 255 / 90%) !important;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 95%), inset 0 -1px 0 rgb(18 56 43 / 6%), 0 0 0 1px rgb(18 56 43 / 5%), 0 0 10px rgb(18 56 43 / 8%),
      0 1px 2px rgba(20, 30, 25, .05), 0 16px 34px -18px rgba(18, 56, 43, .45) !important;  /* en hårfin skugga runt om så att menyn syns mot ljusa kort */
  }
}