/* 
  Cold Cutting Your Way to Cancer
  Visual intent: shocking but readable — strong hierarchy, deli label title, and a
  warm (caramel/brown) deli-meat background that stays behind the map.
*/

:root{
  --ink:#1a1410;
  --paper:#ffffff;
  --shadow: rgba(0,0,0,.22);
  --shadow2: rgba(0,0,0,.34);
  --card: rgba(255,255,255,.86);
  --card2: rgba(255,255,255,.92);
  --stroke: rgba(30,20,16,.35);
  --stroke2: rgba(30,20,16,.55);
  --accent: #b21e1e;
  --muted: rgba(26,20,16,.66);
  --radius: 18px;
  --ui-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

html, body{
  height:100%;
  margin:0;
  font-family: var(--ui-font);
  color: var(--ink);
}

#meatBg{
  position:fixed;
  inset:0;
  z-index:0;
  background-color:#7a4b2a; /* fallback */
  background-image: url('./cold_cut_tile.png');
  background-repeat: repeat;
  background-size: 512px 512px;
  filter: saturate(1.05) contrast(1.05);
}

#app{
  position:relative;
  z-index:2;
  height:100%;
  display:block;
}

/* Title sticker (upper-left) */
#titleSticker{
  position:fixed;
  top: 84px;
  left:24px;
  z-index: 10;
  max-width: 380px;
  background: var(--paper);
  border-radius: 22px;
  box-shadow: 0 14px 40px var(--shadow);
  border: 1px solid rgba(0,0,0,.08);
  overflow:hidden;

  transform: rotate(-15deg);
  transform-origin: 24px 24px;
}

#titleSticker .label-inner{
  padding: 14px 16px 12px 16px;
}

#titleSticker .label-title{
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1.2;
  font-size: 26px;
  color:#b21e1e;
  }

#titleSticker .label-date{
  margin-top: 6px;
  font-weight: 650;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .6px;
}

#titleSticker .barcode{
  margin-top: 10px;
  height: 18px;
  border-radius: 6px;
  background-image:
    linear-gradient(90deg,
      #000 0 2px, transparent 2px 4px,
      #000 4px 5px, transparent 5px 8px,
      #000 8px 11px, transparent 11px 13px,
      #000 13px 14px, transparent 14px 16px,
      #000 16px 18px, transparent 18px 21px,
      #000 21px 23px, transparent 23px 26px,
      #000 26px 29px, transparent 29px 31px,
      #000 31px 32px, transparent 32px 36px,
      #000 36px 38px, transparent 38px 40px,
      #000 40px 44px, transparent 44px 46px,
      #000 46px 47px, transparent 47px 52px,
      #000 52px 54px, transparent 54px 60px,
      #000 60px 62px, transparent 62px 68px,
      #000 68px 70px, transparent 70px 78px,
      #000 78px 82px, transparent 82px 90px,
      #000 90px 92px, transparent 92px 100px);
  background-size: 150px 18px;
  background-repeat: repeat-x;
  opacity:.85;
}

/* Map panel */
#mapCard{
  position:fixed;
  inset: 90px 18px 18px 18px;
  border-radius: var(--radius);
  background: transparent; /* let the meat tile show through */
  box-shadow: none;
  border: none;
  overflow: visible;
}

#mapSvg{
  width:100%;
  height:100%;
  display:block;
}

.loading{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  color: rgba(26,20,16,.72);
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(2px);
  z-index: 5;
}

.tooltip{
  position:absolute;
  min-width: 220px;
  max-width: 320px;
  pointer-events:none;
  background: rgba(255,255,255,.96);
  border-radius: 14px;
  box-shadow: 0 18px 55px rgba(0,0,0,.28);
  border: 1px solid rgba(0,0,0,.08);
  padding: 12px 12px 10px 12px;
  transform: translate(12px, 12px);
  opacity:0;
  transition: opacity .12s ease;
  z-index: 20;
}

.tooltip .tt-title{
  font-weight: 850;
  letter-spacing: .2px;
}

.tooltip .tt-row{
  margin-top: 6px;
  display:flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: rgba(26,20,16,.85);
}

.tooltip .tt-k{
  color: rgba(26,20,16,.62);
}

.tooltip .tt-fine{
  margin-top: 10px;
  font-size: 11px;
  color: rgba(26,20,16,.62);
  line-height: 1.25;
}

/* Legend (lower-right) */
#legend{
  position:fixed;
  right: 18px;
  bottom: 18px;
  z-index: 11;
  width: 320px;
  background: rgba(255,255,255,.94);
  border-radius: 18px;
  box-shadow: 0 18px 55px rgba(0,0,0,.22);
  border: 1px solid rgba(0,0,0,.08);
  overflow:hidden;
}

.legend-header{
  padding: 12px 12px 10px 12px;
  border-bottom: 1px solid rgba(0,0,0,.07);
}

.legend-title{
  font-weight: 850;
    letter-spacing: .6px;
  font-size: 12px;
  text-transform: uppercase;
}

.legend-subtitle{
  margin-top: 3px;
  font-size: 12px;
  color: rgba(26,20,16,.62);
}

.legend-items{
  padding: 8px 8px 6px 8px;
  max-height: 42vh;
  overflow:auto;
}

.legend-item{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 9px 8px;
  border-radius: 12px;
  cursor:pointer;
  user-select:none;
  border: 1px solid transparent;
}

.legend-item:hover{
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.05);
}

.swatch{
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,.12);
  flex: 0 0 auto;
}

.legend-item .lbl{
  flex: 1 1 auto;
  font-size: 13px;
}

.legend-item .count{
  font-size: 12px;
  color: rgba(26,20,16,.62);
}

.legend-item.off{
  opacity: .55;
}

.legend-actions{
  display:flex;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid rgba(0,0,0,.07);
}

.btn{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.9);
  border-radius: 12px;
  padding: 8px 10px;
  font-weight: 750;
  cursor:pointer;
}

.btn:hover{
  background: rgba(0,0,0,.03);
}

.btn-ghost{
  flex: 1 1 auto;
}

.btn-x{
  width: 40px;
  height: 34px;
  padding: 0;
}

/* Sources modal */
.modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  display:none;
  align-items:center;
  justify-content:center;
  z-index: 50;
}

.modal-backdrop.open{
  display:flex;
}

.modal{
  width: min(640px, 92vw);
  border-radius: 18px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 30px 90px rgba(0,0,0,.45);
  border: 1px solid rgba(0,0,0,.08);
  overflow:hidden;
}

.modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 12px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.modal-title{
  font-weight: 900;
  letter-spacing:.2px;
}

.modal-body{
  padding: 12px 14px 14px 14px;
  color: rgba(26,20,16,.86);
}

.modal-body ul{
  margin: 0;
  padding-left: 18px;
  line-height: 1.35;
}

.modal-fineprint{
  margin-top: 12px;
  font-size: 12px;
  color: rgba(26,20,16,.62);
}

/* Attribution */
#attribution{
  position:fixed;
  left: 18px;
  bottom: 18px;
  z-index: 11;
  font-size: 12px;
  color: rgba(255,255,255,.9);
  text-shadow: 0 2px 6px rgba(0,0,0,.55);
  user-select:none;
}

/* State paths */
.state{
  stroke: var(--stroke);
  stroke-width: .8;
  vector-effect: non-scaling-stroke;
}

.state:hover{
  stroke: var(--stroke2);
  stroke-width: 1.2;
}


#mapSvg{ width:100%; height:100%; overflow:visible; }

#titleSticker::after{
  content:'';
  position:absolute;
  right: 10px;
  bottom: 8px;
  width: 86px;
  height: 86px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27180%27%20height%3D%27180%27%3E%0A%3Cdefs%3E%0A%20%20%3CradialGradient%20id%3D%27g%27%20cx%3D%2750%25%27%20cy%3D%2750%25%27%20r%3D%2760%25%27%3E%0A%20%20%20%20%3Cstop%20offset%3D%270%27%20stop-color%3D%27%237a0c0c%27%20stop-opacity%3D%27.22%27/%3E%0A%20%20%20%20%3Cstop%20offset%3D%27.55%27%20stop-color%3D%27%237a0c0c%27%20stop-opacity%3D%27.08%27/%3E%0A%20%20%20%20%3Cstop%20offset%3D%271%27%20stop-color%3D%27%237a0c0c%27%20stop-opacity%3D%270%27/%3E%0A%20%20%3C/radialGradient%3E%0A%20%20%3Cfilter%20id%3D%27blur%27%20x%3D%27-20%25%27%20y%3D%27-20%25%27%20width%3D%27140%25%27%20height%3D%27140%25%27%3E%0A%20%20%20%20%3CfeGaussianBlur%20stdDeviation%3D%271.6%27/%3E%0A%20%20%3C/filter%3E%0A%3C/defs%3E%0A%3Cg%20filter%3D%27url%28%23blur%29%27%20opacity%3D%27.55%27%3E%0A%20%20%3Cpath%20d%3D%27M95%2022c26%2010%2042%2028%2048%2053%206%2026-2%2051-22%2071-20%2020-45%2028-71%2022-26-6-44-22-53-48%27%20fill%3D%27none%27%20stroke%3D%27url%28%23g%29%27%20stroke-width%3D%2718%27%20stroke-linecap%3D%27round%27/%3E%0A%20%20%3Cpath%20d%3D%27M70%2040c20%204%2037%2018%2042%2038%205%2021-2%2041-18%2055-16%2014-36%2016-55%207%27%20fill%3D%27none%27%20stroke%3D%27url%28%23g%29%27%20stroke-width%3D%2710%27%20stroke-linecap%3D%27round%27/%3E%0A%20%20%3Cpath%20d%3D%27M58%2064c12%202%2022%2010%2025%2022%203%2012-1%2024-10%2032%27%20fill%3D%27none%27%20stroke%3D%27url%28%23g%29%27%20stroke-width%3D%276%27%20stroke-linecap%3D%27round%27/%3E%0A%3C/g%3E%0A%3C/svg%3E");
  background-size: contain;
  background-repeat:no-repeat;
  opacity: .22; /* very faint */
  pointer-events:none;
  mix-blend-mode: multiply;
}

.legend-header{ cursor:pointer; user-select:none; }
#legend.legend-collapsed .legend-items,
#legend.legend-collapsed .legend-actions{ display:none; }
#legend.legend-collapsed{ width: 240px; }