/* Listningsmönstret: Projekt, Offerter och Kunder delar chrome och kort.
   Tokens från mockupen: papper, tunn linje, grön accent. */
.lst {
  --lst-ink: #17211a;
  --lst-ink-2: #35493d;
  --lst-muted: #6b7a70;
  --lst-faint: #9fb3a6;
  --lst-line: #e3e8e2;
  --lst-line-2: #eef1ec;
  --lst-leaf: #3a8874;
  --lst-leaf-dark: #2f6f5c;
  --lst-chip: #eef5ec;
  --lst-chip-line: #cfe3d8;
  --lst-warn: #b7791f;
  --lst-warn-2: #fbf3e3;
  --lst-sent: #3b6fb0;
  --lst-sent-2: #e8f0fa;
  --lst-ok: #2f6f5c;
  --lst-ok-2: #e5f3ea;
  display: grid;
  /* Explicit 0-min: annars golvas den enda kolumnen av radernas min-content
     (långa belopp, nowrap-knappar) och hela sidan blir bredare än skärmen. */
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 16px 16px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 60px -40px rgba(60, 40, 10, 0.5);
  color: var(--lst-ink);
}

.lst-search { display: grid; gap: 8px; }
.lst-q, .lst-sel { display: flex; align-items: center; gap: 8px; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid var(--lst-line); border-radius: 12px; background: #fff; }
.lst-q { flex-direction: row-reverse; justify-content: flex-end; }
.lst-q input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 13px; color: var(--lst-ink); }
.lst-q input::-webkit-search-cancel-button { -webkit-appearance: none; }
.lst-q:focus-within, .lst-sel:focus-within { border-color: var(--lst-leaf); box-shadow: 0 0 0 3px rgba(58, 136, 116, 0.15); }
.lst-q .material-symbols-outlined, .lst-sel .material-symbols-outlined { font-size: 18px; color: var(--lst-muted); }
.lst-sel select { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 13px; color: var(--lst-ink); }

.lst-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 10px; background: var(--lst-leaf-dark); color: #fff; font: inherit; font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.lst-btn:hover { background: #27604f; color: #fff; }
.lst-btn.is-ghost { background: #fff; color: var(--lst-ink); border: 1px solid var(--lst-line); }
.lst-btn.is-ghost:hover { border-color: var(--lst-chip-line); background: var(--lst-chip); }
.lst-btn .material-symbols-outlined { font-size: 17px; }
.lst-new { height: 40px; border-radius: 12px; }

.lst-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 2px 0 6px; border-bottom: 1px solid var(--lst-line-2); }
.lst-all { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 8px; font-size: 12.5px; font-weight: 500; color: var(--lst-muted); text-decoration: none; }
.lst-all.on { color: var(--lst-leaf-dark); }
.lst-all:hover { background: var(--lst-line-2); }
.lst-all .material-symbols-outlined { font-size: 18px; }
.lst-filters .chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--lst-chip-line); background: var(--lst-chip); color: var(--lst-leaf-dark); font-size: 11.5px; }
.lst-filters .chip a { color: inherit; text-decoration: none; font-size: 14px; line-height: 1; padding-left: 2px; }

.lst-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--lst-muted); }
.lst-views { display: inline-flex; gap: 4px; }
.lst-views button { width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; color: var(--lst-muted); border: 1px solid var(--lst-line); background: #fff; }
.lst-views button .material-symbols-outlined { font-size: 18px; }
.lst-views button.on { background: var(--lst-ink); border-color: var(--lst-ink); color: #fff; }

.lst { container: listing / inline-size; }
.lst-cards { display: grid; gap: 12px; }
.lst-cards.is-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lst-cards.is-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lst-card { position: relative; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 14px; padding: 8px; border-radius: 16px; background: #fff; border: 1px solid var(--lst-line); transition: box-shadow 160ms ease, border-color 160ms ease; }
.lst-card:hover { border-color: var(--lst-chip-line); box-shadow: 0 14px 34px -26px rgba(20, 40, 30, 0.55); }
.lst-img { position: relative; display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 3; background: #eef3e9; }
.lst-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lst-av { position: absolute; inset: 0; display: grid; place-items: center; font-family: Outfit, Inter, sans-serif; font-size: 28px; font-weight: 500; color: #35604f; background: linear-gradient(160deg, #e3ecdd, #cfe3d8); }
.lst-img-tag { position: absolute; left: 10px; bottom: 10px; padding: 4px 9px; border-radius: 999px; background: var(--lst-leaf-dark); color: #fff; font-size: 11px; font-weight: 500; }
.lst-body { display: grid; gap: 6px; align-content: start; min-width: 0; padding: 6px 6px 4px 0; }
.lst-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.lst-top h3 { margin: 0; font-size: 15.5px; font-weight: 500; line-height: 1.3; }
.lst-top h3 a { color: inherit; text-decoration: none; }
/* Hela kortet är kortets länk; knappar och länkar i kortet ligger ovanpå. */
.lst-top h3 a::after { content: ''; position: absolute; inset: 0; border-radius: 16px; }
.lst-price { display: grid; justify-items: end; gap: 1px; text-align: right; }
.lst-price b { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.lst-price small { font-size: 11px; color: var(--lst-muted); }
.lst-deal { margin-bottom: 2px; padding: 2px 7px; border-radius: 6px; background: var(--lst-sent-2); color: var(--lst-sent); font-size: 10.5px; font-weight: 500; }
.lst-deal.ok { background: var(--lst-ok-2); color: var(--lst-ok); }
.lst-deal.warn { background: var(--lst-warn-2); color: var(--lst-warn); }
.lst-deal.gray { background: var(--lst-line-2); color: var(--lst-muted); }
.lst-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--lst-ink-2); }
.lst-meta .dot { color: var(--lst-faint); }
.lst-stage { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.lst-stage i { width: 8px; height: 8px; border-radius: 50%; background: var(--lst-leaf); }
.lst-stage i.d-underlag { background: var(--lst-warn); }
.lst-stage i.d-offert { background: var(--lst-sent); }
.lst-stage i.d-klar { background: var(--lst-faint); }
.lst-tags { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--lst-muted); }
.lst-tags span { display: inline-flex; align-items: center; gap: 4px; }
.lst-tags .material-symbols-outlined { font-size: 15px; }
.lst-actions { position: relative; z-index: 1; display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.lst-icon { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--lst-line); background: #fff; display: grid; place-items: center; color: var(--lst-muted); text-decoration: none; }
.lst-icon:hover { color: var(--lst-leaf-dark); border-color: var(--lst-chip-line); }
.lst-icon .material-symbols-outlined { font-size: 18px; }
.lst-empty { padding: 24px 8px; color: var(--lst-muted); font-size: 13px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Listvyn: kompakt rad – liten bild, allt på två rader, knapparna till höger. */
.lst-cards.is-list { gap: 8px; }
.lst-cards.is-list .lst-card { grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 14px; padding: 6px 10px 6px 6px; border-radius: 14px; }
.lst-cards.is-list .lst-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "top actions" "meta actions" "tags actions"; column-gap: 16px; align-items: center; }
.lst-cards.is-list .lst-top { grid-area: top; } .lst-cards.is-list .lst-meta { grid-area: meta; } .lst-cards.is-list .lst-tags { grid-area: tags; } .lst-cards.is-list .lst-actions { grid-area: actions; }
.lst-cards.is-list .lst-img { aspect-ratio: 4 / 3; border-radius: 10px; }
.lst-cards.is-list .lst-img-tag { left: 6px; bottom: 6px; padding: 2px 7px; font-size: 10px; }
.lst-cards.is-list .lst-av { font-size: 20px; }
.lst-cards.is-list .lst-body { gap: 3px; padding: 2px 0; }
.lst-cards.is-list .lst-top h3 { font-size: 14px; }
.lst-cards.is-list .lst-top .lst-price { display: none; }
.lst-cards.is-list .lst-meta { font-size: 12px; }
.lst-cards.is-list .lst-tags { gap: 10px; font-size: 11.5px; white-space: nowrap; overflow: hidden; }
.lst-cards.is-list .lst-tags span { flex: 0 0 auto; }
.lst-cards.is-list .lst-actions { margin-top: 0; gap: 14px; align-self: center; }
.lst-cards.is-list .lst-actions .lst-icon { width: 32px; height: 32px; }
.lst-cards.is-list .lst-actions .lst-btn { height: 34px; padding: 0 12px; font-size: 12.5px; }
.lst-actions .lst-price { display: none; }
.lst-cards.is-list .lst-actions .lst-price { display: grid; margin-right: 6px; }
.lst-cards.is-list .lst-actions .lst-price b { font-size: 15px; }
.lst-cards.is-split .lst-card { grid-template-columns: 150px minmax(0, 1fr); }
.lst-cards.is-split .lst-tags, .lst-cards.is-grid .lst-tags { display: none; }
.lst-cards.is-grid .lst-card { grid-template-columns: 1fr; gap: 10px; }
.lst-cards.is-grid .lst-img { aspect-ratio: 16 / 10; }
.lst-cards.is-grid .lst-body { padding: 0 6px 6px; }
.lst-cards.is-grid .lst-actions .lst-icon, .lst-cards.is-split .lst-actions .lst-icon { display: none; }
.lst-cards.is-grid .lst-actions .lst-btn { width: 100%; }

.lst-pages { display: flex; justify-content: center; align-items: center; gap: 4px; padding-top: 4px; }
.lst-page { min-width: 32px; height: 32px; padding: 0 8px; border-radius: 999px; display: grid; place-items: center; font-size: 12.5px; color: var(--lst-ink-2); text-decoration: none; }
a.lst-page:hover { background: var(--lst-line-2); }
.lst-page.on { background: var(--lst-ink); color: #fff; }
.lst-page.nav { color: var(--lst-muted); }
.lst-page.nav[aria-disabled] { opacity: 0.35; }
.lst-page.nav .material-symbols-outlined { font-size: 18px; }

@media (min-width: 1024px) {
  .lst-search { grid-template-columns: var(--lst-search-columns, minmax(200px, 1.4fr) repeat(3, minmax(140px, 1fr)) auto); }
}

@media (max-width: 1023px) {
  .lst { padding: 12px; border-radius: 14px; }
  .lst-search { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lst-search .lst-q { grid-column: 1 / -1; }
  .lst-new { grid-column: 1 / -1; }
  .lst-cards.is-split, .lst-cards.is-grid { grid-template-columns: 1fr; }
  .lst-card, .lst-cards.is-split .lst-card { grid-template-columns: 88px minmax(0, 1fr); gap: 10px; }
  .lst-img { aspect-ratio: 1; }
  .lst-img-tag { left: 6px; bottom: 6px; padding: 2px 6px; font-size: 10px; }
  .lst-tags { display: none; }
  .lst-price b { font-size: 15px; }
  .lst-actions .lst-icon { display: none; }
  .lst-actions .lst-btn { min-height: 44px; }
  .lst-page { min-width: 40px; height: 40px; }

}

/* Under ~600px får listraden inte plats i två spalter (åtgärdsspalten är
   auto-bred: långa belopp och knappetiketter tvingade hela sidan bredare än
   skärmen). Först då staplas innehåll, pris och knapp. */
@media (max-width: 599px) {
  .lst-cards.is-list .lst-card { grid-template-columns: 88px minmax(0, 1fr); gap: 10px; padding: 6px; }
  .lst-cards.is-list .lst-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "top" "meta" "actions";
    column-gap: 0;
    row-gap: 6px;
    align-items: start;
  }
  .lst-cards.is-list .lst-actions { flex-wrap: wrap; gap: 8px; }
  .lst-cards.is-list .lst-actions .lst-btn { flex: 1 1 auto; justify-content: center; }
  .lst-cards.is-list .lst-card { align-items: start; }
}
/* Smal telefon: två filter per rad ryms bara utan ikonen – annars klipps "Alla lägen" till "Alla läg". */
@media (max-width: 419px) {
  .lst-sel { padding: 0 10px; }
  .lst-sel > .material-symbols-outlined { display: none; }
}

/* Sidan runt listan: samma luft som andra sidor, bottenluft för mobil-docken. */
.lst-page-wrap { width: 100%; padding: 1rem 1rem 7rem; }
.lst-page-wrap .pcrumbs { min-height: 40px; }
.lst-notice { max-width: 1180px; margin: 0 auto 10px; padding: 8px 12px; border-radius: 10px; background: #e5f3ea; color: #2f6f5c; font-size: 13px; }
@media (min-width: 1024px) { .lst-page-wrap { padding: 0; } }
@media (max-width: 1023px) {
  .lst-views { display: none; }
  .lst-filters .chip a { display: inline-grid; place-items: center; min-width: 2.25rem; min-height: 2.25rem; margin: -0.5rem -0.6rem -0.5rem 0; }
}


/* ── Den dockade composern på vanliga sidor ───────────────────────────── */
.zimla-dock { position: fixed; left: calc(4.62rem + 1rem); right: 1rem; bottom: 1rem; z-index: 35; justify-items: center; gap: 6px; pointer-events: none; }
.zimla-dock__ctx { pointer-events: auto; font-size: 11.5px; color: #35493d; padding: 3px 10px; border-radius: 999px; background: #fff; border: 1px solid rgba(29, 36, 32, 0.08); box-shadow: 0 4px 12px -6px rgba(20, 30, 25, 0.25); }
.zimla-dock__form { pointer-events: auto; width: min(40rem, 100%); height: 50px; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(12px); box-shadow: 0 30px 60px -20px rgba(23, 33, 26, 0.6), 0 12px 28px -10px rgba(23, 33, 26, 0.38), 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(25, 28, 33, 0.12); }
.zimla-dock__plus { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: #6b7a70; cursor: pointer; }
.zimla-dock__plus .material-symbols-outlined { font-size: 20px; }
.zimla-dock__plus:hover { background: rgb(23 33 26 / 6%); color: #35493d; }
.zimla-dock__form input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px; color: #17211a; }
.zimla-dock__send { width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; background: #17211a; color: #fff; }
.zimla-dock__send:disabled { opacity: 0.35; }
.zimla-dock__send .material-symbols-outlined { font-size: 18px; }
/* Läget för ett röstmeddelande från docken (ersätter platschipet medan det pågår). */
.zimla-dock:has([data-zimla-dock-status]:not([hidden])) .zimla-dock__ctx { display: none; }
.zimla-dock__status { pointer-events: auto; display: inline-flex; align-items: center; gap: 7px; padding: 4px 6px 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(255, 255, 255, 0.95); box-shadow: 0 8px 20px -14px rgba(23, 33, 26, 0.5); font-size: 12px; color: #26382d; }
.zimla-dock__status[hidden] { display: none; }
.zimla-dock__status i { width: 7px; height: 7px; border-radius: 50%; background: #9fb3a6; }
.zimla-dock__status[data-tone="live"] i { background: #d64545; animation: zimla-dock-status-blink 1s ease-in-out infinite; }
.zimla-dock__status[data-tone="work"] i { background: #3a8874; animation: zimla-dock-status-blink 1.2s ease-in-out infinite; }
.zimla-dock__status[data-tone="done"] i { background: #2f9e6a; }
.zimla-dock__status[data-tone="warn"] i { background: #c98a2b; }
.zimla-dock__status button { height: 22px; padding: 0 9px; border: 0; border-radius: 999px; background: #0f4a37; color: #fff; font: inherit; font-size: 11.5px; font-weight: 500; cursor: pointer; }
.zimla-dock__status button[hidden] { display: none; }
@keyframes zimla-dock-status-blink { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .zimla-dock__status i { animation: none !important; } }
/* Rösten i docken: tryck eller håll in. Ledtexten ovanför knappen säger det, och byter till
   "Släpp för att skicka" medan man håller. Inspelningens läge speglas från panelens röststyrning. */
.zimla-dock__voice-wrap { position: relative; display: grid; }
.zimla-dock__voice { width: 36px; height: 36px; border: 0; border-radius: 999px; display: grid; place-items: center; background: #eef3ef; color: #0f4a37; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; transition: background 160ms ease, color 160ms ease, transform 160ms ease; }
.zimla-dock__voice:hover { background: #e2ece5; }
.zimla-dock__voice:focus-visible { outline: 2px solid #3a8874; outline-offset: 2px; }
.zimla-dock__voice .material-symbols-outlined { font-size: 19px; }
.zimla-dock__voice:is(.is-holding, [data-keyboard-voice-state="listening"]) { background: #0f4a37; color: #fff; transform: scale(1.06); animation: zimla-dock-voice-pulse 1.4s ease-out infinite; }
.zimla-dock__voice[data-keyboard-voice-state="connecting"] { background: #dbe8df; }
.zimla-dock__voice[data-keyboard-voice-state="processing"] { background: #dbe8df; opacity: 0.8; }
@keyframes zimla-dock-voice-pulse { 0% { box-shadow: 0 0 0 0 rgba(58, 136, 116, 0.45); } 100% { box-shadow: 0 0 0 12px rgba(58, 136, 116, 0); } }
.zimla-dock__hint { position: absolute; right: 50%; bottom: calc(100% + 12px); display: grid; justify-items: center; gap: 1px; padding: 7px 11px; border-radius: 10px; background: #17211a; color: #fff; white-space: nowrap; transform: translate(50%, 4px); opacity: 0; pointer-events: none; transition: opacity 160ms ease, transform 160ms ease; box-shadow: 0 10px 24px -12px rgba(23, 33, 26, 0.6); }
.zimla-dock__hint::after { content: ''; position: absolute; top: 100%; left: 50%; border: 6px solid transparent; border-top-color: #17211a; transform: translateX(-50%); }
.zimla-dock__hint b { font-size: 12.5px; font-weight: 500; }
.zimla-dock__hint small { font-size: 11px; color: rgba(255, 255, 255, 0.65); }
.zimla-dock__hint-hold { display: none; }
.zimla-dock__hint.is-on, .zimla-dock__voice-wrap:has(.is-holding) .zimla-dock__hint { opacity: 1; transform: translate(50%, 0); }
.zimla-dock__voice-wrap:has(.is-holding) .zimla-dock__hint-idle, .zimla-dock__voice-wrap:has(.is-holding) .zimla-dock__hint small { display: none; }
.zimla-dock__voice-wrap:has(.is-holding) .zimla-dock__hint-hold { display: block; }
@media (prefers-reduced-motion: reduce) { .zimla-dock__voice, .zimla-dock__hint { transition: none; } .zimla-dock__voice:is(.is-holding, [data-keyboard-voice-state="listening"]) { animation: none; } }

/* Nytt projekt-dialogen (mockupen): namn, tre ställen, planritning eller skapa.
   Egna tokens – inte .lst-blocket, som också sätter display och skulle visa en stängd dialog. */
.npd:not([open]) { display: none; }
.npd { --lst-ink: #17211a; --lst-muted: #6b7a70; --lst-line: #e3e8e2; --lst-leaf: #3a8874; --lst-leaf-dark: #2f6f5c; --lst-chip: #eef5ec; --lst-chip-line: #cfe3d8; }
.npd { margin: auto; width: min(600px, calc(100% - 2rem)); padding: 0; border: 1px solid #e3e8e2; border-radius: 18px; background: #fff; box-shadow: 0 40px 90px -40px rgba(20, 40, 30, 0.6); color: var(--lst-ink); }
.npd::backdrop { background: rgba(23, 33, 26, 0.35); backdrop-filter: blur(6px); }
.npd__form { display: grid; gap: 14px; padding: 20px 20px 16px; }
.npd__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.npd__head h2 { margin: 0; font-family: Outfit, Inter, ui-sans-serif, system-ui, sans-serif; font-size: 20px; font-weight: 500; }
.npd__head p { margin: 4px 0 0; font-size: 12.5px; color: var(--lst-muted); }
.npd__x { width: 44px; height: 44px; margin: -6px -6px 0 0; border-radius: 50%; display: grid; place-items: center; background: #f1f4f1; color: var(--lst-muted); }
.npd__x .material-symbols-outlined { font-size: 18px; }
.npd__name { height: 42px; padding: 0 12px; border: 1px solid var(--lst-line); border-radius: 10px; font: inherit; font-size: 14px; color: var(--lst-ink); }
.npd__name:focus { outline: 0; border-color: var(--lst-leaf); box-shadow: 0 0 0 3px rgba(58, 136, 116, 0.18); }
.npd__kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.npd__kind { position: relative; display: grid; gap: 2px; padding: 8px 8px 10px; border: 1px solid var(--lst-line); border-radius: 12px; cursor: pointer; }
.npd__kind:hover { border-color: var(--lst-chip-line); background: #fbfcfb; }
.npd__kind input { position: absolute; opacity: 0; pointer-events: none; }
.npd__kind:has(input:checked) { border-color: var(--lst-leaf); box-shadow: inset 0 0 0 1px var(--lst-leaf); background: #f3f8f5; }
.npd__kind:has(input:focus-visible) { outline: 2px solid var(--lst-leaf); outline-offset: 2px; }
.npd__kind img { width: 100%; aspect-ratio: 1.3; object-fit: cover; border-radius: 8px; background: #eef2ef; margin-bottom: 8px; }
.npd__kind b { font-size: 13.5px; font-weight: 500; }
.npd__kind small { font-size: 11.5px; color: var(--lst-muted); }
.npd__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid #eef1ec; font-size: 12px; color: var(--lst-muted); flex-wrap: wrap; }
.npd__acts { display: inline-flex; gap: 8px; }
.npd__file span:last-child { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.npd__file.is-picked { border-color: var(--lst-leaf); color: var(--lst-leaf); background: #f3f8f5; }
/* Telefon: dialogen som ett ark, stället som tre rader med liten bild (inte tre stora kort på höjden),
   knapparna i full bredd så tummen når. */
@media (max-width: 640px) {
  /* max-width: UA-dialogens calc(100% − 38px) höll arket vänsterställt och smalare än fönstret. */
  .npd { width: 100%; max-width: 100%; max-height: calc(100dvh - 3.25rem - env(safe-area-inset-top)); margin: auto 0 0; overflow: auto; border-right: 0; border-bottom: 0; border-left: 0; border-radius: 18px 18px 0 0; }
  .npd__form { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px 14px 14px; }
  .npd__head h2 { font-size: 18px; }
  .npd__kinds { grid-template-columns: 1fr; gap: 8px; }
  .npd__kind { grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 8px 10px 8px 8px; min-height: 64px; }
  .npd__kind img { grid-row: 1 / 3; width: 64px; height: 48px; aspect-ratio: auto; margin: 0; }
  .npd__kind b { align-self: end; }
  .npd__kind small { align-self: start; }
  .npd__foot > span:first-child { display: none; }
  /* Två knappar i bredd när de ryms, annars under varandra (320 px). */
  .npd__acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 8px; width: 100%; }
  .npd__acts .lst-btn { height: 44px; width: 100%; }
  /* Mobilloopen varv 15/17: zimla-kunder.css har en egen .npd (Meddela kund, 520 px) som laddas efter och höll
     projektarket 32 px smalare än skärmen – dialog.npd + skapa-klassen vinner utan att röra kundens dialoger. */
  dialog.npd:is(.zimla-create-dialog, .lst-dialog) { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 18px 18px 0 0; }
  .npd__x { flex: none; }
  .npd__name { height: 44px; font-size: 16px; }  /* under 16 px zoomar iOS in fältet */
}
body:has(.npd[open]) .zimla-dock { visibility: hidden; }
.zimla-ai-floating-widget--top { top: calc(1rem + env(safe-area-inset-top)) !important; bottom: auto !important; }
@media (min-width: 1024px) { .zimla-ai-floating-widget--top { top: 1.5rem !important; } }
/* Prickarna på kortet: meny med redigera/ta bort, som chattlistans. */
.lst-top { position: relative; }
.lst-menu { position: relative; z-index: 2; margin-left: 6px; }
.lst-menu > summary { list-style: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; cursor: pointer; color: var(--lst-muted, #6f8577); }
.lst-menu > summary::-webkit-details-marker { display: none; }
.lst-menu > summary:hover, .lst-menu[open] > summary { background: rgba(23, 33, 26, 0.06); color: #17211a; }
.lst-menu > summary .material-symbols-outlined { font-size: 18px; }
.lst-menu__list { position: absolute; top: 32px; right: 0; z-index: 5; min-width: 170px; padding: 6px; border: 1px solid rgba(23, 33, 26, 0.1); border-radius: 12px; background: #fff; box-shadow: 0 12px 32px rgba(23, 33, 26, 0.14); }
.lst-menu__list a, .lst-menu__list button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: 13px; color: inherit; cursor: pointer; text-align: left; text-decoration: none; }
.lst-menu__list a:hover, .lst-menu__list button:hover { background: rgba(23, 33, 26, 0.05); }
.lst-menu__list .material-symbols-outlined { font-size: 17px; color: var(--lst-muted, #6f8577); }
.lst-menu__list .is-danger, .lst-menu__list .is-danger .material-symbols-outlined { color: #b42318; }

/* Fasta block så korten lägger sig likadant oavsett textlängd: rubrikrad med
   fast prisspalt, metarad med två raders höjd, knappraden alltid i botten. */
.lst-body { display: grid; grid-template-rows: auto auto 1fr auto; gap: 6px; align-content: start; min-height: 100%; }
.lst-actions { align-self: end; }
.lst-top { align-items: flex-start; }
.lst-top h3 { flex: 1 1 auto; min-width: 0; }
.lst-top .lst-price { flex: 0 0 auto; min-width: 118px; grid-template-rows: 20px auto auto; align-content: start; }
.lst-top .lst-price > .lst-deal { grid-row: 1; } .lst-top .lst-price > b { grid-row: 2; } .lst-top .lst-price > small { grid-row: 3; }
.lst-top .lst-menu { flex: 0 0 auto; width: 28px; }
.lst-meta { min-height: 38px; align-content: flex-start; }
.lst-cards.is-grid .lst-meta, .lst-cards.is-split .lst-meta { min-height: 38px; }
.lst-cards.is-grid .lst-actions .lst-btn, .lst-cards.is-split .lst-actions .lst-btn { justify-content: center; }
.lst-cards.is-split .lst-actions .lst-btn { width: 200px; padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Listvyn: fast bredd på högerspalten så belopp, ikon och knapp står i linje rad för rad. */
.lst-cards.is-list .lst-body { grid-template-columns: minmax(0, 1fr) 372px; grid-template-rows: auto auto auto; min-height: 0; }
.lst-cards.is-list .lst-meta { min-height: 0; }
.lst-cards.is-list .lst-actions { justify-content: flex-end; }
.lst-cards.is-list .lst-actions .lst-price { min-width: 118px; }
.lst-cards.is-list .lst-actions .lst-btn { width: 196px; padding: 0 10px; justify-content: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lst-cards.is-list .lst-top .lst-menu { margin-left: auto; }
@media (max-width: 1023px) { .lst-cards.is-list .lst-body { grid-template-columns: minmax(0, 1fr) auto; } .lst-cards.is-list .lst-actions .lst-btn { width: auto; } }
/* Metaraden: två rader som aldrig bryter – läge, sedan kund · rum · yta. */
.lst-meta { display: grid; gap: 3px; min-height: 0; }
.lst-line { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; }
.lst-line > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lst-line .lst-stage { flex: 0 1 auto; }
.lst-cards.is-list .lst-meta { grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; }

/* Rutnätet följer listans egen bredd (panelen öppen → smalare yta), inte fönstret. */
@container listing (max-width: 1080px) { .lst-cards.is-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container listing (max-width: 720px) { .lst-cards.is-grid, .lst-cards.is-split { grid-template-columns: 1fr; } .lst-card, .lst-cards.is-split .lst-card { grid-template-columns: 88px minmax(0, 1fr); gap: 10px; } .lst-cards.is-grid .lst-card { grid-template-columns: 112px minmax(0, 1fr); } }
@container listing (max-width: 900px) { .lst-search { grid-template-columns: 1fr 1fr !important; } .lst-search .lst-q, .lst-search .lst-new { grid-column: 1 / -1; } }

/* Projektlistan på telefon är en touchlista, inte en hoptryckt desktop-tabell.
   Pris och nästa steg får radbrytas inom innehållskolumnen så att varken namn
   eller CTA kan pressas utanför kortet. */
@media (max-width: 640px) {
  .lst-page-wrap { padding: 0.25rem 0.7rem 6.5rem; }
  .lst-page-wrap .pcrumbs { min-height: 28px; }
  /* Projektlistan har samma vita ark som Offerter och Kunder (ägaren 2026-09-21). */
  .lst[data-listing="projekt"] { gap: 0.72rem; }
  .lst[data-listing="projekt"] .lst-search { gap: 0.48rem; }
  .lst[data-listing="projekt"] .lst-q,
  .lst[data-listing="projekt"] .lst-sel,
  .lst[data-listing="projekt"] .lst-new {
    min-width: 0;
    height: 44px;
    border-radius: 0.78rem;
  }
  .zimla-app-shell:has(.lst[data-listing="projekt"]) .zimla-ai-start-waves { overflow-x: clip; }
  .lst[data-listing="projekt"] .lst-filters { padding: 0.1rem 0 0.45rem; }
  .lst[data-listing="projekt"] .lst-head { align-items: flex-start; line-height: 1.35; }
  .lst[data-listing="projekt"] .lst-cards.is-list { gap: 0.52rem; }
  .lst[data-listing="projekt"] .lst-cards.is-list .lst-card {
    grid-template-columns: 4.75rem minmax(0, 1fr);
    align-items: start;
    gap: 0.68rem;
    overflow: hidden;
    padding: 0.48rem;
    border-radius: 0.9rem;
  }
  .lst[data-listing="projekt"] .lst-cards.is-list .lst-img {
    width: 4.75rem;
    aspect-ratio: 1;
    border-radius: 0.68rem;
  }
  .lst[data-listing="projekt"] .lst-cards.is-list .lst-img-tag {
    left: 0.3rem;
    bottom: 0.3rem;
    padding: 0.12rem 0.38rem;
    font-size: 0.58rem;
  }
  .lst[data-listing="projekt"] .lst-cards.is-list .lst-body {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "top" "meta" "actions";
    gap: 0.34rem;
    align-self: stretch;
    padding: 0.08rem 0 0;
  }
  .lst[data-listing="projekt"] .lst-cards.is-list .lst-top {
    min-width: 0;
    align-items: flex-start;
    gap: 0.35rem;
  }
  .lst[data-listing="projekt"] .lst-cards.is-list .lst-top h3 {
    min-width: 0;
    font-size: 0.86rem;
    line-height: 1.22;
  }
  .lst[data-listing="projekt"] .lst-cards.is-list .lst-top h3 a {
    display: -webkit-box;
    overflow: hidden;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .lst[data-listing="projekt"] .lst-cards.is-list .lst-top .lst-price { display: none; }
  .lst[data-listing="projekt"] .lst-cards.is-list .lst-top .lst-menu {
    flex: 0 0 auto;
    margin-left: auto;
  }
  .lst[data-listing="projekt"] .lst-cards.is-list .lst-meta {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    color: var(--lst-muted);
    font-size: 0.7rem;
  }
  .lst[data-listing="projekt"] .lst-cards.is-list .lst-meta .lst-line:nth-child(2) { display: none; }
  .lst[data-listing="projekt"] .lst-cards.is-list .lst-actions {
    display: flex;
    min-width: 0;
    width: 100%;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.38rem 0.55rem;
    margin: 0;
  }
  .lst[data-listing="projekt"] .lst-cards.is-list .lst-actions .lst-price {
    display: grid;
    min-width: 0;
    margin: 0;
    justify-items: start;
    text-align: left;
  }
  .lst[data-listing="projekt"] .lst-cards.is-list .lst-actions .lst-price b {
    font-size: 0.82rem;
    white-space: nowrap;
  }
  .lst[data-listing="projekt"] .lst-cards.is-list .lst-actions .lst-price small { font-size: 0.62rem; }
  .lst[data-listing="projekt"] .lst-cards.is-list .lst-actions .lst-btn {
    width: auto;
    max-width: 100%;
    min-width: 0;
    min-height: 40px;
    height: 40px;
    flex: 0 1 auto;
    padding: 0 0.68rem;
    font-size: 0.72rem;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
  }
  .lst[data-listing="projekt"] .lst-cards.is-list .lst-actions .lst-btn .material-symbols-outlined {
    flex: 0 0 auto;
    font-size: 0.95rem !important;
  }
  .lst[data-listing="projekt"] .lst-pages { padding: 0.35rem 0 0.5rem; }
}

/* ── Välj flera: kryss på kortet, valt kort, raden och dialogen ────────────
   Väljläget är ett tillstånd (.is-picking) – lager 0 förblir "öppna kortet". Krysset ligger
   ovanpå bilden så det finns i alla tre visningar utan att kortet ändrar form. */
/* Kundregistret på telefon är en touchlista. Hela kortet öppnar kunden,
   så desktopens extra CTA får inte pressa ut namn och belopp ur viewporten. */
@media (max-width: 640px) {
  .zimla-app-shell:has(.lst[data-listing="kunder"]) .zimla-ai-start-waves { overflow-x: clip; }

  .lst[data-listing="kunder"] {
    gap: 0.7rem;
    overflow: hidden;
  }
  .lst[data-listing="kunder"] .lst-search {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.48rem;
  }
  .lst[data-listing="kunder"] .lst-q,
  .lst[data-listing="kunder"] .lst-sel {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    height: 44px;
    border-radius: 0.78rem;
  }
  .lst[data-listing="kunder"] .lst-head {
    align-items: flex-start;
    line-height: 1.35;
  }
  .lst[data-listing="kunder"] .lst-cards.is-list { gap: 0.5rem; }
  .lst[data-listing="kunder"] .lst-cards.is-list .lst-card {
    grid-template-columns: 4.75rem minmax(0, 1fr);
    align-items: stretch;
    gap: 0.68rem;
    overflow: hidden;
    padding: 0.48rem;
    border-radius: 0.9rem;
  }
  .lst[data-listing="kunder"] .lst-cards.is-list .lst-img {
    width: 4.75rem;
    min-height: 4.75rem;
    aspect-ratio: auto;
    border-radius: 0.68rem;
  }
  .lst[data-listing="kunder"] .lst-cards.is-list .lst-img-tag {
    right: 0.3rem;
    bottom: 0.3rem;
    left: 0.3rem;
    overflow: hidden;
    padding: 0.12rem 0.25rem;
    font-size: 0.54rem;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .lst[data-listing="kunder"] .lst-cards.is-list .lst-body {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "top" "meta" "actions";
    gap: 0.3rem;
    align-self: stretch;
    padding: 0.08rem 0 0;
  }
  .lst[data-listing="kunder"] .lst-cards.is-list .lst-top {
    min-width: 0;
    gap: 0.3rem;
  }
  .lst[data-listing="kunder"] .lst-cards.is-list .lst-top h3 {
    min-width: 0;
    font-size: 0.86rem;
    line-height: 1.22;
  }
  .lst[data-listing="kunder"] .lst-cards.is-list .lst-top h3 a {
    display: -webkit-box;
    overflow: hidden;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .lst[data-listing="kunder"] .lst-cards.is-list .lst-top .lst-price { display: none; }
  .lst[data-listing="kunder"] .lst-cards.is-list .lst-meta {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    color: var(--lst-muted);
    font-size: 0.68rem;
  }
  .lst[data-listing="kunder"] .lst-cards.is-list .lst-actions {
    display: block;
    min-width: 0;
    width: 100%;
    margin: 0;
  }
  .lst[data-listing="kunder"] .lst-cards.is-list .lst-actions .lst-price {
    display: grid;
    min-width: 0;
    margin: 0;
    justify-items: start;
    text-align: left;
  }
  .lst[data-listing="kunder"] .lst-cards.is-list .lst-actions .lst-price b {
    max-width: 100%;
    overflow: hidden;
    font-size: 0.82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .lst[data-listing="kunder"] .lst-cards.is-list .lst-actions .lst-price small { font-size: 0.62rem; }
  .lst[data-listing="kunder"] .lst-cards.is-list .lst-actions .lst-deal {
    margin-bottom: 0.12rem;
    font-size: 0.6rem;
  }
  .lst[data-listing="kunder"] .lst-cards.is-list .lst-actions :is(.lst-btn, .lst-icon) { display: none; }
}

.lst-pick-toggle { height: 34px; padding: 0 12px; font-size: 12.5px; border-radius: 999px; }
.lst-pick-toggle.on { background: var(--lst-ink); color: #fff; border-color: var(--lst-ink); }
.lst-pick-toggle.on:hover { background: var(--lst-ink); }
.lst-pick { display: none; position: absolute; z-index: 3; top: 12px; left: 12px; width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--lst-line); background: #fff; color: transparent; place-items: center; box-shadow: 0 1px 3px rgba(20, 40, 30, 0.12); transition: background 150ms ease, color 150ms ease, border-color 150ms ease; }
.lst-pick .material-symbols-outlined { font-size: 18px; font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20; }
.lst-locked { display: none; position: absolute; z-index: 3; top: 12px; left: 44px; padding: 3px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); font-size: 11px; color: var(--lst-muted); }
.lst.is-picking .lst-pick, .lst.is-picking .lst-locked { display: grid; }
.lst.is-picking .lst-card[data-locked] .lst-pick { color: var(--lst-faint, #9fb3a6); border-style: dashed; }
.lst.is-picking .lst-card[data-locked] { opacity: 0.6; }
.lst.is-picking .lst-card:not([data-locked]) { cursor: pointer; }
.lst.is-picking .lst-card.is-picked { border-color: var(--lst-leaf); box-shadow: inset 0 0 0 1px var(--lst-leaf); background: #f3f8f5; }
.lst.is-picking .lst-card.is-picked .lst-pick { background: var(--lst-leaf-dark); border-color: var(--lst-leaf-dark); color: #fff; }
/* I väljläget öppnar inget: kortlänken, ···, knappar och ikoner är av. */
.lst.is-picking .lst-top h3 a::after { display: none; }
.lst.is-picking .lst-top h3 a, .lst.is-picking .lst-img { pointer-events: none; }
.lst.is-picking .lst-menu, .lst.is-picking .lst-actions .lst-btn, .lst.is-picking .lst-actions .lst-icon { visibility: hidden; }
.lst-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--lst-line); border-radius: 14px; background: rgba(255, 255, 255, 0.96); box-shadow: 0 18px 40px -28px rgba(20, 40, 30, 0.5); }
.lst-bar[hidden] { display: none; }
.lst-bar__all { padding: 0; border: 0; background: none; font: inherit; font-size: 12.5px; color: var(--lst-leaf-dark); cursor: pointer; white-space: nowrap; }
.lst-bar__count { flex: 1 1 auto; font-size: 13px; color: var(--lst-ink); }
.lst-btn.is-danger { background: #b42318; color: #fff; }
.lst-btn.is-danger:disabled { opacity: 0.45; cursor: default; }
/* Klistrad under den globala topbaren (47 px, sticky z-40) – annars fastnar klicken i den när listan scrollats. */
@media (min-width: 1024px) { .lst-bar { position: sticky; top: 56px; z-index: 5; margin: 0 0 10px; } }
@media (max-width: 1023px) {
  .lst-bar { position: fixed; left: 0.75rem; right: 0.75rem; bottom: calc(5.15rem + env(safe-area-inset-bottom)); z-index: 40; min-height: 48px; padding: 6px 10px; }
  .lst-bar .lst-btn { height: 44px; }
  .lst-bar__all { display: none; }
  .lst-locked { top: auto; bottom: 8px; left: 8px; }
}
.lst-dialog__body { padding: 20px 20px 8px; }
.lst-dialog__body h2 { margin: 0 0 8px; font-size: 17px; font-weight: 500; }
.lst-dialog__names { margin: 0 0 8px; padding: 0 0 0 18px; font-size: 13.5px; color: var(--lst-ink); }
.lst-dialog__names .is-more { color: var(--lst-muted); list-style: none; margin-left: -18px; }
.lst-dialog__warn { margin: 0; font-size: 13px; color: var(--lst-muted); }
.lst-dialog__nav { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px 20px; }
.lst-dialog::backdrop { background: rgba(20, 40, 30, 0.35); }
@media (prefers-reduced-motion: reduce) { .lst-pick { transition: none; } }

/* ── /skapa/: servern visar ett flöde i taget (Nytt projekt | ÄTA) ──────── */
/* Skapa-sidan har inget .lst/.npd runt sig: knapptokens sätts här, annars är Skapa projekt vit på vit. */
.crt { max-width: 1180px; margin: 0 auto; --lst-ink: #17211a; --lst-line: #e3e8e2; --lst-leaf: #3a8874; --lst-leaf-dark: #2f6f5c; --lst-chip: #eef5ec; --lst-chip-line: #cfe3d8; }
.crt-head { display: flex; align-items: center; gap: 12px; min-height: 40px; margin-bottom: 8px; }
.crt-head .adv-label { margin: 0; }
.crt-back { display: inline-flex; min-height: 40px; align-items: center; gap: 6px; border-radius: 10px; padding: 0 10px; color: #526158; font-size: 13px; text-decoration: none; }
.crt-back:hover { background: rgba(255, 255, 255, 0.72); color: #17211a; }
.crt-back:focus-visible { outline: 2px solid #3a8874; outline-offset: 2px; }
.crt-back .material-symbols-outlined { font-size: 18px; }
.crt-grid { display: grid; grid-template-columns: minmax(0, 600px); align-items: start; }
.crt-grid--ata { grid-template-columns: minmax(0, 760px); }
.crt-card { padding: 16px; }
.crt-card h2 { margin: 0 0 4px; font-family: Outfit, Inter, ui-sans-serif, system-ui, sans-serif; font-size: 20px; font-weight: 500; }
.crt-card > .ons-muted { margin: 0 0 12px; font-size: 12.5px; }
.crt-card .npd__form { padding: 0; gap: 14px; }
.crt-card .ons-list li img { object-fit: cover; }
.crt-av { display: grid; place-items: center; width: 52px; height: 40px; border-radius: 8px; background: #eef3e9; color: #2f6f5c; font-size: 13px; font-weight: 500; }
.crt-q { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.crt-q .lst-q-input { width: 100%; height: 40px; padding: 0 12px; border: 1px solid #e3e8e2; border-radius: 10px; font: inherit; font-size: 14px; }
.crt .lst-empty { padding: 12px 0 4px; }
@media (min-width: 1024px) { .crt { padding-bottom: 6rem; } }
@media (max-width: 1023px) {
  .crt-grid { grid-template-columns: 1fr; }
  .crt-card .npd__kind { min-height: 56px; }
  .crt-card .npd__acts .lst-btn { height: 44px; }
}

/* ── Felsidor i skalet (404/403) – en sida, inte ett kort ───────────────── */
.err-page { max-width: 44rem; --lst-leaf-dark: #2f6f5c; --lst-ink: #17211a; --lst-line: #e3e8e2; }
.err-actions [hidden] { display: none; }
.err-title { margin: 0.2rem 0 0; font: 500 22px/1.25 Outfit, Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.err-line { margin: 0.5rem 0 0; max-width: 34rem; color: #556158; font-size: 14px; line-height: 1.5; }
.err-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.1rem; }
@media (max-width: 640px) { .err-actions .lst-btn { height: 44px; flex: 1 1 100%; } }

/* ── Projekt på telefon: filtren bakom en ikon, två visningar ─────────────
   Sökraden är sök · filter · +. Filtren fälls ut under den när man trycker på
   ikonen (siffran visar aktiva filter). Visningen väljs i resultatraden:
   kompakt lista (standard) eller stora kort. Desktop berörs inte. */
.lst-filterset { display: contents; }
.lst-filter-toggle, .lst-views-m { display: none; }
@media (max-width: 1023px) {
  .lst[data-lst-mobile]:not(.pl) .lst-search.lst-search { grid-template-columns: minmax(0, 1fr) 44px 44px !important; gap: 8px; }
  .lst[data-lst-mobile] .lst-search .lst-q { grid-column: 1; grid-row: 1; height: 44px; }
  .lst[data-lst-mobile] .lst-filter-toggle {
    position: relative;
    display: grid;
    grid-column: 2;
    grid-row: 1;
    place-items: center;
    height: 44px;
    border: 1px solid var(--lst-line);
    border-radius: 12px;
    background: #fff;
    color: var(--lst-ink-2);
  }
  .lst[data-lst-mobile] .lst-filter-toggle .material-symbols-outlined { font-size: 20px; }
  .lst[data-lst-mobile] .lst-filter-toggle:has(i),
  .lst[data-lst-mobile] .lst-filter-toggle[aria-expanded="true"] { border-color: var(--lst-chip-line); background: var(--lst-chip); color: var(--lst-leaf-dark); }
  .lst[data-lst-mobile] .lst-filter-toggle i {
    position: absolute;
    top: -5px;
    right: -5px;
    display: grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--lst-leaf-dark);
    color: #fff;
    font-size: 10.5px;
    font-style: normal;
  }
  .lst[data-lst-mobile] .lst-search .lst-new { grid-column: 3; grid-row: 1; width: 44px; height: 44px; padding: 0; border-radius: 12px; }
  .lst[data-lst-mobile] .lst-search .lst-new .material-symbols-outlined { font-size: 22px; }
  .lst[data-lst-mobile] .lst-new__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .lst[data-lst-mobile] .lst-filterset { display: none; }
  .lst[data-lst-mobile] .lst-search.is-filters-open .lst-filterset {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    animation: lst-filters-in 160ms ease-out;
  }
  .lst[data-lst-mobile] .lst-filterset .lst-sel { height: 44px; }

  /* Resultatraden: texten, Välj och visningsväljaren på en rad. */
  .lst[data-lst-mobile] .lst-head { align-items: center; gap: 8px; }
  .lst[data-lst-mobile] .lst-head > span { flex: 1; min-width: 0; font-size: 12px; }
  .lst[data-lst-mobile] .lst-views-m { display: inline-flex; flex: none; padding: 2px; border: 1px solid var(--lst-line); border-radius: 999px; background: #fff; }
  .lst[data-lst-mobile] .lst-views-m button { display: grid; place-items: center; width: 36px; height: 32px; border-radius: 999px; color: var(--lst-muted); }
  .lst[data-lst-mobile] .lst-views-m button .material-symbols-outlined { font-size: 19px; }
  .lst[data-lst-mobile] .lst-views-m button.on { background: var(--lst-ink); color: #fff; }

  /* Kompakt lista: en rad per projekt – liten bild, namn och läge, belopp till höger. */
  .lst[data-lst-mobile] .lst-cards.is-rows { gap: 0; }
  .lst[data-lst-mobile] .lst-cards.is-rows .lst-card {
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 10px 2px;
    border: 0;
    border-bottom: 1px solid var(--lst-line-2);
    border-radius: 0;
    box-shadow: none;
  }
  .lst[data-lst-mobile] .lst-cards.is-rows .lst-card:last-child { border-bottom: 0; }
  .lst[data-lst-mobile] .lst-cards.is-rows .lst-img { width: 48px; aspect-ratio: 1; border-radius: 12px; }
  .lst[data-lst-mobile] .lst-cards.is-rows .lst-img-tag { display: none; }
  .lst[data-lst-mobile] .lst-cards.is-rows .lst-av { font-size: 16px; }
  .lst[data-lst-mobile] .lst-cards.is-rows .lst-body {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: none;
    grid-template-areas: "title price" "meta price";
    gap: 2px 12px;
    align-items: center;
    min-height: 0;
    padding: 0;
  }
  .lst[data-lst-mobile] .lst-cards.is-rows .lst-top { display: contents; }
  .lst[data-lst-mobile] .lst-cards.is-rows .lst-top h3 { grid-area: title; overflow: hidden; font-size: 14px; white-space: nowrap; text-overflow: ellipsis; }
  .lst[data-lst-mobile] .lst-cards.is-rows .lst-top .lst-price { display: grid; grid-area: price; grid-template-rows: none; min-width: 0; }
  .lst[data-lst-mobile] .lst-cards.is-rows .lst-top .lst-price > * { grid-row: auto; }
  .lst[data-lst-mobile] .lst-cards.is-rows .lst-price .lst-deal { display: none; }
  .lst[data-lst-mobile] .lst-cards.is-rows .lst-price b { font-size: 13.5px; white-space: nowrap; }
  .lst[data-lst-mobile] .lst-cards.is-rows .lst-price small { font-size: 10.5px; }
  .lst[data-lst-mobile] .lst-cards.is-rows .lst-meta { grid-area: meta; min-height: 0; color: var(--lst-muted); font-size: 12px; }
  .lst[data-lst-mobile] .lst-cards.is-rows .lst-meta .lst-line:nth-child(2),
  .lst[data-lst-mobile] .lst-cards.is-rows :is(.lst-menu, .lst-tags, .lst-actions) { display: none; }

  /* Stora kort: bilden överst, läget och rummen, belopp och nästa steg längst ned. */
  .lst[data-lst-mobile] .lst-cards.is-cards { gap: 12px; }
  .lst[data-lst-mobile] .lst-cards.is-cards .lst-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(20, 40, 30, 0.05), 0 16px 32px -26px rgba(20, 40, 30, 0.5);
  }
  .lst[data-lst-mobile] .lst-cards.is-cards .lst-img { aspect-ratio: 16 / 8; border-radius: 0; }
  .lst[data-lst-mobile] .lst-cards.is-cards .lst-img-tag { top: 12px; bottom: auto; left: 12px; padding: 4px 10px; font-size: 11px; }
  .lst[data-lst-mobile] .lst-cards.is-cards .lst-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: none;
    gap: 6px;
    min-height: 0;
    padding: 12px 14px 14px;
  }
  .lst[data-lst-mobile] .lst-cards.is-cards .lst-top h3 { font-size: 16px; }
  .lst[data-lst-mobile] .lst-cards.is-cards .lst-top .lst-price { display: none; }
  .lst[data-lst-mobile] .lst-cards.is-cards .lst-meta { min-height: 0; font-size: 12.5px; }
  .lst[data-lst-mobile] .lst-cards.is-cards .lst-tags { display: flex; flex-wrap: nowrap; gap: 12px; overflow: hidden; font-size: 12px; white-space: nowrap; mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .lst[data-lst-mobile] .lst-cards.is-cards .lst-tags span { flex: none; }
  .lst[data-lst-mobile] .lst-cards.is-cards .lst-actions { justify-content: space-between; gap: 10px; margin-top: 6px; }
  .lst[data-lst-mobile] .lst-cards.is-cards .lst-actions .lst-price { display: grid; justify-items: start; text-align: left; }
  .lst[data-lst-mobile] .lst-cards.is-cards .lst-actions .lst-price b { font-size: 16px; }
  .lst[data-lst-mobile] .lst-cards.is-cards .lst-actions .lst-icon { display: none; }
  .lst[data-lst-mobile] .lst-cards.is-cards .lst-actions .lst-btn { min-width: 0; max-width: 60%; min-height: 42px; padding: 0 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
}
@keyframes lst-filters-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lst-search.is-filters-open .lst-filterset { animation: none; } }

/* ── Orben när Zimla arbetar ─────────────────────────────────────────────
   Ring som snurrar runt figuren medan Zimla tänker; en grön bock när svaret
   kommit och chatten är nedfälld (försvinner när man öppnar chatten). */
[data-zimla-dock-orb] .zimla-dock-orb-slot { position: relative; }
[data-zimla-dock-orb].is-working .zimla-dock-orb-slot::before {
  content: "";
  position: absolute;
  inset: -5px;
  z-index: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 55%, #34d399 78%, #0a8a62 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  animation: zimla-orb-work 1.1s linear infinite;
  pointer-events: none;
}
[data-zimla-dock-orb].is-done::after {
  content: "check";
  position: absolute;
  top: -0.05rem;
  right: 0.3rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 999px;
  background: #0a8a62;
  box-shadow: 0 0 0 2px #fff;
  color: #fff;
  font-family: "Material Symbols Outlined";
  font-size: 0.72rem;
  line-height: 1;
  animation: zimla-orb-done 1.6s ease-out 2;
}
@keyframes zimla-orb-work { to { transform: rotate(360deg); } }
@keyframes zimla-orb-done { 0% { box-shadow: 0 0 0 2px #fff, 0 0 0 2px rgb(10 138 98 / 55%); } 100% { box-shadow: 0 0 0 2px #fff, 0 0 0 12px rgb(10 138 98 / 0%); } }
@media (prefers-reduced-motion: reduce) {
  [data-zimla-dock-orb].is-working .zimla-dock-orb-slot::before { animation: none; background: conic-gradient(#34d399, #0a8a62); }
  [data-zimla-dock-orb].is-done::after { animation: none; }
}

/* Notiser måste lyfta hela topbarens stacking context över Studio och docken. */
[data-zimla-global-topbar]:has([data-notification-root] [aria-expanded="true"]) {
  z-index: 2147483647 !important;
  overflow: visible;
}
.zimla-notification-popover { z-index: 2147483647; }

/* Toppraden på telefon: glas när sidan scrollats, så logga och knappar syns över innehållet. */
@media (max-width: 1023px) {
  [data-zimla-global-topbar] { transition: background-color 180ms ease, box-shadow 180ms ease, backdrop-filter 180ms ease; }
  [data-zimla-global-topbar].is-scrolled {
    background-color: rgba(247, 249, 246, 0.72) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.35);
    backdrop-filter: blur(18px) saturate(1.35);
    box-shadow: 0 1px 0 rgba(23, 33, 26, 0.06), 0 12px 26px -22px rgba(23, 33, 26, 0.5);
  }
}

/* Projektfilter: synliga lägen och detaljval i flödet, inga popup-listor. */
.lst[data-listing="projekt"] .lst-search.lst-search {
  align-items: start;
  gap: 12px 8px;
}
.lst[data-listing="projekt"] .lst-search .lst-q { grid-column: 1; grid-row: 1; }
.lst[data-listing="projekt"] .lst-search .lst-new { grid-column: 3; grid-row: 1; }
.lst[data-listing="projekt"] .lst-filter-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  grid-column: 2;
  grid-row: 1;
  gap: 6px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--lst-line);
  border-radius: 12px;
  background: #fff;
  color: var(--lst-ink-2);
  font-size: 13px;
}
.lst[data-listing="projekt"] .lst-filter-toggle .material-symbols-outlined { font-size: 18px; }
.lst[data-listing="projekt"] .lst-filter-toggle[aria-expanded="true"] { border-color: var(--lst-chip-line); background: var(--lst-chip); color: var(--lst-leaf-dark); }
.lst[data-listing="projekt"] .lst-filter-toggle i { position: static; display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; font-size: 11px; font-style: normal; background: var(--lst-leaf-dark); color: #fff; }
.lst-choice-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.lst-choice-group legend { margin-bottom: 8px; padding: 0; font-size: 12px; font-weight: 400; color: var(--lst-muted); }
.lst-choice-group--stage { grid-column: 1 / -1; grid-row: 2; }
.lst-choice-group--stage legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.lst-choice-options { display: flex; flex-wrap: wrap; gap: 6px; }
.lst-choice { position: relative; display: inline-flex; min-width: 0; max-width: 100%; cursor: pointer; }
.lst-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.lst-choice > span { display: flex; align-items: center; min-height: 34px; padding: 6px 11px; border: 1px solid var(--lst-line); border-radius: 999px; background: #fff; color: var(--lst-ink-2); font-size: 12.5px; line-height: 1.4; overflow-wrap: anywhere; }
.lst-choice:hover > span { border-color: var(--lst-chip-line); background: var(--lst-chip); }
.lst-choice input:checked + span { border-color: var(--lst-chip-line); background: var(--lst-chip); color: var(--lst-leaf-dark); box-shadow: inset 0 0 0 1px var(--lst-chip-line); }
.lst-choice-group--stage input:checked + span { border-color: var(--lst-leaf-dark); background: var(--lst-leaf-dark); color: #fff; box-shadow: none; }
.lst-choice input:focus-visible + span, .lst[data-listing="projekt"] .lst-filter-toggle:focus-visible { outline: 2px solid var(--lst-leaf); outline-offset: 2px; }
.lst[data-listing="projekt"] .lst-filter-panel { display: none; }
.lst[data-listing="projekt"] .lst-search.is-filters-open .lst-filter-panel {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 20px;
  padding: 16px 0 4px;
  border-top: 1px solid var(--lst-line-2);
  animation: none;
}
.lst-customer-search { display: flex; align-items: center; gap: 6px; min-width: 0; height: 36px; padding: 0 10px; margin-bottom: 6px; border: 1px solid var(--lst-line); border-radius: 10px; }
.lst-customer-search .material-symbols-outlined { font-size: 17px; color: var(--lst-muted); }
.lst-customer-search input { width: 100%; min-width: 0; border: 0; padding: 0; outline: 0; background: transparent; color: var(--lst-ink); font: inherit; font-size: 12.5px; }
.lst-customer-search:focus-within { outline: 2px solid var(--lst-leaf); outline-offset: 2px; }
.lst-choice-group--customers .lst-choice-options { display: grid; gap: 3px; max-height: min(192px, 30dvh); overflow-y: auto; padding: 3px; scrollbar-gutter: stable; }
.lst-choice-group--customers .lst-choice > span { width: 100%; border-radius: 8px; border-color: transparent; }
.lst-choice-group--customers input:checked + span { border-color: var(--lst-chip-line); }
.lst-choice[hidden], .lst-customer-empty[hidden] { display: none; }
.lst-customer-empty { margin: 8px 0 0; font-size: 12.5px; color: var(--lst-muted); }
@container listing (max-width: 900px) {
  .lst[data-listing="projekt"] .lst-search.is-filters-open .lst-filter-panel { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 1023px) {
  .lst[data-listing="projekt"] .lst-filter-toggle { height: 44px; padding: 0; }
  .lst-filter-toggle__text { display: none; }
  .lst[data-listing="projekt"] .lst-filter-toggle i { position: absolute; top: -5px; right: -5px; }
  .lst-choice > span { min-height: 44px; }
  .lst-customer-search { height: 44px; }
  .lst-choice-group--stage .lst-choice-options { flex-wrap: nowrap; overflow-x: auto; padding: 3px 2px; }
  .lst-choice-group--stage .lst-choice { flex: none; }
  .lst[data-listing="projekt"] .lst-search.is-filters-open .lst-filter-panel { grid-template-columns: minmax(0, 1fr); }
}
button.lst-icon { padding: 0; font: inherit; cursor: pointer; }
.lst-icon.is-copied { border-color: var(--lst-chip-line); color: var(--lst-leaf-dark); }

/* Dokumentregistret på telefon: rubriken krymper i stället för att trycka ut uppladdningsknappen. */
@container (max-width: 34rem) {
  .zimla-register-page__header { gap: 0.75rem; }
  .zimla-register-page__header > div { min-width: 0; }
  .zimla-register-page__header h1 { font-size: 1.75rem; overflow-wrap: anywhere; }
}

/* Kundkortet: namnet får en egen bredd, knapparna bryts till nästa rad hellre än att lägga sig över namnet. */
.profile .profile-text { flex: 1 1 8.5rem; }

/* Kanban: kolumnen ryms alltid i fönstret (nästa kolumn skymtar), tavlan skrollar i sidled i sin egen yta. */
.kanban-cols { grid-auto-columns: minmax(min(19rem, calc(100vw - 3.5rem)), 21rem); }

/* Touch: ···-knappen får 40 px träffyta utan att kortets rubrikrad blir högre. */
@media (max-width: 1023px) {
  .lst-menu > summary { width: 40px; height: 40px; margin: -6px; }
}

/* ── Projektlistan (/projekt/, templates/projects/_project_listing.html) ─────────────────────────
   Ingen vit container: fälten står var för sig på bakgrunden. Glas (blur) bara på sök, chips och
   verktyg – aldrig på de tolv korten ovanpå den animerade bakgrunden (Firefox räknar om varje bildruta). */
/* Bredden följer skärmen: smal skärm som förut, bred skärm får fler kort i bredd. */
.pl-page { max-width: 1880px; margin: 0 auto; }
.lst.pl { max-width: 1880px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; gap: 18px; }
.pl .pl-glass, .pl .pl-q, .pl .pl-chip { background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(255, 255, 255, 0.85); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 10px 28px -22px rgba(20, 40, 30, 0.45); }
/* !important: listningens generella .lst-search-kolumner är !important (rad ~294/614). */
.pl-form { display: grid; grid-template-columns: minmax(0, 1fr) auto !important; grid-template-areas: "head head" "chips tools" "panel panel"; align-items: center; gap: 14px 18px; }
/* Samma glasbar som landningssidans toppbar. */
.pl-head { grid-area: head; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 18px; min-width: 0; padding: 16px 16px 16px 24px; border: 1px solid rgb(255 255 255 / 72%); border-radius: 18px; background: linear-gradient(135deg, rgb(255 255 255 / 62%), rgb(248 252 247 / 36%)); -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 80%), 0 4px 18px rgb(23 40 29 / 7%); }
.pl-hello { min-width: 0; }
.pl-hello h1 { margin: 0; font-family: Outfit, Inter, sans-serif; font-size: 32px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.12; color: var(--lst-ink); }
.pl-sub { margin: 6px 0 0; font-size: 14px; color: var(--lst-muted); }
.pl-actions { display: flex; align-items: center; gap: 10px; }
.pl .pl-q { flex-direction: row; width: min(420px, 38vw); height: 46px; padding: 0 12px 0 14px; border-radius: 14px; }
.pl .pl-q input { font-size: 13.5px; }
.pl-kbd { flex: none; padding: 2px 7px; border-radius: 7px; border: 1px solid var(--lst-line); background: rgba(255, 255, 255, 0.8); color: var(--lst-muted); font: 500 11px/1.4 Inter, sans-serif; }
.pl .lst-filter-toggle { height: 46px; padding: 0 14px; border-radius: 14px; display: inline-flex; align-items: center; gap: 6px; color: var(--lst-ink); font-size: 13px; }
.pl .pl-new { height: 46px; padding: 0 18px; border-radius: 14px; font-size: 14px; box-shadow: 0 10px 24px -16px rgba(20, 60, 45, 0.7); }
.pl-chips { grid-area: chips; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.pl-chip { position: relative; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; height: 38px; padding: 0 8px 0 14px; border-radius: 999px; font-size: 13px; color: var(--lst-ink); cursor: pointer; transition: background 150ms ease, color 150ms ease, border-color 150ms ease; }
.pl-chip input { position: absolute; opacity: 0; pointer-events: none; }
.pl-chip b { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; background: rgba(23, 33, 26, 0.06); font-size: 11.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
/* Tomma lägen visas inte (utom det valda): raden står kvar som mockupens enkla rad. */
.pl-chip.is-empty { display: none; }
.pl-chip:hover { border-color: var(--lst-chip-line); }
/* Valt läge följer radioknappen, så chipet byter direkt vid klick – inte först när svaret kommit. */
.pl-chip:has(input:checked) { background: var(--lst-leaf-dark); border-color: var(--lst-leaf-dark); color: #fff; }
.pl-chip:has(input:checked) b { background: rgba(255, 255, 255, 0.2); }
.pl-chip:focus-within { outline: 2px solid var(--lst-leaf); outline-offset: 2px; }
.pl-tools { grid-area: tools; justify-self: end; display: flex; align-items: center; gap: 8px; }
.pl-sort { position: relative; height: 38px; border-radius: 12px; }
.pl-sort[open] { z-index: 30; }
.pl-sort > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 100%; padding: 0 10px 0 14px; font-size: 13px; color: var(--lst-ink); white-space: nowrap; cursor: pointer; }
.pl-sort > summary::-webkit-details-marker { display: none; }
.pl-sort > summary > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.pl-sort > summary .material-symbols-outlined { font-size: 18px; color: var(--lst-muted); transition: transform 160ms ease; }
.pl-sort[open] > summary .material-symbols-outlined { transform: rotate(180deg); }
.pl-sort > summary:focus-visible { outline: 2px solid var(--lst-leaf); outline-offset: 2px; border-radius: 12px; }
.pl-sort__list { position: absolute; top: calc(100% + 6px); right: 0; min-width: 100%; width: max-content; padding: 6px; border: 1px solid rgba(23, 33, 26, 0.1); border-radius: 12px; background: #fff; box-shadow: 0 14px 34px -12px rgba(23, 33, 26, 0.22); }
.pl-sort__opt { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 8px 10px; border-radius: 8px; font-size: 13px; color: var(--lst-ink); cursor: pointer; }
.pl-sort__opt:hover { background: rgba(23, 33, 26, 0.05); }
.pl-sort__opt input { position: absolute; opacity: 0; pointer-events: none; }
.pl-sort__opt .material-symbols-outlined { font-size: 17px; color: var(--lst-leaf-dark); visibility: hidden; }
.pl-sort__opt:has(input:checked) { color: var(--lst-leaf-dark); }
.pl-sort__opt:has(input:checked) .material-symbols-outlined { visibility: visible; }
.pl-sort__opt:has(input:focus-visible) { outline: 2px solid var(--lst-leaf); outline-offset: -2px; }
.pl .lst-pick-toggle { height: 38px; border-radius: 12px; }
.pl .pl-views { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; }
.pl .pl-views button { width: 32px; height: 30px; border: 0; border-radius: 9px; background: transparent; }
.pl .pl-views button.on { background: var(--lst-leaf-dark); color: #fff; }
.pl .lst-views-m { display: none; }
.pl .lst-filter-panel { grid-area: panel; border-radius: 16px; padding: 12px 14px; }

/* Korten: vita (ingen blur), mjuk skugga; hover är bara kant och skugga. */
.pl .pl-cards.is-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 16px; }
.pl .pl-card { display: flex; flex-direction: column; gap: 0; padding: 8px; border-radius: 20px; background: rgba(255, 255, 255, 0.94); border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: 0 18px 44px -32px rgba(20, 40, 30, 0.55); }
/* Smalt kort (surfplatta, telefon): rutorna visar ikon och värde, etiketten får inte kapas. */
.pl .pl-cards:is(.is-grid, .is-cards) .pl-card { container-type: inline-size; }
@container (max-width: 370px) {
  .pl .pl-stats small { display: none; }
  .pl .pl-stats a { grid-template-areas: "icon" "value"; padding: 8px; }
}
.pl .pl-card:hover { border-color: var(--lst-chip-line); box-shadow: 0 22px 48px -30px rgba(20, 40, 30, 0.6); }
.pl .pl-cards .pl-img { aspect-ratio: 16 / 7.5; border-radius: 14px; background: #eef3e9; }
.pl-status { position: absolute; z-index: 2; top: 18px; left: 18px; display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px 0 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.94); color: var(--lst-ink); font-size: 12px; font-weight: 500; box-shadow: 0 2px 8px -4px rgba(20, 40, 30, 0.35); pointer-events: none; }
.pl-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--lst-faint); }
.pl-status.t-amber i { background: #d9a03a; } .pl-status.t-blue i { background: var(--lst-sent); } .pl-status.t-teal i { background: #2a8f86; }
.pl-status.t-green i { background: #2f9e6a; } .pl-status.t-done i { background: var(--lst-faint); } .pl-status.t-neutral i { background: #b8c2bb; }
.pl.is-picking .pl-status { display: none; }
.pl .pl-menu { position: absolute; z-index: 3; top: 16px; right: 16px; margin: 0; }
.pl .pl-menu > summary { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.94); box-shadow: 0 2px 8px -4px rgba(20, 40, 30, 0.35); }
/* En sak per rad och en textrad per sak (ellips): korten ser likadana ut hur texten än varierar,
   och foten står alltid längst ner. */
.pl-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; grid-template-areas: "titles" "progress" "stats" "foot"; gap: 12px; padding: 14px 8px 6px; min-width: 0; }
.pl-titles { grid-area: titles; min-width: 0; }
.pl-titles > * { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-titles h3 { margin: 0 0 2px; font-size: 16px; font-weight: 500; line-height: 1.3; }
.pl-titles h3 a { color: inherit; text-decoration: none; }
.pl-titles h3 a::after { content: ''; position: absolute; inset: 0; border-radius: 20px; }
.pl-customer { margin: 0; font-size: 13px; color: var(--lst-ink-2); }
.pl-stage { display: none; align-items: center; gap: 5px; margin-right: 6px; color: var(--lst-muted); }
.pl-stage i { width: 7px; height: 7px; border-radius: 50%; background: var(--lst-faint); }
.pl-stage.t-amber i { background: #d9a03a; } .pl-stage.t-blue i { background: var(--lst-sent); } .pl-stage.t-teal i { background: #2a8f86; }
.pl-stage.t-green i { background: #2f9e6a; } .pl-stage.t-neutral i { background: #b8c2bb; }
.pl-addr { margin: 3px 0 0; font-size: 12px; color: var(--lst-muted); }
.pl-addr .material-symbols-outlined { font-size: 15px; vertical-align: -3px; margin-right: 3px; }
.pl-line { margin: 4px 0 0; font-size: 12px; color: var(--lst-muted); }
.pl-progress { grid-area: progress; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "steps pct" "bar bar"; align-items: baseline; gap: 6px 10px; min-width: 0; }
.pl-pct { grid-area: pct; font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--lst-ink); }
.pl-bar { grid-area: bar; display: block; width: 100%; height: 6px; border-radius: 999px; background: #e6ece8; overflow: hidden; }
.pl-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #3a8874, #2f9e6a); }
.pl-progress small { grid-area: steps; font-size: 11.5px; color: var(--lst-muted); }
/* Belopp och "Dokumentation" behöver mer plats än "0 st". */
.pl-stats { grid-area: stats; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 0.75fr) minmax(0, 1.3fr); gap: 6px; margin: 0; padding: 0; list-style: none; }
.pl-stats a { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "icon" "label" "value"; justify-items: start; gap: 2px; min-width: 0; height: 100%; padding: 8px 9px; border-radius: 12px; border: 1px solid var(--lst-line-2); background: #f7f9f7; color: inherit; text-decoration: none; transition: border-color 150ms ease, background 150ms ease; }
.pl-stats a:hover { border-color: var(--lst-chip-line); background: #fff; }
.pl-stats .material-symbols-outlined { grid-area: icon; font-size: 16px; color: var(--lst-leaf-dark); margin-bottom: 1px; }
.pl-stats small { grid-area: label; font-size: 10.5px; max-width: 100%; color: var(--lst-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-stats b { grid-area: value; font-size: 12.5px; max-width: 100%; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-foot { grid-area: foot; align-self: end; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.pl-updated { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--lst-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pl-updated .material-symbols-outlined { font-size: 16px; }
.pl .pl-cta { position: relative; z-index: 1; flex: none; height: 40px; padding: 0 16px; border-radius: 12px; font-size: 13px; }
.pl .pl-cta .material-symbols-outlined { font-size: 16px; }
.pl .pl-cta.is-soft { background: #eef3ef; color: var(--lst-ink); border: 1px solid #e0e8e2; }
.pl .pl-cta.is-soft:hover { background: #e4ede7; color: var(--lst-ink); }
.pl .lst-pages { justify-content: center; }
.pl .lst-empty { border-radius: 16px; padding: 22px 18px; }

/* Listvyn: en rad per projekt – bild, namn, steg, rutorna i en rad och nästa steg. */
.pl .pl-cards.is-list { gap: 10px; }
.pl .pl-cards.is-list .pl-card { flex-direction: row; align-items: center; gap: 14px; padding: 8px; border-radius: 16px; }
.pl .pl-cards.is-list .pl-img { flex: 0 0 132px; aspect-ratio: 4 / 3; border-radius: 12px; }
.pl .pl-cards.is-list .pl-status { top: auto; bottom: 14px; left: 14px; height: 22px; font-size: 10.5px; padding: 0 8px 0 7px; }
.pl .pl-cards.is-list .pl-menu { top: 50%; transform: translateY(-50%); right: 12px; }
.pl .pl-cards.is-list .pl-body { flex: 1; grid-template-columns: minmax(0, 1.2fr) 150px minmax(0, 1.6fr) auto; grid-template-rows: auto; grid-template-areas: "titles progress stats foot"; align-items: center; padding: 4px 48px 4px 0; }
.pl .pl-cards.is-list .pl-line { display: none; }
.pl .pl-cards.is-list .pl-updated { display: none; }
.pl .pl-cards.is-list .pl-stats a { grid-template-areas: "icon label" "value value"; grid-template-columns: auto minmax(0, 1fr); column-gap: 5px; padding: 6px 8px; }

@container listing (max-width: 1080px) {
  .pl .pl-cards.is-list .pl-body { grid-template-columns: minmax(0, 1fr) 150px auto; grid-template-areas: "titles progress foot"; }
  .pl .pl-cards.is-list .pl-stats { display: none; }
}
@container listing (max-width: 720px) {
  .pl .pl-cards.is-grid { grid-template-columns: minmax(0, 1fr); }
}
/* Huvudet följer listans egen bredd (container), inte fönstrets: med Zimla AI öppen
   är ytan smal fast fönstret är brett. */
@container listing (max-width: 1150px) {
  .pl-head { flex-direction: column; align-items: stretch; }
  .pl .pl-q { flex: 1; width: auto; }
}
@container listing (max-width: 900px) {
  .pl-form { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "head" "chips" "tools" "panel"; }
  .pl-head { padding: 14px; }
  .pl-actions { gap: 8px; }
  .lst.pl .lst-filter-toggle .lst-filter-toggle__text, .lst.pl .pl-new .lst-new__label, .pl-kbd { display: none; }
  .lst.pl .lst-filter-toggle, .lst.pl .pl-new { flex: none; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; }
  .pl-tools { justify-self: stretch; justify-content: space-between; width: 100%; min-width: 0; }
  .pl-sort { flex: 1; min-width: 0; max-width: 320px; margin-right: auto; }
  .pl-sort__list { left: 0; right: auto; }
}
/* Två kort i bredd även när ytan är smal (Zimla AI öppen, surfplatta) – ett enda brett kort blir mest bild. */
@container listing (min-width: 640px) and (max-width: 820px) {
  .lst.pl .pl-cards:is(.is-grid, .is-cards) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container listing (max-width: 620px) {
  .pl-sub { display: none; }
  .pl-hello h1 { font-size: 22px; }
  .lst.pl .lst-filter-toggle, .lst.pl .pl-new { width: 44px; height: 44px; }
  .pl .pl-q { height: 44px; }
  .pl-sort { max-width: none; }
}
/* Surfplatta och telefon (< 1024 px, samma gräns som vyvalet i JS): telefonens vyval
   (kort/rader) och rader som egna kort. .lst.pl väger tyngre än .lst[data-lst-mobile]. */
@media (max-width: 1023px) {
  .pl-sort__opt { min-height: 40px; }
  .lst.pl .lst-views { display: none; }
  .lst.pl .lst-views-m { display: inline-flex; padding: 3px; border-radius: 12px; }
  .lst.pl .lst-views-m button { width: 34px; height: 30px; border: 0; border-radius: 9px; background: transparent; color: var(--lst-muted); }
  .lst.pl .lst-views-m button.on { background: var(--lst-leaf-dark); color: #fff; }
  .lst.pl .pl-cards.is-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 14px; }
  .lst.pl .pl-cards.is-rows { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .lst.pl .pl-cards.is-rows .pl-card { flex-direction: row; align-items: center; gap: 12px; padding: 8px; border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 16px; box-shadow: 0 12px 30px -26px rgba(20, 40, 30, 0.55); }
  .lst.pl .pl-cards.is-rows .pl-img { flex: 0 0 64px; width: 64px; aspect-ratio: 1; border-radius: 12px; }
  .lst.pl .pl-cards.is-rows .pl-status, .lst.pl .pl-cards.is-rows .pl-menu { display: none; }
  .lst.pl .pl-cards.is-rows .pl-body { flex: 1; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto; grid-template-areas: "titles foot"; align-items: center; gap: 10px; padding: 0 2px 0 0; }
  .lst.pl .pl-cards.is-rows :is(.pl-addr, .pl-line, .pl-stats, .pl-progress, .pl-updated) { display: none; }
  .lst.pl .pl-cards.is-rows .pl-titles h3 { margin: 0; font-size: 15px; display: -webkit-box; white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .lst.pl .pl-cards.is-rows .pl-stage { display: inline-flex; }
  .lst.pl .pl-cards.is-rows .pl-cta { height: 36px; padding: 0 12px; font-size: 12.5px; }
}
@media (max-width: 640px) {
  .pl-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 4px; scrollbar-width: none; }
  .pl-chips::-webkit-scrollbar { display: none; }
  .pl-chip { flex: none; height: 44px; }
  .pl .pl-glass, .pl .pl-q, .pl .pl-chip { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, 0.92); }
  .pl-head { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(255 255 255 / 78%); }
  .pl .pl-chip:has(input:checked) { background: var(--lst-leaf-dark); border-color: var(--lst-leaf-dark); color: #fff; }
  .lst.pl .pl-cards.is-cards { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .lst.pl .pl-cards.is-rows .pl-img { flex-basis: 56px; width: 56px; }
  .lst.pl .pl-cards.is-rows .pl-cta { padding: 0 10px; font-size: 12px; }
}
/* Mobilens projektlista som prototypen: rubrik + räkneord, "+ Nytt", sökfält, en kompakt rad per projekt → Studio. */
.pl-mhead, .pl-mrow { display: none; }
@media (max-width: 1023px) {
  body:has(.pl-page, .mq-page) { --m-ink: #1d2420; --m-muted: #6b736e; --m-primary: #1f6b4f; --m-line: #e3e6e1; --m-bg: #f4f5f1; }
  html:has(.pl-page, .mq-page), body:has(.pl-page, .mq-page), body:has(.pl-page, .mq-page) .zimla-scene, body:has(.pl-page, .mq-page) .zimla-global-topbar, body:has(.pl-page, .mq-page) #zimla-page-content { background: var(--m-bg) !important; }
  body:has(.pl-page, .mq-page) .zimla-scene > * { display: none !important; }
  body:has(.pl-page, .mq-page) .zimla-global-topbar__mobile-row { height: 56px; padding-inline: 20px; }
  body:has(.pl-page, .mq-page) .zimla-global-topbar__mobile-row > .absolute, body:has(.pl-page, .mq-page) .zimla-global-topbar__menu-button,
  body:has(.pl-page, .mq-page) .zimla-global-topbar__mobile-actions > :not(.zs-mobile-account) { display: none !important; }
  body:has(.pl-page, .mq-page) .zs-mobile-brand { position: relative; z-index: 10; display: inline-flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--m-ink); text-decoration: none; }
  body:has(.pl-page, .mq-page) .zs-mobile-account { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: #1f6b4f; color: #fff; font-size: 13px; font-weight: 600; }
  #zimla-page-content:has(.pl-page, .mq-page) { padding-inline: 0 !important; padding-top: 0 !important; }
  .pl-form > * { width: 100%; }
  .pl-page > .lst { width: 100%; margin: 0 !important; padding-inline: 0 !important; }
  .lst-page-wrap.pl-page { width: 100%; max-width: 560px; margin: 0 auto; padding: 8px 20px calc(110px + env(safe-area-inset-bottom)) !important; }
  .pl-form { display: flex !important; flex-direction: column; gap: 16px; }
  .pl-mhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
  .pl-mhead h1 { margin: 0; font-size: 31px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; color: var(--m-ink); }
  .pl-mhead p { margin: 4px 0 0; font-size: 14px; line-height: 1.35; color: var(--m-muted); }
  .pl-mnew { flex: none; min-height: 40px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--m-primary); color: #fff; font-size: 14px; font-weight: 600; }
  .pl-head { display: block; padding: 0; border: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .pl-hello, .pl-actions > :not(.pl-q), .pl-kbd, .pl-chips, .pl-tools, .pl-form .lst-filter-panel { display: none !important; }
  .pl-actions { display: block; width: 100%; }
  .pl-q, .pl-q.lst-q { max-width: none !important; }
  .pl-q { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 0 14px; border: 1px solid var(--m-line); border-radius: 14px; background: #fff; box-shadow: none; color: var(--m-muted); }
  .pl-q input { flex: 1; min-width: 0; border: 0; background: none; font-size: 15px; color: var(--m-ink); outline: 0; }
  .pl-cards, .pl-cards.is-grid { display: flex !important; flex-direction: column; gap: 10px; margin-top: 14px; }
  .pl-form { margin: 0 !important; }
  .pl-card { padding: 0 !important; border: 0 !important; border-radius: 18px !important; background: #fff !important; box-shadow: 0 1px 2px rgba(20, 30, 25, 0.05) !important; overflow: hidden; }
  .pl-card > :not(.pl-mrow):not(.lst-pick) { display: none !important; }
  .pl-mrow { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto 18px; align-items: center; gap: 12px; padding: 10px 12px; color: var(--m-ink); text-decoration: none; }
  .pl-mimg { width: 56px; height: 56px; border-radius: 12px; background: #e3e9e2; overflow: hidden; }
  .pl-mimg img { width: 100%; height: 100%; object-fit: cover; }
  .pl-mtext { display: grid; justify-items: start; gap: 2px; min-width: 0; }
  .pl-mtext b { max-width: 100%; overflow: hidden; font-size: 16px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
  .pl-mtext small { max-width: 100%; overflow: hidden; font-size: 13px; color: var(--m-muted); white-space: nowrap; text-overflow: ellipsis; }
  .pl-mtext em { margin-top: 3px; padding: 2px 8px; border-radius: 6px; background: #eceee9; font-size: 12px; font-style: normal; font-weight: 600; color: #4e5751; }
  .pl-mtext em.t-amber { background: #fdf0cf; color: #8a5a00; }
  .pl-mtext em.t-blue { background: #e4ecf8; color: #2d4f86; }
  .pl-mtext em.t-teal, .pl-mtext em.t-green { background: #e9f2ec; color: #1f6b4f; }
  .pl-mamt { font-size: 15px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .pl-mrow > .material-symbols-outlined { font-size: 20px; color: #9aa19c; }
  .pl-card:active { transform: scale(0.99); }
}
/* Mobilens Offerter (designprototypen): nyckeltal, chips, Kräver åtgärd / Övriga, signalrad + en åtgärd per offert. */
.mq { display: none; }
@media (max-width: 1023px) {
  .mq-page > :not(.mq):not(script) { display: none !important; }
  #zimla-page-content:has(.mq-page) { padding: 0 !important; }
  .lst-page-wrap.mq-page { width: 100%; max-width: 560px; margin: 0 auto; padding: 8px 20px calc(110px + env(safe-area-inset-bottom)) !important; }
  .mq { display: grid; gap: 14px; color: var(--m-ink); }
  .mq-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
  .mq-h h1 { margin: 0; font-size: 31px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; }
  .mq-h p { margin: 2px 0 0; font-size: 14px; color: var(--m-muted); }
  .mq-new { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 12px; background: var(--m-primary); color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
  .mq-kpi { display: grid; grid-template-columns: 1.25fr 1fr; gap: 8px; }
  .mq-kpi > div { display: grid; align-content: start; gap: 2px; padding: 10px 12px; border-radius: 18px; background: #fff; box-shadow: 0 1px 2px rgba(20, 30, 25, 0.05); }
  .mq-kpi small { font-size: 12px; color: var(--m-muted); }
  .mq-kpi b { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
  .mq-kpi > .mq-out { grid-row: span 2; padding: 12px 14px; background: #1f5c45; color: #fff; }
  .mq-out small { font-size: 12.5px; color: rgba(255, 255, 255, 0.75); }
  .mq-out b { font-family: "Source Serif 4", Georgia, serif; font-size: 27px; font-weight: 400; line-height: 1.1; }
  .mq-chips { display: flex; gap: 6px; margin: 0 -20px; padding: 0 20px; overflow-x: auto; scrollbar-width: none; }
  .mq-chips::-webkit-scrollbar { display: none; }
  .mq-chips button { flex: none; height: 36px; padding: 0 13px; border: 0; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(20, 30, 25, 0.06); font: inherit; font-size: 13.5px; font-weight: 600; color: #3d4540; }
  .mq-chips button span { font-weight: 500; opacity: 0.6; }
  .mq-chips button[aria-pressed="true"] { background: #1d2420; color: #fff; box-shadow: none; }
  .mq-group { display: grid; gap: 8px; }
  .mq-group[hidden], .mq-card[hidden] { display: none; }
  .mq-gh { display: flex; align-items: center; gap: 8px; }
  .mq-gh span { flex: 1; font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--m-muted); }
  .mq-gh small { font-size: 12.5px; color: var(--m-muted); }
  .mq-card { overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 1px 2px rgba(20, 30, 25, 0.05); }
  .mq-top { display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; color: inherit; text-decoration: none; }
  .mq-top > .material-symbols-outlined { font-size: 20px; color: #9aa19c; }
  .mq-t { display: grid; gap: 2px; min-width: 0; }
  .mq-meta { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: #8a918c; }
  .mq-meta em { padding: 2px 8px; border-radius: 6px; font-size: 12px; font-style: normal; font-weight: 600; background: #eef0ec; color: #4e5751; }
  .mq-meta em.is-sent { background: #fff4dc; color: #8a5a00; }
  .mq-meta em.is-won { background: #e3f3ea; color: #1f6b4f; }
  .mq-meta em.is-lost { background: #f7e4e1; color: #9a3a2e; }
  .mq-t b { overflow: hidden; font-size: 16px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
  .mq-t small { overflow: hidden; font-size: 13.5px; color: var(--m-muted); white-space: nowrap; text-overflow: ellipsis; }
  .mq-sum { display: grid; justify-items: end; }
  .mq-sum b { font-size: 15.5px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .mq-sum small { font-size: 11.5px; color: #8a918c; }
  .mq-foot { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 14px; border-top: 1px solid #f1f2ef; background: #fafbf9; }
  .mq-foot p { flex: 1; margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--m-muted); }
  .mq-card.is-urgent .mq-foot { background: #fffaf0; }
  .mq-card.is-urgent .mq-foot p { color: #6b4a00; }
  .mq-act { flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 0; border-radius: 10px; background: #eef0ec; font: inherit; font-size: 13.5px; font-weight: 600; color: #1d2420; text-decoration: none; }
  .mq-card.is-urgent .mq-act { background: #1f6b4f; color: #fff; }
  .mq-act:disabled { opacity: 0.7; }
  .mq-card:active { transform: scale(0.995); }
  .mq-empty, .mq-none { margin: 8px 0; font-size: 14.5px; color: var(--m-muted); }
  .mq-none[hidden] { display: none; }
}