/**
 * css/mobile-overlays.css
 * Flytande element ovanpå kartan (profilavatar, destination-pill,
 * filter-active-pill, zoom-till-resultat-pill), bottom sheet (mobil),
 * filter-sheet (mobil) samt övriga mobilanpassningar och
 * foto-uppladdningen i "lägg till tips".
 * Bruten ur app.css (Steg 8 Del A punkt 16, 2026-07-12) — ren flytt.
 */

/* ── HUD-lager: två fristående kolumner ovanpå kartan ──
 * Vänster: platsväljare → kugghjul → avatar, alltid alla tre, i denna
 * ordning. Höger: Rensa filter → Zooma till träffar, endast kontextuella
 * (döljs individuellt av respektive .visible-klass, se längre ned).
 * Samma gap (10px) i båda kolumnerna gör att rad 1 alltid linjerar mot
 * rad 1 och rad 2 mot rad 2 — ingen kolumn flyttar eller krymper den
 * andra vid state-ändring, eftersom varje kolumn bara påverkar sin egen
 * höjd (flex-column, inget skickas mellan dem).
 */
#hud-left, #hud-right {
  position: absolute;
  top: calc(16px + env(safe-area-inset-top));
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#hud-left { left: 16px; align-items: flex-start; }
#hud-right { right: 16px; align-items: flex-end; }

/* ── Avatar (flytande på kartan, i #hud-left) ── */
#profile-wrap { position: relative; }

#profile-menu {
  display: none;
  position: absolute;
  top: 42px; left: 0;
  background: var(--glass-bg-strong);
  border-radius: 18px;
  box-shadow: var(--shadow-float);
  min-width: 180px;
  z-index: 3000;
  overflow: hidden;
}
#profile-menu.open { display: block; }

/* ── Destination-pill (flytande på kartan, i #hud-left) ── */
#destination-wrap { position: relative; }
#destination-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 36px;
  background: var(--glass-bg);
  border-radius: 999px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  box-shadow: var(--shadow-float);
  cursor: pointer;
}
#destination-pill i { font-size: 13px; color: var(--text-muted); }

/* Kugghjulet är en egen rad i #hud-left, samma höjd (36px) som
 * platsväljar-pillen och avataren så att raderna linjerar med #hud-right. */
#destination-settings-btn {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--glass-bg);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-float);
  color: var(--ink);
  flex-shrink: 0;
  transition: opacity .12s;
}
#destination-settings-btn:hover { opacity: .8; }
#destination-settings-btn i { font-size: 20px; }

/* Fälls ner rakt under platsväljar-pillen, vänsterkant i linje med
 * pillens vänsterkant — ingen kompensation åt vänster behövs längre,
 * eftersom #hud-left redan ligger i skärmens vänsterkant. */
#destination-menu {
  display: none;
  position: absolute;
  top: 42px; left: 0;
  background: var(--glass-bg-strong);
  border-radius: 18px;
  box-shadow: var(--shadow-float);
  min-width: 200px;
  z-index: 3000;
  overflow: hidden;
}
#destination-menu.open { display: block; }

.dm-section-label {
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  letter-spacing: .06em; text-transform: uppercase;
  padding: 10px 14px 4px;
}
.dm-guide-row {
  display: flex; align-items: center; gap: 6px;
  width: 100%;
  padding: 9px 14px;
  font-size: 13px; color: var(--ink-soft);
  text-align: left;
  background: none; border: none; cursor: pointer;
  font-family: inherit;
  transition: background .1s;
}
.dm-guide-row i { font-size: 13px; color: var(--accent); flex-shrink: 0; width: 13px; }
.dm-guide-check-spacer { display: inline-block; width: 13px; flex-shrink: 0; }
.dm-guide-row:hover { background: #F9FAFB; }
.dm-guide-row + .dm-guide-row { border-top: 1px solid #F3F4F6; }
.dm-guide-row.active { font-weight: 700; color: var(--ink); }
.dm-loading { padding: 12px 14px; font-size: 12px; color: var(--text-muted); }
.dm-divider { margin: 0; }
.dm-create-btn {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 9px 14px;
  font-size: 13px; font-weight: 600; color: var(--ink);
  text-align: left;
  background: rgba(0,0,0,0.045);
  border: none; cursor: pointer;
  font-family: inherit;
  transition: background .1s, opacity .1s;
}
.dm-create-btn:hover { opacity: .85; }
.dm-create-btn + .dm-create-btn { border-top: 1px solid rgba(0,0,0,.08); }
.dm-create-btn i { font-size: 14px; }

#profile-btn {
  width: 36px; height: 36px; border-radius: 50%;
  border: none; cursor: pointer;
  font-size: 14px; font-weight: 700; color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; line-height: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,.22);
  transition: opacity .12s;
}
#profile-btn:hover { opacity: .85; }


#profile-name {
  padding: 10px 14px 8px;
  font-size: 12px; font-weight: 700; color: var(--ink-soft);
  border-bottom: 1px solid #F3F4F6;
}
#profile-help, #profile-guide, #profile-admin, #profile-logout {
  display: block; width: 100%;
  padding: 9px 14px;
  font-size: 13px; color: var(--ink-soft);
  text-decoration: none; text-align: left;
  background: none; border: none; cursor: pointer;
  font-family: inherit;
  transition: background .1s;
}
#profile-help:hover, #profile-guide:hover, #profile-admin:hover, #profile-logout:hover { background: #F9FAFB; }
#profile-guide { border-top: 1px solid #F3F4F6; }
#profile-admin { border-top: 1px solid #F3F4F6; }
#profile-logout { border-top: 1px solid #F3F4F6; color: #DC2626; }

/* ── Bottom sheet (mobil) ── */
#bottom-sheet {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #fff;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 24px rgba(0,0,0,.15);
  z-index: 2000;
  max-height: 75vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(.4,0,.2,1);
  padding: 0 16px calc(24px + env(safe-area-inset-bottom));
}
#bottom-sheet.open { transform: translateY(0); }
#bs-handle {
  width: 36px; height: 4px;
  background: var(--border-strong);
  border-radius: 2px;
  margin: 12px auto 14px;
  cursor: grab;
}
#bs-close {
  position: absolute;
  top: 12px; right: 16px;
  background: #F3F4F6;
  border: none;
  border-radius: 50%;
  width: 28px; height: 28px;
  cursor: pointer;
  color: #6B7280;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}
#bs-content { font-family: -apple-system, sans-serif; }
#bs-content .bs-name { font-size: 16px; font-weight: 700; margin: 0 0 4px; color: #111827; }
#bs-content .bs-loc  { font-size: 12px; color: var(--text-muted); margin: 0 0 8px; }
#bs-content .bs-badge { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; display: inline-block; margin-bottom: 10px; }
#bs-content .bs-desc { font-size: 14px; color: var(--ink-soft); line-height: 1.5; margin-bottom: 8px; }
#bottom-sheet .comment-text { font-size: 14px; }
#bs-content .bs-detail { font-size: 14px; color: #6B7280; margin-bottom: 10px; }
#bs-content .bs-img  { width: 100%; border-radius: 10px; margin-bottom: 10px; display: block; }
#bs-content .bs-link { display: block; font-size: 13px; color: var(--link-color); font-weight: 600; text-decoration: none; margin-bottom: 6px; }
#bs-content .bs-maps { display: block; font-size: 13px; color: var(--link-color); font-weight: 600; text-decoration: none; margin-top: 8px; }
#bs-content .bs-src  { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; display: inline-block; margin-top: 8px; }

.tb-icon-mobile { display: inline-block; }
.tb-icon-desktop { display: none; }
.tb-btn.tb-desktop-only { display: none; }

/* ── Toolbar dold när sheet är öppen ── */
#toolbar.toolbar-hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}

/* ── Rensa filter (flytande, flex-item i #hud-right) ──
 * Ordning (Rensa filter överst, Zooma till träffar under när båda visas)
 * styrs nu av HTML-ordningen i #hud-right, inte av top/left-koordinater.
 * Visnings-logiken (.visible-klassen, satt av filters.js) är oförändrad. */
#filter-active-pill {
  display: none;
  align-items: center;
  gap: 6px;
  height: 36px;
  box-sizing: border-box;
  background: #FEF2F2;
  color: #DC2626;
  border: 2px solid #FCA5A5;
  border-radius: 999px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-float);
  white-space: nowrap;
  font-family: inherit;
}
#filter-active-pill i { font-size: 13px; }
#filter-active-pill.visible { display: flex; }

/* ── Zooma till alla resultat (flytande, flex-item i #hud-right) ── */
#show-all-pill {
  display: none;
  align-items: center;
  gap: 6px;
  height: 36px;
  box-sizing: border-box;
  background: var(--glass-bg);
  color: var(--ink);
  border: 2px solid #E5E7EB;
  border-radius: 999px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-float);
  white-space: nowrap;
  font-family: inherit;
}
#show-all-pill i { font-size: 13px; }
#show-all-pill.visible { display: flex; }

/* ── Toggle Karta/Inspiration (Steg 17, flex-item i #hud-right) ──
 * Beslutad placering 2026-07-20 (spec-inspirationsvy.md §11): delar
 * #hud-right med filter-active-pill/show-all-pill, samma flex-column,
 * samma 10px gap — ingen egen positionering.
 *
 * Döljningsregel — BARA mobil (<=768px, samma brytpunkt som redan gäller
 * hela filen): togglen göms HELT (inte nedtonad) när filter-active-pill
 * eller show-all-pill är .visible, samma "ingen funktion just nu, göm
 * helt"-princip som redan gäller för show-all-pill vid öppen bottom
 * sheet (se filters.js updateZoomToResultsState()). Styrs av JS
 * (inspUpdateToggleVisibility(), inspiration.js), som sätter/tar bort
 * .insp-toggle-hidden — ren CSS-effekt här, ingen layoutlogik.
 *
 * Ingen effekt på desktop (>=769px): filter-active-pill/show-all-pill
 * visas där aldrig i #hud-right (se @media (min-width:769px)-blocket
 * nedan, som redan tvingar display:none på båda) — togglen ska alltid
 * synas på desktop, oavsett .insp-toggle-hidden. Löst genom att lägga
 * regeln i SAMMA <=768px-block som redan finns i denna fil, inte i en
 * egen media query som riskerar att glida isär från den.
 */
/**
 * Kontrastfix (2026-07-21, fälttest: en användare uppfattade inte att
 * detta var en toggle alls). Roten till problemet var INTE ikonerna
 * eller layouten — det var att var(--glass-bg-strong) nästan matchar
 * appens egen ljusa bakgrund, så hela kapselformen knappt syntes förrän
 * man redan visste att den var där. Egna, hårdkodade färger HÄR (inte
 * en ändring av --glass-bg-strong/--text-muted globalt) — de delade
 * variablerna används på många andra flytande element (destination-pill,
 * profil-avatar m.fl.) som INTE har samma kontrastproblem, en global
 * ändring hade riskerat att göra dem för mörka/tunga i onödan.
 */
.insp-mode-toggle {
  display: flex;
  background: #E4DFD3; /* tydligt mörkare än appens ljusa bakgrund (#F8F7F4/creme) — spårformen syns nu direkt, innan man ens läst ikonerna */
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
  box-shadow: var(--shadow-float);
}
/* Ikon-bara (beslutat 2026-07-20 — text gjorde togglen bred nog att
   krocka med filterpillarna på mobil). 30px-ikonyta, samma höjdkänsla
   som destination-settings-btn (36px inkl. wrapperns 3px padding). */
.insp-mode-btn {
  border: none;
  background: transparent;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #57534A; /* mörk, tydligt synlig ikonfärg för det INAKTIVA läget — tidigare var(--text-muted) var för blek, så det andra läget såg "avstängt" ut snarare än "det andra alternativet" */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  transition: color .15s, background .15s;
}
.insp-mode-btn i { font-size: 16px; }
/**
 * Aktiv sida = tom vit cirkel, ingen ikon (2026-07-21, Samsons beslut).
 * Resonemang: hela skärmen visar redan om man är i karta eller lista —
 * man vet ALLTID var man är. Det man INTE vet är vad man byter till om
 * man trycker. Ikonen behövs alltså bara på den INAKTIVA sidan (den
 * berättar vad du kommer till) — den aktiva sidan har inget kvar att
 * bekräfta. display:none (inte visibility/opacity) — ikonen tar ingen
 * plats, .active-knappen förblir en ren vit cirkel. Ikon-elementet
 * (<i>) finns fortfarande i DOM, bara dolt visuellt — aria-label på
 * knappen själv (app.html) är oförändrad, skärmläsare påverkas inte.
 */
.insp-mode-btn.active i { display: none; }
.insp-mode-btn.active {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 2px 5px rgba(0,0,0,.20); /* något starkare skugga än tidigare (.12) — knappen ska kännas "lyft" ur spåret, inte bara vara vit */
}

/* ── Filter-sheet (mobil) ── */
#filter-sheet {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #fff;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -4px 24px rgba(0,0,0,.15);
  z-index: 2000;
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(.4,0,.2,1);
  padding: 0 16px calc(40px + env(safe-area-inset-bottom));
}
#filter-sheet.open { transform: translateY(0); }
#fs-handle {
  width: 36px; height: 4px;
  background: var(--border-strong);
  border-radius: 2px;
  margin: 12px auto 16px;
}
#fs-close {
  position: absolute;
  top: 12px; right: 16px;
  background: #F3F4F6;
  border: none;
  border-radius: 50%;
  width: 28px; height: 28px;
  cursor: pointer;
  color: #6B7280;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}
#fs-search-wrap { margin-bottom: 0; }
#fs-search {
  width: 100%; padding: 8px 14px;
  border-radius: 999px;
  border: 2px solid #E5E7EB;
  font-size: 13px; font-family: inherit;
  outline: none; transition: border-color .15s;
}
#fs-search:focus { border-color: var(--accent); }
.fs-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px;
  overflow: visible !important;
}
.fs-pills .pill {
  width: auto !important;
  font-size: 13px;
}

@media (min-width: 769px) {
  #filter-sheet { display: none !important; }
  #filter-active-pill { display: none !important; }
  #show-all-pill { display: none !important; }
  .tb-icon-mobile { display: none; }
  .tb-icon-desktop { display: inline-block; }
  .tb-btn.tb-desktop-only { display: flex; }
  .pills { display: flex; flex-wrap: wrap; gap: 6px; overflow: visible; }
  .pill { width: auto; flex: none; padding: 6px 14px; white-space: nowrap; }
  #clear-header { display: none !important; }
}

/* ── Mobil: dölj header ── */
/* ── Foto-uppladdning i lägg till tips (steg 6c) ── */
.tip-photo-buttons { display: flex; gap: 8px; margin-bottom: 8px; }
.tip-photo-buttons.hidden { display: none; }
.tip-photo-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 4px; font-size: 12px; border: 0.5px solid #E5E7EB; border-radius: 8px;
  background: #fff; cursor: pointer;
  /* Explicit textfärg — utan denna ärvde knappen webbläsarens egen
     standardfärg för <button>, som på mobil Safari kunde rendera blått
     trots att elementet inte är en länk (samma rotorsak som .edit-btn i
     modals.css, se tip-render-helpers.js). 2026-07-16. */
  color: var(--ink);
}
.tip-photo-btn i { color: var(--ink); }
.tip-photo-btn:hover { background: #F9FAFB; }
.tip-photo-btn i { font-size: 18px; }
.tip-photo-btn.selected { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Status-knapparna (Besökt/Ej besökt) återanvänder .tip-photo-btn men ska
   INTE bli helsvarta vid val — det är rätt för fotoknapparna (ett val av
   flera likvärdiga metoder) men fel för ett statusval, se skiss (Steg 8
   Del C, 2026-07-16). Mer specifik selektor väger tyngre än raden ovan.
   Förstärkt 2026-07-16 (samma dag, efter feedback att förra versionen
   kändes för diskret) — fortfarande ink, ALDRIG accent för detta val
   (ui-riktlinjer.md regel 5), men med en lätt ink-tonad bakgrund +
   tjockare kant + fetare text för bättre kontrast mot ovalt läge. */
.tip-visited-btn.selected {
  background: rgba(28,27,25,.06);
  border-color: var(--ink); border-width: 2px;
  color: var(--ink); font-weight: 700;
}
.tip-photo-processing { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #6B7280; margin-bottom: 8px; }
.tip-photo-processing.hidden { display: none; }
.tip-photo-spinner {
  width: 14px; height: 14px; border: 2px solid #E5E7EB; border-top-color: #6B7280;
  border-radius: 50%; display: inline-block; animation: tip-photo-spin 0.8s linear infinite;
}
@keyframes tip-photo-spin { to { transform: rotate(360deg); } }
.tip-photo-preview-wrap { position: relative; margin-bottom: 8px; }
.tip-photo-preview-wrap.hidden { display: none; }
.tip-photo-preview { width: 100%; border-radius: 8px; display: block; }
.tip-photo-remove {
  position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(0,0,0,0.55); color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

@media (max-width: 768px) {
  #body { flex-direction: column; }
  #map-wrap { flex: 1; }
  #panel { display: none; }
  #header { display: none !important; }
  .edge-tab-l { display: none !important; }
  .edge-tab-r { display: none !important; }
  #clear-header-desktop { display: none !important; }
  /* Steg 17 — döljningsregel för Karta/Inspiration-togglen, se kommentar
     vid .insp-mode-toggle ovan. Ligger i detta redan existerande
     mobil-block (inte en egen media query) så den aldrig kan glida isär
     från appens övriga <=768px-brytpunkt. */
  #insp-mode-toggle-wrap.insp-toggle-hidden { display: none !important; }
  /* Förhindra iOS auto-zoom vid focus på inputfält */
  #fs-search, .modal-input, .modal-textarea, .comment-input, .comment-edit-textarea { font-size: 16px; }
}

/* ── Steg 17 — Inspirationsvy ──
 * Ligger i DENNA fil (inte app.css) enligt filuppdelningsprincipen redan
 * dokumenterad i app.css:s filhuvud: "mobile-overlays.css: flytande
 * kart-pills, bottom sheet, filter-sheet (mobil)". Inspirationsvyn är en
 * flytande/overlay-yta OVANPÅ kartan (#map-wrap), exakt samma kategori
 * som bottom sheet/filter-sheet — hör hemma här.
 *
 * Alla nya klasser prefixade "insp-" så de aldrig krockar med befintliga
 * .card/.pill/.badge. Återanvänder .pill rakt av för kategorifiltret
 * (spec §2.3, ingen ny filterstil). Använder ENDAST befintliga
 * CSS-variabler från app.css :root.
 *
 * OMARBETAD 2026-07-20 (efter mobil-/desktoptest): #hud-left (guide-pill)
 * och #hud-right (toggle) rör sig ALDRIG mellan lägena — fasta landmärken,
 * exakt som i kartläget. Bara kugghjul+avatar döljs i inspirationsläge
 * (se #hud-left-reglerna längre ner), guide-pillen är kvar. Kategori-
 * filterraden (#insp-filter-head) är en EGEN, fast, flytande rad DIREKT
 * under hud-left/hud-right-raden — mosaiken scrollar visuellt BAKOM den
 * (#inspiration-view är position:absolute, mosaiken är en separat
 * scroll-container UNDER filterraden i z-index, inte i samma flex-flöde
 * som knuffar undan den).
 */

#inspiration-view {
  position: absolute;
  inset: 0;
  z-index: 50; /* under HUD (#hud-left/#hud-right/#insp-filter-head = 900+) men över kartan */
  background: #F8F7F4;
  display: none;
}
#inspiration-view.open { display: block; }

/**
 * Filterhuvud — flytande "glas"-rad DIREKT under hud-left/hud-right-raden
 * (36px höjd + 16px topp-marginal + safe-area, se #hud-left/#hud-right i
 * denna fil: top: calc(16px + safe-area), height 36px vardera). Samma
 * glas-känsla som toolbar/destination-pill (--glass-bg-strong,
 * --shadow-float) — INGEN egen bakgrundsyta (#F8F7F4-rektangel) bakom
 * raden, bara själva pillsen/wraperna har glas. z-index högre än mosaiken
 * (900, under HUD:s 1000) så mosaiken scrollar synligt bakom den.
 */
#insp-filter-head {
  position: absolute;
  /* 62px = 16px (samma topp-marginal som #hud-left/#hud-right) + 36px
     (destination-pillens höjd, se #destination-pill i denna fil) + 10px
     (samma gap som redan används mellan HUD-raderna). Skriven som en
     färdigräknad siffra + safe-area, inte en lång calc-kedja, för
     läsbarhets skull — om destination-pillens höjd ändras måste denna
     siffra räknas om manuellt (ingen delad CSS-variabel finns för det
     ännu). */
  top: calc(62px + env(safe-area-inset-top));
  left: 0;
  right: 0;
  z-index: 900;
  display: flex;
  padding: 0 16px;
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  pointer-events: none; /* raden själv är osynlig/otryckbar, bara pillsen inuti (som återfår pointer-events) ska gå att klicka */
}
#insp-filter-head .insp-filters {
  pointer-events: auto;
  margin-bottom: 0;
}
/* Beslutat 2026-07-20: ingen gemensam "container"-bakgrund runt hela
   filterraden (kändes malplacerad, se resonemang i chatten — appen har
   inget prejudikat för en flytande pill-rad med egen bakgrundsyta,
   .pills ligger normalt direkt i en redan solid yta som #header eller
   filter-sheet). Istället får VARJE PILL sin egen skugga
   (--shadow-float) — samma "svävande HUD-element"-känsla som
   #destination-pill/#destination-settings-btn redan har individuellt,
   inte en ram runt allihop. */
#insp-filter-head .insp-filters .pill {
  /* Egen, tightare skugga (INTE --shadow-float rakt av) — bugg hittad
     vid test 2026-07-20: --shadow-float:s 24px spridning är avsedd för
     större flytande ytor (destination-pill, toolbar) med solid bakgrund
     bakom sig. På en liten, tätt packad pill-rad blir samma spridning
     proportionellt för stor — skuggan sprider ut sig långt utanför
     pillens runda form och flera pills nära varandra får sina skuggor
     att visuellt smeta ihop till en gråaktig gradient. Mindre spridning
     (8px istället för 24px) höll skuggan nära pillens egen form.
     YTTERLIGARE minskad 2026-07-20 (andra passet, efter test mot vit
     bakgrund) — fortfarande för synlig/mörk mot vit/ljus bakgrund,
     halverad opacitet (.15 → .08) och något mindre spridning (8px → 6px). */
  box-shadow: 0 1px 6px rgba(0,0,0,.08);
  position: relative;
}
/**
 * Rotorsak till "genomskinlighet"-problemet (hittad 2026-07-20, efter
 * flera felaktiga teorier): applyChipColorState()/applyChipNeutralState()
 * (js/shared-ui.js) sätter background-color via inline style — ovalt
 * läge ger bara ~6% färgopacitet (hex2rgba(color, .06)), avsett att
 * blandas mot en SOLID bakomliggande yta (kartvyns vita sidopanel).
 * Mina pills har ingen sådan yta bakom sig.
 *
 * LÖSNING: kan INTE bara sätta en egen background-color!important på
 * .pill — det skulle ersätta JS:ens färgtintning helt (kategori-pillsen
 * skulle tappa sin färg helt, inte bara bli mer synlig). Istället ett
 * eget lager BAKOM pillen (::before, negativt z-index, exakt samma
 * form/radie), som ger en solid --glass-bg-yta att blanda JS:ens tunna
 * färgtint mot — samma effekt som kartvyns solida sidopanel ger, utan
 * att röra JS:ens egen background-color-logik alls.
 */
#insp-filter-head .insp-filters .pill::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--glass-bg);
  border-radius: inherit;
  z-index: -1;
}

/* Mosaikens scroll-yta — separat från filterhuvudet (som ligger OVANPÅ,
   position:absolute, se ovan). padding-top (110px = 62px topp + 36px
   filterradens egen höjd + 12px marginal) ger plats så första radens
   kort inte hamnar under filterraden vid start; padding-bottom ger plats
   för toolbaren (dold i detta läge, men samma marginal som bottom sheet
   redan använder som säkerhetsmarginal). */
.insp-scroll-pad {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding: calc(110px + env(safe-area-inset-top)) 16px 100px;
  max-width: 1080px;
  margin: 0 auto;
  box-sizing: border-box;
  /**
   * Fade i topp/botten (2026-07-21) — samma "gardin"-effekt som Claude-
   * appens egna listor. mask-image (inte en overlay-div ovanpå) — en
   * ren CSS-egenskap på scroll-containern själv, ingen extra HTML/JS
   * behövs och den följer automatiskt med oavsett hur långt man scrollat.
   * Genomskinlig (svart, 0% opacitet i mask-språk) i de yttersta 40px,
   * sedan helt synlig — bara kort som faktiskt ligger nära kanten
   * påverkas, resten av mosaiken är opåverkad.
   * -webkit-mask-image krävs för Safari/iOS (där de flesta användare är,
   * se produktbeskrivningen) — mask-image utan prefix räcker inte ensamt.
   */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}

.insp-filters {
  display: flex;
  /* 10px — normalt gap. Det tidigare experimentet med 60px (för att
     testa om pill-skuggorna verkligen smälte samman optiskt, inte en
     bakgrund som läckte) bekräftade teorin men behövs inte längre:
     skuggan är nu mindre/tightare (se .pill-regeln ovan), så normalt
     avstånd räcker. */
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.insp-filters::-webkit-scrollbar { display: none; }

/* ── Döljning av toolbar/header/panel i inspirationsläge ──
 * Beslutat 2026-07-20: toolbaren (lägg till/lager/lokalisera-knapparna)
 * gör ingen nytta i inspirationsvyn — precis samma "ingen funktion just
 * nu, göm helt"-princip som redan gäller andra element i denna fil.
 * Desktop: #header (vänster filterpanel) och #panel (höger tipslista)
 * hör till KARTLÄGET — inspirationsvyn har sitt eget filter (#insp-filter-head)
 * och sin egen mosaik istället, så båda döljs helt istället för att stå
 * kvar overksamma bredvid en annan vy.
 * Klasserna sätts av setViewMode() (js/inspiration.js) på <body> — en
 * enda källa för lägesstyrning, ingen HUD-specifik logik i JS. */
body.insp-mode-active #toolbar { opacity: 0; pointer-events: none; }
body.insp-mode-active #header { display: none !important; }
body.insp-mode-active #panel { display: none !important; }
/* OMPRÖVAT 2026-07-20: guide-pillen (#destination-wrap) är KVAR synlig —
   den är ett fast landmärke, exakt som i kartläget (se resonemang i
   chatten: att dölja/flytta den bröt kontinuiteten, "var är jag").
   Bara kugghjul och avatar döljs — de hör till administrativa handlingar
   (guide-inställningar, profil) som inte är relevanta mitt i
   bläddrandet, till skillnad från att VETA vilken guide man är i. */
body.insp-mode-active #destination-settings-btn { display: none !important; }
body.insp-mode-active #profile-wrap { display: none !important; }
/* Panelens edge-tabs (öppna/stäng-flikarna) fyller ingen funktion när
   panelen själv är dold. */
body.insp-mode-active .edge-tab-l { display: none !important; }
body.insp-mode-active .edge-tab-r { display: none !important; }

/**
 * Linjering mot mosaikens maxbredd (bugg hittad vid test 2026-07-20,
 * RÄTTAD 2026-07-20 — tidigare version missade paddingen):
 * #hud-left/#hud-right ligger normalt FAST 16px från skärmkanten
 * (position:absolute, left/right:16px, se regeln högre upp i denna
 * fil). Mosaiken (.insp-scroll-pad/#insp-filter-head) är istället
 * CENTRERAD med max-width:1080px OCH har därutöver egen
 * padding:0 16px — mosaikens FAKTISKA innehållskant ligger alltså
 * 16px innanför den 1080px-boxens egen kant, inte i den. Den
 * ursprungliga uträkningen (calc(50% - 540px)) räknade bara med de
 * yttre 1080px, inte paddingen — 16px för långt ut på breda skärmar,
 * synligt vid test på en riktigt bred desktop-skärm.
 * Rättad uträkning: samma calc(50% - 540px) MINUS/PLUS ytterligare
 * 16px padding, dvs calc(50% - 540px + 16px) vänster / höger.
 * max()/min() säkrar fortfarande 16px som golv på smala skärmar där
 * 1080px-boxen inte får plats alls.
 */
body.insp-mode-active #hud-left {
  left: max(16px, calc(50% - 540px + 16px));
}
body.insp-mode-active #hud-right {
  right: max(16px, calc(50% - 540px + 16px));
}

/* .insp-surprise-btn borttagen 2026-07-20 — "Överraska mig" pausad
   (för få bilder ännu för att motivera funktionen), se
   spec-inspirationsvy.md §5. Sparad som framtida idé, inte byggd bort
   för gott — om den återupptas läggs stilen tillbaka här. */

/**
 * Mosaik — OMBYGGD 2026-07-20 (nionde gången: aspect-ratio istället för
 * fast pixelhöjd). Tidigare mekanism (grid-auto-rows: 10px + grid-row-
 * end: span N i JS) krävde att gissa fram en gemensam höjd i PIXLAR som
 * skulle passa alla breddklasser samtidigt — visade sig svårt att träffa
 * rätt, och fel gav antingen pixliga/kraftigt beskurna bilder (för låg
 * höjd) eller orimligt höga/smala kort (höjden nådde aldrig fram/
 * applicerades fel).
 *
 * Ny mekanism: grid-auto-rows: auto (raden tar den höjd innehållet
 * faktiskt behöver) + varje .insp-card får en aspect-ratio (satt i JS
 * per breddklass, se inspiration.js) — höjden blir en DIREKT following
 * av bredden × ett proportionstal, aldrig ett separat gissat pixelvärde
 * att hålla i synk. Löser roten till alla tidigare försök: en span
 * 1-ruta (smalare) och en span 2-ruta (bredare) kan nu ha OLIKA höjd
 * (en smalare, högre proportion för porträttbilder; en bredare, lägre
 * för liggande) — den fasta gemensamma höjden är helt borta.
 *
 * Grundenheter: 2 kolumner på smala skärmar (mobil), 4 kolumner på
 * breda (desktop/padda-liggande) — samma skärmbredds-baserade brytpunkt
 * som resten av appen redan använder.
 *
 * grid-auto-flow:dense löser radordningen automatiskt utifrån vilka
 * bredder som råkar komma i vilken ordning.
 */
.insp-mosaic {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: auto; /* raden anpassar sig till kortets aspect-ratio-baserade höjd, ingen fast pixelrad längre */
  grid-auto-flow: dense;
  gap: 10px;
}
@media (min-width: 700px) {
  .insp-mosaic { grid-template-columns: repeat(4, 1fr); }
}


.insp-card {
  border-radius: 14px; /* samma radie som .card i app.css */
  overflow: hidden;
  position: relative;
  background: #eee;
  /* grid-column OCH aspect-ratio sätts av JS (inspBuildCard(),
     js/inspiration.js) — aspect-ratio avgör kortets höjd (se
     kommentaren vid .insp-mosaic ovan), grid-column avgör bredden.
     De två hänger ihop (en bredare kolumn med samma aspect-ratio blir
     automatiskt högre i PIXLAR, men behåller samma FORM) — det är hela
     poängen med bytet från fast pixelhöjd. */
}
.insp-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  cursor: pointer; /* hela kortet är en klickyta, se inspBuildCard() */
}
.insp-card-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 9px 9px 8px;
  background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,0));
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 6px;
}
.insp-card-caption-left { min-width: 0; }
.insp-card-title {
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 5px;
  line-height: 1.25;
}
/* Kategori/källa-pill i miniatyr på kortet — samma par som
   categorySourcePillsHTML() bygger på kort/popup/bottom sheet (spec §3),
   men i egen liten stil eftersom .pill-höjden är för stor för mosaikens
   bildtextsrad. Samma FÄRGLOGIK (kategori-dot, neutral källa-grå), inget
   nytt färgsystem. */
/**
 * Resplan-nålens EGNA lager (beslutat med Samson 2026-07-20) — övre
 * vänstra hörnet, ovanpå bilden. Ligger UTANFÖR .insp-card-caption
 * (den nedre bildtextraden) medvetet, som ett helt separat
 * position:absolute-lager — den kan därför ALDRIG trycka undan eller
 * flytta titel/pills, oavsett storlek. .insp-card (position:relative,
 * överflow:hidden, se ovan) är referensramen; overflow:hidden håller
 * nålen inom kortets egna rundade hörn, samma avklippning som resten
 * av kortet redan har.
 * 10px — samma marginal-princip som #hud-left/#hud-right (16px där,
 * mindre här eftersom kortet i sig är mycket mindre än hela skärmen).
 */
.insp-card-resplan-wrap {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
}
.insp-card-pills { display: flex; gap: 4px; flex-wrap: wrap; }
.insp-mini-pill {
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  color: #fff;
  white-space: nowrap;
}
.insp-mini-pill.source { background: rgba(255,255,255,.22); }

.insp-card-caption-right {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.insp-count-chip {
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
  background: rgba(255,255,255,.20);
  border-radius: 999px;
  padding: 3px 7px;
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
/* Beslutat 2026-07-20: bild-klick och "i"-klick gjorde exakt samma sak
   (öppnade detaljvyn) — två klickytor för en handling kändes redundant,
   se spec-inspirationsvy.md §3/§11. Bilden är nu HELA kortets klickyta.
   Denna badge är kvar bara som en tyst visuell antydan om att kortet är
   klickbart för mer info — den är INTE en egen knapp, har ingen egen
   onclick, och tar inte emot klick separat (pointer-events: none, så
   klicket alltid går rakt igenom till bilden under den).
   Storlek 24px → 34px (2026-07-20, Samsons begäran: matcha resplan-
   nålens storlek så båda syns ordentligt). insp-card-caption-right är
   sitt EGET flex-fack, skilt från insp-card-caption-left (titel/pills)
   — en större badge här trycker alltså aldrig på titel/pills, den kan
   bara göra HÖGRA sidan av bildtextraden bredare. */
.insp-info-badge {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--glass-bg-strong);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  box-shadow: var(--shadow-float);
  pointer-events: none;
}

.insp-card.surprised {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Tomt-plats-kort (spec §8) */
.insp-empty-card {
  border-radius: 14px;
  border: 1.5px dashed #D1D5DB;
  background: #F3F2ED;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px 12px;
  color: var(--text-muted);
  /* grid-row-end: span 15 sätts inline (renderInspirationMosaic(),
     js/inspiration.js) — samma grid, samma logik som riktiga kort. */
}
.insp-empty-card i { font-size: 24px; margin-bottom: 8px; color: var(--accent); }
.insp-empty-card b { color: var(--ink-soft); font-size: 13px; display: block; margin-bottom: 2px; }
.insp-empty-card span { font-size: 11.5px; }

/* ── Detaljvy (spec §4) ── */
/**
 * Detaljvy — OMARBETAD 2026-07-20 (andra gången, efter test).
 * Bakgrunden matchar nu #photo-lightbox EXAKT (app.css) — rgba(0,0,0,.88),
 * inte vanliga .modal-backdrop (rgba(0,0,0,.4), för ljus/otydlig enligt
 * test 2026-07-20). Egen fristående stil (inte längre en tilläggsklass
 * på .modal-box) eftersom lightboxens mönster (opacity/visibility-
 * övergång, inte display) skiljer sig från den vanliga modal-stilens
 * (display:none/flex) — att blanda de två hade krävt undantag i båda
 * riktningar.
 *
 * .insp-detail-box själv (den vita rutan med bild+text) ÅTERANVÄNDER
 * fortfarande .modal-box-lg:s bakgrund/radie/skugga (se app.html — den
 * klassen ligger kvar), bara YTTER-overlayen bytte mönster.
 *
 * EN ENDA layout för alla skärmstorlekar (mobil OCH desktop) — bild
 * ovanför text, samma mönster som mosaikkorten redan använder.
 */
#insp-detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 5100; /* samma nivå som #photo-lightbox — se app.css-kommentaren om lightboxens historik */
  background: rgba(0,0,0,.88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease;
}
#insp-detail-overlay.open { opacity: 1; visibility: visible; }
.insp-detail-box {
  /* position:relative satt explicit HÄR (inte antaget ärvt från
     .modal-box, modals.css — en fil jag inte haft i denna session) —
     behövs som referensram för .insp-detail-resplan-wrap
     (position:absolute, se den regeln). Säkrare att äga egenskapen
     själv än att gissa vad en annan, osedd fil redan sätter. */
  position: relative;
  padding: 0; /* .modal-box har egen padding (24px) som inte passar en bild i kanten — nollställs, padding läggs istället bara på textdelen (se nedan) */
  overflow: hidden; /* håller bildens border-radius korrekt i hörnen */
  max-height: 90vh;
  overflow-y: auto;
  /**
   * OMBYGGD 2026-07-20 (tredje gången): fast max-width (760px, tidigare
   * 480px) gav en konstig ruta för STÅENDE bilder — bilden krympte till
   * sin smala proportion (object-fit:contain), men rutan runt den (och
   * texten under) förblev lika bred som för en bred, liggande bild.
   * Bugg hittad vid test 2026-07-20 (tredje gången): ".insp-detail-img
   * { width:100% }" gjorde det omöjligt för bilden att bli smalare än
   * rutan ÖVERHUVUDTAGET — contain fick alltså aldrig chansen att krympa
   * BREDDEN, bara höjden, inom en bredd som redan var fast.
   *
   * Ny lösning (beslutad med Samson): ingen fast bredd här längre.
   * inspOpenDetail() (js/inspiration.js) mäter bildens VERKLIGA
   * bredd/höjd-proportion (samma inspGetImageRatio() som mosaiken redan
   * använder för att storleksbestämma korten — ingen ny mät-funktion
   * uppfanns) och sätter width INLINE i pixlar, inom detta CSS-blocks
   * min/max-gränser. En stående bild ger en smal ruta, en bred/panorama-
   * bild ger en bred ruta — precis som redan sker automatiskt i mosaiken.
   *
   * --insp-detail-max-w (920px, upp från 760px) — motsvarar ungefär
   * mosaikens span 3,5 i bredd (beslutat med Samson: bredare än ett
   * vanligt span 3-kort, men inte fullt span 4/panorama-bredd). Egen
   * CSS-variabel (inte en hårdkodad siffra i JS) så värdet går att ändra
   * på ETT ställe om det behöver justeras efter test.
   * --insp-detail-min-w (420px) — ett praktiskt golv så en extremt smal/
   * hög bild (t.ex. ratio < 0.5) inte ger en orimligt smal textkolumn.
   * Samson bedömde 2026-07-20 att en sådan bild är osannolik i praktiken
   * — detta golv är en enkel säkerhetsmarginal, inte en genomtänkt
   * lösning på det scenariot; hanteras vidare den dagen det blir ett
   * verkligt problem.
   */
  --insp-detail-max-w: 920px;
  --insp-detail-min-w: 420px;
  width: var(--insp-detail-box-w, min(var(--insp-detail-max-w), 92vw));
  max-width: min(var(--insp-detail-max-w), 92vw);
}
#insp-detail-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--glass-bg-strong);
  border: none;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-float);
  color: var(--ink);
  font-size: 18px;
  cursor: pointer;
}
/**
 * Beslutat 2026-07-20: bilden visas HEL, som #photo-lightbox-img
 * (object-fit:contain) — inte beskuren (cover). En hög/smal bild ska
 * inte klippas i kanterna bara för att fylla en fast rektangel. Ingen
 * fast max-height längre (den gamla 360px capade bilden oavsett hur
 * stor photo_large faktiskt var — bugg hittad vid test: detaljvyns
 * "förstoring" gjorde bilden MINDRE än i mosaiken, motsatsen till
 * avsikten). Höjden styrs nu av bildens egen proportion inom
 * .insp-detail-box:s max-height (90vh) — en bred bild blir kort, en
 * hög bild blir hög, ingen konstgjord kapning.
 */
.insp-detail-img {
  /* width:100% (tidigare) tvingade bilden att alltid fylla rutans fulla
     bredd — omöjligt för en stående bild att bli smalare än rutan, vilket
     var precis buggen (se .insp-detail-box-kommentaren ovan). max-width
     räcker: rutans BREDD sätts nu redan korrekt (av JS, matchar bildens
     egen proportion), så bilden fyller den naturligt utan att behöva
     tvingas till 100%. */
  max-width: 100%;
  display: block;
  margin: 0 auto;
  max-height: 60vh;
  object-fit: contain;
  /**
   * Bugg hittad vid test 2026-07-20 (fjärde gången): byte av .src direkt
   * (inspOpenDetail(), js/inspiration.js) lät den GAMLA bilden hänga
   * synlig kvar (i den gamla bredden, .insp-detail-box:s bredd hade inte
   * hunnit räknas om än) tills den nya bilden laddats klart — ett synligt
   * "hopp" när allt bytte samtidigt. .loading (satt/tagen bort av JS)
   * döljer bilden med en snabb fade EXAKT under bytet, tas bort igen när
   * BÅDE den nya bilden är laddad OCH rutans nya bredd är uppmätt och
   * satt — aldrig en gissad tidsfördröjning, väntar på det som faktiskt
   * är klart (se inspOpenDetail()-kommentaren för hela resonemanget).
   */
  opacity: 1;
  transition: opacity .15s ease;
  background: #111; /* fyller ev. tomrum runt en bild vars proportion inte matchar rutans bredd — samma svarta "letterbox"-princip som #photo-lightbox redan har (rgba(0,0,0,.88) bakgrund) */
}
.insp-detail-img.loading { opacity: 0; }
.insp-detail-pills { display: flex; gap: 6px; margin: 20px 24px 10px; }
.insp-detail-text {
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.55;
  margin: 0 24px 12px;
  white-space: pre-wrap;
}
.insp-detail-resplan {
  font-size: 12.5px;
  color: var(--accent-text);
  margin: 0 24px 16px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.insp-detail-actions { display: flex; gap: 8px; margin: 0 24px 24px; }
.insp-btn-map {
  flex: 1;
  border: none;
  border-radius: 10px; /* handlingsknapp, se radie-tabellen */
  padding: 11px 14px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: inherit;
  background: #F1F2F0;
  color: var(--ink);
}

/**
 * Resplan-nål i detaljvyn (beslutat med Samson 2026-07-20, ersätter den
 * tidigare textknappen "Resplan"/"Sparad" helt) — SAMMA placering/lager-
 * princip som mosaikkortets egen nål (.insp-card-resplan-wrap ovan):
 * eget fristående lager, övre vänstra hörnet, ovanpå bilden. Löser tre
 * problem på en gång:
 * 1. Textknappens gröna grundfärg (var(--accent)) syntes likadan i BÅDA
 *    tillstånden (bara en svag ljusgrön skillnad vid "added") — såg ut
 *    som att klicket inte gjorde något förrän en refresh.
 * 2. "Sparad" gav ingen kontext (sparad var? i vad?).
 * 3. Konsekvens — nu är resplan-togglingen ALLTID samma runda nål,
 *    samma grå/grön-logik, överallt i appen (kort, bottom sheet,
 *    mosaikkort, detaljvy) — ingen egen textknapp-variant kvar någonstans.
 * .insp-detail-box har position:relative genom .modal-box (modals.css,
 * antaget — samma mönster som .insp-card ovan) så absolut positionering
 * här refererar till hela rutan, inte bara bilden.
 */
/**
 * Bugg (2026-07-21): nålen låg lägre än X-knappen (top: 34px vs.
 * X-knappens top: 16px, se #insp-detail-close ovan) och saknade egen
 * storlek helt (renderades bara i sin innehålls-storlek, 34px, medan
 * X-knappen är 40px) — de två kändes därför inte som ett par, trots att
 * de sitter i samma hörnrad. Nu: samma top (16px) och samma left-
 * marginal-princip som X:s right (16px), samma 40×40px yta. size:34
 * i resplanToggleHTML()-anropet (js/inspiration.js, rad 587) lämnas
 * OFÖRÄNDRAT — storleken på själva ikonen ändras inte, bara wrapperns
 * yta växer så den centreras i samma 40px-ruta som X-knappen har.
 */
.insp-detail-resplan-wrap {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}