/* ═══════════════════════════════════════════════════════════════════════════
   MARKNADSSÖKET — formatmallen

   Samma fönster som de andra demona, ur css/systemskal.css. Eget här är
   sökkortet, arbetsloggen och objektlistan.

   ETIKETTERNA ÄR INTE MONOVERSALER. Spärrad versal monotext sopades ut ur
   båda sajterna den 6 september 2026; en ny fil får inte lägga tillbaka den.
   Etiketterna är därför sidans egen sans, i gemen, små och tysta.

   INGA FÄRGER UTANFÖR PALETTEN. Omdömena är tre steg i samma marinblå familj
   plus mässing för det som ligger över budget, och mässingen är den enda
   varma tonen i hela paletten. Lägg aldrig till grönt eller rött här: ett
   objekt som saknar havsutsikt är inte ett fel, det är ett objekt som saknar
   havsutsikt, och det säger den överstrukna brickan bättre än en röd färg.
   ═══════════════════════════════════════════════════════════════════════════ */

.msd{position:relative;display:flex;flex-direction:column}
/* SKALET SKA FÅ KRYMPA, samma rad som teamdemot bär och av samma skäl: .sk
   har min-height:0 men inte min-width:0, och objektens mejladresser är långa. */
.msd .sk{min-width:0}
.msd-panel{display:flex;flex-direction:column;gap:.55rem;min-width:0;
  background:#fff;border:1px solid var(--line2);border-radius:12px;
  padding:clamp(.7rem,1.3vw,.95rem)}
.msd-panel > *{min-width:0}

.msd-h{margin:0;font-size:1.05rem;font-weight:700;letter-spacing:-.015em;
  color:var(--text);line-height:1.25}
.msd-ing{margin:0;font-size:.78rem;line-height:1.6;color:var(--muted);max-width:78ch}

/* ── Sökkortet ───────────────────────────────────────────────────────────── */
.msd-kort{display:grid;gap:.4rem;padding:.75rem .85rem;border-radius:11px;
  background:#f7f9ff;border:1px solid var(--line2)}
.msd-kort-h{margin:0;font-size:.9rem;font-weight:700;color:var(--text);line-height:1.3}
.msd-kort-i{margin:0;font-size:.74rem;line-height:1.55;color:var(--muted)}
.msd-etikett{font-size:.68rem;font-weight:650;color:var(--faint);line-height:1.4}
.msd-falt{width:100%;padding:.45rem .6rem;border-radius:8px;
  border:1px solid var(--line2);background:#fff;font-family:inherit;
  font-size:.76rem;line-height:1.55;color:var(--text);resize:none}
.msd-falt[readonly]{background:#f2f5fb;color:var(--muted)}
.msd-falt--lang{min-height:0}
.msd-kort-f{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:.15rem}

.msd-kn{display:inline-flex;align-items:center;gap:.4rem;padding:.42rem .8rem;
  border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--text);
  font:inherit;font-size:.76rem;font-weight:650;cursor:pointer;
  transition:background .16s,border-color .16s}
.msd-kn:hover{background:var(--card-h);border-color:rgba(42,85,200,.4)}
.msd-kn--pri{background:var(--g2);border-color:var(--g2);color:#fff}
.msd-kn--pri:hover{background:#23489f;border-color:#23489f}
.msd-kn:disabled{opacity:.55;cursor:default}
.msd-kn i{display:grid;place-items:center;line-height:0}

/* ── Arbetsloggen ────────────────────────────────────────────────────────
   Raderna radas upp en i taget, och den sista säger Arbetar tills den är
   klar. Raden byter INTE höjd när bocken kommer: ikonrutan är lika bred i
   båda lägena, annars hoppar texten en halv bokstav i sidled per rad. */
.msd-logg{display:grid;gap:.22rem;margin-top:.3rem;padding-left:.5rem;
  border-left:2px solid rgba(42,85,200,.18)}
.msd-logg-r{display:flex;align-items:flex-start;gap:.45rem;
  font-size:.73rem;line-height:1.5;color:var(--muted)}
.msd-logg-r > i{flex:none;display:grid;place-items:center;width:14px;height:1.1rem;
  color:var(--g2);font-style:normal}
.msd-logg-r--nu{color:var(--faint)}

/* ── Träffarna ───────────────────────────────────────────────────────────── */
.msd-traff{display:grid;gap:.45rem}
.msd-traff-h{display:flex;align-items:center;gap:.45rem;margin:.2rem 0 0;
  font-size:.9rem;font-weight:700;color:var(--text);line-height:1.3}
.msd-antal{flex:none;min-width:18px;padding:0 .3rem;border-radius:999px;
  background:var(--g2);color:#fff;font-size:.62rem;font-weight:800;
  line-height:18px;text-align:center}
.msd-traff-i{margin:0;font-size:.74rem;line-height:1.55;color:var(--muted);max-width:78ch}

.msd-obj{display:grid;gap:.4rem;padding:.7rem .8rem;border-radius:11px;
  background:#fff;border:1px solid var(--line2);
  box-shadow:0 16px 36px -34px rgba(10,24,84,.5)}
.msd-obj-h{display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:start;gap:.7rem}
.msd-obj-t{display:grid;gap:.1rem;min-width:0}
.msd-obj-t b{font-size:.86rem;font-weight:700;color:var(--text);line-height:1.3}
.msd-obj-t small{font-size:.72rem;color:var(--muted);line-height:1.45}
.msd-obj-p{display:grid;gap:.1rem;justify-items:end;text-align:right}
.msd-obj-p b{font-size:.86rem;font-weight:700;color:var(--text);white-space:nowrap}
/* TRE STEG I SAMMA FAMILJ. Omdömet är hur väl objektet svarar mot uppdraget,
   inte ett betyg på huset, och tonen mörknar med träffen i stället för att
   byta kulör. */
.msd-dom{font-style:normal;font-size:.66rem;font-weight:700;white-space:nowrap}
.msd-dom--hog{color:var(--g2)}
.msd-dom--mellan{color:var(--muted)}
.msd-dom--lag{color:var(--faint)}

.msd-chips{display:flex;flex-wrap:wrap;gap:.3rem}
.msd-chip{padding:.14rem .45rem;border-radius:999px;font-size:.66rem;font-weight:600;
  background:rgba(42,85,200,.08);color:var(--g2)}
/* DET SOM SAKNAS STÅR KVAR, ÖVERSTRUKET. Att dölja det hade gjort listan
   snyggare och demot osant: produktens egen ingress säger att man ska kunna
   säga båda när man ringer. */
.msd-chip--av{background:transparent;color:var(--faint);
  text-decoration:line-through;border:1px dashed var(--line)}
.msd-chip--over{background:rgba(138,108,56,.12);color:var(--massing)}

/* TVÅ KNAPPAR PER KORT, och de bryter rad tillsammans när de inte får plats.
   Den ena skriver till byrån som har uppdraget, den andra delar objektet med
   köparen. Båda öppnar ett utkast och ingen av dem skickar något. */
.msd-obj-f{display:flex;flex-wrap:wrap;gap:.4rem}
/* Delaknappen är tystare än den till byrån: att skriva till byrån är steget
   som flyttar affären, att dela är en artighet på vägen dit. */
.msd-kn--dela{color:var(--muted);border-color:var(--line2)}
.msd-kn--dela:hover{color:var(--text)}
.msd-kn--dela i{color:var(--g2)}

.msd-byra{display:grid;gap:.1rem;padding-top:.4rem;border-top:1px solid var(--line2)}
.msd-byra b{font-size:.78rem;font-weight:700;color:var(--text);line-height:1.35}
.msd-kontakt{display:flex;flex-wrap:wrap;gap:.15rem .7rem;font-size:.72rem;
  color:var(--muted);line-height:1.5}
.msd-kontakt i,.msd-kontakt em{font-style:normal}
.msd-kontakt em{color:var(--faint)}

/* ── Utkastet till byrån ────────────────────────────────────────────────
   Det ligger ÖVER listan och inte under objektet det gäller. Under kortet
   hade det knuffat ned resten av listan med trehundra pixlar mitt i ett
   ögonkast; överst står det där blicken redan är. */
.msd-utkast{display:grid;gap:.3rem;padding:.7rem .8rem;border-radius:11px;
  background:#fff;border:1.5px solid rgba(42,85,200,.35)}
.msd-utkast--klar{border-color:rgba(138,108,56,.4)}
.msd-utkast-f{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;
  margin-top:.25rem;padding-top:.45rem;border-top:1px solid var(--line2)}
.msd-lage{font-size:.7rem;font-weight:650;color:var(--faint)}
/* Samma höjd som knappen den ersätter, annars hoppar raden när man trycker. */
.msd-lage--klar{color:var(--massing);padding-block:.42rem}
.msd-avbryt{padding:.42rem 0;border:0;background:none;font:inherit;font-size:.72rem;
  color:var(--faint);text-decoration:underline;cursor:pointer}

.msd-fot{margin:.2rem 0 0;font-size:.7rem;line-height:1.5;color:var(--faint)}
.msd-not{flex:none;margin:.6rem 0 0;padding-top:.55rem;
  border-top:1px dashed var(--line);font-size:.74rem;line-height:1.55;color:var(--muted)}

/* Uppläsningsytan. Osynlig, men den är det enda en skärmläsare får veta när
   sökningen är klar eller ett brev bokförts. */
.msd-live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* TVÅ SPALTER FRÅN 900 PX. Objekten är korta kort och listan blir annars en
   remsa på tre hundra pixlars bredd mitt i ett fönster på tusen. */
@media(min-width:900px){
  .msd-traff{grid-template-columns:1fr 1fr;align-items:start}
  .msd-traff-h,.msd-traff-i,.msd-utkast{grid-column:1 / -1}
}