/* THE PLUGIN STARTS HERE. One wrapper owns the map, the card and (on narrow
     containers) the rep panel, so the whole thing is self-contained and every
     selector below is scoped to it. */
.tufco-map {
  --tufco-ink: #f2f2f2;
  --tufco-accent: #ea2e27;
  --tufco-panel: #111;
  --tufco-panel-line: #2e2e2e;
  background: #0b0b0b;
  box-sizing: border-box;
  max-width: 1250px;
  margin: 0 auto;
  /* The demo page's own body padding (excluded from the plugin, see the
 comment at the top of this file) used to be the only thing keeping the
 map off the edges of its background. On a real WordPress page there is
 no such padding, so the map, logo and picker sat flush against this
 box's own edges. This is the plugin's own margin, present no matter
 what page it lands on - modest on purpose, since padding is inner
 space taken from the map itself (box-sizing: border-box), not extra
 width added around it. */
  padding: clamp(14px, 3vw, 28px);
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
}

.tufco-map *,
.tufco-map *::before,
.tufco-map *::after {
  box-sizing: border-box;
}

.tufco-map svg {
  overflow: visible;
}

/* Themes style bare img and button elements - borders, uppercase, shadows,
     padding. Tested against one that did all of that, the scan came out framed
     in grey and the card toggle shouted in capitals, so the map's own images
     and buttons reset the properties themes most often reach for. */
.tufco-map img {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  max-width: 100%;
}

.tufco-map button {
  text-transform: none;
  box-shadow: none;
  line-height: 1.2;
}

/* The browser's own [hidden] rule only reaches HTML elements, so an SVG with
     hidden set stays on screen. The plugin hides the map that way when the data
     cannot be loaded, so the rule has to be stated here to cover both. */
.tufco-map [hidden] {
  display: none !important;
}

/* Each sales territory is ONE group containing its fills, its internal county
     lines, and its outline. Transforming the group moves everything together,
     so lines never separate from the shapes they belong to. */
/* Falling uses this curve - a clean deceleration into place. */
.tufco-map .territory {
  cursor: pointer;
  transition:
    transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform, filter;
}

/* Rising gets its own slower curve - a steady decelerating glide with no
     overshoot, so the territory eases up and comes to rest without any bounce.
     Because this transition lives on .is-active, it only governs the way up -
     removing the class hands control back to the curve above for the way down. */
.tufco-map .territory.is-active {
  transition:
    transform 840ms cubic-bezier(0.34, 0.9, 0.4, 1),
    filter 640ms ease-out;
  transform: translateY(-18px);
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.32))
    drop-shadow(0 20px 18px rgba(0, 0, 0, 0.48));
}

/* The lift belongs to the whole territory, but the grow belongs to each
     disconnected piece of it, around that piece's own centre. Scaling the group
     as a whole pushes anything far from the shared centre sideways by the
     distance between them - Arkansas, a third of the map from the western states
     it shares a rep with, slid clean out of its own borders. */
.tufco-map .territory .piece {
  transition: transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

.tufco-map .territory.is-active .piece {
  transition: transform 840ms cubic-bezier(0.34, 0.9, 0.4, 1);
  transform: scale(1.045);
}

.tufco-map .territory .fill {
  transition: fill 320ms ease;
}

/* The extruded side wall is flush under the shape at rest, so it must stay
     hidden until the territory actually rises off the map. It fades in quickly
     on the way up - the block should already look solid while it is still
     travelling - and lingers on the way down so it doesn't vanish mid-descent. */
.tufco-map .territory .wall {
  opacity: 0;
  pointer-events: none;
  transition: opacity 380ms ease;
}

.tufco-map .territory.is-active .wall {
  opacity: 1;
  transition: opacity 200ms ease-out;
}

.tufco-map .territory.is-active .fill {
  fill: #c0392b;
}

.tufco-map .territory.is-active .outline {
  stroke: #3d0a10;
}

.tufco-map #tufco-stage {
  position: relative;
  /* Fills whatever column it is dropped into rather than measuring against
 the viewport, so the map behaves inside a WordPress container. */
  width: 100%;
  /* Taps act immediately instead of waiting out the double-tap gesture, while
 vertical swipes still scroll the page - a map that swallowed scroll would
 trap anyone trying to get past it. */
  touch-action: manipulation;
}

.tufco-map #tufco-svg {
  display: block;
  width: 100%;
}

.tufco-map #tufco-card {
  position: absolute;
  /* Scales with the frame instead of staying 300px, so the card takes up the
 same share of a small container as it does of a large one. The percentage
 resolves against #stage, and the placement solver measures the rendered
 width, so both sides stay in agreement automatically. */
  width: clamp(180px, 24%, 300px);
  background: #111;
  border: 1px solid #2e2e2e;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px) scale(0.98);
  transition:
    opacity 220ms ease,
    transform 220ms ease,
    visibility 220ms;
  pointer-events: none;
  z-index: 5;
}

.tufco-map #tufco-card.is-shown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Invisible bridge spanning the gap between the territory and the card. Without
     it the pointer crosses bare map on its way over, which hands the hover to
     whichever territory sits underneath and swaps the card out. */
.tufco-map #tufco-card::before {
  content: "";
  position: absolute;
  top: -10px;
  bottom: -10px;
  width: 30px;
}

.tufco-map #tufco-card[data-side="right"]::before {
  left: -30px;
}
.tufco-map #tufco-card[data-side="left"]::before {
  right: -30px;
}

/* A card sitting north of its territory is reached from below, so its bridge
     runs the full width of the card and hangs down toward the state. */
.tufco-map #tufco-card[data-side="top"]::before {
  left: -10px;
  right: -10px;
  top: auto;
  bottom: -44px;
  width: auto;
  height: 44px;
}

/* Full width and auto height, so the card always fits its panel instead of
     overflowing into a scrollbar. */
.tufco-map #tufco-card-img {
  display: block;
  width: 100%;
  height: auto;
}

.tufco-map #tufco-card-img[src=""] {
  display: none;
}

.tufco-map #tufco-card-foot {
  padding: 11px 14px 13px;
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
}

.tufco-map #tufco-card-name {
  color: #f2f2f2;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.tufco-map #tufco-card-email {
  display: inline-block;
  margin-top: 3px;
  color: #ea2e27;
  font-size: 14px;
  text-decoration: none;
  word-break: break-all;
}

.tufco-map #tufco-card-email:hover {
  text-decoration: underline;
}
.tufco-map #tufco-card-email[href="#"] {
  display: none;
}

/* ---------------------------------------------------------------
     COMPACT MODE - phones and narrow columns.

     Below SIZE_COMPACT the floating card stops being possible: the card is a
     quarter of the frame at that width, so there is no spot left that does not
     cover the very states it names. The card is replaced by a panel under the
     map, in normal flow, always present so that tapping a state never shifts
     the page. Its height is reserved for the tallest layout it can hold.
     --------------------------------------------------------------- */
.tufco-map #tufco-panel {
  display: none;
  margin-top: 12px;
  padding: 14px 16px 16px;
  min-height: 124px;
  background: var(--tufco-panel);
  border: 1px solid var(--tufco-panel-line);
  border-radius: 10px;
}

.tufco-map #tufco-stage[data-size="compact"] #tufco-panel {
  display: block;
}

/* The card is hover furniture. On a phone there is no hover, and the panel
     has taken its job, so it is taken out of the layout entirely. */
.tufco-map #tufco-stage[data-size="compact"] #tufco-card {
  display: none;
}

/* The single rescue for states too small to tap reliably at phone width -
     a search box that filters as you type, so a reader who would rather look
     up their state by name than hunt a sliver of it on the map can just type
     it. Feeds the same activate()/showPanel path a tap does, so it stays in
     sync with the map no matter which was used last. */
.tufco-map #tufco-picker {
  display: none;
  margin-top: 10px;
}

.tufco-map #tufco-stage[data-size="compact"] #tufco-picker {
  display: block;
}

.tufco-map .tufco-picker-label {
  display: block;
  margin: 0 0 6px;
  color: #8b8b8b;
  font-size: 12px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.tufco-map .tufco-combobox {
  position: relative;
}

.tufco-map .tufco-picker-input {
  display: block;
  width: 100%;
  min-height: 44px;
  /* Right padding leaves room for the clear button, so long territory
 names never run under it. */
  padding: 0 44px 0 12px;
  background: #161616;
  border: 1px solid var(--tufco-panel-line);
  border-radius: 8px;
  color: #d7d7d7;
  font: inherit;
  /* iOS Safari zooms the whole page in on focus for any text input
 under 16px, which is what was happening here. 16px is the smallest
 size that stays under that threshold. */
  font-size: 16px;
  text-overflow: ellipsis;
}

.tufco-map .tufco-picker-input::placeholder {
  color: #8b8b8b;
}

.tufco-map .tufco-picker-clear {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: #8b8b8b;
  cursor: pointer;
}

.tufco-map .tufco-picker-clear:hover,
.tufco-map .tufco-picker-clear:focus-visible {
  color: #f2f2f2;
}

.tufco-map .tufco-picker-list {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  margin: 0;
  padding: 4px;
  max-height: 220px;
  overflow-y: auto;
  list-style: none;
  background: #161616;
  border: 1px solid var(--tufco-panel-line);
  border-radius: 8px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
}

.tufco-map .tufco-picker-option {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  border-radius: 6px;
  color: #d7d7d7;
  font-size: 16px;
  cursor: pointer;
}

.tufco-map .tufco-picker-option.is-active {
  background: var(--tufco-accent);
  color: #fff;
}

.tufco-map .tufco-panel-empty {
  margin: 0;
  padding: 18px 0;
  color: #8b8b8b;
  font-size: 15px;
  text-align: center;
}

.tufco-map .tufco-panel-name {
  color: var(--tufco-ink);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.tufco-map .tufco-panel-territory {
  margin-top: 3px;
  color: #9aa0a6;
  font-size: 13px;
  line-height: 1.35;
}

/* Contact lines are the reason someone opened the map, so they are real
     links with a finger-sized target rather than text that happens to be an
     address. 44px is the smallest target that can be hit reliably. */
.tufco-map .tufco-panel-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--tufco-accent);
  font-size: 15px;
  text-decoration: none;
  word-break: break-word;
}

.tufco-map .tufco-panel-link:hover {
  text-decoration: underline;
}

/* The scan is a picture of text: unreadable at phone width and the single
     biggest thing in the payload, so it stays behind a deliberate tap. */
.tufco-map .tufco-panel-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 2px;
  padding: 0;
  border: 0;
  background: none;
  color: #9aa0a6;
  font: inherit;
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
}

.tufco-map #tufco-panel-scan {
  display: none;
  width: 100%;
  height: auto;
  margin-top: 10px;
  border-radius: 6px;
}

.tufco-map #tufco-panel-scan.is-shown {
  display: block;
}

.tufco-map #tufco-error {
  margin: 0;
  padding: 28px 16px;
  color: #c9c9c9;
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
}

/* Paint trims for phones. The double drop-shadow over a territory built from
     thousands of county paths is the most expensive thing on the page, and at
     this size the second shadow is not visible anyway. County lines go too:
     below about 400px they are thinner than a pixel, so they stop reading as
     counties and start reading as noise over the state colours. */
.tufco-map #tufco-stage[data-size="compact"] .territory.is-active {
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45));
}

.tufco-map #tufco-stage[data-size="compact"] .county-line {
  display: none;
}

/* will-change keeps a layer alive for every territory and every piece of
     one, all the time - memory a phone feels, spent on shapes that are almost
     all sitting still. In compact only the raised territory holds a layer. */
.tufco-map #tufco-stage[data-size="compact"] .territory,
.tufco-map #tufco-stage[data-size="compact"] .territory .piece {
  will-change: auto;
}

.tufco-map #tufco-stage[data-size="compact"] .territory.is-active {
  will-change: transform, filter;
}

.tufco-map #tufco-stage[data-size="compact"] .territory.is-active .piece {
  will-change: transform;
}

.tufco-map .county-line,
.tufco-map .state-line,
.tufco-map .outline {
  fill: none;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}

/* County lines stay subtle and take their contrast from the fill they sit on.
     State borders and territory outlines share one dark weight so that every
     state border on the map reads identically, whether it falls inside a
     territory or between two of them. */
.tufco-map .county-line {
  stroke-width: 0.4;
  stroke-opacity: 0.85;
}

/* At rest each territory's county lines take their color from its own fill.
     Once raised every territory turns the same red, so the resting colors no
     longer apply - a few of them land at almost exactly the red's brightness
     and disappear. Raised territories all share one dark line instead. */
.tufco-map .territory .county-line {
  transition: stroke 320ms ease;
}

.tufco-map .territory.is-active .county-line {
  stroke: #7a1d14;
}

.tufco-map .state-line,
.tufco-map .outline {
  stroke: #2a2a2a;
  stroke-width: 0.95;
  stroke-linejoin: round;
  stroke-opacity: 0.9;
}