/* map-controls.css — the map view toolbar (heat map · quarantine · timeline). */

/* the toolbar sits in its own row above the map (not overlaying it) */
.ipm-controls { flex: none; position: relative; padding: 8px clamp(12px, 2vw, 24px) 0; }
.ipm-controls:empty { display: none; }
.ipm-mc-root { display: flex; flex-direction: column; gap: 8px; }
.ipm-mc {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; align-self: flex-start;
  padding: 7px 9px; border-radius: 13px;
  background: var(--glass-1, rgba(255,255,255,.05));
  border: 1px solid var(--glass-border-2, rgba(255,255,255,.14));
}
.ipm-mc-btn { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; padding: 7px 11px; border-radius: 9px;
  font: 700 12px/1 var(--font-body, 'Inter', sans-serif); color: var(--text-secondary, #cbd5e1);
  background: var(--glass-1, rgba(255,255,255,.05)); border: 1px solid var(--glass-border, rgba(255,255,255,.1)); transition: all .15s; }
.ipm-mc-btn:hover { color: var(--text-primary, #e8ecf6); border-color: var(--glass-border-2, rgba(255,255,255,.18)); }
.ipm-mc-btn.is-on { color: #04050f; background: linear-gradient(100deg, var(--accent-cyan, #38bdf8), var(--accent-violet, #a78bfa)); border-color: transparent; }
.ipm-mc-btn[data-env].is-on { background: linear-gradient(100deg, var(--accent-teal, #2dd4bf), var(--accent-cyan, #38bdf8)); }
.ipm-mc-btn[data-cycle].is-on { background: linear-gradient(100deg, #86efac, #7dd3fc); }
.ipm-mc-btn[data-cap].is-on { background: linear-gradient(100deg, var(--accent-cyan, #38bdf8), var(--accent-teal, #2dd4bf)); }
.ipm-mc-btn[data-quar].is-on { background: linear-gradient(100deg, var(--accent-violet, #a78bfa), #c4b5fd); }
.ipm-mc-btn[data-plant].is-on { background: linear-gradient(100deg, #34d399, var(--accent-teal, #2dd4bf)); }
.ipm-mc-hint-btn[disabled] { opacity: .5; cursor: not-allowed; }

.ipm-mc-time { display: flex; align-items: center; gap: 8px; padding-left: 6px; border-left: 1px solid var(--glass-border, rgba(255,255,255,.1)); }
.ipm-mc-play { width: 28px; height: 28px; flex: none; display: grid; place-items: center; cursor: pointer; border-radius: 8px;
  color: var(--text-secondary, #cbd5e1); background: var(--glass-1, rgba(255,255,255,.05)); border: 1px solid var(--glass-border, rgba(255,255,255,.1)); }
.ipm-mc-play:hover { color: var(--accent-cyan, #38bdf8); }
.ipm-mc-play.is-on { color: var(--accent-cyan, #38bdf8); border-color: color-mix(in srgb, var(--accent-cyan,#38bdf8) 40%, transparent); }
.ipm-mc-slider { width: 130px; accent-color: var(--accent-cyan, #38bdf8); cursor: pointer; }
.ipm-mc-date { font: 700 11px/1 var(--font-display, 'Space Grotesk', sans-serif); letter-spacing: .04em; min-width: 42px; color: var(--accent-teal, #2dd4bf); }
.ipm-mc-date.is-past { color: var(--accent-amber, #fbbf24); }

.ipm-mc-hint { align-self: flex-start; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 12px; border-radius: 11px; font-size: 12px; color: var(--text-secondary, #cbd5e1);
  background: color-mix(in srgb, var(--accent-violet, #a78bfa) 16%, var(--col-indigo, #0f1535));
  border: 1px solid color-mix(in srgb, var(--accent-violet, #a78bfa) 40%, transparent); }
.ipm-mc-hint[hidden] { display: none; }   /* the class's display:flex was overriding the hidden attr */

/* active-quarantine list with reliable DOM Lift buttons */
.ipm-mc-qzones { align-self: flex-start; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ipm-mc-qzones[hidden] { display: none; }
.ipm-qz-label { font: 700 11px/1 var(--font-body, 'Inter', sans-serif); letter-spacing: .04em; text-transform: uppercase; color: var(--accent-violet, #a78bfa); }
.ipm-qz-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 7px 5px 10px; border-radius: 100px;
  font: 600 12px/1 var(--font-body, 'Inter', sans-serif); color: var(--text-primary, #e8ecf6);
  background: color-mix(in srgb, var(--accent-violet, #a78bfa) 16%, var(--col-indigo, #0f1535));
  border: 1px solid color-mix(in srgb, var(--accent-violet, #a78bfa) 42%, transparent); }
.ipm-qz-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-violet, #a78bfa); box-shadow: 0 0 7px var(--accent-violet, #a78bfa); }
.ipm-qz-lift { cursor: pointer; padding: 4px 9px; border-radius: 100px; font: 700 11px/1 var(--font-body, sans-serif); color: #04050f;
  background: linear-gradient(100deg, var(--accent-violet, #a78bfa), #c4b5fd); border: 0; }
.ipm-qz-lift:hover { filter: brightness(1.08); }
.ipm-qz-lock { font-size: 11px; opacity: .7; }
.ipm-mc-hint-btn { cursor: pointer; padding: 5px 11px; border-radius: 8px; font: 700 11.5px/1 var(--font-body, sans-serif); color: #04050f; background: var(--accent-violet, #a78bfa); border: 0; }
.ipm-mc-hint-btn.ghost { color: var(--text-secondary, #cbd5e1); background: var(--glass-2, rgba(255,255,255,.08)); }

/* "view placement" floating pill — persistent until Done is clicked */
.ipm-mc-preview { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 2147483090;
  display: inline-flex; align-items: center; gap: 10px; padding: 9px 9px 9px 15px; border-radius: 100px;
  font: 600 13px/1 var(--font-body, 'Inter', sans-serif); color: var(--text-primary, #e8ecf6);
  background: color-mix(in srgb, #34d399 14%, var(--col-indigo, #0f1535)); border: 1px solid color-mix(in srgb, #34d399 46%, transparent);
  box-shadow: 0 16px 40px rgba(2,4,14,.5); }
.ipm-mc-preview[hidden] { display: none; }
.ipm-mc-preview-dot { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 8px #34d399; flex: none; }
.ipm-mc-preview-txt { white-space: nowrap; max-width: 60vw; overflow: hidden; text-overflow: ellipsis; }
.ipm-mc-preview-x { cursor: pointer; padding: 6px 13px; border-radius: 100px; font: 700 12px/1 var(--font-body, sans-serif);
  color: #04050f; background: linear-gradient(100deg, #34d399, var(--accent-teal, #2dd4bf)); border: 0; flex: none; }
.ipm-mc-preview-x:hover { filter: brightness(1.07); }

.ipm-mc-toast { position: fixed; left: 50%; bottom: 84px; transform: translate(-50%, 8px); z-index: 2147483080; pointer-events: none;
  padding: 9px 15px; border-radius: 100px; font-size: 12.5px; color: var(--text-primary, #e8ecf6); opacity: 0; transition: opacity .2s, transform .2s;
  background: var(--col-indigo, #0f1535); border: 1px solid var(--glass-border-2, rgba(255,255,255,.16)); box-shadow: 0 14px 36px rgba(2,4,14,.5); }
.ipm-mc-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 640px) { .ipm-mc-slider { width: 90px; } .ipm-mc-btn span { display: none; } }

/* ── light theme ─────────────────────────────────────────────────────────── */
/* these panels mix an accent into --col-indigo (dark, un-inverted in light) →
   re-mix the same accent into white so the tint reads on the pale page. */
html[data-theme="light"] .ipm-mc-hint {
  color: var(--text-secondary, #334155);
  background: color-mix(in srgb, var(--accent-violet, #7c3aed) 12%, #fff);
  border-color: color-mix(in srgb, var(--accent-violet, #7c3aed) 40%, transparent);
}
html[data-theme="light"] .ipm-qz-chip {
  color: var(--text-primary, #13103a);
  background: color-mix(in srgb, var(--accent-violet, #7c3aed) 12%, #fff);
  border-color: color-mix(in srgb, var(--accent-violet, #7c3aed) 42%, transparent);
}
html[data-theme="light"] .ipm-mc-preview {
  color: var(--text-primary, #13103a);
  background: color-mix(in srgb, var(--accent-emerald, #059669) 12%, #fff);
  border-color: color-mix(in srgb, var(--accent-emerald, #059669) 46%, transparent);
  box-shadow: 0 16px 40px rgba(80,90,160,.18);
}
html[data-theme="light"] .ipm-mc-toast {
  color: var(--text-primary, #13103a);
  background: #fff;
  border-color: var(--glass-border-2, rgba(130,100,200,.32));
  box-shadow: 0 14px 36px rgba(80,90,160,.18);
}