/* ── Design tokens ───────────────────────────────────────────────────── */
:root {
  --font-family: 'Jost', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --c-bg:           #9e9a8e;
  --c-map:          #B9AB9F;
  --c-panel:        #f5f0eb;
  --c-county:       #c4bfb2;
  --c-county-hover: #b5b0a4;
  --c-border:       #e8e2d8;
  --c-border-soft:  #ddd8ce;
  --c-text:         #3a3630;
  --c-text-muted:   #9e9a8e;
  --c-text-faint:   #c4bfb2;
  --c-accent:       #7a5c2e;
  --c-accent-dark:  #3d2a0e;
  --c-green:        #5a9e72;
  --c-yellow:       #c8902a;
  --c-red:          #c05548;

  /* Aurora mesh background — tile-radar's decorative gradient system
     (soft mesh blend, static — no motion). Painted full-bleed on `body`;
     see SYSTEM_ARCHITECTURE.md for how the blob layers are composed. */
  --aurora-base:           #e7ded0;   /* light warm sand — page gradient's base color */
  --aurora-cream:          #fdf8f1;
  --aurora-accent:         #B9AB9F;   /* solid — borders, glows, shadows, gradient blob */
  --aurora-accent-dark:    #8e8479;   /* hover/active state for --aurora-accent */
  --aurora-accent-whisper: #B9AB9F24; /* ~14% alpha — faint hint/glow (bottom-sheet edge, selected-card glow) */
  --aurora-line:           #fdf8f1cc; /* ~80% alpha aurora-cream — soft leader-line stroke on the map */
}

/* ── Reset ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Shared: county paths ────────────────────────────────────────────── */
.county {
  fill: var(--c-county);
  stroke: var(--c-panel);
  stroke-width: 1.2;
  transition: fill 0.15s;
}
.county:hover { fill: var(--c-county-hover); }

/* ── Shared: inventory items ─────────────────────────────────────────── */
.item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(245, 240, 235, 0.7); /* was solid var(--c-panel) — let the aurora wash bleed through */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--c-border);
  box-shadow: 0 1px 2px rgba(61, 42, 14, 0.05), 0 2px 6px rgba(61, 42, 14, 0.04);
}

.item-img {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--c-border);
  background: var(--c-border-soft);
  box-shadow: 0 1px 3px rgba(61, 42, 14, 0.08);
  flex-shrink: 0;
}

.item-info { flex: 1; min-width: 0; }

.item-type {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 4px;
  margin-bottom: 3px;
}
.item-type--CC { background: #eef0f5; color: #6a7a9e; }
.item-type--MG { background: #f5f0e8; color: #9e7a3a; }

.item-name {
  font-size: 11px;
  font-weight: 500;
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.item-qty { font-size: 16px; font-weight: 700; line-height: 1; }
.qty-green  { color: var(--c-green); }
.qty-yellow { color: var(--c-yellow); }
.qty-red    { color: var(--c-red); }

.item-status {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 99px;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.status-green  { background: #eef5f1; color: var(--c-green); }
.status-yellow { background: #faf3e8; color: var(--c-yellow); }
.status-red    { background: #faf0ef; color: var(--c-red); }

/* ── Leader lines (shared: desktop + mobile) ─────────────────────────── */
.leader-group { cursor: pointer; }

.leader-dot {
  fill: var(--c-accent);
  filter: drop-shadow(0 1px 3px rgba(61, 42, 14, 0.35));
  transition: fill 0.15s;
}
.leader-group:hover .leader-dot,
.leader-group.active .leader-dot { fill: var(--c-accent-dark); }

.leader-line {
  stroke: var(--aurora-line);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1.5 7; /* round-capped short dashes read as a soft dotted trail, not a hard ruled line */
  transition: stroke 0.15s;
}
.leader-group:hover .leader-line,
.leader-group.active .leader-line { stroke: var(--aurora-cream); }

.leader-label-bg {
  fill: var(--c-panel);
  stroke: var(--c-county);
  stroke-width: 1;
  filter: drop-shadow(0 2px 5px rgba(61, 42, 14, 0.14));
  transition: fill 0.15s;
}
.leader-group:hover .leader-label-bg,
.leader-group.active .leader-label-bg { fill: #ede8e2; stroke: var(--c-bg); }

.leader-label {
  fill: var(--c-text);
  font-family: var(--font-family);
  pointer-events: none;
}