:root { --bg:#0ea5e9; --card:#fff; --text:#0f172a; --muted:#475569; --br:16px; }
  body { font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; color: var(--text); background: #f8fafc; }
  .wrap { max-width: 1000px; margin: 48px auto; padding: 0 16px; }
  .searchbar { display: grid; grid-template-columns: 260px 1fr auto; gap: 12px; align-items: center; }
  .searchbar input, .searchbar button, .searchbar select {
    padding: 12px 14px; font: inherit; border-radius: var(--br); border: 1px solid #cbd5e1; background: #fff;
  }
  .searchbar button { background: var(--bg); border-color: var(--bg); color:#fff; cursor:pointer }
  .searchbar button:hover { filter: brightness(0.95); }

  /* Kollaps/expand-panel under sökrutan */
  .results-panel {
    overflow: clip; /* bättre än hidden för performance */
    background: transparent;
    transition: grid-template-rows 320ms ease, opacity 240ms ease;
    display: grid;
    grid-template-rows: 0fr; /* stängd */
    opacity: 0;
    margin-top: 12px;
  }
  .results-panel.open {
    grid-template-rows: 1fr; /* öppen */
    opacity: 1;
  }
  .results-inner {
    min-height: 0; /* krävs för fr/overflow i grid-trick */
  }

  .card {
    background: var(--card);
    border: 1px solid #e2e8f0;
    border-radius: var(--br);
    padding: 16px;
    transition: box-shadow .2s ease, transform .2s ease;
  }
  .card:hover { box-shadow: 0 8px 24px rgba(2,6,23,.08); transform: translateY(-1px); }

.searchbar .grid,
.results-panel .grid {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr 1fr;
}

  @media (max-width: 1100px) { .grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 700px)  { .grid { grid-template-columns: 1fr; } }

  .title { font-weight: 600; margin:0; }
  .meta { color: var(--muted); font-size: 13px; margin-top: 4px; display:flex; gap:8px; align-items:center }
  .snippet { margin-top: 8px; font-size: 14px; color:#334155 }
  .favicon { width: 16px; height:16px; border-radius:4px; vertical-align: -2px; }

  /* Skeleton/loader */
  .skeleton {
    animation: pulse 1.1s infinite ease-in-out;
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 37%, #e2e8f0 63%);
    background-size: 400% 100%;
    border-radius: 8px;
  }
  @keyframes pulse { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
  .sk-title { height: 16px; width: 70%; }
  .sk-line { height: 12px; width: 90%; margin-top: 8px; }
  .sk-line.short { width: 55%; }

  .error { background:#fef2f2; color:#991b1b; border:1px solid #fecaca; padding:12px; border-radius: var(--br); }



    /* Visa bara på desktop */
  @media (max-width: 768px){ #mf-desk-search { display:none !important; } }

  #mf-desk-search{ display:flex; align-items:center; gap:.5rem; }

  /* Själva expanderande skalet */
  #mf-search-shell{
    position:relative; overflow:hidden; height:40px;
    background:#fff; border-radius:9999px; box-shadow:0 1px 2px rgba(0,0,0,.06);
    transition:width .30s ease, padding .30s ease, border-color .30s ease;
    z-index:10; /* över menyn */
  }
  #mf-search-shell.mf-collapsed{
    width:0; padding-left:0; padding-right:0; border:0; pointer-events:none;
  }
  #mf-search-shell.mf-expanded{
    width:24rem; padding-left:1rem; padding-right:1rem; border:1px solid #e5e7eb;
  }

  #mf-search-input{
    width:100%; height:100%;
    background:transparent; outline:none; border:0; padding:0 .75rem;
    font-size:16px;
  }

  /* Toggleknappen: glas -> X */
  #mf-search-toggle{
    height:40px; width:40px; display:flex; align-items:center; justify-content:center;
    border-radius:9999px; background:transparent; border:0; cursor:pointer;
  }
  #mf-search-toggle:hover{ background:#f3f4f6; }

  #mf-desk-search { position: relative; }



/* Panel under själva sök-input (inte hela gruppen) */
#mf-desk-search { position: relative; }
.results-panel.dropdown { position: absolute; top: 0; left: 0; z-index: 1000; }

/* Listvy (ersätter cards i panelen) */
.list { background:#fff; border:1px solid #e2e8f0; border-radius:14px; overflow:hidden; box-shadow:0 12px 24px rgba(2,6,23,.10) }
.row { padding:14px 16px; border-bottom:1px solid #e2e8f0 }
.row:last-child { border-bottom:none }
.title { font-weight:700; margin:0 0 4px 0; line-height:1.35 }
.title a { color:inherit; text-decoration:none }
.title a:hover { text-decoration:underline }
.meta { margin:0; font-size:13px; color:#475569; display:flex; gap:8px; align-items:center }
.favicon { width:16px; height:16px; border-radius:4px }
.snippet { margin:8px 0 0 0; color:#334155 }
mark { background:#fff3a3 }

/* Skeleton i listläge */
.sk-row{ padding:14px 16px; border-bottom:1px solid #e2e8f0; background:#fff }
.skeleton{ animation:pulse 1.1s infinite ease-in-out; background:linear-gradient(90deg,#e2e8f0 25%,#f1f5f9 37%,#e2e8f0 63%); background-size:400% 100%; border-radius:8px }
.sk-title{height:16px;width:70%}.sk-line{height:12px;width:90%;margin-top:8px}.sk-line.short{width:55%}
@keyframes pulse{0%{background-position:200% 0}100%{background-position:-200% 0}}